/* =========================================================================
   We Engage Agency — design system
   Deep blue-black ground, brass primary accent, steel-blue secondary.
   Cormorant Garamond display against Outfit body.
   Every colour is a token on :root — retheme there, not in the rules.
   ========================================================================= */

:root {
  /* Ground — deep blue-black. Cooler and a shade deeper than the slate it
     replaces, so the brass accent has room to feel warm against it. */
  --ink:            #F7F3EA;   /* primary background — warm paper */
  --ink-raised:     #FFFDF8;   /* cards, raised panels */
  --ink-deep:       #EFE8DA;   /* wells */
  --hairline:       rgba(28, 22, 14, 0.15);

  /* Type */
  --bone:           #16130E;
  --bone-soft:      rgba(22, 19, 14, 0.74);
  --bone-faint:     rgba(22, 19, 14, 0.52);

  /* The dark register, kept as tokens so any zone can borrow it. Film needs
     a dark surround, and the site still opens and closes on it. */
  --night:          #0E1216;
  --night-raised:   #151B21;
  --night-deep:     #080B0E;
  --night-hairline: rgba(226, 232, 240, 0.13);
  --night-bone:     #F0F3F6;
  --night-soft:     rgba(240, 243, 246, 0.70);
  --night-faint:    rgba(240, 243, 246, 0.44);

  /* Accents — brass and steel blue. Brass carries the warmth without the
     brightness of coral: it is the register of film awards and institutional
     prestige rather than consumer energy, which is the room this site is
     selling into. Steel blue is a quieter partner than teal. */
  --accent:         #C98A2E;   /* primary accent / CTA — brass, fill weight */
  --accent-lit:     #7A4E10;   /* brass at text weight, contrast-safe on paper */
  --accent-night:   #E0A85C;   /* the fill brass used inside dark zones */
  --accent-night-lit:#F0C081;
  --accent2:        #3F6B85;   /* secondary accent */
  --accent2-lit:    #31576D;

  /* Light surfaces (trust band, light sections) */
  --paper:          #F4F5F7;
  --paper-ink:      #12161A;
  --paper-soft:     rgba(18, 22, 26, 0.66);

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --shell: 1240px;

  --step--1: clamp(0.86rem, 0.82rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.25vw, 1.14rem);
  --step-1:  clamp(1.24rem, 1.14rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.1rem, 2rem + 5.2vw, 6.2rem);

  /* Radius and depth. The site read as a stack of hard rectangles; these
     give it edges that turn and surfaces that sit above the ground rather
     than being cut out of it. One scale, used everywhere, or rounding
     becomes noise. */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   clamp(20px, 3vw, 40px);
  --r-pill: 999px;

  --lift:      0 18px 40px rgba(0, 0, 0, 0.34);
  --lift-high: 0 30px 70px rgba(0, 0, 0, 0.46);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain — a single repeating SVG, fixed, never intercepts pointer events. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
  font-family: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
a { color: inherit; }
img, video { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ink);
  padding: 0.75rem 1.25rem; z-index: 10000; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Layout ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.4rem;
}
.eyebrow--accent2 { color: var(--accent2-lit); }

.lede { font-size: var(--step-1); color: var(--bone-soft); line-height: 1.55; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: inherit; font-size: var(--step-0); font-weight: 600;
  padding: 0.95rem 1.9rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--primary { background: var(--accent); color: #14100A; }
.btn--primary:hover { background: var(--accent-lit); transform: translateY(-2px); }
.btn--ghost { border-color: var(--hairline); color: var(--bone); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-lit); transform: translateY(-2px); }
.btn .arr { transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
  background: rgba(8, 11, 14, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.masthead__mark img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  text-decoration: none; font-size: var(--step--1);
  letter-spacing: 0.06em; color: var(--bone-soft);
  transition: color 0.2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav .btn { padding: 0.65rem 1.3rem; font-size: var(--step--1); }

/* =========================================================================
   Menu control
   The toggle used to be a bare glyph tinted with --bone, which meant its
   colour followed the page theme while the masthead floats over whatever is
   underneath it. On paper that put near-black ink on the dark hero video:
   measured at 1.02:1, effectively invisible, against the 3:1 that WCAG 1.4.11
   asks of a control.

   Recolouring per zone would break again the next time a section changes, so
   the control carries its own surface instead — a blurred chip with its own
   border. It only has to know whether the masthead is floating over a dark
   zone or stuck to paper, which is the one distinction this design already
   makes everywhere else.

   Sized 46px: above the 44px in Apple's HIG and WCAG 2.5.5, and comfortably
   past the 24px floor in WCAG 2.5.8.
   ========================================================================= */
.nav__toggle {
  display: none;
  /* The drawer is a sibling inside the masthead, so a z-index on the drawer
     alone cannot lift the toggle above it — they share a stacking context.
     The toggle has to be positioned and raised itself, or the panel covers
     the very control that closes it. */
  position: relative; z-index: 960;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: var(--r-pill);
  border: 1px solid rgba(240, 243, 246, 0.28);
  background: rgba(8, 11, 14, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--night-bone);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.masthead.is-stuck .nav__toggle {
  background: rgba(22, 19, 14, 0.06);
  border-color: rgba(22, 19, 14, 0.22);
  color: var(--bone);
}
.nav__toggle:hover { border-color: var(--accent); }
/* Open, the toggle sits over the paper drawer rather than the hero, so it
   takes the light-ground treatment whether or not the masthead is stuck. */
.nav__toggle[aria-expanded="true"] {
  background: rgba(22, 19, 14, 0.06);
  border-color: rgba(22, 19, 14, 0.22);
  color: var(--bone);
}

/* Three bars that fold into a cross. A glyph could not animate and sat on
   the font's own baseline, which is why it never centred properly. */
.nav__bars { position: relative; display: block; width: 18px; height: 12px; }
.nav__bars i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__bars i:nth-child(1) { top: 0; }
.nav__bars i:nth-child(2) { top: 5.25px; }
.nav__bars i:nth-child(3) { top: 10.5px; }
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Scrim. Dims the page behind an open menu so the panel is unambiguously
   the thing in focus, and gives the tap-anywhere-to-close that people now
   expect from a drawer. */
.navscrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(8, 11, 14, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.navscrim[data-open="true"] { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    /* Under the masthead, not over it. The toggle has already become a
       cross by this point, and it is the close affordance people reach for
       first — burying it under the drawer would leave the panel with no
       visible way out. */
    z-index: 950;
    background: var(--ink-raised);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.6rem; padding: 2rem var(--gutter);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    border-left: 1px solid var(--hairline);
    box-shadow: -24px 0 60px rgba(28, 22, 14, 0.28);
    /* The drawer is its own surface, not part of whatever zone the masthead
       happens to be floating over, so it declares its own text colours. */
    color: var(--bone);
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a { font-size: var(--step-1); color: var(--bone-soft); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
  .nav .btn--primary { color: #14100A; margin-top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .navscrim, .nav__bars i { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: -12% 0 0 0;
  z-index: -2;
  will-change: transform;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,18,22,0.70) 0%, rgba(14,18,22,0.26) 38%, rgba(14,18,22,0.88) 82%, var(--ink) 100%),
    radial-gradient(120% 80% at 12% 88%, rgba(14,18,22,0.78), transparent 62%);
}
.hero__inner { padding-block: clamp(5rem, 14vh, 9rem); }
.hero h1 {
  font-size: var(--step-5);
  max-width: 16ch;
  margin-bottom: 0.35em;
}
.hero h1 em { font-style: italic; color: var(--accent-lit); }
.hero__sub { font-size: var(--step-1); color: var(--bone-soft); max-width: 46ch; margin-bottom: 2.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.scrollhint {
  position: absolute; bottom: 1.6rem; right: var(--gutter);
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone-faint); display: flex; align-items: center; gap: 0.6rem;
}
.scrollhint::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(var(--bone-faint), transparent);
}
@media (max-width: 860px) { .scrollhint { display: none; } }

/* ---------- Trust band (light, so client marks read cleanly) ---------- */
.trustband { background: var(--paper); color: var(--paper-ink); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.trustband__label {
  text-align: center; font-size: var(--step--1); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--paper-soft); margin: 0 0 2rem;
  max-width: none;   /* else the global p measure caps it and "centred" sits left */
}
.trustband__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 4.5vw, 4rem);
}
/* Capped on BOTH axes. These marks range from 2.6:1 to 7.4:1, so sizing by
   height alone lets the widest one render three times the mass of the
   narrowest and the row stops reading as a set. */
.trustband__row img {
  height: auto; width: auto;
  max-height: clamp(26px, 3.2vw, 40px);
  max-width: clamp(104px, 12.5vw, 168px);
  object-fit: contain;
  opacity: 0.78;
  transition: opacity 0.3s var(--ease);
}
.trustband__row img:hover { opacity: 1; }

/* Dark variant uses the white knockout marks. */
.trustband--dark { background: var(--ink-deep); color: var(--bone); }
.trustband--dark .trustband__label { color: var(--bone-faint); }
.trustband--dark .trustband__row img { opacity: 0.72; }

/* ---------- Editorial split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.split__text { grid-column: 1 / span 6; }
.split__media { grid-column: 8 / span 5; }
.split--flip .split__text { grid-column: 7 / span 6; }
.split--flip .split__media { grid-column: 1 / span 5; }
@media (max-width: 900px) {
  .split__text, .split__media,
  .split--flip .split__text, .split--flip .split__media { grid-column: 1 / -1; }
}

.frame { position: relative; border-radius: var(--r-md); overflow: hidden; }
.frame img { width: 100%; }
.frame--offset::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--hairline);
  transform: translate(14px, 14px);
  pointer-events: none;
}

/* ---------- Stat line ---------- */
/* Three-up and staying three-up: inside a half-width editorial column a
   flex-wrap row breaks to two lines and the stat line stops scanning. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  margin: 2.2rem 0 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hairline);
}
.stat__num {
  font-family: "Cormorant Garamond", serif;
  font-size: var(--step-2); line-height: 1; color: var(--accent);
  display: block; margin-bottom: 0.25rem;
}
.stat__label { display: block; max-width: 11ch; }
.stat__label {
  font-size: var(--step--1); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--bone-faint);
}

/* ---------- Video embeds ---------- */
.player {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--ink-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--lift);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.player:hover { transform: translateY(-3px); box-shadow: var(--lift-high); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; cursor: pointer;
}
.player__play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid rgba(244,237,230,0.5);
  background: rgba(8,11,14,0.55);
  backdrop-filter: blur(4px);
  color: var(--bone); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.player__play:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: scale(1.06); }
.player__pending {
  position: absolute; inset: auto 0 0 0;
  padding: 0.7rem 1rem; font-size: var(--step--1);
  background: rgba(8,11,14,0.85); color: var(--bone-faint);
  border-top: 1px solid var(--hairline);
}

.caption {
  font-size: var(--step--1); color: var(--bone-faint);
  margin-top: 0.85rem; letter-spacing: 0.02em;
}

/* ---------- Offer cards ---------- */
/* Explicit three-up. auto-fit/minmax would open a fourth track at
   desktop widths and leave a visible empty slot beside the cards. */
.offers {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 720px)  { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .offers { grid-template-columns: repeat(3, 1fr); } }
.offer {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.offer:hover { border-color: rgba(224,168,92,0.5); transform: translateY(-4px); }
.offer h3 { font-size: var(--step-2); margin-bottom: 0.1em; }
.offer__price {
  font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.offer p { color: var(--bone-soft); font-size: var(--step-0); margin: 0; }
.offer--wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 2rem;
  align-items: baseline;
  background: transparent;
  border-style: dashed;
}
@media (max-width: 700px) { .offer--wide { grid-template-columns: 1fr; } }

/* ---------- Pull quotes ---------- */
.quotes { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3.5rem; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote blockquote {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.34;
  color: var(--bone);
}
.quote blockquote::before { content: "\201C"; color: var(--accent); }
.quote blockquote::after  { content: "\201D"; color: var(--accent); }
.quote cite {
  font-style: normal; font-size: var(--step--1);
  letter-spacing: 0.08em; color: var(--bone-faint); line-height: 1.5;
  display: block;
}
.quote cite b { display: block; color: var(--bone-soft); font-weight: 600; letter-spacing: 0.04em; }

/* =========================================================================
   Standalone testimonial
   The earlier arrangement said the client's name three times — a serif
   headline, the logo, and the citation — and put two display-serif elements
   in the same eyeline competing for the read. Here the mark is the only
   identifier and the quote is the only serif voice, so there is one thing
   to look at at a time and the logo is large enough to carry the section.
   ========================================================================= */
.testimonial { text-align: center; }
.testimonial__mark {
  display: block;
  height: clamp(64px, 8vw, 98px);
  width: auto;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  object-fit: contain;
  opacity: 0.85;
}
/* A ch measure here would resolve against the figure's body-size font, not
   the display serif inside it, and collapse the quote into a ribbon. */
.quote--lead { max-width: 46rem; margin-inline: auto; }
.quote--lead blockquote { font-size: var(--step-3); line-height: 1.26; margin-bottom: 1.5rem; }
.testimonial__note {
  max-width: 54ch;
  margin: clamp(2.75rem, 5vw, 3.75rem) auto 0;
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  color: var(--bone-faint);
  font-size: var(--step--1);
}

/* ---------- Flagship teaser ---------- */
.flagship { position: relative; overflow: hidden; background: var(--ink-deep); }
.flagship__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.28;
  background-size: cover; background-position: center;
}
.flagship::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--ink-deep) 8%, rgba(8,11,14,0.55) 55%, rgba(8,11,14,0.8));
}
.flagship .shell { position: relative; z-index: 2; }
.laurels {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 2.2rem 0 2.4rem;
}
.laurels img {
  height: clamp(84px, 11vw, 132px);
  width: auto; opacity: 0.92;
}

/* ---------- Final CTA ---------- */
.endcta { background: var(--ink-deep); border-top: 1px solid var(--hairline); text-align: center; }
.endcta h2 { font-size: var(--step-4); max-width: 20ch; margin-inline: auto; }
.endcta p { margin-inline: auto; color: var(--bone-soft); }

/* ---------- Footer ---------- */
.foot {
  background: var(--ink-deep); border-top: 1px solid var(--hairline);
  padding-block: 3.5rem 2.5rem; font-size: var(--step--1); color: var(--bone-faint);
}
.foot__grid { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; justify-content: space-between; align-items: flex-start; }
.foot a { text-decoration: none; color: var(--bone-soft); }
.foot a:hover { color: var(--accent-lit); }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }

/* ---------- Sector page header ---------- */
.pagehead {
  position: relative;
  padding-block: clamp(9rem, 20vh, 13rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 130% at 82% 0%, rgba(94,140,166,0.16), transparent 58%),
              radial-gradient(90% 120% at 8% 100%, rgba(224,168,92,0.12), transparent 60%);
}
.pagehead .shell { position: relative; z-index: 1; }
.pagehead h1 { font-size: var(--step-4); max-width: 19ch; }
.pagehead .lede { max-width: 54ch; }

/* ---------- Case study block ---------- */
.case { padding-block: clamp(3.5rem, 8vw, 6rem); border-bottom: 1px solid var(--hairline); }
.case:last-of-type { border-bottom: 0; }
.case__head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
.case__mark { height: 44px; width: auto; max-width: 190px; object-fit: contain; opacity: 0.78; }
/* An anchor case carries its client mark at a size that reads as an
   endorsement rather than a footnote. Centred rather than baseline-aligned,
   or a taller mark rides up out of the row. */
.case__mark--xl {
  height: clamp(60px, 7.5vw, 92px);
  max-width: 320px;
  opacity: 0.95;
  align-self: center;
}

/* Film grid — anchor film leads, supporting films sit beneath it. */
.filmgrid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2.5rem; }
@media (min-width: 860px) {
  .filmgrid { grid-template-columns: repeat(2, 1fr); }
  .filmgrid > .film--lead { grid-column: 1 / -1; }
}
.film figcaption { margin-top: 0.85rem; }
.film__title { display: block; font-size: var(--step-0); color: var(--bone-soft); }
.film__meta { display: block; font-size: var(--step--1); color: var(--bone-faint); margin-top: 0.15rem; }

/* ---------- Callout ---------- */
.callout {
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.5rem;
  margin: 2rem 0;
}
.callout p { margin: 0; color: var(--bone-soft); }
.callout strong { color: var(--bone); font-weight: 500; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
.reveal[data-delay="1"].is-in { transition-delay: 0.09s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.18s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.27s; }

/* =========================================================================
   Reduced motion — kills parallax, reveals and the hero loop entirely.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---------- Forms (intake) ---------- */
.form { display: grid; gap: 1.6rem; max-width: 640px; margin-top: 2.5rem; }
.field { display: grid; gap: 0.6rem; }
.field > label {
  font-size: var(--step--1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-faint); font-weight: 500;
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--step-0); color: var(--bone);
  background: var(--ink-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-faint) 50%), linear-gradient(135deg, var(--bone-faint) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--ink-raised); color: var(--bone); }
.field__hint { font-size: var(--step--1); color: var(--bone-faint); }
.field__error { font-size: var(--step--1); color: var(--accent-lit); display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--accent); }
.field[data-invalid="true"] .field__error { display: block; }

.formnote { font-size: var(--step--1); color: var(--bone-faint); max-width: 52ch; }

/* Calendly slot stays hidden until the intake form is completed. */
.booking { margin-top: 3rem; }
.booking__frame {
  border: 1px solid var(--hairline); background: var(--ink-raised);
  min-height: 640px; border-radius: var(--r-lg);
}
.booking__placeholder { padding: clamp(2rem, 5vw, 3.5rem); }

/* ---------- Work index grid ---------- */
.workgrid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); margin-top: 3rem; }
@media (min-width: 780px)  { .workgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .workgrid--three { grid-template-columns: repeat(3, 1fr); } }
.workcard__body { padding-top: 1rem; }
.workcard__client {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent2-lit); margin: 0 0 0.4rem;
}
.workcard h3 { font-size: var(--step-2); margin-bottom: 0.35em; }
.workcard p { color: var(--bone-soft); margin: 0; }

/* ---------- Prose (Village Treasures, About) ---------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 0; }
.prose h2 { font-size: var(--step-3); margin-top: 2.5em; }
.prose h2:first-child { margin-top: 0; }
.prose--airy p { font-size: var(--step-1); line-height: 1.62; color: var(--bone-soft); }

/* ---------- Credit rows (About) ---------- */
.credits { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 4.5vw, 3.5rem); margin-top: 2rem; }
.credits img { height: auto; width: auto; max-height: 40px; max-width: 150px; object-fit: contain; opacity: 0.62; }

/* =========================================================================
   Centred feature block
   Replaces the side-by-side case study on the homepage. A half-width text
   column beside a half-width video left a lot of dead space at desktop
   widths; a centred column with the film full-width beneath it reads the
   way people now expect film to be presented, and collapses to mobile
   without a layout change.
   ========================================================================= */
.feature { text-align: center; }
.feature > * { margin-inline: auto; }
.feature .eyebrow { margin-bottom: 1.1rem; }
.feature h2 { max-width: 20ch; }
.feature p { max-width: 58ch; }
.feature .stats {
  display: inline-grid;
  justify-content: center;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 1.6rem;
  margin-block: 2.4rem;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}
.feature .stat__label { max-width: none; }

/* Full-width film beneath the copy. */
.player--wide { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.player--wide + .caption { text-align: center; }

/* =========================================================================
   Outcome links
   The homepage used to close "what we do" with a claim that the work makes
   people want to send a film to someone. The claim is better made by naming
   what happens when they do, with each outcome linking to the case that
   proves it. Placed at the end of the section so it reads as the exit, not
   as a distraction mid-argument.
   ========================================================================= */
.outcomes {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
@media (min-width: 720px) { .outcomes { grid-template-columns: repeat(3, 1fr); } }
.outcomes a {
  display: block;
  height: 100%;
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--ink);
  color: inherit;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.outcomes a:hover, .outcomes a:focus-visible { background: var(--ink-raised); }
.outcomes__verb {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: var(--step-2);
  color: var(--accent-lit);
  line-height: 1.1;
}
.outcomes__note {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--bone-faint);
  line-height: 1.45;
}
.outcomes a:hover .outcomes__note { color: var(--bone-soft); }

/* A cut that lives on the client's own social account rather than on a
   host we control. Deliberately not an Instagram embed: their embed script
   is heavy, sets third-party cookies on arrival, and breaks whenever a post
   is made private. A link tile is honest about where the film lives, and
   the client having published it is the stronger signal anyway. */
.linktile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline);
  background: var(--ink-deep);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.linktile:hover, .linktile:focus-visible { border-color: var(--accent); background: var(--ink-raised); }
.linktile__eyebrow {
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.9rem;
}
.linktile__title { font-family: "Cormorant Garamond", serif; font-size: var(--step-2); line-height: 1.15; margin: 0; }
.linktile__note { font-size: var(--step--1); color: var(--bone-faint); margin: 0.85rem 0 0; line-height: 1.5; }

/* A vertical cut — a social reel — in the same player chrome. Capped so it
   cannot tower over the copy beside it. */
.player--vertical { aspect-ratio: 9 / 16; max-width: 300px; margin-inline: auto; }
/* Self-hosted film. `contain` rather than `cover`: the MHC testimonial is
   1920x990, wider than the 16:9 box, and cropping a talking head to fill the
   frame is the one thing not to do. Letting it letterbox costs about 12px of
   bar top and bottom against a near-black player ground — invisible in
   practice — and keeps every card in a row the same height, which a bespoke
   aspect ratio for one video would not. */
.player video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000; object-fit: contain;
}

/* ---------- Poster (film one-sheet) ---------- */
.poster {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  max-width: 420px;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }

/* A word in a stat slot needs a smaller size than a numeral or it crowds
   the row; the label beneath still carries the meaning. */
.stat__num--word { font-size: var(--step-1); letter-spacing: 0.01em; }

/* =========================================================================
   Production mosaic
   An asymmetric tile grid for stills of mixed aspect ratio. Each tile is
   given a ratio and crops to fill, so the grid stays predictable no matter
   what shape the source images are.
   ========================================================================= */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.mosaic figure { margin: 0; position: relative; overflow: hidden; background: var(--ink-raised); }
.mosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.94);
}
.mosaic figure:hover img { transform: scale(1.035); filter: saturate(1.04); }

.m-tall { grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 4; }
.m-wide { grid-column: span 4; aspect-ratio: 16 / 9; }
.m-half { grid-column: span 2; aspect-ratio: 4 / 3; }
.m-band { grid-column: span 6; aspect-ratio: 21 / 8; }

@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .m-tall { grid-column: span 1; grid-row: span 2; }
  .m-wide, .m-band { grid-column: span 2; }
  .m-half { grid-column: span 1; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr; }
  .m-tall, .m-wide, .m-half, .m-band { grid-column: span 1; grid-row: auto; }
  .m-tall { aspect-ratio: 4 / 5; }
  .m-band { aspect-ratio: 16 / 9; }
}

/* Larger client mark for a centred case study head. */
.case__mark--lg { max-height: 72px; max-width: 260px; opacity: 0.8; margin-inline: auto; }

/* =========================================================================
   Rounding and depth pass
   Applied as one block rather than scattered through the file, so the whole
   system can be tuned or reverted in one place. Surfaces that a visitor can
   act on lift on hover; surfaces that only hold content do not.
   ========================================================================= */
.poster { border-radius: var(--r-lg); }
.offer { border-radius: var(--r-lg); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.offer:hover { box-shadow: var(--lift); }
.offer--wide { border-radius: var(--r-lg); }
.mosaic figure { border-radius: var(--r-md); overflow: hidden; }
.outcomes { border-radius: var(--r-lg); overflow: hidden; border-inline: 1px solid var(--hairline); }
.linktile { border-radius: var(--r-lg); }
.callout { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.trustband__row img { border-radius: 2px; }
.masthead__mark img { border-radius: 2px; }
.card, .quote { border-radius: var(--r-md); }

/* The film one-sheet already carried a shadow; align it to the token scale
   so every raised surface on the site falls off at the same rate. */
.poster { box-shadow: var(--lift-high); }



/* =========================================================================
   Dark zones
   The site is paper now. These are the places that stay night, and they are
   not decoration: the hero and page heads carry video and sit under a
   transparent masthead, the trust band and flagship carry white logo
   knockouts, film players need a dark surround, and the footer anchors the
   page. Each one re-declares the palette tokens, so every component inside
   re-themes without needing a variant of its own.
   ========================================================================= */
.hero, .pagehead, .trustband--dark, .flagship, .foot, .section--paper {
  --ink:        var(--night);
  --ink-raised: var(--night-raised);
  --ink-deep:   var(--night-deep);
  --hairline:   var(--night-hairline);
  --bone:       var(--night-bone);
  --bone-soft:  var(--night-soft);
  --bone-faint: var(--night-faint);
  --accent:     var(--accent-night);
  --accent-lit: var(--accent-night-lit);
  background-color: var(--night);
  color: var(--night-bone);
}
/* .section--paper is now the inversion, not the ground: on a paper site the
   commercial panel is the dark one. Same class, opposite job, and it still
   reads as a panel resting on the page rather than a band cut through it. */
.section--paper {
  border-radius: var(--r-xl);
  /* Inset on all four sides, not just the sides. Butted straight up against
     the section above it, a panel of a similar tone reads as a colour change
     in one continuous surface; the gap is what makes it a frame. */
  margin: clamp(2rem, 5vw, 4.5rem) clamp(0px, 2.5vw, 40px);
  box-shadow: 0 30px 70px rgba(40, 32, 18, 0.22);
}
.hero, .pagehead { background-color: var(--night-deep); }

/* Film keeps dark chrome on every ground, or the frame edge reads as a bug. */
/* A player is a dark zone in its own right, not just a dark box. Without
   the tokens its children inherit paper-mode text colour and the play glyph
   renders dark over the poster — invisible on a bright thumbnail. */
.player {
  --ink:        var(--night);
  --ink-raised: var(--night-raised);
  --ink-deep:   var(--night-deep);
  --hairline:   var(--night-hairline);
  --bone:       var(--night-bone);
  --bone-soft:  var(--night-soft);
  --bone-faint: var(--night-faint);
  --accent:     var(--accent-night);
  --accent-lit: var(--accent-night-lit);
  background: var(--night-deep);
  border-color: rgba(28, 22, 14, 0.18);
  color: var(--night-bone);
}
/* A poster can be a bright frame, so the button carries its own scrim
   rather than relying on the image behind it. */
.player__play {
  background: rgba(8, 11, 14, 0.55);
  backdrop-filter: blur(2px);
  color: var(--night-bone);
  border-color: rgba(240, 243, 246, 0.75);
}
.player:hover .player__play { background: var(--accent-night); border-color: var(--accent-night); color: #14100A; }
.flagship .player, .section--paper .player, .hero .player { border-color: var(--night-hairline); }

/* White logo knockouts are monochrome-on-transparent, so a straight invert
   gives a clean black mark with the alpha intact — no second set of assets.
   Zones that stayed dark keep the white originals. */
img[src$="-white.png"], img[src$="-transparent.png"] { filter: invert(1); }
.hero img, .pagehead img, .trustband--dark img, .flagship img,
.foot img, .section--paper img, .masthead__mark img { filter: none; }

/* The masthead floats transparent over a dark hero or page head, so the mark
   starts white. Once it sticks it gains a paper background, and the mark has
   to change with it. */
.masthead.is-stuck {
  /* 0.9 let body copy read straight through the bar, which competes with the
     nav sitting on top of it. Nearly opaque keeps the header a surface. */
  background: rgba(247, 243, 234, 0.97);
  border-bottom-color: var(--hairline);
}
.masthead.is-stuck .masthead__mark img { content: url("/public/logos/wea-mark-rectangle-dark.png"); }
.masthead.is-stuck .nav a { color: var(--bone-soft); }
.masthead.is-stuck .nav a:hover, .masthead.is-stuck .nav a[aria-current="page"] { color: var(--bone); }
.masthead.is-stuck .nav__toggle { color: var(--bone); }
@media (min-width: 861px) {
  .nav a { color: var(--night-soft); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--night-bone); }
  .masthead.is-stuck .nav a { color: var(--bone-soft); }
  .masthead.is-stuck .nav a:hover,
  .masthead.is-stuck .nav a[aria-current="page"] { color: var(--bone); }
}

/* Depth on paper reads as warm shadow, not black. */
.player  { box-shadow: 0 18px 40px rgba(40, 32, 18, 0.16); }
.player:hover { box-shadow: 0 30px 60px rgba(40, 32, 18, 0.24); }
.poster  { box-shadow: 0 30px 70px rgba(40, 32, 18, 0.26); }
.offer:hover { box-shadow: 0 18px 40px rgba(40, 32, 18, 0.16); }
.flagship .poster, .section--paper .poster { box-shadow: var(--lift-high); }

/* Single lead offer. One card, centred, brass-edged — a lone card in a
   three-column grid would read as two missing cards. */
/* The offer panel centres as a whole — heading, argument, card and the
   downsell/upsell line all on one centre axis. Centring only the card under
   left-aligned copy was the thing that looked unresolved. */
.section--paper .shell { text-align: center; }
.section--paper .shell > * { margin-inline: auto; }
.offers.offers--single { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.offer--lead { border-color: var(--accent); text-align: left; }
.offer--lead { border-color: var(--accent); }

/* Mark weights were tuned for white-on-dark, where a knocked-back logo still
   reads. Inverted onto paper the same values go washed and grey, so every
   mark on a light ground carries more of itself. Alcon is the extreme case:
   its knockout came from a luminance ramp, so it is semi-transparent
   throughout and needs to sit at full strength. */
.credits img { opacity: 0.82; }
.credits img[src*="alcon"] { opacity: 1; }
.trustband__row img { opacity: 0.86; }
.trustband--dark .trustband__row img { opacity: 0.72; }
.case__mark { opacity: 0.9; }
.case__mark--xl, .case__mark--lg { opacity: 1; }
.testimonial__mark { opacity: 1; }

/* The "what we do" mosaic sits on paper, so its tiles need a warm well
   behind them rather than the dark one the production mosaic assumes. */
.mosaic figure { border-radius: var(--r-md); }
.mosaic--light figure { background: var(--ink-deep); }

/* A tile with a fixed aspect ratio cannot also stretch, so wherever one sits
   beside a taller neighbour — or spans two rows — the ratio wins and the grid
   is left with a hole. Dropping the ratio lets the tile take the row height
   it was given, which is what a mosaic wants at the edges of a row. */
.m-fill, .m-tall--fill { aspect-ratio: auto; }
/* Narrow enough and the spans no longer share a row with anything, so a
   stretch tile has no neighbour to take its height from and collapses to
   zero. Below that width the ratios come back. */
@media (max-width: 800px) {
  .m-fill { aspect-ratio: 4 / 3; }
  .m-tall--fill { aspect-ratio: 3 / 4; }
}

/* =========================================================================
   Social proof panel
   Comments from a client's own post, rebuilt as markup rather than shown as
   screenshots. Screenshots would carry real people's handles and profile
   photos onto a commercial page, and a blurred screenshot just looks like a
   screenshot with something hidden. Rebuilding keeps the parts that are the
   evidence — the verification badges, the like counts, the words themselves —
   and drops the parts that identify anyone.

   Sits as a dark inset so it reads as captured material against the paper
   around it.
   ========================================================================= */
.socialproof {
  --ink:        var(--night);
  --ink-raised: var(--night-raised);
  --hairline:   var(--night-hairline);
  --bone:       var(--night-bone);
  --bone-soft:  var(--night-soft);
  --bone-faint: var(--night-faint);
  --accent-lit: var(--accent-night-lit);
  background: var(--night);
  color: var(--night-bone);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: left;
}
.socialproof__head { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: baseline; justify-content: space-between; }
.socialproof__head p { margin: 0; max-width: 48ch; color: var(--night-soft); }
.socialproof__head strong { color: var(--night-bone); font-weight: 500; }
.socialproof__window { flex: none; }
.socialproof__window > span {
  display: block; font-size: var(--step--1); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-night-lit); margin-bottom: 0.85rem;
}
.socialproof__counts { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); }
.socialproof__count b {
  display: block; font-family: "Cormorant Garamond", serif;
  font-size: var(--step-2); font-weight: 400; color: var(--night-bone); line-height: 1;
}
.socialproof__count span { display: block; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-faint); margin-top: 0.35rem; }

.c-wall {
  list-style: none; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; padding: 0;
  display: grid; gap: clamp(0.7rem, 1.5vw, 1rem); grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .c-wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c-wall { grid-template-columns: repeat(3, 1fr); } }
.c-item {
  display: flex; gap: 0.85rem;
  background: var(--night-raised);
  border: 1px solid var(--night-hairline);
  border-radius: var(--r-md);
  padding: 1.05rem 1.15rem;
}
/* The disc colour is derived from the handle, so one person is one colour
   everywhere without the page ever carrying who they are. */
.c-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(145deg, hsl(var(--h) 42% 46%), hsl(calc(var(--h) + 38) 38% 28%));
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.9);
}
.c-body { min-width: 0; }
.c-meta { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.3rem; }
.c-handle { font-size: var(--step--1); letter-spacing: 0.02em; color: var(--night-soft); font-weight: 500; }
.c-check { width: 14px; height: 14px; flex: none; fill: #5E9BE0; }
.c-check .c-tick { stroke: var(--night); }
.c-text { margin: 0; font-size: var(--step-0); line-height: 1.5; color: var(--night-bone); }
.c-likes { margin: 0.5rem 0 0; font-size: var(--step--1); letter-spacing: 0.06em; color: var(--night-faint); }
.c-foot { margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: var(--step--1); color: var(--night-faint); max-width: 78ch; }

/* =========================================================================
   Tiers — the permission layer
   Collapsed, each engagement is a menu line: a name and one sentence. The
   price and the detail are behind a small deliberate act — hover on a
   pointer device, tap or keypress everywhere else. Nobody is asked to
   compare four numbers before they know what any of them buy.

   The reveal is a 0fr-to-1fr grid row rather than max-height, so it eases to
   the content's real height instead of racing to an arbitrary ceiling.
   ========================================================================= */
.tiers { display: grid; gap: clamp(0.75rem, 1.6vw, 1.1rem); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }
.tier {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-raised);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tier[data-open="true"], .tier:hover { border-color: var(--accent); }
.tier--lead { border-color: rgba(224,168,92,0.45); }

.tier__toggle {
  display: flex; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
  padding: clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.25rem, 2.8vw, 2rem);
}
.tier__name { font-family: "Cormorant Garamond", serif; font-size: var(--step-2); line-height: 1.1; margin: 0; flex: none; }
.tier__over { margin: 0; color: var(--bone-soft); font-size: var(--step--1); flex: 1 1 22ch; min-width: 0; }
.tier__cue {
  flex: none; margin-left: auto; font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-lit);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.tier__cue::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform 0.35s var(--ease);
}
.tier[data-open="true"] .tier__cue::after { transform: rotate(-135deg) translateY(-1px); }

.tier__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.tier__body { overflow: hidden; }
.tier[data-open="true"] .tier__wrap { grid-template-rows: 1fr; }
@media (hover: hover) and (pointer: fine) {
  .tier:hover .tier__wrap, .tier:focus-within .tier__wrap { grid-template-rows: 1fr; }
}
.tier__inner {
  padding: 0 clamp(1.25rem, 2.8vw, 2rem) clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline);
  margin-top: 0.25rem; padding-top: clamp(1.25rem, 2.6vw, 1.75rem);
  display: grid; gap: 1.1rem;
}
.tier__price { font-family: "Cormorant Garamond", serif; font-size: var(--step-2); color: var(--accent-lit); line-height: 1; }
.tier__detail { margin: 0; color: var(--bone-soft); max-width: 62ch; }
.tier__proof { margin: 0; font-size: var(--step--1); color: var(--bone-faint); max-width: 62ch; }
.tier__act { justify-self: start; }

/* Reduced motion: reveal without the sweep. */
@media (prefers-reduced-motion: reduce) {
  .tier__wrap { transition: none; }
  .tier__cue::after { transition: none; }
}

/* Confirmation that the choice made on the offer card survived the jump to
   the form. Without it the pre-selected dropdown looks like a default. */
.pickedbanner {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.2rem;
  border-left: 2px solid var(--accent);
  background: var(--ink-raised);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--step--1);
  color: var(--bone-soft);
}
.pickedbanner strong { color: var(--bone); font-weight: 500; }

/* A client voice immediately before the ask, on the page whose work they are
   talking about. One or two, never a wall — this is corroboration at the
   moment of decision, not the testimonials section over again. */
.saidit { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.saidit .quotes { margin-top: 0; }
@media (min-width: 900px) {
  /* max-width without auto margins pinned the grid to the left of a centred
     shell — it sat 124px off the axis every other element shares. */
  .saidit .quotes { grid-template-columns: repeat(2, 1fr); max-width: 62rem; margin-inline: auto; }
  .saidit--one .quotes { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }
}
/* Quotes of unequal length left their attributions floating at different
   heights. Pinning the cite to the bottom of each cell lines them up. */
.saidit .quote { display: flex; flex-direction: column; }
.saidit .quote cite { margin-top: auto; }
.endcta .saidit .quote blockquote { font-size: var(--step-1); }

/* A witness quote inside a case study: the moment the client speaks, set
   apart from the surrounding argument rather than dropped into a column. */
.witness {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-raised);
  text-align: left;
}
.witness blockquote {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--bone);
  max-width: 46ch;
}
.witness blockquote::before { content: "\201C"; color: var(--accent); }
.witness blockquote::after  { content: "\201D"; color: var(--accent); }
.witness cite {
  font-style: normal; display: block;
  font-size: var(--step--1); letter-spacing: 0.06em; color: var(--bone-faint); line-height: 1.6;
}
.witness cite b { display: block; color: var(--bone-soft); font-weight: 600; letter-spacing: 0.03em; }

/* The line that sets up the outcome tiles, centred with them and sitting
   directly above rather than buried at the end of a body column. */
.outcomes__lead {
  text-align: center;
  max-width: 54ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--bone-soft);
}

/* The last line before the button. Its only job is to remove the final
   hesitation, which is not price — it is being sold to. */
.endcta__note {
  margin: 0 auto;
  max-width: 40ch;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--bone-faint);
}

/* A second lede that answers the question the form itself provokes —
   "am I even the right size for this?" — without another heading. */
.lede--soft { color: var(--bone-faint); max-width: 46ch; margin-top: 0.9rem; }

/* Anchor targets must clear the fixed masthead, or a jump lands with the
   section heading tucked under the bar. */
:target, #offer, [id^="tier-"], .case[id], .section[id] { scroll-margin-top: clamp(84px, 12vh, 120px); }

/* Some YouTube thumbnails carry the source video's own letterbox or
   pillarbox bars baked in, so the poster arrives with a black frame around
   the picture. A scale about the centre crops the bars off; the value is per
   player because how much bar there is depends on the source footage.
   1.34 would remove a full 4:3 pillarbox; a thin baked-in border needs far
   less, and over-cropping costs more of the picture than the bar was worth. */
.player__poster { transform: scale(var(--poster-zoom, 1)); transform-origin: center; }

/* Mobile hero
   A 16:9 still in a 9:19 viewport crops to about a quarter of its width, so
   which quarter survives is the whole decision. The image is wider than the
   box and exactly as tall, which means only the horizontal half of
   object-position does anything here — 53% keeps her centred in the frame.

   The desktop scrim is lightest at 38% down, which is deliberate: it lets the
   picture breathe above the copy. On a phone the headline wraps to two lines
   and the sub to three, so the text block starts higher and the eyebrow lands
   in that light band and disappears. The mobile ramp darkens earlier so the
   whole block sits on a readable base, while the top stays open enough to
   keep her face and the window. */
@media (max-width: 767px) {
  .hero__media img { object-position: 53% center; }
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(14,18,22,0.62) 0%,
        rgba(14,18,22,0.30) 20%,
        rgba(14,18,22,0.62) 44%,
        rgba(14,18,22,0.90) 72%,
        var(--ink) 100%),
      radial-gradient(140% 60% at 50% 100%, rgba(14,18,22,0.85), transparent 70%);
  }
}

/* Narrow phones
   The centred feature removes the label width cap so stats read as one line
   on a wide screen. Below about 430px three unwrapped labels no longer fit —
   "Recruitment campaign" alone pushes the row past the viewport — so the cap
   comes back and the gap tightens. Measured overflowing by 13px at 360. */
@media (max-width: 430px) {
  .feature .stats { gap: 1rem; }
  .feature .stat__label { max-width: 11ch; }
  .stats { gap: 1rem 1.25rem; }
}
/* Narrower still — an iPhone SE is 320px, and after gutters that leaves 280
   for three columns that each want about 96. Two rows rather than a row that
   runs off the screen. */
@media (max-width: 380px) {
  .stats, .feature .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; }
  .feature .stats { justify-items: center; }
}