/* ============================================================================
   CRESC — CREATIVE STUDIO
   Stylesheet. Colours and fonts are at the very top — change them there.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. FONTS — self-hosted, so the site loads fast and works offline
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  ←←← EDIT COLOURS AND FONTS HERE
   ------------------------------------------------------------------------- */
:root {
  /* Colours */
  --black:  #0A0A0A;   /* near-black — hero, wall, why, footer */
  --ivory:  #F4F1EA;   /* warm ivory — what we do, statistics, light type */
  --grey:   #8A8781;   /* muted grey — secondary body text */
  --accent: #B4442A;   /* used sparingly — numbers, labels, form CTA */

  /* Derived hairlines — you rarely need to touch these */
  --rule-light: rgba(10, 10, 10, 0.16);      /* hairline on ivory */
  --rule-dark:  rgba(244, 241, 234, 0.18);   /* hairline on black */

  /* Typefaces — five roles, managed at /admin/fonts.php.
     The last three default to one of the first two, so the site looks exactly
     the same until a font is deliberately assigned to that role. */
  --display: "Instrument Serif", "Times New Roman", Times, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --micro:    var(--sans);      /* nav links, eyebrows, section labels, buttons */
  --numerals: var(--display);   /* the statistics band */
  --ui:       var(--display);   /* form fields */

  /* Layout */
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --header-h: 84px;
  --maxw: 1800px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --speed: 0.6s;
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `-webkit-touch-callout: none` is the rule that actually matters on a phone:
   it is what suppresses the iOS long-press sheet with "Save Image" in it. The
   JS guard in main.js covers right-click and drag; without this line the
   commonest route of all — a long press on an iPhone — stays wide open, and
   there is no JS event to intercept it with.

   To be clear about the ceiling: this hides the offered routes, it does not
   make the files unreachable. Screenshots and the direct image URL still work.
   See initImageGuard() in main.js. */
img {
  display: block; max-width: 100%; height: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
a   { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Visible, on-brand focus for keyboard users only */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

::selection { background: var(--accent); color: var(--ivory); }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 999;
  background: var(--ivory); color: var(--black);
  padding: 0.75rem 1.25rem;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------------------
   3. TYPE SCALE
   ------------------------------------------------------------------------- */
.u-display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
/* Multi-line headings: each line in content.js gets its own line on screen */
.u-display > span { display: block; }

/* Extreme scale contrast — the signature of the site */
.t-mega  { font-size: clamp(3.2rem, 13vw, 15rem); }
.t-xl    { font-size: clamp(2.6rem, 8.5vw, 8.5rem); }
.t-lg    { font-size: clamp(2.1rem, 5.5vw, 5rem); }
.t-md    { font-size: clamp(1.6rem, 3.2vw, 3rem); }

/* Wide-tracked uppercase microcopy */
.u-micro {
  font-family: var(--micro);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.u-micro--accent { color: var(--accent); }
.u-muted { color: var(--grey); }

.u-body {
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.65;
  color: var(--grey);
}

.u-serif-italic {
  font-family: var(--display);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* Section label pairing: (01) WHAT WE DO */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 1.6rem;
}
.section-label__num { color: var(--accent); }

/* Hairline rules */
.rule       { height: 1px; background: var(--rule-dark); border: 0; margin: 0; }
.on-ivory .rule { background: var(--rule-light); }

/* Section shells */
.section { padding: clamp(5rem, 11vw, 10rem) var(--gutter); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }

.on-ivory { background: var(--ivory); color: var(--black); }
.on-ivory .u-muted, .on-ivory .u-body { color: #6E6B65; }
.on-black { background: var(--black); color: var(--ivory); }

/* ---------------------------------------------------------------------------
   4. IMAGE SLOTS (placeholders until real images are dropped in)
   ------------------------------------------------------------------------- */
.slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--rule-dark);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(244,241,234,0.028) 0 1px,
      transparent 1px 9px
    );
  color: var(--grey);
}
.on-ivory .slot {
  border-color: var(--rule-light);
  background: repeating-linear-gradient(
    -45deg, rgba(10,10,10,0.035) 0 1px, transparent 1px 9px);
}
.slot__name { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.slot__note { font-size: 0.63rem; letter-spacing: 0.06em; max-width: 26ch; line-height: 1.5; }

/* Real images: shown in their own colours, exactly as supplied.
   The class is named for what it does — fill its slot — not for a treatment,
   so the name cannot go stale the way the old one did. */
.img-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

/* ---------------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: transparent;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.header--solid {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule-dark);
}
.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
}
.header__brand { display: flex; align-items: baseline; gap: 0.9rem; }

/* --- the studio wordmark, as supplied artwork ------------------------------
   Sized by HEIGHT, not width. The old wordmark was five capitals; the artwork
   is wider lowercase with an accent above the "e", so matching the old box
   width would shrink the letters until they read weakly. These heights make
   the letterforms the same optical size the capitals were — the mark simply
   occupies a little more width, which is inherent to the artwork.

   The image bottom edge sits on the type baseline, so `align-items: baseline`
   on .header__brand still lines the descriptor up correctly. */
.brandmark { display: block; width: auto; height: auto; }
.header__brand .brandmark,
.menu__top .brandmark { height: 1.37rem; }

.header__descriptor { color: var(--grey); }
.header__nav { display: flex; gap: 2.2rem; }
.header__nav a { position: relative; padding-bottom: 3px; }
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--speed) var(--ease);
}
.header__nav a:hover::after,
.header__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header__menu-btn {
  display: none;
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
}

/* Mobile full-screen menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 var(--gutter) clamp(2rem, 8vw, 4rem);
  transform: translateY(-100%);
  transition: transform 0.62s var(--ease);
  visibility: hidden;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu__top {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
}
.menu__nav { display: flex; flex-direction: column; gap: 0.4rem; padding: 2rem 0; }
.menu__nav a {
  font-family: var(--display);
  font-size: clamp(2.4rem, 12vw, 4.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.menu__foot { display: flex; flex-direction: column; gap: 1.1rem; }
.menu__socials { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.menu__close { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; }

/* ---------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* FIX 1: headline always clears the fixed header with breathing room */
  padding: calc(var(--header-h) + clamp(3rem, 9vh, 7rem)) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* No treatment: the ::after gradient below is what protects the headline,
   so the photograph itself keeps its own colour and brightness. */
.hero__media .img-cover { filter: none; }
/* Hero placeholder label sits quietly bottom-right, clear of the headline */
.hero__media .slot {
  border: 0; min-height: 100%;
  align-items: flex-end; justify-content: flex-end;
  text-align: right; gap: 0.35rem;
  padding: 0 var(--gutter) clamp(6rem, 14vh, 10rem);
  opacity: 0.45;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.72) 0%,
    rgba(10,10,10,0.42) 38%,
    rgba(10,10,10,0.88) 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   HERO — ARTWORK MODE
   The supplied lockup already contains the headline, so the hero shows it
   in full colour with no treatment, and the HTML headline steps aside.
   ------------------------------------------------------------------------- */
.hero--artwork { background: #000; }
.hero--artwork .hero__media picture { display: block; position: absolute; inset: 0; }
.hero--artwork .hero__art {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: none;                       /* full colour — the accent must survive */
}
/* Only the faintest lift at the very bottom so the supporting line stays readable */
.hero--artwork .hero__media::after {
  background: linear-gradient(180deg, transparent 0%, transparent 68%, rgba(0,0,0,0.55) 100%);
}
.hero--artwork .hero__inner { justify-content: flex-end; }

/* Visually hidden, still read by search engines and screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(1.8rem, 4vh, 3rem);
}
.hero__headline { display: block; }
.hero__headline span {
  display: block;
  overflow: hidden;
}
.hero__headline span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 1.15s var(--ease);
}
.hero.is-in .hero__headline span > i { transform: translateY(0); }
.hero__headline span:nth-child(2) > i { transition-delay: 0.09s; }
.hero__headline span:nth-child(3) > i { transition-delay: 0.18s; }

.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.6rem;
}
.hero__supporting { max-width: 46ch; color: var(--ivory); opacity: 0.86; }
.hero__cue { display: flex; align-items: center; gap: 0.7rem; }
.hero__cue-line {
  display: block; width: 46px; height: 1px; background: var(--grey);
  position: relative; overflow: hidden;
}
.hero__cue-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------------------
   7. WHAT WE DO
   ------------------------------------------------------------------------- */
.wwd__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.wwd__left { position: sticky; top: calc(var(--header-h) + 3rem); }
.wwd__heading { margin-bottom: 1.8rem; }
.wwd__supporting { max-width: 40ch; }

.wwd__list { border-top: 1px solid var(--rule-light); }
.wwd__row {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--rule-light);
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 2vw, 1.8rem);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  cursor: default;
}
.wwd__row-top { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.6rem); }
.wwd__row-num { color: var(--accent); flex: none; transition: color var(--speed) var(--ease); }
.wwd__row-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.wwd__row-desc {
  max-width: 52ch;
  margin-top: 0.9rem;
  margin-left: clamp(0px, 3vw, 4.4rem);
  transition: color var(--speed) var(--ease);
}

/* Hover inversion — ivory row becomes near-black */
@media (hover: hover) and (min-width: 1025px) {
  .wwd__row { cursor: none; }
  .wwd__row-desc {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height 0.7s var(--ease), opacity 0.45s var(--ease), margin-top 0.7s var(--ease), color var(--speed) var(--ease);
  }
  .wwd__row:hover { background: var(--black); color: var(--ivory); }
  .wwd__row:hover .wwd__row-desc {
    max-height: 12rem; opacity: 1; margin-top: 0.9rem; color: var(--grey);
  }
  .wwd__row:focus-within { background: var(--black); color: var(--ivory); }
  .wwd__row:focus-within .wwd__row-desc { max-height: 12rem; opacity: 1; margin-top: 0.9rem; color: var(--grey); }
}

/* Cursor-following thumbnail (desktop pointer only) */
.wwd__thumb {
  position: fixed; top: 0; left: 0;
  width: 220px; height: 280px;
  pointer-events: none; z-index: 90;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
  display: none;
}
.wwd__thumb.is-visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.wwd__thumb .slot { min-height: 280px; background-color: var(--black); }
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .wwd__thumb { display: block; }
}

/* ---------------------------------------------------------------------------
   8. CREATIVE WALL
   ------------------------------------------------------------------------- */
/* The bottom pad is deliberately HALF the top one. The wall and WHY CRESC are
   adjacent and both sit on black, so at the join their two full section pads
   stacked into one 317px band of nothing on a 1440 desktop — a third of the
   viewport with no colour change to justify it. Siddhant asked for it tightened
   on 26 Aug and chose halving. Taken off BOTH sides evenly (see the rule below)
   rather than all off one, so the wall still reads as having ended and WHY
   CRESC still reads as beginning.

   Only this one join moves: `.section` is untouched, and so is the wall's own
   top pad, so every other boundary on the site keeps its spacing. */
.wall { padding: clamp(5rem, 11vw, 10rem) 0 clamp(2.5rem, 5.5vw, 5rem); overflow: hidden; }
/* Whatever follows the wall — today WHY CRESC — gives up the matching half. */
.wall + .section { padding-top: clamp(2.5rem, 5.5vw, 5rem); }
.wall__head { padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4.5rem); max-width: var(--maxw); margin: 0 auto; }
.wall__subline { max-width: 44ch; margin-top: 1.2rem; }

/* The wall is a single continuous surface — no gap between the creatives and
   none between the bands (Siddhant, 19 Aug). It read as a grid of separate
   pictures with the old hairline spacing; edge to edge it reads as one moving
   installation, which is what the section is for.

   Both zeros are load-bearing and must stay together: gapping one axis but not
   the other looks like a mistake rather than a choice. If the creatives ever
   need separating again, a 1px hairline is the smallest thing that reads as
   deliberate — do not go back to a rem-scale gap. */
.wall__rows { display: flex; flex-direction: column; gap: 0; }
/* The row is wider than the screen and moves as one piece. It must NOT be a
   scroll container — clipping it would blank out the edge of the band. */
.wall__row {
  display: flex; align-items: stretch; gap: 0;
  width: max-content;
  will-change: transform;
  padding: 0 var(--gutter);
  touch-action: pan-y;
  cursor: grab;
}
.wall__row.is-dragging { cursor: grabbing; }

/* Uniform tile height, width follows the aspect ratio — a clean band */
.wall__tile {
  position: relative;
  flex: none;
  overflow: hidden;
  background: #111;
  height: clamp(200px, 24vw, 360px);
}
.wall__tile--portrait  { aspect-ratio: 3 / 4; }
.wall__tile--landscape { aspect-ratio: 4 / 3; }
.wall__tile--square    { aspect-ratio: 1 / 1; }
.wall__tile .slot { min-height: 100%; }

/* Images are already in colour, so hover is a quiet lift only */
@media (hover: hover) {
  .wall__tile:hover .img-cover { transform: scale(1.035); }
}

/* ---------------------------------------------------------------------------
   9. WHY CRESC
   ------------------------------------------------------------------------- */
.why__head { max-width: var(--maxw); margin: 0 auto; }
.why__statement {
  font-size: clamp(1.3rem, 2.5vw, 2.3rem);
  line-height: 1.28;
  color: var(--ivory);
  max-width: 30ch;
  margin-top: 2rem;
}
.why__list { margin-top: clamp(4rem, 9vw, 8rem); }
.why__item {
  border-top: 1px solid var(--rule-dark);
  padding: clamp(2rem, 3.6vw, 3.4rem) 0;
  display: grid;
  grid-template-columns: 5.5rem 3.5rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
/* Asymmetric stagger — each reason steps further right */
.why__item:nth-child(1) { margin-left: 0; }
.why__item:nth-child(2) { margin-left: 5%;  }
.why__item:nth-child(3) { margin-left: 10%; }
.why__item:nth-child(4) { margin-left: 6%;  }
.why__item:nth-child(5) { margin-left: 12%; }
.why__item:last-child   { border-bottom: 1px solid var(--rule-dark); }

.why__meta { display: contents; }
.why__numeral { color: var(--accent); padding-top: 0.5rem; }
.why__mark { width: 34px; height: 34px; color: var(--ivory); opacity: 0.9; }
.why__mark svg { width: 100%; height: 100%; display: block; }
.why__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 22ch;
}
.why__body { margin-top: 0.9rem; max-width: 56ch; }

/* ---------------------------------------------------------------------------
   10. STATISTICS
   ------------------------------------------------------------------------- */
.stats__list { margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rule-light); }
.stats__item {
  border-bottom: 1px solid var(--rule-light);
  padding: clamp(1.6rem, 3.4vw, 3rem) 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem;
}
.stats__value {
  font-family: var(--numerals);
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.stats__value--text { font-size: clamp(2rem, 6.5vw, 6.5rem); }
.stats__label { text-align: right; flex: none; }

/* ---------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.footer { background: var(--black); padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-dark);
}
.footer__col {
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1rem, 2vw, 2rem) clamp(2.4rem, 4vw, 3.4rem) 0;
  border-right: 1px solid var(--rule-dark);
}
.footer__col:last-child { border-right: 0; }
.footer__col-title { padding-bottom: 1.4rem; }
.footer__col li + li { margin-top: 0.65rem; }
.footer__col a {
  color: var(--grey);
  font-size: 0.92rem;
  transition: color 0.35s var(--ease);
}
.footer__col a:hover { color: var(--ivory); }

/* Any footer entry may carry a hairline mark: the social platforms, the phone,
   the address. inline-flex with a baseline-ish alignment keeps the glyph
   optically centred against the lowercase x-height instead of floating above
   it. The mark inherits the link's colour and its hover transition, so the pair
   moves as one thing.

   This class was called `footer__social` until the phone and the address grew
   marks too, at which point the name described one caller out of three and
   invited a rule meant for the social links to land on the address. */
.footer__col a.footer__marked,
.footer__static.footer__marked {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
/* A footer entry that is information rather than a destination — the studio
   address. Same type as the links so the column reads evenly, but no hover
   and no pointer, because there is nothing to click. */
.footer__static {
  display: block;
  color: var(--grey);
  font-size: 0.92rem;
  max-width: 24ch;
}

.footer__mark {
  display: block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  /* Optical nudge: the glyphs read a hair high next to this type size. */
  transform: translateY(0.5px);
}
/* A wrapping entry must keep its mark on the FIRST line, not vertically
   centred against three lines of address. */
.footer__static.footer__marked { align-items: flex-start; }
.footer__static .footer__mark { transform: translateY(0.18em); }
.footer__mark svg { width: 100%; height: 100%; display: block; }

.footer__wordmark {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.2rem, 2vw, 2rem);
  border-top: 1px solid var(--rule-dark);
}
/* Tracks the type it replaced. The old wordmark was clamp(4rem, 21vw, 20rem)
   and "CRESC" set about 3.18× its font size wide, so these widths put the
   artwork at the same scale the capitals were at every breakpoint — measured,
   not guessed: 965px against 960px at 1440, 515 against 513 at 768, 261
   against 260 at 390. */
.footer__wordmark .brandmark { width: clamp(12.5rem, 67vw, 63rem); }
.footer__base {
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   12. PAGE HEADERS (About / Connect)
   ------------------------------------------------------------------------- */
.pagehead {
  padding: calc(var(--header-h) + clamp(5rem, 14vh, 11rem)) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.pagehead__inner { max-width: var(--maxw); margin: 0 auto; }
.pagehead__intro { max-width: 52ch; margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* About */
.about__media { padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem); }
.about__media-inner { max-width: var(--maxw); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; }
.about__body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--maxw); margin: 0 auto;
}
.about__body p + p { margin-top: 1.5rem; }
.about__body p { font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.7; color: var(--grey); }

.approach__list { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-light); }
.approach__item {
  border-bottom: 1px solid var(--rule-light);
  padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  display: grid; grid-template-columns: 5rem 1fr 1.1fr; gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
}
.approach__num { color: var(--accent); }
.approach__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em;
}
.closing {
  padding: clamp(5rem, 12vw, 11rem) var(--gutter);
  text-align: left;
}
.closing__inner { max-width: var(--maxw); margin: 0 auto; }
.closing p {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5.2vw, 5rem);
  line-height: 1.02; text-transform: uppercase; letter-spacing: -0.025em;
  max-width: 18ch;
}

/* ---------------------------------------------------------------------------
   13. FORM — underline rules only. No boxes, no rounding, no SaaS.
   ------------------------------------------------------------------------- */
.form { max-width: 900px; }
.form__row { position: relative; padding: clamp(1.6rem, 2.6vw, 2.2rem) 0 0.7rem; border-bottom: 1px solid var(--rule-light); }
.on-black .form__row { border-bottom-color: var(--rule-dark); }
.form__label { display: block; margin-bottom: 0.7rem; color: var(--grey); }
.form__label .req { color: var(--accent); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.15rem 0 0.5rem;
  font-family: var(--ui);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--black);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { resize: vertical; min-height: 5.5rem; }
.form ::placeholder { color: rgba(10,10,10,0.28); }

/* Selectable text options instead of a dropdown */
.form__options { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; padding: 0.4rem 0 0.6rem; }
.form__option { position: relative; }
.form__option input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.form__option label {
  display: inline-block;
  cursor: pointer;
  font-size: 0.95rem;
  padding-bottom: 3px;
  color: #6E6B65;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.form__option label:hover { color: var(--black); border-bottom-color: var(--rule-light); }
.form__option input:checked + label { color: var(--accent); border-bottom-color: var(--accent); }
.form__option input:focus-visible + label { outline: 1px solid var(--accent); outline-offset: 4px; }

.form__submit {
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  display: inline-flex; align-items: center; gap: 0.9rem;
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  transition: gap 0.4s var(--ease);
}
.form__submit:hover { gap: 1.6rem; }
.form__submit svg { width: 26px; height: 10px; }
.form__status { margin-top: 1.6rem; min-height: 1.2rem; }
.form__status--ok  { color: var(--accent); }
.form__status--err { color: var(--accent); }

/* Direct contact list */
.direct__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-dark); }
.direct__item {
  border-bottom: 1px solid var(--rule-dark);
  padding: clamp(1.2rem, 2.4vw, 2rem) 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
}
.direct__value {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.8vw, 2.4rem);
  line-height: 1.05; letter-spacing: -0.02em;
  transition: color 0.35s var(--ease);
}
a.direct__value:hover { color: var(--accent); }

/* Careers */
.careers__body { max-width: 52ch; margin-top: 1.8rem; }
.careers__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-dark); }
.careers__item {
  border-bottom: 1px solid var(--rule-dark);
  padding: clamp(1.2rem, 2.4vw, 1.9rem) 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
}
.careers__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em;
}
.careers__cta {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.5rem;
  transition: gap 0.4s var(--ease);
}
.careers__cta:hover { gap: 1.6rem; }
.careers__cta svg { width: 26px; height: 10px; }

/* ---------------------------------------------------------------------------
   14. REVEAL ON SCROLL
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.95s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   15. CUSTOM CURSOR (desktop pointer only)
   ------------------------------------------------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--ivory);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s;
  mix-blend-mode: difference;
  display: none;
  opacity: 0;
}
.cursor.is-active { width: 76px; height: 76px; background: rgba(244,241,234,0.1); }
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .cursor { display: block; }
}

/* ---------------------------------------------------------------------------
   16. PAGE TRANSITION WIPE
   ------------------------------------------------------------------------- */
.wipe {
  position: fixed; inset: 0; z-index: 400;
  background: var(--ivory);
  transform: translateY(100%);
  pointer-events: none;
}
.wipe.is-in  { animation: wipeIn 0.5s var(--ease) forwards; }
.wipe.is-out { animation: wipeOut 0.55s var(--ease) forwards; }
@keyframes wipeIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes wipeOut { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

/* ===========================================================================
   17. RESPONSIVE — recomposed, not shrunk
   Tested at 375 / 414 / 768 / 1024
   ========================================================================= */

/* ---- Tablet and below (≤1024) ---- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .header__nav { display: none; }
  .header__menu-btn { display: block; }
  .header__descriptor { display: none; }

  /* WHAT WE DO — stack, no sticky, descriptions always visible */
  .wwd__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .wwd__left { position: static; }
  .wwd__row-desc { margin-left: 0; }
  .wwd__thumb { display: none !important; }

  /* WHY CRESC — reduce the stagger so nothing runs off screen */
  .why__item { grid-template-columns: 4rem 2.4rem 1fr; gap: 1rem; }
  .why__item:nth-child(1) { margin-left: 0; }
  .why__item:nth-child(2) { margin-left: 2%; }
  .why__item:nth-child(3) { margin-left: 4%; }
  .why__item:nth-child(4) { margin-left: 3%; }
  .why__item:nth-child(5) { margin-left: 5%; }
  .why__mark { width: 26px; height: 26px; }

  /* ABOUT — single column body */
  .about__body { grid-template-columns: 1fr; }
  .approach__item { grid-template-columns: 3.5rem 1fr; }
  .approach__body { grid-column: 2; }

  /* FOOTER — four columns collapse to two */
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col:nth-child(2n) { border-right: 0; }
  .footer__col:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }

  /* The third band is dropped below this width — but the images that lived in
     it are NOT. main.js rebuilds the wall with two bands and spreads all of
     them across it, so a phone shows every creative a laptop does. Do not
     reintroduce a display:none here; that is exactly what lost five images. */
}

/* ---- Mobile (≤767) ---- */
@media (max-width: 767px) {
  body { font-size: 15px; }

  .hero {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(2rem, 7vh, 4rem));
  }
  /* Headline sized so all three lines + supporting + cue fit above the fold */
  .hero .t-mega { font-size: clamp(2.6rem, 15vw, 4.6rem); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .hero__supporting { font-size: 0.95rem; }
  /* Keep the hero placeholder label clear of the headline and the supporting line */
  .hero__media .slot {
    align-items: flex-end; justify-content: flex-start;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 0;
  }

  .t-xl { font-size: clamp(2.2rem, 11.5vw, 3.6rem); }
  .t-lg { font-size: clamp(1.9rem, 9vw, 3rem); }

  /* WALL — on a phone the bands were reading as a thin strip in the middle of
     the screen: two 179px bands inside a section that spent 160px on its own
     top and bottom padding, inset a further 24px from each edge. The installation
     is meant to feel like a surface you are moving through, so on phones it
     takes back that space — the section's own padding, the gutter inset and the
     tile height. Nothing here touches the heading, the subline or any other
     section, and desktop and tablet keep their own generous padding.

     The gaps are NOT set here: they are zero for every screen, once, at the
     `.wall__rows` / `.wall__row` rules above. Re-declaring them at this
     breakpoint would give the wall two places to disagree about its spacing. */
  /* Phones need their own figure, not the desktop one scaled: the wall's bottom
     pad was ALREADY reduced here while WHY CRESC kept a full one, so the join
     was an uneven 48 + 80. Halving each side independently would have landed at
     48 total, well past half. This lands 32 + 32 = 64, a true halving, and the
     max is tuned so 767px (42.2 + 42.2) meets 768px (42.2 + 42.2) with no jump
     at the breakpoint. */
  .wall { padding: clamp(3rem, 9vw, 5rem) 0 clamp(2rem, 5.5vw, 2.7rem); }
  .wall + .section { padding-top: clamp(2rem, 5.5vw, 2.7rem); }
  .wall__head { padding-bottom: clamp(1.6rem, 4.5vw, 2.4rem); }
  .wall__row { padding: 0; }
  .wall__tile { height: clamp(210px, 56vw, 290px); }

  /* WHY — drop the stagger entirely, numeral and mark on one line */
  .why__item { grid-template-columns: 1fr; gap: 0.9rem; margin-left: 0 !important; }
  .why__meta { display: flex; align-items: center; gap: 1rem; }
  .why__numeral { padding-top: 0; }

  /* STATS — number stacked above its label, still genuinely large */
  .stats__item { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .stats__label { text-align: left; }
  .stats__value { font-size: clamp(3.4rem, 20vw, 6rem); }
  .stats__value--text { font-size: clamp(2rem, 12vw, 3.4rem); }

  /* FOOTER — single column */
  .footer__cols { grid-template-columns: 1fr; }
  .footer__col { border-right: 0; border-bottom: 1px solid var(--rule-dark); padding-right: 0; }
  .footer__col:last-child { border-bottom: 0; }
  .footer__base { flex-direction: column; gap: 0.7rem; }

  /* FORM — full width, comfortable tap targets */
  .form input, .form textarea { font-size: 1.25rem; padding-bottom: 0.7rem; }
  .form__row { padding-top: 1.5rem; }
  .form__options { gap: 0.9rem 1.4rem; }
  .form__option label { padding: 0.35rem 0; font-size: 1rem; }
  .form__submit { padding: 0.85rem 0; }

  .direct__item, .careers__item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .approach__item { grid-template-columns: 3rem 1fr; }
}

/* ---- Very small (≤375) ---- */
@media (max-width: 375px) {
  :root { --gutter: 1.25rem; }
  .hero .t-mega { font-size: 2.5rem; }
  .t-xl { font-size: 2.1rem; }
  .t-lg { font-size: 1.85rem; }
  /* same 1.3/1.5 reduction the type took at this width */
  .header__brand .brandmark,
  .menu__top .brandmark { height: 1.19rem; }
}

/* ---------------------------------------------------------------------------
   18. REDUCED MOTION — everything still readable, nothing moves
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__headline span > i { transform: none !important; }
  .wall__row { transform: none !important; }
  .cursor, .wwd__thumb { display: none !important; }
  .hero__cue-line::after { display: none; }
  .wipe { display: none; }
}

/* Class-level fallback used by the JS when reduced motion is on */
.reduced-motion .wall__row { transform: none !important; }