/* ==========================================================================
   Sunday — "Everyday feels like a Sunday. Only for you."
   Cinematic monochrome. White canvas · near-black ink · zero colour (only
   accents: gold testimonial stars + blue verified tick). One Helvetica family
   throughout, hierarchy by weight. A full-bleed B&W video hero, then light
   content with dark ink anchors (proof · case studies · final CTA) for rhythm.
   Ease is the client experience. Behind the scenes, the work never stops.
   ========================================================================== */

:root {
  /* ---- Dark cinematic palette ---------------------------------------- */
  /* The film hero is dark, so the whole site is dark. Client work is the
     only colour on the page, and on this ground it reads as craft. */
  --bg:            #0A0A0A;   /* page ground             */
  --surface:       #131313;   /* cards / panels          */
  --surface-warm:  #1A1A1A;   /* lifted surface          */
  --ink:           #F4F4F4;   /* primary text            */
  --muted:         #9B9B9B;   /* secondary text          */
  --accent:        #FFFFFF;   /* buttons, emphasis       */
  --accent-2:      #DDDDDD;   /* hover                   */
  --line:          rgba(255, 255, 255, 0.13);

  /* ---- Semantic aliases (map existing selectors onto the palette) ---- */
  --canvas:           var(--bg);
  --primary:          var(--accent);
  --primary-on:       #0A0A0A;
  --body:             rgba(255, 255, 255, 0.80);
  --charcoal:         rgba(255, 255, 255, 0.64);
  --mute:             var(--muted);
  --ash:              #8A8A8A;
  --stone:            #3C3C3C;   /* ghost numerals, step digits */

  --surface-card:     var(--surface);
  --surface-elevated: var(--surface-warm);
  --surface-deep:     #0E0E0E;
  --hairline:         var(--line);
  --hairline-strong:  rgba(255, 255, 255, 0.28);
  --divider-soft:     rgba(255, 255, 255, 0.07);


  /* On dark (black) sections */
  --ink-body:  rgba(255, 255, 255, 0.82);
  --ink-mute:  rgba(255, 255, 255, 0.60);
  --ink-line:  rgba(255, 255, 255, 0.14);

  /* ---- Type — one Helvetica family across the whole site (matches the logo) */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-favorit: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-brand:   "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Radius / spacing ---------------------------------------------- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 9999px;
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px;
  --s-2xl: 32px; --s-3xl: 52px; --s-section: 104px; --s-band: 112px;
  --container: 1200px;

  /* ---- Deep shadows for a dark ground -------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 44px -26px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 10px 22px rgba(0, 0, 0, 0.5), 0 34px 66px -28px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
section[id] { scroll-margin-top: 80px; }

* { scrollbar-width: thin; scrollbar-color: var(--stone) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 9px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.display, .hero__title, .close__title { text-wrap: balance; }
.hero__sub, .head__sub, .svc__body, .step__body, .close__sub { text-wrap: pretty; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--bg); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-2xl);
}
.hide-mobile { display: inline; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Sunday S mark ------------------------------------------------------- */
.smark { display: block; width: 100%; height: 100%; color: inherit; }

/* ==========================================================================
   Type primitives
   ========================================================================== */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-lg);
}
.kicker::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: currentColor; opacity: 0.5;
}
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* ==========================================================================
   Buttons. Three weights: solid for the one thing we want, glass for the
   second option, ghost-link for quiet navigation between sections.
   ========================================================================== */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 46px; padding: 0 22px;
  border-radius: var(--r-full); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease,
              box-shadow .4s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.btn svg { flex: none; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* solid - the single point of intent */
.btn--primary { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 10px 26px -14px rgba(0,0,0,.9); }
/* a soft sheen sweeps across on hover, so the button feels physical */
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(10,10,10,.10) 45%, transparent 65%);
  transform: translateX(-60%); transition: opacity .3s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(0,0,0,1); }
.btn--primary:hover::before { opacity: 1; transform: translateX(60%); }

/* glass - real frosted panel, not just a grey box */
.btn--glass {
  color: var(--ink);
  background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 24px -16px rgba(0,0,0,.9);
}
.btn--glass:hover {
  background: linear-gradient(140deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.34); transform: translateY(-2px);
}
@media (prefers-reduced-transparency: reduce) {
  .btn--glass { background: var(--surface-warm); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ghost - a link that still reads as a control */
.btn--ghost {
  height: 42px; padding: 0 18px; color: var(--muted);
  background: transparent; border-color: var(--line);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--hairline-strong); background: rgba(255,255,255,.04); }

.nav__getintouch { height: 38px; padding: 0 16px; }
.btn--lg { height: 50px; padding: 0 24px; font-size: 15px; }
.btn--xl { height: 56px; padding: 0 32px; font-size: 16px; }
.btn--block { width: 100%; }
.nav .btn--primary { height: 38px; padding: 0 18px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.nav__inner {
  max-width: var(--container); margin-inline: auto;
  height: 68px; padding-inline: var(--s-2xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-xl);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__mark { width: 26px; height: 26px; flex: none; color: var(--ink); }
.brand__word { font-family: var(--font-brand); font-weight: 500; font-size: 18px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }

.nav__links {
  display: flex; align-items: center; gap: 2px; margin-inline: auto;
  padding: 5px; border-radius: var(--r-full);
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  transition: background .35s ease, border-color .35s ease;
}
.nav__links a {
  font-family: var(--font-favorit); font-size: 14px; font-weight: 500;
  color: var(--muted); padding: 8px 13px; border-radius: var(--r-md);
  transition: color .3s ease, background .3s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-warm); }
.nav__actions { display: flex; align-items: center; gap: var(--s-md); }

.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 38px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
}
.nav__burger span { display: block; height: 1.6px; width: 16px; margin-inline: auto; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

.nav__drawer[hidden] { display: none; }
.nav__drawer { display: flex; flex-direction: column; gap: 2px; padding: var(--s-lg) var(--s-2xl) var(--s-xl); border-top: 1px solid var(--line); background: var(--bg); }
.nav__drawer a:not(.btn) { font-family: var(--font-favorit); font-size: 16px; color: var(--body); padding: 12px 4px; border-bottom: 1px solid var(--divider-soft); }
.nav__drawer .btn { margin-top: var(--s-md); }

/* Nav: transparent over the dark video hero, solid white once scrolled ---- */
.nav.is-hero-top {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav.is-hero-top .nav__links {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.nav.is-hero-top .brand__word,
.nav.is-hero-top .nav__links a { color: #FFFFFF; }
.nav.is-hero-top .nav__links a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.nav.is-hero-top .btn--glass {
  background: rgba(255, 255, 255, 0.08); color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28); box-shadow: none;
}
.nav.is-hero-top .btn--glass:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.nav.is-hero-top .btn--primary { background: #FFFFFF; color: #0A0A0A; }
.nav.is-hero-top .btn--primary:hover { background: #EDEDED; }
.nav.is-hero-top .nav__burger { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.nav.is-hero-top .nav__burger span { background: #FFFFFF; }

/* ==========================================================================
   1 · HERO — cinematic full-bleed B&W video
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  width: 100%;
  aspect-ratio: 3840 / 2160;   /* match the film exactly — fills fully, nothing cropped */
  background: #0A0A0A;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;   /* hero aspect == video aspect → no crop, no bars */
  background: #0A0A0A;
}
/* subtle top veil only — keeps the nav readable; the film itself stays untouched */
.hero__media::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), transparent);
}

.hero__inner {
  max-width: 900px; margin-inline: auto; text-align: center; color: #FFFFFF;
  will-change: transform, opacity;
}

/* glassy tagline pill — light glass over the dark film */
.hero__pill {
  display: inline-flex; align-items: center;
  padding: 9px 18px; margin-bottom: var(--s-xl);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 30px -16px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero__pill-text {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.94);
}
.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(42px, 6.6vw, 88px);
  line-height: 1.0; letter-spacing: -0.035em;
  color: #FFFFFF; margin: 0 auto; max-width: 15ch;
  text-shadow: 0 2px 44px rgba(0, 0, 0, 0.4);
}
.hero__sub {
  font-family: var(--font-favorit); font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.62; color: rgba(255, 255, 255, 0.82);
  max-width: 540px; margin: var(--s-xl) auto 0;
}
.hero__cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-2xl); }

/* hero buttons invert over the dark film */
.hero .btn--primary { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.7); }
.hero .btn--primary:hover { background: #EDEDED; color: #0A0A0A; transform: translateY(-2px); }
.hero .btn--glass {
  background: rgba(255, 255, 255, 0.08); color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero .btn--glass:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }

/* hero proof stats — glass cards over the film */
.hero__proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md);
  margin-top: clamp(44px, 6.5vh, 84px); max-width: 860px; margin-inline: auto;
  will-change: transform, opacity;
}
.pstat {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-xl);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, background .45s ease, box-shadow .45s ease;
}
.pstat:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7);
}
.pstat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.9vw, 34px); color: #FFFFFF; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pstat .lbl { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.64); letter-spacing: 0.12em; text-transform: uppercase; }

/* hero entrance — staggered cinematic rise on load */
.reveal-hero { opacity: 0; transform: translateY(28px); animation: heroRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* hero sound control — muted autoplay, tap to bring sound in */
.hero__actions {
  position: absolute; left: 50%; bottom: clamp(22px, 6vh, 48px);
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero__sound {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 15px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.10); color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.hero__sound:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.46); transform: translateY(-2px); }
.hero__sound-icon { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; }
.hero__sound-icon svg { grid-area: 1 / 1; }
.hero__sound .i-sound { display: none; }
.hero__sound.is-on .i-muted { display: none; }
.hero__sound.is-on .i-sound { display: block; }

/* ==========================================================================
   Section scaffolding + soft glows
   ========================================================================== */
.section { position: relative; padding: var(--s-section) 0; isolation: isolate; }
/* Soft monochrome glow at the top of a section. The legacy glow--* class names
   (blue/green/orange/red) remain in markup but are inert; the glow is one tone. */
.section--glow::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 520px;
  z-index: -1; pointer-events: none; opacity: 0.6;
  background: radial-gradient(56% 420px at 50% -12%, rgba(10, 10, 10, 0.035), transparent 72%);
}

/* Deep sections — the page is already dark, so these drop a shade further
   and pick up a soft glow, giving rhythm without inverting anything. */
.section--dark {
  background: var(--surface-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.section--dark::after {
  content: ""; position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
  width: 120%; height: 80%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 66%);
  filter: blur(12px);
}
.section--dark .kicker { color: var(--ink-mute); }
.section--dark .head__sub { color: var(--ink-mute); }


.head { max-width: 900px; margin: 0 auto clamp(30px, 3.6vw, 48px); text-align: center; }
.head__sub { font-family: var(--font-favorit); font-size: 18px; line-height: 1.66; color: var(--muted); margin: var(--s-xl) auto 0; max-width: 560px; }

/* Statement band — the answer to "what is this", straight after the film.
   Sits tight under the hero so there is no empty screen between them. */
.statement {
  position: relative; isolation: isolate;
  padding: clamp(56px, 7vw, 92px) 0 clamp(40px, 5vw, 60px);
  background: var(--bg); color: var(--ink); text-align: center;
}
.statement .container { max-width: 1080px; }
.statement__lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.04em;
  color: var(--ink); margin: 0 auto; max-width: 26ch; text-wrap: balance;
}
.statement__sub {
  font-family: var(--font-favorit); font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.6; color: var(--muted);
  margin: clamp(20px, 2.4vw, 32px) auto 0; max-width: 58ch; text-wrap: pretty;
}
/* kinetic word-by-word rise for the statement heading */
.statement__lead.words-split .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.statement__lead.words-split .w__in {
  display: inline-block; transform: translateY(115%);
  transition: transform .95s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--wi) * 55ms);
}
.statement__lead.words-in .w__in { transform: translateY(0); }

/* dark variant of the statement band (used on sub-pages) */
.statement--dark { background: #0A0A0A; }
.statement--dark .statement__lead { color: #FFFFFF; }
.statement--dark .statement__sub { color: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   Sub-page building blocks (About / Services / Work / Contact)
   ========================================================================== */
.phero { position: relative; padding: clamp(140px, 20vh, 220px) 0 clamp(56px, 8vw, 100px); }
.phero--dark { background: #0A0A0A; color: #FFFFFF; }
.phero__inner { max-width: 840px; }
.phero--dark .kicker { color: var(--ink-mute); }
.phero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.038em;
  color: inherit; margin: 0; text-wrap: balance;
}
.phero__sub {
  font-family: var(--font-favorit); font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6; color: var(--muted); margin: var(--s-xl) 0 0; max-width: 640px;
}
.phero--dark .phero__sub { color: rgba(255, 255, 255, 0.66); }

/* Mark showcase — the two forms converge into one mark on reveal (storytelling) */
.markshow { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-xl); margin: 0 auto clamp(56px, 7vw, 96px); }
.markshow__mark { width: clamp(96px, 14vw, 164px); height: clamp(96px, 14vw, 164px); color: var(--ink); }
.markshow__mark svg polygon {
  transform-box: fill-box; transform-origin: center;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.markshow.reveal:not(.is-visible) .markshow__mark svg polygon:nth-child(1) { transform: translate(-30%, -48%) rotate(-6deg); opacity: 0; }
.markshow.reveal:not(.is-visible) .markshow__mark svg polygon:nth-child(2) { transform: translate(30%, 48%) rotate(-6deg); opacity: 0; }
.markshow__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; margin: 0; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
  .markshow.reveal:not(.is-visible) .markshow__mark svg polygon { transform: none; opacity: 1; }
}

/* Principles grid */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.principle {
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s ease, box-shadow .5s ease;
}
.principle:hover { transform: translateY(-5px); border-color: var(--hairline-strong); box-shadow: var(--shadow-lift); }
.principle__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: var(--s-md); }
.principle__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--s-sm); }
.principle__desc { font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 var(--s-md); }
.principle__mean { font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; padding-top: var(--s-md); border-top: 1px solid var(--line); }
@media (max-width: 1023px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .principles { grid-template-columns: 1fr; } }

/* Logo-meaning infographic (About) — the real brand image in a premium showcase */
.logo-figure {
  margin: clamp(10px, 2vw, 30px) auto 0; max-width: 1180px;
  padding: clamp(18px, 3.4vw, 52px);
  background: var(--surface-warm);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
}
.logo-figure img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.logo-figure figcaption {
  margin-top: clamp(16px, 2.2vw, 26px); text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

/* Logo-meaning diagram — matches the brand infographic (About) */
.logo-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a b c" "m m m" "d e f";
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: clamp(40px, 5vw, 68px);
  align-items: start; max-width: 1160px; margin-inline: auto; position: relative;
}
.ldp--a { grid-area: a; } .ldp--b { grid-area: b; } .ldp--c { grid-area: c; }
.ldp--d { grid-area: d; } .ldp--e { grid-area: e; } .ldp--f { grid-area: f; }
.ldg__center { grid-area: m; }

.ldp { display: flex; gap: 15px; text-align: left; align-items: flex-start; position: relative; }
.ldp__icon {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-full);
  display: inline-grid; place-items: center;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease;
}
.ldp__icon svg { width: 21px; height: 21px; }
.ldp:hover .ldp__icon { transform: translateY(-3px); background: var(--ink); color: var(--bg); }
.ldp__body { flex: 1; min-width: 0; padding-top: 3px; }
.ldp__t { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin: 0 0 9px; }
.ldp__d { font-family: var(--font-favorit); font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.ldp__rule { display: block; width: 26px; height: 1px; background: var(--ink); margin: 14px 0; }
.ldp__mlabel { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; }
.ldp__m { font-family: var(--font-favorit); font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }

/* center: the horizontal logo lockup */
.ldg__center { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 2vw, 30px) 0; }
.ldg__mark { flex: none; width: clamp(60px, 6vw, 92px); height: clamp(60px, 6vw, 92px); color: var(--ink); }
.ldg__mark svg { display: block; width: 100%; height: 100%; }
.ldg__center .ldg__rule { flex: none; width: 1px; height: clamp(56px, 6vw, 84px); background: var(--hairline-strong); }
.ldg__lockup { display: flex; flex-direction: column; align-items: center; }
.ldg__word { font-family: var(--font-brand); font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 46px); color: var(--ink); line-height: 1; padding-left: 0.3em; }
.ldg__tag { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0.2em; font-size: clamp(10px, 1vw, 13px); color: var(--ink); margin-top: 8px; }

/* connector lines from each principle toward the central mark (desktop) */
@media (min-width: 901px) {
  .ldp--a::after, .ldp--b::after, .ldp--c::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(-1 * clamp(40px, 5vw, 68px)); width: 1px; height: clamp(40px, 5vw, 68px);
    background: linear-gradient(180deg, transparent, var(--hairline-strong));
  }
  .ldp--d::before, .ldp--e::before, .ldp--f::before {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(-1 * clamp(40px, 5vw, 68px)); width: 1px; height: clamp(40px, 5vw, 68px);
    background: linear-gradient(0deg, transparent, var(--hairline-strong));
  }
}

/* summary — rounded pill card */
.ldg-summary {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 32px);
  max-width: 940px; margin: clamp(52px, 7vw, 92px) auto 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 42px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--shadow-card);
}
.ldg-summary__mark { flex: none; width: 62px; height: 62px; border-radius: var(--r-full); background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.ldg-summary__mark svg { width: 30px; height: 30px; display: block; }
.ldg-summary__rule { flex: none; width: 1px; align-self: stretch; background: var(--hairline-strong); }
.ldg-summary__body { font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 6px; }
.ldg-summary__punch { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -0.01em; color: var(--ink); margin: 0; }

@media (max-width: 900px) {
  .logo-diagram { grid-template-columns: 1fr; grid-template-areas: "m" "a" "b" "c" "d" "e" "f"; row-gap: 30px; }
  .ldp { max-width: 460px; margin-inline: auto; }
  .ldg__center { padding: 4px 0 8px; }
}
@media (max-width: 560px) { .ldg-summary { flex-direction: column; text-align: center; } .ldg-summary__rule { width: 60%; height: 1px; align-self: center; } }

/* Contact cards */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); max-width: 880px; margin-inline: auto; }
.contact-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card); color: var(--ink);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s ease, box-shadow .5s ease;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--hairline-strong); box-shadow: var(--shadow-lift); }
.contact-card__icon { color: var(--ink); margin-bottom: var(--s-md); }
.contact-card__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-card__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -0.02em; color: var(--ink); word-break: break-word; }
.contact-card__hint { font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Shared card surface — soft, rounded, warm
   ========================================================================== */
.pillar, .ind__cell, .shift-row, .tquote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s ease, box-shadow .5s ease;
}
.pillar:hover, .ind__cell:hover, .shift-row:hover, .tquote:hover {
  transform: translateY(-5px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lift);
}

/* ==========================================================================
   2 · THE SHIFT — four transformations
   ========================================================================== */
.shifts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); max-width: 920px; margin-inline: auto; }
.shift-row {
  display: flex; align-items: center; gap: var(--s-lg);
  padding: var(--s-xl) var(--s-2xl);
}
.shift-from { font-family: var(--font-favorit); font-size: clamp(15px, 1.8vw, 19px); color: var(--ash); text-decoration: line-through; text-decoration-color: var(--stone); }
.shift-arrow { color: var(--accent); flex: none; display: inline-grid; place-items: center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.shift-row:hover .shift-arrow { transform: translateX(5px); }
.shift-to { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.025em; color: var(--ink); margin-left: auto; }

/* ==========================================================================
   3 · SERVICES — grouped by phase: Foundation / Create / Amplify
   ========================================================================== */
.svc-groups { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 92px); }
.svc-group { position: relative; }
.svc-group__head {
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px);
  padding-bottom: var(--s-lg); margin-bottom: clamp(20px, 2.6vw, 36px);
  border-bottom: 2px solid var(--ink);
}
.svc-group__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 68px); color: var(--stone);
  line-height: 0.78; letter-spacing: -0.05em;
}
.svc-group__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -0.04em;
  color: var(--ink); margin: 0; line-height: 0.9;
}
.svc-group__desc { margin-left: auto; font-family: var(--font-favorit); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--muted); text-align: right; max-width: 240px; }
.svc-group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 5vw, 80px); }

.svc {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-lg);
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
  transition: border-color .5s ease, padding-left .5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover { border-color: var(--ink); padding-left: 10px; }
.svc__icon {
  grid-row: 1 / 3; align-self: start;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; color: var(--muted);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), color .5s ease;
}
.svc__icon svg { width: 26px; height: 26px; }
.svc:hover .svc__icon { color: var(--ink); transform: translateY(-2px); }
.svc__title { grid-column: 2; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0 var(--s-sm); }
.svc__body { grid-column: 2; font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.svc__note {
  text-align: center; max-width: 660px; margin: var(--s-3xl) auto 0;
  font-family: var(--font-favorit); font-size: 17px; line-height: 1.6; color: var(--muted);
}

/* ==========================================================================
   Proof cases (inside dark section)
   ========================================================================== */
.cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.case + .case { border-left: 1px solid rgba(255, 255, 255, 0.14); }

/* Sparkline draws itself when the card reveals */
.case__spark { width: 100%; max-width: 190px; height: auto; margin-top: var(--s-xl); }
 }
 }

/* ==========================================================================
   Industries: ticker + grid + serve-note
   ========================================================================== */
.ticker {
  position: relative; overflow: hidden;
  margin: var(--s-lg) 0 var(--s-section);
  padding: var(--s-md) 0;
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.3vw, 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__row { overflow: hidden; }
.ticker__track { display: flex; width: max-content; }
.ticker__track--ltr { animation: marquee-l 64s linear infinite; }
.ticker__track--rtl { animation: marquee-r 72s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ticker__set li {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  color: #B4B4B4;
  white-space: nowrap;
  padding: 0 clamp(24px, 3.4vw, 56px);
  transition: color .35s ease;
}
.ticker__set li:hover { color: var(--ink); }
@keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Industry names — big editorial words, faint to ink on hover */
.ind {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(24px, 4vw, 64px);
  max-width: 1000px; margin-inline: auto;
}
.ind__item {
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(16px, 2vw, 26px) 4px;
  border-top: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.2,.7,.2,1), background .4s ease;
}
.ind__item:hover { padding-left: 14px; }
.ind__n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--muted); flex: none;
}
.ind__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.3vw, 30px); letter-spacing: -0.02em; color: var(--ink);
  transition: color .4s ease;
}
.ind__item:hover .ind__name { color: var(--accent); }

/* Stat row that ties the section together */
.ind-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(28px, 6vw, 88px); margin: 0 auto;
}
.ind-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ind-stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 54px); line-height: 0.9; letter-spacing: -0.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ind-stat__lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

.serve-note {
  display: flex; gap: var(--s-lg); align-items: flex-start;
  max-width: 760px; margin: var(--s-3xl) auto 0;
  padding: var(--s-xl) var(--s-2xl);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
}
.serve-note__icon {
  flex: none; width: 38px; height: 38px;
  border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--ink); background: rgba(10, 10, 10, 0.05);
  border: 1px solid rgba(10, 10, 10, 0.14);
}
.serve-note__body strong { display: block; color: var(--ink); font-family: var(--font-ui); font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.serve-note__body p { margin: 0; font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.62; color: var(--muted); }

/* ==========================================================================
   4 · HOW WE WORK — The Sunday System, 4 steps
   ========================================================================== */
.engine { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-xl); position: relative; }
.engine::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: -30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6; transform: scaleX(0); transform-origin: center;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.engine.is-drawn::before { transform: scaleX(1); }
.step { padding: clamp(24px, 2.6vw, 36px) clamp(16px, 1.6vw, 24px) 0 0; }
.step__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 5.6vw, 86px); color: var(--stone);
  display: block; line-height: 0.78; letter-spacing: -0.05em; margin-bottom: clamp(14px, 1.8vw, 22px);
}
.step__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.1vw, 26px); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 var(--s-sm); }
.step__body { font-family: var(--font-favorit); font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; }

/* ==========================================================================
   Voices / testimonials
   ========================================================================== */
.voices__badge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-favorit); font-size: 14px; color: var(--muted);
  margin: calc(-1 * var(--s-2xl)) 0 var(--s-2xl);
}
.tm {
  display: flex; flex-direction: column; gap: var(--s-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tm__row { overflow: hidden; padding: 6px 0; }
.tm__track { display: flex; width: max-content; }
.tm__track--ltr { animation: tmLeft 60s linear infinite; }
.tm__track--rtl { animation: tmRight 68s linear infinite; }
.tm:hover .tm__track { animation-play-state: paused; }
.tm__set { display: flex; }
.tm .tquote { width: min(430px, 84vw); flex: none; margin-right: var(--s-lg); }
@keyframes tmLeft  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tmRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* The card itself: a real surface with a hairline and a lift, instead of the
   bare floating text it used to be. Attribution sits under its own rule. */
.tquote {
  margin: 0; padding: clamp(24px, 2.3vw, 32px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1),
              background .45s ease;
}
.tquote:hover {
  border-color: var(--hairline-strong); transform: translateY(-5px);
  background: var(--surface-warm);
}
.tquote blockquote {
  margin: 0; padding: 0; border: 0; quotes: none;
  font-family: var(--font-favorit); font-size: clamp(15px, 1.55vw, 16.5px);
  line-height: 1.6; color: var(--body); flex: 1;
}
.tquote figcaption { margin-top: var(--s-lg); font-size: 13px; letter-spacing: 0.03em; color: var(--muted); }
.tquote__stars { display: block; font-size: 14px; letter-spacing: 3px; color: #F5B301; margin-bottom: clamp(13px, 1.5vw, 17px); }
.voices__badge .tquote__stars { display: inline; margin: 0; }
.tquote__who {
  display: flex; align-items: center; gap: 11px;
  margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(15px, 1.7vw, 19px);
  border-top: 1px solid var(--line);
}
.tquote__avatar {
  position: relative; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-full); display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; color: var(--muted);
  background: var(--surface-warm);
  border: 1px solid var(--line);
}
/* a real headshot at assets/reviews/<name>.jpg can take the avatar's place */
.tquote__photo {
  width: 40px; height: 40px; flex: none; display: block;
  border-radius: var(--r-full); object-fit: cover; border: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .tquote, .tquote:hover { transition: none; transform: none; }
}
.tquote__meta { display: flex; flex-direction: column; line-height: 1.3; }
.tquote__meta strong { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.tquote__meta strong::after {
  content: ""; width: 15px; height: 15px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231D9BF0'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tquote__meta span { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   5 · What sets us apart + compass
   ========================================================================== */
.diffs-list { max-width: 920px; margin-inline: auto; }
.diff-row {
  display: grid; grid-template-columns: 64px 300px 1fr;
  align-items: baseline; gap: var(--s-lg);
  padding: clamp(20px, 2.4vw, 30px) 6px;
  border-bottom: 1px solid var(--line);
  transition: background .4s ease, padding-left .4s cubic-bezier(.2,.7,.2,1);
}
.diff-row:first-child { border-top: 1px solid var(--line); }
.diff-row:hover { background: var(--surface-warm); padding-left: 18px; }
.diff-row__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px); color: var(--stone); letter-spacing: -0.02em; line-height: 1;
}
.diff-row__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.02em; color: var(--ink); }
.diff-row__body { margin: 0; font-family: var(--font-favorit); font-size: 14.5px; color: var(--muted); text-align: right; }

.compass-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2xl);
  margin-top: var(--s-3xl); padding-top: var(--s-2xl);
  border-top: 1px solid var(--line);
}
.compass-item__label {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-sm);
}
.compass-item p { font-family: var(--font-favorit); font-size: 15px; line-height: 1.62; color: var(--charcoal); margin: 0; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--s-xl) 4px;
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  transition: color .3s ease;
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--muted); transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.faq__icon::before { left: 0; top: 6px; width: 14px; height: 1.6px; }
.faq__icon::after { left: 6.2px; top: 0; width: 1.6px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg) scaleY(0); }
.faq__item.is-open .faq__icon::before { background: var(--accent); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  font-family: var(--font-favorit); font-size: 15.5px; line-height: 1.7;
  color: var(--muted); margin: 0; padding: 0 28px var(--s-xl) 4px; max-width: 62ch;
}

/* ==========================================================================
   Close / final CTA — dark ink section
   ========================================================================== */
.close {
  position: relative; padding: var(--s-band) 0; text-align: center; isolation: isolate;
  background: var(--surface-deep); border-top: 1px solid var(--line); overflow: hidden;
}
.close::after {
  content: ""; position: absolute; left: 50%; bottom: -28%; transform: translateX(-50%);
  width: 120%; height: 80%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 100%, rgba(255, 255, 255, 0.08), transparent 66%);
  filter: blur(12px);
}
.close__inner { max-width: 680px; margin-inline: auto; position: relative; }
.close__brandlock { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-2xl); color: var(--ink); }
.close__brandlock .brand__mark { width: 38px; height: 38px; color: var(--ink); }
.close__brandlock .brand__word { font-size: 26px; letter-spacing: 0.15em; color: var(--ink); }
.close__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); margin: 0; text-wrap: balance; }
.close__sub { font-family: var(--font-favorit); font-size: 18px; color: var(--ink-body); margin: var(--s-xl) auto 0; max-width: 480px; line-height: 1.66; }
.close__ctas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-lg); margin-top: var(--s-2xl); }
.close__ctas .btn { margin-top: 0; }
.close .btn--primary { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.6); }
.close .btn--primary:hover { background: #EDEDED; color: #0A0A0A; }
.close .btn--glass { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.close .btn--glass:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.close__fine { font-size: 13px; color: var(--ink-mute); margin: var(--s-lg) 0 0; }
.close__alt { font-size: 14px; color: var(--ink-mute); margin: var(--s-md) 0 0; }
.close__alt a { color: rgba(255, 255, 255, 0.92); text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease; }
.close__alt a:hover { color: var(--bg); }

/* ==========================================================================
   Footer — with a quiet S watermark
   ========================================================================== */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 64px 0 36px; background: var(--bg); }
.footer__watermark {
  position: absolute; right: -2%; bottom: -10%; z-index: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(110px, 24vw, 320px); letter-spacing: -0.05em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink); opacity: 0.035; pointer-events: none; user-select: none;
}
.footer__main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-xl); padding-bottom: var(--s-2xl);
}
.footer__brandlink { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.footer__brandlink .brand__mark { width: 30px; height: 30px; }
.footer__brandlink .brand__word { font-weight: 500; font-size: 22px; letter-spacing: 0.15em; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.footer__nav a { font-family: var(--font-favorit); font-size: 14px; color: var(--muted); transition: color .3s ease; }
.footer__nav a:hover { color: var(--accent); }
.footer__contact { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14px; }
.footer__contact a { color: var(--charcoal); transition: color .3s ease; }
.footer__contact a:hover { color: var(--accent); }
.footer__dot { width: 4px; height: 4px; border-radius: var(--r-full); background: var(--stone); }
.footer__bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-xl); border-top: 1px solid var(--divider-soft); font-size: 13px; color: var(--muted); }
.footer__legal { font-family: var(--font-favorit); }

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 54px; height: 54px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--accent); color: var(--bg);
  box-shadow: 0 14px 34px -12px rgba(10, 10, 10, 0.45);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .3s ease;
}
.wa-float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { transform: translateY(-3px); background: var(--accent-2); box-shadow: 0 20px 44px -12px rgba(10, 10, 10, 0.5); }

/* ==========================================================================
   Dot navigation (desktop)
   ========================================================================== */
.dotnav {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 14px;
}
.dotnav a { display: grid; place-items: center; width: 14px; height: 14px; }
.dotnav a span {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--stone);
  transition: background .4s ease, transform .4s ease;
}
.dotnav a:hover span { background: var(--muted); }
.dotnav a.is-active span { background: var(--accent); transform: scale(1.5); }
@media (max-width: 1279px) { .dotnav { display: none; } }

/* Services: titles lead, descriptions warm up on hover (desktop) */
@media (hover: hover) {
  .svc-group__grid .svc__body { opacity: 0.7; transition: opacity .45s ease; }
  .svc-group__grid .svc:hover .svc__body { opacity: 1; }
}

/* ==========================================================================
   Reveal — slow, gentle rise
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Headings ride the section reveal only. No clip-wipe: a fast scroll used to
   outrun it and leave the heading invisible, which cost more than it gave. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .reveal-hero { opacity: 1; transform: none; animation: none; }
  
  .hero__sound::after { animation: none; display: none; }
  .ticker__track, .hero__scroll-line::after { animation: none; }
  .btn:active { transform: none; }
  .engine::before { transition: none; transform: scaleX(1); }
  .faq__a { transition: none; }
  .tm__track { animation: none; width: auto; flex-wrap: wrap; gap: var(--s-lg); }
  .tm__set { flex-wrap: wrap; gap: var(--s-lg); }
  .tm__set[aria-hidden="true"] { display: none; }
  .tm { -webkit-mask-image: none; mask-image: none; }
  .tm .tquote { margin-right: 0; }
  svg.ind-draw path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .svc-group__grid { grid-template-columns: repeat(2, 1fr); }
  .engine { grid-template-columns: repeat(2, 1fr); }
  .engine::before { display: none; }
}

@media (max-width: 767px) {
  :root { --s-section: 76px; --s-band: 96px; }
  .container { padding-inline: var(--s-xl); }
  .nav__inner { padding-inline: var(--s-xl); }
  .hide-mobile { display: none; }
  .hero { padding-top: 48px; padding-bottom: 56px; }
  .hero__scroll { display: none; }
  .nav__getintouch { display: none; }
  .hero__inner { max-width: none; }
  .shifts { grid-template-columns: 1fr; }
  .svc-group__grid { grid-template-columns: 1fr; }
  .svc-group__head { flex-wrap: wrap; }
  .svc-group__desc { margin-left: 0; width: 100%; text-align: left; }
  .cases { grid-template-columns: 1fr; }
  .case + .case { border-left: 0; }
  .compass-strip { grid-template-columns: 1fr; gap: var(--s-xl); }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .close__ctas .btn { width: 100%; }
  .nav__burger { width: 44px; height: 42px; }
  .faq__q { font-size: 16px; }
  .diff-row { grid-template-columns: 36px 1fr; row-gap: 4px; }
  .diff-row__body { grid-column: 2; text-align: left; }
  .ind { grid-template-columns: 1fr 1fr; }
  .engine { grid-template-columns: 1fr; }
  .hero__proof { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
  .footer__bottom { flex-direction: column; gap: var(--s-sm); text-align: center; }
  .hero__cta .btn--primary { flex: 1; }
}

@media (max-width: 425px) {
  .container { padding-inline: var(--s-lg); }
  .nav__inner { padding-inline: var(--s-lg); }
  .ind { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Case studies — editorial "case files": ghost index, giant metric,
   staged Problem -> Change -> Result flow with a drawn connector.
   ========================================================================== */
.cf-list { max-width: 1120px; margin-inline: auto; display: grid; gap: clamp(64px, 9vw, 132px); }
.cf {
  position: relative; overflow: hidden;
  padding-top: clamp(26px, 3.6vw, 44px);
  border-top: 2px solid var(--ink);
}
.cf__ghost {
  position: absolute; top: clamp(2px, 1.4vw, 14px); right: -6px; z-index: -1;
  font-family: var(--font-display); font-weight: 700; line-height: 0.74;
  font-size: clamp(130px, 27vw, 340px); letter-spacing: -0.06em;
  color: rgba(10, 10, 10, 0.045); pointer-events: none; user-select: none;
}
.cf__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-lg); }
.cf__index { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.cf__tag { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.cf__metric-wrap { margin: clamp(14px, 2.2vw, 26px) 0 clamp(30px, 4.4vw, 58px); }
.cf__metric {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 13vw, 172px); letter-spacing: -0.055em; line-height: 0.84;
  color: var(--ink); margin: 0; white-space: nowrap;
}
.cf__cur { font-size: 0.4em; vertical-align: super; font-weight: 500; margin-right: 5px; letter-spacing: 0; }
.cf__metric-lbl { display: block; margin-top: clamp(10px, 1.4vw, 16px); font-family: var(--font-favorit); font-size: clamp(14px, 1.5vw, 18px); color: var(--muted); }
.cf__flow { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 20px); position: relative; margin-top: clamp(20px, 2.6vw, 30px); }
.cf__flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--hairline-strong); transform: scaleX(0); transform-origin: left;
  transition: transform 1.25s cubic-bezier(.2, .7, .2, 1) .15s;
}
.cf.is-visible .cf__flow::before { transform: scaleX(1); }
.cf__step { padding-top: clamp(12px, 1.5vw, 16px); display: grid; grid-template-columns: 132px 1fr; gap: var(--s-lg); align-items: baseline; }
.cf__step-k {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone);
}
.cf__step-k::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.cf__step p { margin: 0; font-family: var(--font-favorit); font-size: clamp(14.5px, 1.4vw, 16.5px); line-height: 1.62; color: var(--body); }
.cf__note { text-align: center; margin: clamp(48px, 6vw, 84px) auto 0; max-width: 560px; font-family: var(--font-favorit); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* variance: even case mirrors right so the two do not read the same */
.cf:nth-child(even) .cf__ghost { right: auto; left: -6px; }
.cf:nth-child(even) .cf__metric-wrap { text-align: right; }
.cf:nth-child(even) .cf__flow::before { transform-origin: right; }
/* Dark cinematic treatment — case files as the continuation of the proof band */
.section--dark .cf { border-top-color: rgba(255, 255, 255, 0.22); }
.section--dark .cf__ghost { color: rgba(255, 255, 255, 0.055); }
.section--dark .cf__index { color: var(--ink-mute); }
.section--dark .cf__tag { color: #fff; }
.section--dark .cf__metric { color: #fff; }
.section--dark .cf__metric-lbl { color: var(--ink-mute); }
.section--dark .cf__flow::before { background: rgba(255, 255, 255, 0.24); }
.section--dark .cf__step-k { color: rgba(255, 255, 255, 0.5); }
.section--dark .cf__step p { color: var(--ink-body); }
.section--dark .cf__note { color: var(--ink-mute); }
@media (max-width: 767px) {
  .cf__flow { grid-template-columns: 1fr; gap: 12px; }
  .cf__flow::before { display: none; }
  .cf__step { grid-template-columns: 1fr; gap: 4px; border-top: 1px solid var(--line); }
  .section--dark .cf__step { border-top-color: var(--ink-line); }
  .cf__step:first-child { border-top: 0; }
  .cf:nth-child(even) .cf__metric-wrap { text-align: left; }
}

/* ==========================================================================
   Qualification form — Request a Growth Review (composes a WhatsApp message)
   ========================================================================== */
.qform { max-width: 760px; margin-inline: auto; }
.qform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl); }
.qfield { display: grid; gap: var(--s-sm); }
.qfield--full { grid-column: 1 / -1; }
.qfield > label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.qfield input,
.qfield select,
.qfield textarea {
  width: 100%; font-family: var(--font-favorit); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; transition: border-color .3s ease, box-shadow .3s ease;
  appearance: none;
}
.qfield textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.qfield input::placeholder,
.qfield textarea::placeholder { color: var(--ash); }
.qfield input:focus,
.qfield select:focus,
.qfield textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}
.qfield select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.qform__foot { display: flex; align-items: center; gap: var(--s-xl); flex-wrap: wrap; margin-top: var(--s-xl); }
.qform__note { font-family: var(--font-favorit); font-size: 13.5px; line-height: 1.55; color: var(--muted); flex: 1 1 240px; }
@media (max-width: 640px) {
  .qform__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .qform__foot .btn { width: 100%; }
}

/* Trusted-by wall — client names drifting under the positioning line.
   Answers "who trusts them" in the same breath as "what do they do". */
.trust-wall { padding: 0 0 clamp(30px, 4vw, 52px); background: var(--bg); overflow: hidden; }
.trust-wall__label {
  text-align: center; margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash);
}
.trust-wall__row {
  display: flex; width: max-content;
  animation: trustDrift 46s linear infinite;
}
.trust-wall:hover .trust-wall__row { animation-play-state: paused; }
.trust-wall__set { display: flex; align-items: center; gap: clamp(34px, 5vw, 76px); padding-right: clamp(34px, 5vw, 76px); }
.trust-wall__set span {
  font-family: var(--font-display); font-weight: 500; white-space: nowrap;
  font-size: clamp(15px, 1.7vw, 21px); letter-spacing: -0.01em;
  color: var(--muted); transition: color .4s ease;
}
.trust-wall__set span:hover { color: var(--ink); }
@keyframes trustDrift { to { transform: translateX(-50%); } }
.trust-wall { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .trust-wall__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .trust-wall__set:last-child { display: none; }
}

/* Capability line under the statement — the short answer to "what do you do" */
.caps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(12px, 2vw, 26px); margin-top: clamp(26px, 3vw, 38px);
}
.caps__item {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -0.01em; color: var(--ink);
}
.caps__item + .caps__item::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--stone); vertical-align: middle; margin-right: clamp(12px, 2vw, 26px);
}
.caps__more { margin-left: 4px; }

/* ==========================================================================
   The Work — the reel. Mixed still/motion grid, silent loops play on hover.
   ========================================================================== */
.reel__more { text-align: center; margin: 0 0 clamp(8px, 1.4vw, 18px); }

.reel {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(40px, 5vw, 64px);
}
.reel__item {
  position: relative; overflow: hidden; margin: 0;
  background: linear-gradient(135deg, #1E1E1E, #141414); border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
}
/* rhythm: two tiles break the grid so it does not read as a uniform contact sheet */
.reel__item--wide { grid-column: span 2; aspect-ratio: 8 / 5; }
.reel__item img,
.reel__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.reel__item:hover img,
.reel__item:hover video { transform: scale(1.04); }
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.72), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.reel__item:hover .reel__cap,
.reel__item:focus-within .reel__cap { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .reel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .reel__item--wide { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__item img, .reel__item video { transition: none; }
  .reel__item:hover img, .reel__item:hover video { transform: none; }
}

/* ==========================================================================
   Industry bands (Work) — one band per industry, media scrolls sideways.
   Not a marquee: nothing auto-animates, the visitor drives it.
   ========================================================================== */
.band { padding: clamp(48px, 6vw, 92px) 0; border-top: 1px solid var(--line); }
.band:first-of-type { border-top: 0; }
.band__head {
  display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 30px);
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--s-2xl); margin-bottom: clamp(22px, 3vw, 36px);
}
.band__no {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--stone); flex: none;
}
.band__name {
  font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(30px, 5.2vw, 68px); letter-spacing: -0.045em; line-height: 0.9;
  color: var(--ink);
}
.band__note {
  margin: 0 0 0 auto; max-width: 30ch; text-align: right;
  font-family: var(--font-favorit); font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55; color: var(--muted);
}
.band__strip {
  display: flex; gap: clamp(10px, 1.2vw, 16px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--s-2xl); padding-bottom: 10px;
  scrollbar-width: thin; scrollbar-color: var(--stone) transparent;
}
.band__strip::-webkit-scrollbar { height: 6px; }
.band__strip::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 999px; }
.band__tile {
  position: relative; flex: 0 0 auto; margin: 0; scroll-snap-align: start;
  width: clamp(200px, 24vw, 310px); aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--r-md);
  background: linear-gradient(135deg, #1E1E1E, #141414);
}
.band__tile--wide { width: clamp(320px, 42vw, 560px); aspect-ratio: 16 / 10; }
/* films were shot vertical, so show them vertical instead of cropping to 4:5 */
.band__tile--film { width: clamp(196px, 20vw, 268px); aspect-ratio: 9 / 16; }
.band__tile img, .band__tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.band__tile:hover img, .band__tile:hover video { transform: scale(1.04); }
.band__tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.7), transparent);
  opacity: 0; transition: opacity .4s ease;
}
.band__tile:hover figcaption, .band__tile:focus-within figcaption { opacity: 1; }
/* alternate bands lead from the right so the page does not march in one direction */
.band:nth-of-type(odd) .band__head { flex-direction: row-reverse; }
.band:nth-of-type(odd) .band__note { margin: 0 auto 0 0; text-align: left; }
@media (max-width: 767px) {
  .band__head { flex-wrap: wrap; gap: 8px; padding-inline: var(--s-xl); }
  .band__note { margin: 6px 0 0; text-align: left; max-width: none; }
  .band:nth-of-type(odd) .band__head { flex-direction: row; }
  .band:nth-of-type(odd) .band__note { text-align: left; }
  .band__strip { padding-inline: var(--s-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .band__tile img, .band__tile video,
  .band__tile:hover img, .band__tile:hover video { transition: none; transform: none; }
  .band__strip { scroll-snap-type: none; }
}

/* ==========================================================================
   Founders / team (About)
   ========================================================================== */
.team-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.6vw, 52px);
  max-width: 1020px; margin: clamp(40px, 5vw, 68px) auto 0;
}
/* photo sits beside the copy, not above it, so the portrait stays a portrait
   instead of a half-screen block. 168px CSS is 336 device px at 2x, well
   inside both source files (1920 and 918 wide). Colour, never grayscale. */
.member {
  display: grid; grid-template-columns: clamp(112px, 14vw, 168px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px); align-items: start;
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 2px solid var(--ink);
}
.member__photo {
  width: 100%; aspect-ratio: 4 / 5; margin: 0;
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-warm);
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.member:hover .member__photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .member__photo img, .member:hover .member__photo img { transition: none; transform: none; }
}
.member__text { min-width: 0; }
.member__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.03em; color: var(--ink); }
.member__role { margin-top: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.member__bio { margin: clamp(10px, 1.3vw, 14px) 0 0; font-family: var(--font-favorit); font-size: clamp(14px, 1.45vw, 15.5px); line-height: 1.6; color: var(--body); }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 34px); } }

/* ==========================================================================
   Who it's for — audience filter (home)
   ========================================================================== */
.fit-list { max-width: 880px; margin: clamp(40px, 5vw, 68px) auto 0; }
.fit-row {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--s-lg); align-items: start;
  padding: clamp(20px, 2.6vw, 30px) 4px; border-top: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.2, .7, .2, 1);
}
.fit-row:last-child { border-bottom: 1px solid var(--line); }
.fit-row:hover { padding-left: 12px; }
.fit-row__mark {
  width: 27px; height: 27px; margin-top: 3px; flex: none;
  display: inline-grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
}
.fit-row__mark svg { width: 13px; height: 13px; }
.fit-row p {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 2vw, 23px); letter-spacing: -0.02em; line-height: 1.42; color: var(--ink);
}

/* ==========================================================================
   Case files — the metric sits beside the campaign report that proves it.
   ========================================================================== */
.cf { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(26px, 4vw, 64px); align-items: center; }
.cf__lead { min-width: 0; }
.cf__client {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.cf__client::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.cf__figures { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 34px); margin: clamp(18px, 2.4vw, 26px) 0 0; }
.cf__fig { display: flex; flex-direction: column; gap: 3px; }
.cf__fig b { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.02em; color: var(--ink); }
.cf__fig span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.cf__report { min-width: 0; margin: 0; }
.cf__report img {
  width: 100%; height: auto; display: block; border-radius: var(--r-md);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.cf__report figcaption {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); text-align: right;
}
.cf:nth-of-type(even) .cf__lead { order: 2; }
.cf:nth-of-type(even) .cf__report figcaption { text-align: left; }
@media (max-width: 900px) {
  .cf { grid-template-columns: 1fr; gap: var(--s-xl); }
  .cf:nth-of-type(even) .cf__lead { order: 0; }
  .cf__report figcaption { text-align: left; }
}

/* ==========================================================================
   Creative showcase.
   Card size is capped by the footage, not by taste: the reel clips are 478x850,
   so a card wider than ~250 CSS px would be upscaled and fall apart. The 4K
   brand films get the large frame instead.
   ========================================================================== */
.cw__head { text-align: center; max-width: 780px; margin: 0 auto clamp(30px, 3.6vw, 46px); }
.cw__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash);
}
.cw__eyebrow::before, .cw__eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.cw__title { font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(30px, 4.6vw, 58px); letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); }
.cw__sub { margin: clamp(14px, 1.8vw, 20px) auto 0; max-width: 56ch;
  font-family: var(--font-favorit); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.62; color: var(--muted); }

/* --- the brand films, full width, 4K source so it can take the size --- */
.cw__films { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(12px, 1.4vw, 20px); margin-bottom: clamp(40px, 5vw, 70px); }
.cw__film {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #141414; cursor: pointer;
  aspect-ratio: 16 / 9;
  transition: border-color .45s ease;
}
.cw__film:hover { border-color: var(--hairline-strong); }
.cw__film video, .cw__film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw__film--tall { grid-row: span 2; aspect-ratio: auto; }
.cw__film figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(10,10,10,.88), transparent);
  pointer-events: none;
}
.cw__film-t { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 23px); letter-spacing: -0.02em; color: #fff; }
.cw__film-m { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.cw__film::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(10,10,10,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
  background-size: 13px; background-repeat: no-repeat; background-position: 11px center;
  transition: opacity .3s ease;
}
.cw__film.is-playing::after { opacity: 0; }
@media (max-width: 860px) { .cw__films { grid-template-columns: 1fr; } .cw__film--tall { grid-row: auto; aspect-ratio: 16/9; } }

/* --- the reel strip --- */
.cw__tabs { display: flex; justify-content: center; gap: 4px; margin: 0 auto clamp(26px, 3vw, 36px);
  padding: 4px; width: max-content; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full); }
.cw__tab { appearance: none; border: 0; cursor: pointer; padding: 10px 24px; border-radius: var(--r-full);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--muted); background: transparent;
  transition: background .35s ease, color .35s ease; }
.cw__tab:hover { color: var(--ink); }
.cw__tab[aria-selected="true"] { background: var(--accent); color: #0A0A0A; }
.cw__count { opacity: .55; margin-left: 7px; font-size: 12px; }
.cw__panel[hidden] { display: none; }

.cw__viewport {
  position: relative; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cw__viewport::-webkit-scrollbar { display: none; }
.cw__viewport.is-dragging { cursor: grabbing; }
.cw__viewport.is-dragging .cw__card { pointer-events: none; }
.cw__track { display: flex; width: max-content; gap: 14px; }

/* 236px wide keeps a 478px-wide source sharp even at 2x device pixels */
.cw__card { position: relative; flex: 0 0 auto; margin: 0;
  width: 236px; aspect-ratio: 9 / 16;
  overflow: hidden; border-radius: var(--r-md);
  background: linear-gradient(135deg, #1E1E1E, #141414);
  border: 1px solid var(--line); cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .45s ease; }
.cw__card:hover { transform: translateY(-6px); border-color: var(--hairline-strong); }
.cw__card img, .cw__card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw__card--wide video { object-fit: contain; background: #0C0C0C; }
.cw__card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 12px 11px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10,10,10,.85), transparent); pointer-events: none; }
.cw__card--video::after { content: ""; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(10,10,10,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
  background-size: 10px; background-repeat: no-repeat; background-position: 9px center;
  transition: opacity .3s ease; }
.cw__card--video.is-playing::after { opacity: 0; }
.cw__hint { text-align: center; margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ash); }
@media (prefers-reduced-motion: reduce) {
  .cw__card, .cw__card:hover, .cw__film { transition: none; transform: none; }
}

/* ==========================================================================
   Work page bands - same card language as the home showcase, one row each.
   ========================================================================== */
.wband { padding: clamp(44px, 5.5vw, 82px) 0; border-top: 1px solid var(--line); }
.wband:first-of-type { border-top: 0; }
.wband__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(14px, 2.4vw, 30px); margin-bottom: clamp(22px, 2.8vw, 34px);
}
.wband__no { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--stone); }
.wband__name { margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.2vw, 52px); letter-spacing: -0.04em; line-height: .95; color: var(--ink); }
.wband__note { margin: 0; max-width: 34ch; text-align: right;
  font-family: var(--font-favorit); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.55; color: var(--muted); }
.wband .cw__track { padding-inline: max(var(--s-2xl), calc((100vw - var(--container)) / 2)); }
/* stills are 4:5, films are 9:16 - both locked to a height the source can carry */
.cw__card--still { width: 300px; aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  .wband__head { grid-template-columns: auto 1fr; }
  .wband__note { grid-column: 1 / -1; text-align: left; max-width: none; margin-top: 6px; }
  .cw__card--still { width: 232px; }
}
.cw__films--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cw__films--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Service phases - each phase gets a stated outcome and a numeral you can
   actually see, so the page has structure instead of three identical lists.
   ========================================================================== */
.svc-group { position: relative; }
.svc-group + .svc-group { margin-top: clamp(56px, 6.5vw, 100px); }
.svc-group__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end;
  gap: clamp(14px, 2.2vw, 28px);
  padding-bottom: clamp(16px, 2vw, 22px); margin-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.svc-group__no {
  font-family: var(--font-display); font-weight: 700; line-height: .8;
  font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.4px var(--stone);
}
.svc-group__title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.2vw, 54px); letter-spacing: -0.04em; line-height: .95; color: var(--ink);
}
.svc-group__desc {
  margin: 0; max-width: 30ch; text-align: right;
  font-family: var(--font-favorit); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.55; color: var(--muted);
}
/* the outcome line: what the phase is actually for */
.svc-group__out {
  grid-column: 1 / -1; margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(16px, 1.9vw, 21px); letter-spacing: -0.02em; color: var(--ink);
}
.svc-group__out b { font-weight: 700; }
.svc-group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 5vw, 80px); }
.svc {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  column-gap: var(--s-lg); padding: clamp(20px, 2.2vw, 26px) 0;
  border-top: 1px solid var(--line);
  transition: border-color .5s ease, padding-left .5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover { border-color: var(--hairline-strong); padding-left: 10px; }
.svc__icon {
  grid-row: 1 / 3; align-self: start; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line);
  transition: color .45s ease, background .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc__icon svg { width: 19px; height: 19px; }
.svc:hover .svc__icon { color: #0A0A0A; background: #FFFFFF; transform: translateY(-2px); }
.svc__title { grid-column: 2; margin: 3px 0 var(--s-sm); font-family: var(--font-display);
  font-weight: 700; font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -0.02em; color: var(--ink); }
.svc__body { grid-column: 2; margin: 0; font-family: var(--font-favorit);
  font-size: 14.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 767px) {
  .svc-group__head { grid-template-columns: auto 1fr; }
  .svc-group__desc { grid-column: 1 / -1; text-align: left; max-width: none; margin-top: 8px; }
  .svc-group__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Proof strip - a short evidence break so a service page is not all claims.
   ========================================================================== */
.pstrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-deep); padding: clamp(38px, 4.6vw, 64px) 0; }
.pstrip__inner { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center;
  gap: clamp(20px, 3vw, 48px); }
.pstrip__item { display: flex; flex-direction: column; gap: 6px; }
.pstrip__n { font-family: var(--font-display); font-weight: 700; line-height: .9;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.04em; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pstrip__n .cur { font-size: .5em; vertical-align: super; font-weight: 500; margin-right: 2px; }
.pstrip__l { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 860px) {
  .pstrip__inner { grid-template-columns: 1fr 1fr; }
  .pstrip__inner .btn { grid-column: 1 / -1; justify-self: start; }
}

/* a quiet divider line between service phases so the page breathes */
.svc-break { display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: clamp(46px, 5.5vw, 78px) 0; }
.svc-break::before, .svc-break::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.svc-break span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--stone); }

/* ==========================================================================
   What you get - the offer, as four panels. This is the one section a
   prospect reads to answer "so what actually lands on my desk", so it gets
   real surfaces rather than another hairline list.
   ========================================================================== */
.deliv {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.deliv__item {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transition: border-color .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), background .5s ease;
}
.deliv__item:hover {
  border-color: var(--hairline-strong); transform: translateY(-4px);
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
}
/* the numeral sits behind the content, like a plate number */
.deliv__n {
  position: absolute; top: clamp(10px, 1.4vw, 18px); right: clamp(14px, 1.8vw, 24px); z-index: -1;
  font-family: var(--font-display); font-weight: 700; line-height: .8;
  font-size: clamp(58px, 7vw, 104px); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.10);
  pointer-events: none; user-select: none;
}
.deliv__icon {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  border-radius: 12px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.deliv__icon svg { width: 21px; height: 21px; }
.deliv__item:hover .deliv__icon { background: #FFFFFF; color: #0A0A0A; transform: translateY(-2px); }
.deliv__t {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -0.025em; color: var(--ink);
}
.deliv__d {
  margin: 0 0 clamp(18px, 2.2vw, 24px); font-family: var(--font-favorit);
  font-size: 14.8px; line-height: 1.62; color: var(--muted); max-width: 42ch;
}
/* what the client physically receives, so the promise stays concrete */
.deliv__get {
  margin-top: auto; padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
}
.deliv__get::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ash); flex: none;
}
@media (max-width: 767px) {
  .deliv { grid-template-columns: 1fr; }
  .deliv__d { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deliv__item, .deliv__item:hover { transition: none; transform: none; }
}

/* band meta: the factual line under each industry note */
.wband__meta { display: block; margin-top: 7px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* ==========================================================================
   Spacing pass. Trailing CTAs were sitting flush against the block above
   them with margin-top: 0, which read as crowded. One rhythm for all of them.
   ========================================================================== */
.reel__more {
  margin: clamp(34px, 4vw, 56px) 0 0;
  text-align: center;
}
/* when a hint line already sits above the CTA, the hint owns the top space */
.cw__hint + .reel__more { margin-top: clamp(18px, 2.2vw, 26px); }
.cw__hint { margin-top: clamp(26px, 3vw, 38px); }

/* the capability cluster: give the button its own breathing room, and let the
   words group tightly so it reads as "three things, then an action" */
.caps { gap: clamp(10px, 1.4vw, 18px); }
.caps__more { margin-left: clamp(12px, 2vw, 26px); }

/* the case-file note and its CTA should not collide */
.cf__note { margin-bottom: 0; }

/* proof strip: the button is an action, not a fourth statistic */
.pstrip__inner { gap: clamp(20px, 3vw, 48px); }
.pstrip__inner .btn { justify-self: end; }
@media (max-width: 860px) { .pstrip__inner .btn { justify-self: start; margin-top: 6px; } }

/* work page bands: room between the heading block and the rail */
.wband__head { margin-bottom: clamp(24px, 3vw, 38px); }
.wband + .wband { margin-top: clamp(6px, 1vw, 14px); }

/* deliverable and step grids need air before a following CTA */
.deliv + .reel__more { margin-top: clamp(30px, 3.6vw, 48px); }

/* the two CTAs in a closing block should not touch on small screens */
.close__ctas { gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(26px, 3vw, 38px); }

/* section headers: consistent distance to whatever follows */
.head { margin-bottom: clamp(34px, 4vw, 52px); }
.cw__head { margin-bottom: clamp(34px, 4vw, 52px); }

/* ==========================================================================
   Work band heads, corrected.
   The note column was too narrow, so the result line orphaned its last word
   ("ROAS" alone on a second line). The numeral also floated away from the
   name it belongs to. Bands stay left-aligned on purpose: the rail below
   starts at the left edge, so the eye should start there too.
   ========================================================================== */
.wband__head {
  display: grid;
  grid-template-columns: auto 1fr minmax(280px, 34%);
  align-items: baseline;
  column-gap: clamp(16px, 2.4vw, 32px);
  margin-bottom: clamp(26px, 3.2vw, 40px);
}
.wband__no {
  font-family: var(--font-display); font-weight: 700; line-height: .8;
  font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.2px var(--stone);
}
.wband__name {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.2vw, 52px); letter-spacing: -0.04em; line-height: .95;
  color: var(--ink);
}
.wband__note {
  margin: 0; text-align: right; text-wrap: pretty;
  font-family: var(--font-favorit); font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55; color: var(--muted);
}
/* the result line sits under the note, never sharing its wrap */
.wband__note .wband__meta, .wband__note b {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
  text-wrap: balance;
}
@media (max-width: 900px) {
  .wband__head { grid-template-columns: auto 1fr; row-gap: 10px; }
  .wband__note { grid-column: 1 / -1; text-align: left; }
  .wband__note .wband__meta, .wband__note b { text-wrap: pretty; }
}

/* ==========================================================================
   HOME REBUILD 2026-08-17
   VSL film · client wall · branding creatives · review grid
   ========================================================================== */

.container--narrow { max-width: 1040px; }

/* --------------------------------------------------------------- VSL ----- */
.vsl { padding-top: clamp(34px, 4vw, 56px); }
/* capped at 960px so a 1920-wide master is still exact on a 2x display */
.vsl__frame {
  position: relative; margin: 0 auto; overflow: hidden;
  max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-deep);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.vsl__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsl__play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(58px, 6vw, 78px); height: clamp(58px, 6vw, 78px);
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--r-full);
  background: rgba(10, 10, 10, .46); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .35s ease, border-color .35s ease;
}
.vsl__play svg { width: 40%; height: 40%; margin-left: 8%; }
.vsl__play:hover { transform: scale(1.07); background: rgba(10, 10, 10, .62); border-color: rgba(255,255,255,.6); }
.vsl__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vsl__frame.is-playing .vsl__play { opacity: 0; pointer-events: none; }

/* placeholder state, shown until assets/vsl/vsl.mp4 exists */
.vsl__slot {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 1.8vw, 20px); text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 62%),
    var(--surface-deep);
}
.vsl__slot-mark { display: block; width: clamp(30px, 3.4vw, 42px); color: var(--stone); }
.vsl__slot-mark .smark { width: 100%; height: auto; display: block; }
.vsl__slot-t {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash);
}
.vsl__frame.is-empty .vsl__slot { display: flex; }
.vsl__frame.is-empty .vsl__video,
.vsl__frame.is-empty .vsl__play { display: none; }

.vsl__cap {
  margin: clamp(16px, 1.8vw, 22px) 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash);
}

@media (prefers-reduced-motion: reduce) {
  .vsl__play, .vsl__play:hover { transition: none; transform: none; }
}

/* ----------------------------------------------------------- CLIENTS ----- */
.clients { padding: clamp(30px, 4vw, 52px) 0 clamp(38px, 4.6vw, 62px); background: var(--bg); overflow: hidden; }
.clients__label {
  text-align: center; margin: 0 0 clamp(22px, 2.8vw, 32px);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash);
}
.clients__row { display: flex; width: max-content; animation: clientDrift 52s linear infinite; }
.clients:hover .clients__row { animation-play-state: paused; }
.clients__set {
  display: flex; align-items: center;
  gap: clamp(34px, 5vw, 76px); padding-right: clamp(34px, 5vw, 76px);
}
.clients__item { display: inline-flex; align-items: center; }
.clients__name {
  font-family: var(--font-display); font-weight: 500; white-space: nowrap;
  font-size: clamp(15px, 1.7vw, 21px); letter-spacing: -0.01em;
  color: var(--muted); transition: color .4s ease;
}
.clients__item:hover .clients__name { color: var(--ink); }
/* colour logo files land here, no other change needed */
.clients__logo {
  display: block; width: auto; height: clamp(26px, 2.8vw, 38px);
  max-width: 190px; object-fit: contain;
  opacity: .82; transition: opacity .4s ease;
}
.clients__item:hover .clients__logo { opacity: 1; }
.clients {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
@keyframes clientDrift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .clients__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 20px; }
  .clients__set:last-child { display: none; }
  .clients { -webkit-mask-image: none; mask-image: none; }
}

}


/* ==========================================================================
   Industry landing pages (travel.html and the ones that follow)
   ========================================================================== */

/* vertical reels in a plain centred row; three cards is too few for a rail
   that has to loop, and 236px keeps a 478px-wide source sharp at 2x */
.reel-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.4vw, 16px);
  margin-top: clamp(14px, 1.6vw, 20px);
}



/* An odd number of deliverables in a two-column grid would leave the last row
   half empty. The lone item spans instead. Used by the home page offer grid. */
.deliv__item:nth-child(odd):last-child { grid-column: 1 / -1; }

/* ==========================================================================
   LANDING PAGES (.lp-*) - its own system, deliberately not the home system.
   Type scale measured off genflow.com and amrafarooq.com at 1280:
   h1 72/58, h2 64/48 at weight 700 and leading 1.0, body 18-20, padding 96.
   The home page runs much smaller type and tiny mono eyebrows, and that
   density is what made the first landing pages read as a remix of it.
   ========================================================================== */

.lp-sec { padding: clamp(76px, 8.5vw, 124px) 0; }
.lp-sec--alt { background: var(--surface-deep); border-block: 1px solid var(--line); }
.lp-wrap { width: min(100% - 2 * clamp(18px, 4vw, 40px), 1180px); margin-inline: auto; }
.lp-wrap--narrow { max-width: 880px; }

.lp-eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--font-favorit); font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500; letter-spacing: 0; color: var(--ash);
}
.lp-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -0.042em;
  color: var(--ink); text-wrap: balance;
}
.lp-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.7vw, 62px); line-height: 1.02; letter-spacing: -0.038em;
  color: var(--ink); text-wrap: balance;
}
.lp-lead {
  margin: clamp(18px, 2vw, 26px) 0 0; max-width: 56ch;
  font-family: var(--font-favorit); font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.5; color: var(--muted); text-wrap: pretty;
}

/* --------------------------------------------------------------- hero --- */
.lp-hero { padding: calc(var(--nav-h, 72px) + clamp(52px, 7vw, 104px)) 0 clamp(64px, 7vw, 104px); }
.lp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(30px, 4.5vw, 68px); align-items: center;
}
.lp-hero__cta { margin: clamp(28px, 3.2vw, 40px) 0 0; }
.lp-hero__trust {
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
  font-family: var(--font-favorit); font-size: 14px; color: var(--ash);
}
.lp-hero__film {
  margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-deep); box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.lp-hero__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .lp-hero { padding-top: calc(var(--nav-h, 72px) + clamp(22px, 5vw, 34px)); }
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 5vw, 30px); }
  .lp-hero__film { order: -1; }
}

/* ------------------------------------------------------ the creative ---- */
/* 416px keeps an 848-wide source sharp at 2x, 236px does the same for 478. */
.lp-reels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(34px, 4vw, 52px);
}
.lp-wide, .lp-reel {
  position: relative; margin: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(135deg, #1E1E1E, #141414);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .45s ease;
}
.lp-wide { width: min(416px, 100%); aspect-ratio: 16 / 9; }
.lp-reel { width: 236px; aspect-ratio: 9 / 16; }
.lp-wide:hover, .lp-reel:hover { transform: translateY(-6px); border-color: var(--hairline-strong); }
.lp-wide video, .lp-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------- posters ---- */
/* One shared height, widths follow each poster aspect ratio, so the landscape
   piece and the tall ones sit in one row without any cropping. */
.lp-posters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(34px, 4vw, 52px);
}
.lp-poster {
  margin: 0; overflow: hidden; height: clamp(240px, 30vw, 420px);
  width: calc(clamp(240px, 30vw, 420px) * var(--ar, 0.75));
  max-width: 100%; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
}
.lp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------ stats ---- */
.lp-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(44px, 5vw, 72px);
}
.lp-stat { margin: 0; }
.lp-stat__n {
  margin: 0; display: flex; align-items: flex-start; gap: 2px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(52px, 7.6vw, 112px); line-height: .92; letter-spacing: -0.05em;
  color: var(--ink);
}
.lp-stat__cur { font-size: .48em; line-height: 1.5; color: var(--muted); }
.lp-stat__l {
  margin: clamp(14px, 1.6vw, 20px) 0 0; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -0.02em; color: var(--ink);
}
.lp-stat__note {
  margin: 6px 0 0; font-family: var(--font-favorit);
  font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.5; color: var(--ash);
}
@media (max-width: 820px) { .lp-stats { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 7vw, 44px); } }

/* ------------------------------------------------------- what you get -- */
.lp-get { list-style: none; margin: clamp(40px, 4.6vw, 64px) 0 0; padding: 0; }
.lp-get__row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(14px, 3vw, 48px); align-items: baseline;
  padding: clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid var(--line);
}
.lp-get__row:last-child { border-bottom: 1px solid var(--line); }
.lp-get__t {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink);
}
.lp-get__b {
  margin: 0; font-family: var(--font-favorit);
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55; color: var(--muted);
}
.lp-price {
  margin: clamp(30px, 3.4vw, 44px) 0 0; max-width: 62ch;
  font-family: var(--font-favorit); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55; color: var(--ash);
}
@media (max-width: 720px) { .lp-get__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ----------------------------------------------------------- people ---- */
.lp-people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px); margin-top: clamp(40px, 4.6vw, 64px);
}
.lp-person { display: grid; grid-template-columns: clamp(96px, 11vw, 136px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 22px); align-items: center; margin: 0; }
/* height:auto is required. The markup carries width/height attributes and the
   HTML height attribute is a presentational hint that beats aspect-ratio,
   which stretched these portraits to their full 1920px intrinsic height. */
.lp-person img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--line);
}
.lp-person__t h3 { margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -0.03em; color: var(--ink); }
.lp-person__t p { margin: 7px 0 0; font-family: var(--font-favorit);
  font-size: clamp(14px, 1.45vw, 16px); line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) { .lp-people { grid-template-columns: minmax(0, 1fr); } }


/* ------------------------------------------------------------ close ---- */
.lp-close { background: var(--surface-deep); border-top: 1px solid var(--line); text-align: center; }
.lp-close .lp-lead { margin-inline: auto; }
.lp-form { margin: clamp(34px, 4vw, 50px) auto 0; max-width: 560px; text-align: left; }
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
/* the adjacent-sibling margin must not apply inside the two-column row, or the
   second field drops below the first instead of sitting level with it */
.lp-form > .qfield + .qfield,
.lp-form__row + .qfield { margin-top: var(--s-lg); }
.lp-form__row .qfield { margin-top: 0; }
.lp-form .btn { width: 100%; margin-top: var(--s-xl); }
.lp-close__alt { margin: clamp(18px, 2vw, 24px) 0 0; font-family: var(--font-favorit);
  font-size: 14.5px; color: var(--ash); }
.lp-close__alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .lp-form__row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .lp-wide, .lp-reel, .lp-wide:hover, .lp-reel:hover { transition: none; transform: none; }
}
.lp-hero__copy { min-width: 0; }

/* the single wide cutdown sits in the reel row, aligned to the top */
.lp-reels { align-items: flex-start; }

/* ==========================================================================
   Landing hero, centred, and the numbers rebuilt to the genflow pattern.
   These override the earlier .lp- rules, so they must stay after them.
   ========================================================================== */

/* ---- hero: everything on the centre line, no image beside the copy ------ */
.lp-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--nav-h, 72px) + clamp(64px, 9vw, 132px)) 0 clamp(72px, 9vw, 128px);
}
.lp-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 150%;
  background: radial-gradient(60% 55% at 50% 32%, rgba(255,255,255,.075), transparent 70%);
  pointer-events: none;
}
.lp-hero__inner { position: relative; max-width: 940px; }
.lp-hero .lp-h1 { margin-inline: auto; max-width: 16ch; }
.lp-hero .lp-lead { margin-inline: auto; max-width: 60ch; }
.lp-hero__cta { margin: clamp(30px, 3.4vw, 42px) 0 0; }
.lp-hero__trust {
  display: inline-block; margin: clamp(24px, 2.8vw, 34px) auto 0;
  padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--line);
  font-family: var(--font-favorit); font-size: 14px; color: var(--ash);
}

/* the brand film now leads the creative section instead of the hero */
.lp-filmlead {
  margin: clamp(34px, 4vw, 52px) auto 0; max-width: 960px; overflow: hidden;
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-deep);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.lp-filmlead video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-filmlead figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10,10,10,.85), transparent); pointer-events: none;
}

/* ---- numbers: accent bar, soft glow, white figure, grey suffix ---------- */
.lp-stats { align-items: start; }
.lp-stat {
  position: relative; isolation: isolate;
  padding-left: clamp(20px, 2.2vw, 30px);
}
/* the vertical light bar */
.lp-stat::before {
  content: ""; position: absolute; left: 0; top: clamp(4px, .6vw, 10px);
  width: 2px; height: clamp(58px, 6.4vw, 92px);
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
}
/* the glow sitting behind it */
.lp-stat::after {
  content: ""; position: absolute; z-index: -1;
  left: clamp(-46px, -4vw, -30px); top: clamp(-16px, -1.6vw, -8px);
  width: clamp(120px, 13vw, 180px); height: clamp(120px, 13vw, 180px);
  background: radial-gradient(circle, rgba(255,255,255,.13), transparent 66%);
  pointer-events: none;
}
.lp-stat__n { align-items: baseline; }
.lp-stat__v { color: var(--ink); }
.lp-stat__cur { font-size: .5em; line-height: 1; color: var(--ink); margin-right: .02em; }
.lp-stat__suf { color: rgba(255, 255, 255, 0.42); }
@media (prefers-reduced-motion: reduce) { .lp-stat::after { display: none; } }

/* the role sits between the name and the one-line description */
.lp-person__role {
  margin: 5px 0 0 !important; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash);
}
.lp-person__role + p { margin-top: 9px !important; }
/* the client names sit quieter than the segment line above them */
.lp-hero__clients { display: inline-block; margin-top: 5px; color: var(--muted); }

/* captions on the creative cards, same language as the poster gallery */
.lp-wide figcaption, .lp-reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10,10,10,.85), transparent); pointer-events: none;
}
/* a quiet line under the numbers */
.lp-note {
  margin: clamp(30px, 3.4vw, 44px) 0 0; max-width: 60ch;
  font-family: var(--font-favorit); font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1.55; color: var(--ash);
}
/* what happens after the form is sent */
.lp-next {
  list-style: none; counter-reset: n; margin: clamp(26px, 3vw, 36px) auto 0;
  padding: 0; max-width: 460px; text-align: left;
  display: flex; flex-direction: column; gap: 11px;
}
.lp-next li {
  counter-increment: n; position: relative; padding-left: 32px;
  font-family: var(--font-favorit); font-size: clamp(14px, 1.45vw, 15.5px);
  line-height: 1.5; color: var(--muted);
}
.lp-next li::before {
  content: counter(n); position: absolute; left: 0; top: -1px;
  width: 21px; height: 21px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: 10px; color: var(--ash);
}

/* ==========================================================================
   The two new landing sections: the problem in the customer's words, and the
   thing only Sunday claims. Both are typographic on purpose. The page already
   carries plenty of media and these two beats have to be read, not scanned.
   ========================================================================== */

/* the three things that are actually going wrong for them */
.lp-cold {
  list-style: none; margin: clamp(38px, 4.4vw, 60px) 0 0; padding: 0;
  max-width: 1000px;
}
.lp-cold__row {
  position: relative; padding: clamp(22px, 2.6vw, 32px) 0 clamp(22px, 2.6vw, 32px) clamp(34px, 3.6vw, 52px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2.3vw, 28px); line-height: 1.32; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: pretty;
}
.lp-cold__row:last-child { border-bottom: 1px solid var(--line); }
/* a quiet dash rather than a bullet or a decorative dot */
.lp-cold__row::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(22px, 2.6vw, 32px) + 0.62em);
  width: clamp(16px, 1.8vw, 24px); height: 1px; background: var(--hairline-strong);
}

}

/* ==========================================================================
   Drifting creative rails, and the questions section rebuilt with an index.
   These override the earlier .lp- rules, so they stay last.
   ========================================================================== */

/* ---- the rail ---------------------------------------------------------- */
/* One row, drifting on its own and still hand-draggable. Height is fixed and
   each card width comes from its own aspect ratio, which keeps every card
   inside its source resolution at 2x device pixels. */
.lp-rail {
  margin-top: clamp(34px, 4vw, 52px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.lp-rail .cw__track { gap: clamp(12px, 1.4vw, 18px); align-items: flex-start; padding-inline: clamp(18px, 4vw, 40px); }
.lp-rc {
  position: relative; flex: 0 0 auto; margin: 0; overflow: hidden; cursor: pointer;
  height: var(--rail-h, 420px); width: calc(var(--rail-h, 420px) * var(--ar, 0.5625));
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(135deg, #1E1E1E, #141414);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .45s ease;
}
.lp-rc:hover { transform: translateY(-6px); border-color: var(--hairline-strong); }
.lp-rc video, .lp-rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-rc figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10,10,10,.85), transparent); pointer-events: none;
}
.lp-rc--p { cursor: default; }
.lp-rc--p:hover { transform: none; }
@media (max-width: 700px) { .lp-rail { --rail-h: 300px !important; } }
@media (prefers-reduced-motion: reduce) {
  .lp-rc, .lp-rc:hover { transition: none; transform: none; }
}

/* ---- the questions, with an index so the section reads at a glance ------ */
.lp-cold {
  list-style: none; margin: clamp(38px, 4.4vw, 60px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  max-width: none;
}
.lp-cold__row {
  display: block; padding: clamp(20px, 2.2vw, 26px) 0 0;
  border-top: 2px solid var(--ink); border-bottom: 0;
  font: inherit; color: inherit;
}
.lp-cold__row::before { content: none; }
.lp-cold__n {
  display: block; margin-bottom: clamp(12px, 1.4vw, 17px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.04em;
  color: var(--stone);
}
.lp-cold__t {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.85vw, 22px); line-height: 1.38; letter-spacing: -0.022em;
  color: var(--ink); text-wrap: pretty;
}
@media (max-width: 860px) {
  .lp-cold { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-cold__row { padding-block: clamp(18px, 4vw, 24px); border-top-width: 1px; }
  .lp-cold__row:first-child { border-top: 2px solid var(--ink); }
  .lp-cold__n { display: inline-block; margin: 0 12px 0 0; font-size: 22px; vertical-align: 1px; }
  .lp-cold__t { display: inline; }
}

/* video cards take the click-to-play affordance, poster cards do not */
.lp-rc--v { cursor: pointer; }

/* ==========================================================================
   The differentiator, drawn as a sequence. The order is the whole argument:
   brand first, media last. A connecting rule with three markers says that in
   one glance, which three paragraphs of prose did not.
   Deliberately different from .lp-cold above it, which is three unconnected
   columns, so the two sections do not read as the same block twice.
   ========================================================================== */

.lp-name__lead {
  margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: 30ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px); line-height: 1.28; letter-spacing: -0.032em;
  color: var(--ink); text-wrap: balance;
}

.lp-flow {
  list-style: none; margin: clamp(46px, 5.4vw, 76px) 0 0; padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
/* the line the three markers sit on */
.lp-flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: linear-gradient(90deg, var(--hairline-strong), var(--line) 70%, transparent);
}
.lp-flow__step { position: relative; padding-top: clamp(30px, 3.4vw, 42px); }
.lp-flow__step::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px;
  border-radius: 50%; background: var(--bg);
  border: 1px solid var(--hairline-strong);
}
/* the last stage is the payoff, so its marker is filled */
.lp-flow__step:last-child::before { background: var(--ink); border-color: var(--ink); }

.lp-flow__n {
  display: block; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--ash);
}
.lp-flow__t {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.15; letter-spacing: -0.03em;
  color: var(--ink);
}
.lp-flow__b {
  margin: clamp(9px, 1.1vw, 13px) 0 0;
  font-family: var(--font-favorit); font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.55; color: var(--muted); text-wrap: pretty;
}

.lp-name__close {
  margin: clamp(40px, 4.6vw, 64px) 0 0; max-width: 56ch;
  padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); line-height: 1.4; letter-spacing: -0.022em;
  color: var(--ink); text-wrap: pretty;
}

/* the sequence runs down the left edge on narrow screens */
@media (max-width: 780px) {
  .lp-flow { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 34px; }
  .lp-flow::before { left: 7px; right: auto; top: 7px; bottom: 7px; height: auto; width: 1px;
    background: linear-gradient(180deg, var(--hairline-strong), var(--line) 70%, transparent); }
  .lp-flow__step { padding: 0 0 clamp(26px, 6vw, 34px) 0; }
  .lp-flow__step:last-child { padding-bottom: 0; }
  .lp-flow__step::before { left: -34px; top: 4px; }
}

/* ==========================================================================
   SPACING RHYTHM AND HEADING ALIGNMENT
   Measured before this existed: the gap under a heading was 26, 38, 32, 26,
   26, 46, 26, 26 across eight sections, because every component brought its
   own margin. Two steps now, and nothing else.
     --lp-gap-tight  heading to its own lead, they read as one unit
     --lp-gap-block  that unit to the content, a clear step up
   Must stay last so it settles the earlier component margins.
   ========================================================================== */

:root {
  --lp-gap-tight: clamp(16px, 1.9vw, 24px);
  --lp-gap-block: clamp(42px, 4.8vw, 66px);
}

/* heading to lead */
.lp-h1 + .lp-lead,
.lp-h2 + .lp-lead,
.lp-h2 + .lp-name__lead,
.lp-eyebrow + .lp-h2 { margin-top: var(--lp-gap-tight); }
.lp-eyebrow { margin-bottom: 0; }

/* head unit to the content underneath */
.lp-lead + .lp-hero__cta,
.lp-lead + .lp-people,
.lp-lead + .lp-form,
.lp-name__lead + .lp-flow,
.lp-h2 + .lp-cold,
.lp-h2 + .lp-stats,
.lp-lead + .lp-rail,
.lp-h2 + .lp-rail,
.lp-wrap + .lp-rail { margin-top: var(--lp-gap-block); }

/* the rail sits outside .lp-wrap, so the step has to be applied to it directly */
.lp-sec > .lp-rail { margin-top: var(--lp-gap-block); }

/* ---- heading alignment, one reason each ------------------------------- */
.lp-sec--center .lp-h2,
.lp-sec--center .lp-lead,
.lp-sec--center .lp-eyebrow { text-align: center; }
.lp-sec--center .lp-lead { margin-inline: auto; }

.lp-sec--right .lp-h2,
.lp-sec--right .lp-lead,
.lp-sec--right .lp-eyebrow { text-align: right; }
.lp-sec--right .lp-lead { margin-left: auto; margin-right: 0; }

/* on a phone a right-aligned heading reads as a mistake, so it goes back left */
@media (max-width: 700px) {
  .lp-sec--right .lp-h2,
  .lp-sec--right .lp-lead,
  .lp-sec--right .lp-eyebrow { text-align: left; }
  .lp-sec--right .lp-lead { margin-left: 0; }
}

/* ==========================================================================
   Centred differentiator and branding, plus the motion on the sequence.
   The animation is motivated: the connecting rule draws left to right and the
   three stages arrive in order, which is exactly the argument the section
   makes. Brand first, story second, media last. Stays last in the file.
   ========================================================================== */

/* the centred variant carries its whole block, not just the heading */
.lp-sec--center .lp-name__lead,
.lp-sec--center .lp-name__close {
  text-align: center; margin-left: auto; margin-right: auto;
}
.lp-sec--center .lp-name__lead { max-width: 34ch; }
.lp-sec--center .lp-name__close { max-width: 54ch; }

/* the flow, centred: the rule runs across, one marker centred per column */
.lp-sec--center .lp-flow__step { text-align: center; padding-top: clamp(34px, 3.8vw, 46px); }
.lp-sec--center .lp-flow__step::before { left: 50%; transform: translateX(-50%); }
.lp-sec--center .lp-flow__b { margin-inline: auto; max-width: 32ch; }

/* ---- the rule draws itself, then the stages arrive in order ------------ */
.lp-flow::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.lp-flow.is-visible::before { transform: scaleX(1); }

.lp-flow__step {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.lp-flow.is-visible .lp-flow__step { opacity: 1; transform: none; }
.lp-flow.is-visible .lp-flow__step:nth-child(1) { transition-delay: .30s; }
.lp-flow.is-visible .lp-flow__step:nth-child(2) { transition-delay: .55s; }
.lp-flow.is-visible .lp-flow__step:nth-child(3) { transition-delay: .80s; }

/* the marker pops as its stage lands */
.lp-flow__step::before { transition: background .4s ease .1s, border-color .4s ease .1s; }

@media (prefers-reduced-motion: reduce) {
  .lp-flow::before { transform: scaleX(1); transition: none; }
  .lp-flow__step { opacity: 1; transform: none; transition: none; }
  .lp-flow.is-visible .lp-flow__step { transition-delay: 0s; }
}

/* on a phone the rule runs down the left edge, so it draws downward */
@media (max-width: 780px) {
  .lp-sec--center .lp-flow__step { text-align: left; }
  .lp-sec--center .lp-flow__step::before { left: -34px; transform: none; }
  .lp-sec--center .lp-flow__b { margin-inline: 0; }
  .lp-flow::before { transform: scaleY(0); transform-origin: center top; }
  .lp-flow.is-visible::before { transform: scaleY(1); }
}

/* ---- the rails read as centred under a centred heading ----------------- */
/* When the duplicated card list is narrower than the viewport it would sit
   hard left, which looks like a mistake under a centred heading. */
.lp-sec--center .cw__track { margin-inline: auto; }

/* ==========================================================================
   Follow on LinkedIn, under each founder. Replaces the bio paragraph.
   The motion is a fill that wipes in from the left and an icon that lifts,
   so it reads as a live control rather than another line of text.
   ========================================================================== */

.li-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(13px, 1.5vw, 17px);
  padding: 10px 18px 10px 15px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: transparent; color: var(--ink);
  font-family: var(--font-favorit); font-size: 14px; font-weight: 500;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: color .35s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
/* the fill wipes across from the left */
.li-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.li-btn:hover { color: #0A0A0A; border-color: var(--ink); transform: translateY(-2px); }
.li-btn:hover::before { transform: scaleX(1); }
.li-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.li-btn__icon {
  width: 16px; height: 16px; flex: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.li-btn:hover .li-btn__icon { transform: translateY(-2px) scale(1.06); }

/* a slow breathing ring so the control reads as live before any hover */
.li-btn::after {
  content: ""; position: absolute; inset: -1px; z-index: -2;
  border-radius: inherit; border: 1px solid var(--hairline-strong);
  opacity: 0; animation: liPulse 3.4s ease-in-out infinite;
}
@keyframes liPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  45%      { opacity: .5; transform: scale(1.055); }
  70%      { opacity: 0; transform: scale(1.085); }
}
.li-btn:hover::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .li-btn, .li-btn::before, .li-btn__icon { transition: none; }
  .li-btn:hover { transform: none; }
  .li-btn::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   Founder portraits are cutouts now, so they need a backdrop. Both men wear
   black, and on a near-black ground the silhouette simply disappears.
   contain plus bottom alignment lets a head-and-shoulders crop and a
   three-quarter shot sit together without one being stretched to match.
   ========================================================================== */
.member__photo, .lp-person > img {
  background:
    radial-gradient(62% 60% at 50% 40%, rgba(255,255,255,.13), rgba(255,255,255,.028) 62%, transparent 78%),
    var(--surface);
}
.member__photo img, .lp-person > img {
  object-fit: contain; object-position: center bottom;
}
.lp-person > img { border-radius: var(--r-lg); border: 1px solid var(--line); }

/* ==========================================================================
   WORK LIBRARY (work.html)
   The video index. Seventeen finished cuts, filtered by industry, because a
   prospect only ever wants to see their own category. The grid is deliberately
   NOT another drifting rail: home already carries two of those, and a rail
   cannot be filtered or counted. A grid can, and it lets someone scan the
   whole body of work in one screen.
   ========================================================================== */

/* --- the lead film: one asymmetric split, the longest cut carries the page - */
.wk-lead {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 68px);
  max-width: 1000px; margin-inline: auto;
}
.wk-lead__film {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: #141414; cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: border-color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.wk-lead__film:hover { border-color: var(--hairline-strong); transform: translateY(-4px); }
.wk-lead__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-lead__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.1;
  margin: 0 0 var(--lp-gap-tight);
}
.wk-lead__body { color: var(--ink-body); max-width: 46ch; margin: 0 0 22px; line-height: 1.65; }
.wk-lead__facts { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.wk-lead__facts div { display: grid; gap: 3px; }
.wk-lead__k {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.wk-lead__v { font-size: 15px; font-weight: 500; color: var(--ink); }
@media (max-width: 760px) {
  .wk-lead { grid-template-columns: 1fr; gap: 26px; }
  .wk-lead__film { max-width: 300px; margin-inline: auto; }
}

/* --- the filter: a real control, not decoration ---------------------------
   Reuses the .cw__tabs pill so it reads as the same site. Scrolls sideways
   on a phone rather than wrapping to two rows. */
.wk-filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wk-filter::-webkit-scrollbar { display: none; }
.wk-filter .cw__tabs { flex-wrap: nowrap; }
.wk-filter .cw__tab { white-space: nowrap; }

/* --- the grid ------------------------------------------------------------ */
/* An explicit column ladder rather than auto-fill. auto-fill sized the cards
   off a minimum, which left the 16:9 films as 312x175 stubs sitting next to
   555px tall portraits, and that mismatch is what made the grid look cheap.
   Three columns on desktop, and a landscape film takes two of them so it
   carries the same visual weight as a portrait one. */
.wk-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 620px) { .wk-grid { gap: clamp(16px, 1.8vw, 24px); } }
@media (min-width: 1000px) { .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-item--wide { grid-column: span 2; }
.wk-item { margin: 0; min-width: 0; }
.wk-item[hidden] { display: none; }

/* the card itself inherits every .cw__card--video behaviour from main.js;
   only the rail's fixed width has to be undone for a grid context */
.wk-grid .cw__card { width: auto; flex: initial; }
.wk-grid .cw__card--wide { aspect-ratio: 16 / 9; }
.wk-grid .cw__card--wide video { object-fit: cover; }

.wk-meta { padding: 13px 2px 0; }
.wk-meta__t {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
}
.wk-meta__c { margin: 5px 0 0; font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
.wk-meta__f {
  margin: 7px 0 0; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.wk-empty { padding: 60px 0; text-align: center; color: var(--ink-mute); }
.wk-empty[hidden] { display: none; }

/* On a phone auto-fill drops to a single 358px column, which makes a 9:16 card
   636px tall and turns sixteen of them into an endless scroll. Two fixed
   columns keep a card at reel-thumbnail size, which is how these are watched
   everywhere else anyway. */
@media (max-width: 620px) {
  .wk-meta { padding-top: 10px; }
  .wk-meta__t { font-size: 13.5px; }
  .wk-meta__c { font-size: 12px; margin-top: 3px; }
  .wk-meta__f { font-size: 9.5px; letter-spacing: 0.12em; margin-top: 5px; }
}

/* --- the count line under the filter ------------------------------------- */
.wk-scope {
  margin: 0 0 clamp(22px, 2.6vw, 32px); text-align: center;
  font-size: 13px; color: var(--ink-mute);
}

/* ==========================================================================
   THE MARK INFOGRAPHIC (about.html)
   The board is a near-white artwork and this site is near-black, so shipping
   it raw put a lit rectangle in the middle of a dark page. It is a greyscale
   board, so inverting it is lossless in hue and lands it in the page's own
   theme instead of fighting it. On a phone the board is only ~305px wide and
   its labels are unreadable at that size, so the figure becomes a link to the
   full-size file and says so.
   ========================================================================== */
.logo-figure img { filter: invert(1) hue-rotate(180deg); }
.logo-figure__open {
  display: block; margin: 0; border-radius: var(--r-md);
  outline-offset: 4px;
}
.logo-figure__open:focus-visible { outline: 2px solid var(--accent); }
.logo-figure__hint {
  display: none; margin-top: 14px; text-align: center;
  font-size: 12px; letter-spacing: 0.02em; color: var(--ink-mute);
}
.logo-figure__hint a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .logo-figure__hint { display: block; }
}

/* ==========================================================================
   VSL, vertical variant
   Travel's film is a 9:16 cut, and letterboxing it inside the 16:9 frame
   would shrink it to a strip down the middle. The frame takes the film's own
   shape instead, and the caption underneath says whose film it is so a client
   piece is never mistaken for a Sunday showreel.
   ========================================================================== */
/* Sized off the VIEWPORT HEIGHT, not a fixed width. A 9:16 film in a 400px
   wide frame is 711px tall, which is taller than most laptop viewports, so the
   film could never be seen in one piece. Driving it from height means the whole
   film is always on screen, and the width follows from the aspect ratio. */
.vsl__frame--tall {
  aspect-ratio: 9 / 16;
  height: min(66vh, 620px);
  width: auto; max-width: 92vw;
  margin-inline: auto;
}
@media (max-width: 480px) { .vsl__frame--tall { height: min(62vh, 520px); } }

.vsl__credit {
  margin: clamp(16px, 2vw, 22px) auto 0; max-width: 46ch; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--ink-mute);
}
.vsl__credit strong { color: var(--ink); font-weight: 500; }

/* The doorway from a rail into the full library. A rail can only ever show a
   slice, so every rail that is a subset says where the rest lives. */
.wk-more { margin: clamp(22px, 2.6vw, 32px) 0 0; text-align: center; }
.wk-more a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color .35s ease, color .35s ease;
}
.wk-more a::after { content: "\2192"; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.wk-more a:hover { border-color: var(--accent); }
.wk-more a:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .wk-more a::after { transition: none; } }

/* Vertical feature films. The 2026 batch is shot 9:16, so the film grid needs
   a portrait mode; the old 16:9 rules stay untouched for the older cuts. */
.cw__films--v { grid-template-columns: repeat(3, 1fr); align-items: start; }
.cw__films--v .cw__film { aspect-ratio: 9 / 16; }
@media (max-width: 860px) { .cw__films--v { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cw__films--v { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOME STATEMENT: the mechanism sits inside the statement band
   .lp-flow is shared with the industry pages, but its centred variant is
   gated behind .lp-sec--center, which carries section styling this band does
   not want. So the three centring rules are mirrored here instead of pulling
   in the whole modifier.
   ========================================================================== */
.statement .lp-flow__step { text-align: center; padding-top: clamp(34px, 3.8vw, 46px); }
.statement .lp-flow__step::before { left: 50%; transform: translateX(-50%); }
.statement .lp-flow__b { margin-inline: auto; max-width: 32ch; }
.statement .lp-flow { max-width: 900px; margin-inline: auto; }

/* The spend floor under the fit list. Deliberately plain: it is a filter, not
   a sales line, and it reads as more honest when it is not styled up. */
.fit-floor {
  margin: clamp(30px, 3.4vw, 44px) auto 0; max-width: 54ch; text-align: center;
  font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.6; color: var(--ink-mute);
}
.fit-floor strong { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* Two ways to send the same answers. Every primary CTA on this site opens
   WhatsApp, which is a dead end for a desktop visitor who is not signed into
   WhatsApp Web, so email is a real button rather than a footnote. */
.qform__foot { flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); }
.lp-form__foot { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); align-items: center; }
@media (max-width: 560px) {
  .lp-form__foot .btn, .qform__foot .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   ABOUT: the named proof under the origin section
   A pull quote rather than another testimonial card, because on this page it
   is evidence for the claim directly above it, not one review among nine.
   ========================================================================== */
.origin-proof {
  margin: clamp(48px, 5.4vw, 76px) auto 0; max-width: 760px; text-align: center;
  padding-top: clamp(30px, 3.4vw, 44px); border-top: 1px solid var(--ink-line);
}
.origin-proof blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.3vw, 28px); line-height: 1.35; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty;
}
.origin-proof blockquote::before { content: "\201C"; }
.origin-proof blockquote::after  { content: "\201D"; }
.origin-proof figcaption { display: grid; gap: 4px; margin-top: clamp(18px, 2vw, 26px); }
.origin-proof__who  { font-size: 15px; font-weight: 500; color: var(--ink); }
.origin-proof__role { font-size: 13px; color: var(--ink-mute); }
.origin-proof__stat {
  margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-mute);
  max-width: 46ch; margin-inline: auto;
}
/* the flow markers sit on the section ground, which is darker here */
.section--dark .lp-flow__step::before { background: var(--surface-deep); }
#origin .lp-flow__step { text-align: center; padding-top: clamp(34px, 3.8vw, 46px); }
#origin .lp-flow__step::before { left: 50%; transform: translateX(-50%); }
#origin .lp-flow__b { margin-inline: auto; max-width: 32ch; }
#origin .lp-flow { max-width: 900px; margin-inline: auto; }

/* The VSL sections are parked until Sunday's own films are shot. `hidden` alone
   is fragile here because .section and .lp-sec both set layout properties, so
   the intent is stated explicitly. */
#vsl[hidden] { display: none; }

/* ==========================================================================
   ABOUT: the founders, and the logo board that was out-shouting them
   The card is a two column grid and its text lives in .member__text. Without
   that wrapper the loose paragraphs auto-place into column one and the role
   and proof lines stack under the photo in a 168px gutter, which is what made
   this section look broken.
   ========================================================================== */
.member { align-items: start; grid-template-columns: clamp(132px, 17vw, 210px) minmax(0, 1fr); }
.member__text { display: grid; align-content: start; }

/* Real photographs rather than cut-outs: essa.jpg is 1920 square on a black
   ground and shaheer.jpg is 918x1152, so both carry a 210px card at 2x, which
   the 512 and 334 wide cut-outs could not. They fill the frame, so the radial
   backdrop underneath never shows. */
.member__photo--full { border: 1px solid var(--line); }
.member__photo--full img { object-fit: cover; object-position: center top; }

/* This page is the company's story, so the logo explainer is an exhibit, not
   the hero. It was 1136px wide against 168px founder portraits. */
.logo-figure { max-width: 880px; }

/* Purpose, vision and mission read as three floating paragraphs. Hairlines
   between them make it one considered set instead. */
@media (min-width: 768px) {
  .compass-item + .compass-item {
    padding-left: var(--s-2xl);
    border-left: 1px solid var(--line);
  }
  .compass-strip { gap: 0; grid-template-columns: repeat(3, 1fr); }
  .compass-item { padding-right: var(--s-2xl); }
  .compass-item:last-child { padding-right: 0; }
}

/* On a phone the card's two columns leave the bio in a 210px gutter. Stack it:
   portrait first at a size worth looking at, then the copy underneath. */
@media (max-width: 560px) {
  .member { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 18px); }
  .member__photo { max-width: 240px; }
}