/* ===========================================================================
   Download — content pages (everything BELOW the pinned intro).
   Scoped under .pages / .topbar / .site-footer so it never touches the intro,
   camcorder or animation. Site tokens: off-white + grain (set inline on .pages),
   Helvetica Neue for statements/body, monospace for every label, index and CTA
   — the "machine readout" utility face that ties the content chrome back to the
   camcorder LCD. One grotesque + one mono: a deliberate two-face system.
   =========================================================================== */
:root {
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.pages {
  --ink: #38393d;          /* statements + headlines */
  --ink-body: #3a3a38;     /* longer readable copy */
  --ink-soft: #6b6b69;     /* leads, labels, muted */
  --ink-faint: #b4b4ae;    /* numbers, flagged gaps */
  --hair: rgba(56, 57, 61, 0.13);
  --paper: #f4f3ef;
  --gutter: clamp(1.4rem, 7vw, 6rem);

  /* ---- One type scale for the whole site. Anchored near the hero headline
     ("we make brands impossible to ignore") so headings stay restrained and
     consistent; only --fs-display steps up, for the few real moments. Every
     text rule below pulls from these tokens — no ad-hoc font sizes. ---- */
  --fs-label: 0.72rem;                                     /* eyebrows, nums, labels */
  --fs-meta: 0.82rem;                                      /* fine print, footer */
  --fs-body: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);     /* paragraph copy */
  --fs-lead: clamp(1.15rem, 1.02rem + 0.62vw, 1.45rem);    /* intros, leads, copy */
  --fs-statement: clamp(1.4rem, 1.15rem + 1.05vw, 1.9rem); /* emphasized lines */
  --fs-head: clamp(1.7rem, 1.25rem + 1.95vw, 2.5rem);      /* standard headings */
  --fs-display: clamp(2.2rem, 1.45rem + 3.4vw, 3.6rem);    /* hero moments only */

  /* shared rhythm */
  --lead-tight: 1.06; /* headings + display */
  --lead-snug: 1.24;  /* statements */
  --lead-read: 1.42;  /* leads + body */
  --gap-head: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); /* space below a heading */

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* shared horizontal rhythm */
.pages .minibar,
.pages .sec {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* SplitType word wrappers */
.pages .word {
  display: inline-block;
  will-change: transform, filter;
}

/* ---- Utility face: every label, index, caption, meta line and CTA is set in
   the monospace readout face, tracked, so the structural type reads as one
   consistent system across the whole site. Statements + body stay grotesque. ---- */
.pages .sec__num,
.pages .minibar__price,
.pages .system__tag,
.pages .svc__meta,
.pages .case__id,
.pages .case__label,
.pages .logos,
.pages .contact__meta,
.pages .gx-scrubhint,
.pages .about__photo figcaption,
.btn-book,
.gx-pill,
.topbar__nav,
.site-footer__meta {
  font-family: var(--font-mono);
}

/* shared section scaffold */
.pages .sec {
  position: relative;
  padding-block: clamp(15vh, 19vh, 23vh);
}
.sec__num {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.2em; /* mono is already airy; less tracking reads cleaner */
  text-transform: uppercase;
  color: var(--ink-soft); /* the section index anchors each block — keep it legible */
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.sec__head {
  margin: 0 0 var(--gap-head);
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
  max-width: 18ch;
}

/* ---------------------------------------------------------------------------
   SECTION MASTHEAD — the oversized, stepped section title. Word/line one sits
   at the left margin; each following line steps in to the right, so the title
   reads as a big editorial staircase spanning the measure (no more skinny,
   left-hugging column). One system, reused on every section; the step and size
   scale with the viewport. Uppercase grotesque, ink on grain.
   --------------------------------------------------------------------------- */
.sec-title {
  margin: 0 0 clamp(2.6rem, 6vw, 5rem);
  font-weight: 500;
  font-size: clamp(2.8rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-title__line { display: block; }
/* each stepped line shifts right; capped so long lines still clear the gutter */
.sec-title__line--step { margin-left: clamp(1.6rem, 13vw, 13rem); }
.sec-title__line--step2 { margin-left: clamp(3.2rem, 26vw, 26rem); }
@media (max-width: 720px) {
  .sec-title { font-size: clamp(2.4rem, 13vw, 4.4rem); }
  .sec-title__line--step { margin-left: clamp(0.6rem, 7vw, 3rem); }
  .sec-title__line--step2 { margin-left: clamp(1.2rem, 14vw, 5rem); }
}

/* shared book-a-call pill */
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: 100px;
  /* Literal fallback: the tokens are scoped to .pages, but this pill also lives
     in the top bar (outside .pages), where var(--ink) would be undefined and the
     background would collapse to transparent — white text on a white bar. */
  background: var(--ink, #38393d);
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s;
}
.btn-book:hover { transform: translateY(-2px); opacity: 0.9; }
.btn-book--lg { padding: 1.15em 2.2em; font-size: 0.84rem; }

/* ---------------------------------------------------------------------------
   MINI-BAR
   --------------------------------------------------------------------------- */
.minibar {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 3vw, 2.8rem);
  padding-block: 14vh 8vh;
}
.minibar__sub {
  margin: 0;
  max-width: 24ch;
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: var(--lead-snug);
  letter-spacing: -0.014em;
}
.minibar__row {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
  flex-wrap: wrap;
}
.minibar__price {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   01 — THE ENEMY
   --------------------------------------------------------------------------- */
.sec--enemy { max-width: 1080px; }
.sec--enemy .sec__head { max-width: 16ch; }
.sec--enemy .lead {
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
/* the two ways to get ignored — bordered, labeled; word carried by weight,
   not italic, and no em dash */
.modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.mode {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 42ch;
  border-top: 1px solid var(--ink);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
}
.mode__tag {
  font-weight: 500;
  font-size: var(--fs-statement);
  letter-spacing: -0.018em;
}
.mode__copy {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lead-read);
  color: var(--ink-body);
}
.sec--enemy .close {
  margin: clamp(2.6rem, 5vw, 3.8rem) 0 0;
  font-weight: 400;
  font-size: var(--fs-statement);
  line-height: var(--lead-snug);
  letter-spacing: -0.018em;
  max-width: 24ch;
}

/* ---------------------------------------------------------------------------
   02 — THE SYSTEM (two halves -> one engine, "Demand." oversized)
   --------------------------------------------------------------------------- */
.sec--system .system__intro {
  margin: 0 0 clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 300;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.system__engine {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}
.system__half {
  max-width: 40ch;
  border-top: 1px solid var(--ink);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
}
.system__tag {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.system__copy {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: var(--lead-snug);
  letter-spacing: -0.015em;
}
.system__note {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0.2em;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.system__demand {
  margin: 0;
  font-weight: 600; /* the climax of the section — it should land, not whisper */
  font-size: var(--fs-display);
  line-height: var(--lead-tight);
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   03 — SERVICES (two cards)
   --------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1rem, 2vw, 2rem);
}
.svc {
  border-top: 1px solid var(--ink);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.5vw, 2rem);
}
.svc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.svc__kicker {
  font-weight: 400;
  font-size: var(--fs-statement);
  letter-spacing: -0.02em;
}
.svc__meta {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.svc__copy {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lead-read);
  letter-spacing: -0.005em;
  color: var(--ink-body);
  max-width: 60ch;
}
.svc__floor {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   04 — THE REFRAME
   --------------------------------------------------------------------------- */
.sec--reframe { max-width: 1080px; }
.sec--reframe .sec__head { max-width: 20ch; }
.reframe__p {
  margin: 0 0 1.6rem;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  letter-spacing: -0.012em;
  max-width: 34ch;
}
.reframe__pull {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--ink);
  font-weight: 400;
  font-size: var(--fs-head);
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
  max-width: 28ch;
}
.reframe__pull .em { font-weight: 500; font-style: normal; }

/* ---------------------------------------------------------------------------
   05 — THE GUARANTEE (video scrub)
   --------------------------------------------------------------------------- */
/* Same off-white + grain background as every other section. The mouse-scrub
   element is a per-frame Vision cutout (transparent PNG/WebP sequence) — it
   sits with no background to the right of the text, framed by a fine hairline
   that bleeds horizontally off the right edge. */
.sec--guarantee .gx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 6vw, 3.6rem);
  align-items: center;
}
.gx-text { min-width: 0; }
.gx-figure {
  position: relative;
  margin: 0;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
}
/* fine hairlines bracketing the figure, bleeding horizontally to the right edge */
.gx-figure::before,
.gx-figure::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--hair);
}
.gx-figure::before { top: 0; }
.gx-figure::after { bottom: 0; }
.gx-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.gx-type {
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  min-height: 4.5em;
  font-weight: 300;
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.45rem);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink-body);
}
@media (min-width: 53em) {
  .sec--guarantee .gx-grid { grid-template-columns: 0.92fr 1.08fr; gap: clamp(3rem, 6vw, 6rem); }
}
.gx-type .ph {
  font-weight: 400;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 1px;
}
.gx-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--ink);
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: gx-blink 1s step-end infinite;
}
@keyframes gx-blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
.gx-pills { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.4em;
  border-radius: 100px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, transform .3s;
  white-space: nowrap;
}
/* Primary CTA — matches the .btn-book treatment (mono, uppercase, tracked) so
   "Book a call" reads identically everywhere it appears. */
.gx-pill--solid {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}
.gx-pill--solid:hover { transform: translateY(-2px); }
.gx-pill--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.gx-pill--ghost:hover { background: var(--ink); color: #fff; }
.gx-pill .u { text-decoration: underline; text-underline-offset: 2px; }
.gx-scrubhint {
  position: absolute;
  bottom: calc(clamp(1.4rem, 3vw, 2.4rem) + 0.6rem);
  left: 0;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   06 — PROOF (project-5 woven statement + cases)  [ported from ImageExpansion]
   --------------------------------------------------------------------------- */
.sec--proof .sec__num { margin-bottom: clamp(2.4rem, 6vw, 4.5rem); }
.proof__type {
  margin: 0;
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: 1.14;
  letter-spacing: -0.022em;
  max-width: 24ch; /* room so the expanded chips never push a 3rd line */
}
/* image-expansion primitives (adapted) */
.type__expand {
  vertical-align: middle;
  display: inline-grid;
  grid-template-columns: min-content;
  padding: 0 0.06em;
}
.type__expand-img {
  display: block;
  position: relative;
  aspect-ratio: 25 / 9;
  width: 0%;
  overflow: hidden;
  border-radius: 999px;
}
.type__expand-img-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.type__expand-img--tiny { aspect-ratio: 25 / 9; }
.type--open .type__expand-img--tiny { width: 1.5em; }
.type--open .type__expand { gap: 0.35em; }

/* Section 06 holds the mouse-scrub figure (moved from 05). Statement + figure
   sit in one balanced top row (vertically centred), then the cases below. */
.proof__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 6vw, 3.6rem);
  align-items: center;
  margin-bottom: clamp(4rem, 9vw, 7rem);
}
.sec--proof .gx-figure { width: 100%; margin: 0; }
@media (min-width: 53em) {
  .proof__top { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 6vw, 5.5rem); }
}

/* cases */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hair);
  padding-top: clamp(2.4rem, 5vw, 4rem);
}
.case {
  display: grid;
  gap: 1.2rem;
  padding-bottom: clamp(2.4rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
.case__id {
  font-size: var(--fs-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case__story {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  letter-spacing: -0.01em;
  max-width: 40ch;
  color: var(--ink-body);
}
.case__metric { display: flex; align-items: baseline; gap: 0.8rem; }
.case__num {
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lead-tight);
  letter-spacing: -0.03em;
}
.case__label {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 16ch;
}
.is-gap { color: var(--ink-faint); }
.logos {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: center;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   07 — WHO IT'S FOR
   --------------------------------------------------------------------------- */
.sec--audience { max-width: 1000px; }
.audience__lead {
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  font-size: var(--fs-head);
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.audience__note {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   FINAL CTA (kinetic)
   --------------------------------------------------------------------------- */
.sec--final {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 4rem);
}
.final__head {
  margin: 0;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lead-tight);
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.final__head .word { transform-origin: 0% 100%; }
.sec--final .btn-book { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   ABOUT
   --------------------------------------------------------------------------- */
.about__head {
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
  max-width: 18ch;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.about__copy {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  letter-spacing: -0.012em;
  max-width: 34ch;
}
.about__photo { margin: 0; }
.about__photo img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  mix-blend-mode: multiply; /* drops the white card into the grain paper */
}
.about__photo figcaption {
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   CONTACT
   --------------------------------------------------------------------------- */
.contact__head {
  margin: 0 0 1.4rem;
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: var(--lead-tight);
  letter-spacing: -0.022em;
}
.contact__lead {
  margin: 0 0 clamp(2.6rem, 5vw, 4rem);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  color: var(--ink-soft);
  max-width: 36ch;
}
.contact__email {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 300;
  font-size: var(--fs-statement);
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
  transition: opacity .25s;
}
.contact__email::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.08em;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.contact__email:hover::after { transform: scaleX(1); }
.contact__email.copied { opacity: 0.55; }
.contact__email[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  top: -1.6em; left: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact__meta {
  list-style: none;
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(3rem, 6vw, 4rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.contact__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.contact__meta a:hover { color: var(--ink); }

/* ---------------------------------------------------------------------------
   GLOBAL — top bar (after intro) + footer
   --------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* three tracks: Home pinned left, nav centred on the bar, CTA pinned right.
     1fr | auto | 1fr keeps the nav dead-centre regardless of the side widths. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem clamp(1.2rem, 7vw, 7vw);
  background: rgba(244, 243, 239, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair, rgba(56, 57, 61, 0.13));
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.topbar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.topbar__brand img { display: block; height: 16px; width: auto; }
.topbar__cta { grid-column: 3; justify-self: end; padding: 0.7em 1.3em; font-size: 0.68rem; }

/* Centre nav — the four links (Home first, then work / services / about) sit
   dead-centre on the bar in its own grid track, evenly spaced by a single gap.
   With four items the gap runs wider so the group holds an appropriate span of
   the bar instead of bunching. Literal token fallbacks so the bar renders
   identically on the home page (tokens are scoped to .pages, which the top bar
   sits outside of) and the About page (tokens live on :root). */
.topbar__nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: clamp(1.8rem, 4.5vw, 3.6rem);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem; /* explicit + literal: same comfortable size on every page,
                        independent of whether the .pages tokens are in scope */
  font-weight: 300;
}
.topbar__nav a {
  color: var(--ink-soft, #6b6b69);
  text-decoration: none;
  transition: color .2s ease;
}
.topbar__nav a:hover { color: var(--ink, #38393d); }
/* Home reads as one of the nav links, just first in the group. */
.topbar__home { color: var(--ink-soft, #6b6b69); }

/* ---------------------------------------------------------------------------
   MOBILE NAV — hamburger (in the topbar) + full-screen overlay menu (.mnav).
   Desktop keeps the centred inline nav and never shows any of this.
   --------------------------------------------------------------------------- */
.topbar__burger { display: none; } /* mobile-only control */
.mnav { display: none; }           /* overlay exists only under the breakpoint */
/* page frozen while the menu is up (Lenis stops too; this pins native touch) */
html.mnav-lock, html.mnav-lock body { overflow: hidden; }

@media (max-width: 720px) {
  .topbar__nav { display: none; } /* inline links can't fit — the overlay serves them */

  /* hamburger: two hairline bars + the word, mono, lowercase — machine-readout
     voice like every other control label */
  .topbar__burger {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.4em 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--ink, #38393d);
  }
  .topbar__burger-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 18px;
  }
  .topbar__burger-lines i {
    display: block;
    height: 1.5px;
    background: var(--ink, #38393d);
  }

  /* --- overlay ----------------------------------------------------------- */
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 90; /* over the topbar (50); under the book-call modal (its own layer) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.1rem clamp(1.4rem, 6vw, 2.4rem) max(1.6rem, env(safe-area-inset-bottom));
    background-color: #f7f6f3;
    background-image: url(../img/noise.png);
    background-size: 150px;
    color: var(--ink, #38393d);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* closed: faded + slightly lifted; open: settles down into place. The
       curve is the iOS sheet feel — fast start, long soft landing. */
    opacity: 0;
    transform: translateY(-2.5%);
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.52s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.52s;
  }
  .mnav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.52s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s;
  }

  .mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mnav__tag,
  .mnav__close {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
  }
  .mnav__tag { color: var(--ink-soft, #6b6b69); }
  .mnav__close {
    background: none;
    border: 0;
    padding: 0.4em 0;
    color: var(--ink, #38393d);
    cursor: pointer;
  }

  /* big stacked links — the footer-column voice at menu scale; each opens on
     its own hairline with a small mono index */
  .mnav__links {
    display: flex;
    flex-direction: column;
  }
  .mnav__links a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.72rem 0;
    border-top: 1px solid var(--hair, rgba(56, 57, 61, 0.13));
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink, #38393d);
    text-decoration: none;
    text-transform: lowercase;
    /* staggered rise, driven by the .is-open state below */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .mnav__links a:last-child { border-bottom: 1px solid var(--hair, rgba(56, 57, 61, 0.13)); }
  .mnav__no {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint, #b4b4ae);
  }
  .mnav.is-open .mnav__links a {
    opacity: 1;
    transform: translateY(0);
  }
  /* the stagger — one soft cascade, quick enough to never feel like waiting */
  .mnav.is-open .mnav__links a:nth-child(1) { transition-delay: 0.06s; }
  .mnav.is-open .mnav__links a:nth-child(2) { transition-delay: 0.1s; }
  .mnav.is-open .mnav__links a:nth-child(3) { transition-delay: 0.14s; }
  .mnav.is-open .mnav__links a:nth-child(4) { transition-delay: 0.18s; }
  .mnav.is-open .mnav__links a:nth-child(5) { transition-delay: 0.22s; }
  .mnav.is-open .mnav__links a:nth-child(6) { transition-delay: 0.26s; }

  .mnav__foot {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .mnav__cta {
    justify-content: center;
    text-align: center;
    padding: 1.1em 2em;
    font-size: 0.8rem;
  }
  .mnav__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
  }
  .mnav__meta a {
    color: var(--ink-soft, #6b6b69);
    text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .mnav,
    .mnav__links a { transition: none; }
  }
}

.site-footer {
  background: #fff;
  background-image: url(../img/noise.png);
  background-size: 150px;
  border-top: 1px solid var(--hair);
  padding: clamp(2.4rem, 5vw, 4rem) 7vw;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: #6b6b69;
}
.site-footer__meta a,
.site-footer__meta button {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.site-footer__meta a:hover,
.site-footer__meta button:hover { color: #38393d; }

/* ---------------------------------------------------------------------------
   DESKTOP
   --------------------------------------------------------------------------- */
@media (min-width: 53em) {
  .minibar { min-height: 70vh; }
  .system__engine {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  .modes { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .svc-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .about__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .about__photo { justify-self: end; }
  .cases { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pages .word { filter: none !important; opacity: 1 !important; transform: none !important; }
  .type__expand-img--tiny { width: 1.5em !important; }
  .gx-cursor { display: none; }
}

/* ===========================================================================
   BLOCKS — added layer (scoped under .pages.blocks).
   Reorders the content into a clean marketing flow and gives every section a
   consistent block/card structure. Built entirely on the existing tokens +
   type system (grotesque heads, mono labels). Additive + scoped so it overrides
   predictably and lifts cleanly; the DOM order is untouched so every data-*
   effect, in-page anchor and other in-flight edit keeps working.
   =========================================================================== */
.pages.blocks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Flow (COPY v3): about → services → strategy → our work → testimonials →
   final CTA → contact. Reorder via flex order only; DOM already matches. */
.pages.blocks #services { order: 1; }
.pages.blocks #proof { order: 2; }
.pages.blocks #testimonials { order: 3; }
.pages.blocks #strategy { order: 4; }
.pages.blocks #final { order: 5; }
.pages.blocks #contact { order: 6; }

/* ---- Card base: grid items become bordered blocks ---- */
.pages.blocks .mode,
.pages.blocks .system__half,
.pages.blocks .svc,
.pages.blocks .case {
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
}
/* .svc used a top-rule + top padding treatment — normalise to a full card. */
.pages.blocks .svc {
  border-top: 1px solid var(--hair);
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
}

/* ---- Block grids ---- */
.pages.blocks .modes,
.pages.blocks .system__engine,
.pages.blocks .svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.pages.blocks .cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}
.pages.blocks .case {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Case number reads as a stat inside its block. */
.pages.blocks .case__num {
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---- Logo wall (new block) ---- */
.pages.blocks .block-logos {
  padding-block: clamp(6vh, 9vh, 11vh);
}
.pages.blocks .logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  background: var(--hair);
}
.pages.blocks .logo-wall span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0.5rem;
  background: #fff;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Guarantee: framed two-column block ---- */
.pages.blocks .gx-grid {
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

/* ---- About: two-column block ---- */
.pages.blocks .about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: center;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

/* ---- Final CTA: an emphasised block — copy left, the monitor-head figure
   right (framed like the About portrait, with the grain showing through). ---- */
.pages.blocks .sec--final {
  min-height: auto;
  text-align: left;
  border: 1px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  padding: clamp(3rem, 7vh, 6rem) clamp(1.8rem, 5vw, 4rem);
  display: flex;
  align-items: center;
}
.final__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.final__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
/* Figure framed like .ab-portrait; grain ground gives the cut-out figure its
   background back. The old full-bleed bracket hairlines are dropped here. */
.sec--final .gx-figure {
  margin: 0;
  padding: 0;
  width: clamp(220px, 30vw, 400px);
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  background-image: url(../img/noise.png);
  background-size: 150px;
}
.sec--final .gx-figure::before,
.sec--final .gx-figure::after {
  content: none;
}
.sec--final .gx-frame {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 820px) {
  .final__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
  .sec--final .gx-figure {
    width: min(320px, 72vw);
  }
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .pages.blocks .modes,
  .pages.blocks .system__engine,
  .pages.blocks .svc-grid,
  .pages.blocks .about__grid {
    grid-template-columns: 1fr;
  }
  .pages.blocks .cases { grid-template-columns: repeat(2, 1fr); }
  .pages.blocks .logo-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .pages.blocks .cases,
  .pages.blocks .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Hero (minibar): a centred scroll-blur statement + refined CTA.
   The sub carries [data-blur] (the ported ScrollBlur effect-4, per-word reveal);
   here we just centre the block and lift the single CTA. ---- */
.pages.blocks .minibar {
  align-items: center;
  text-align: center;
}
.pages.blocks .minibar__sub {
  max-width: 26ch;
  margin-inline: auto;
}
.pages.blocks .minibar__row {
  justify-content: center;
  margin-top: clamp(0.4rem, 1.5vw, 1rem);
}
/* Arrow slides on hover; the whole pill still lifts via .btn-book:hover. */
.pages.blocks .minibar__row .btn-book__arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pages.blocks .minibar__row .btn-book:hover .btn-book__arrow {
  transform: translateX(4px);
}

/* ===========================================================================
   FIRST-SCREEN HERO COPY  (layer 1, over the camcorder)
   Loaded after the inline intro styles, so these override cleanly. A framed
   container holds the logo + value-prop sentence; the quiet welcome line sits
   beneath. Full-bleed hairlines are tied to the content (no vh guessing), and
   everything fades with the scroll-zoom via the existing GSAP tween on
   .intro-copy. The old eyebrow-band brackets are replaced by the card's rules;
   the left/right rails framing the camcorder are kept.
   =========================================================================== */
.image-container .intro-copy {
  top: 7vh;
  bottom: auto;
  width: min(860px, 90vw);
  transform: translateX(-50%);
  text-align: center;
  white-space: normal; /* the sentence wraps on narrow screens (was nowrap) */
}
/* Tier 1 — the greeting. Quiet + lowercase, bracketed above and below so it
   reads as the top band of a two-tier editorial masthead. */
.image-container .intro-line {
  position: relative;
  margin: 0;
  padding: clamp(0.6rem, 1.5vh, 1rem) 0;
  font-weight: 300;
  font-size: clamp(0.68rem, 1.05vw, 0.94rem);
  line-height: 1;
  letter-spacing: 0.14em;
  color: #6b6b69;
  opacity: 1;
  white-space: nowrap;
}
/* Tier 2 — the value proposition. The clear, legible lead line (the sentence
   the section is really about), sitting in the second bracketed row. */
.intro-main {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 2.5vh, 1.7rem) 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Helvetica Neue only ships 300 + 400 here (no true 350), and 400 read too
     heavy. Light 300 with a hairline same-ink stroke lands the weight between
     the two — lighter than 400, but far more legible than bare 300. */
  font-weight: 300;
  -webkit-text-stroke: 0.35px #38393d;
  font-size: clamp(1.08rem, 1.85vw, 1.6rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: #38393d;
  text-wrap: balance;
}
/* Three full-bleed hairlines → two stacked tiers (greeting / statement). */
.image-container .intro-line::before,
.image-container .intro-line::after,
.intro-main::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: rgba(56, 57, 61, 0.14);
}
.image-container .intro-line::before { top: 0; }
.image-container .intro-line::after { bottom: 0; }
.intro-main::after { bottom: 0; }
/* the eyebrow-band brackets are superseded by the tiers' own hairlines */
.intro-frame .fl-top,
.intro-frame .fl-bottom { display: none; }

@media (max-width: 52.99em) {
  /* Compose the hero as one unit. The copy's offset parent is the camcorder
     shell container; anchor the copy's BOTTOM to the container's top edge
     (+ a gap) with bottom:100% — height-independent, so the statement and
     welcome line always rest just above the device instead of floating in
     dead space. (≤768px, where the shell is the left-flush PORTRAIT cutout
     box, this is overridden below to a solved viewport position.) */
  .image-container .intro-copy {
    top: auto !important;
    bottom: calc(100% + clamp(1.6rem, 6vh, 3.4rem));
    width: 92vw;
    transform: translateX(-50%);
  }
  .image-container .intro-line {
    white-space: normal;
    line-height: 1.4;
    font-size: clamp(0.64rem, 3vw, 0.8rem);
    letter-spacing: 0.12em;
  }
  .intro-main {
    font-size: clamp(1.02rem, 4.4vw, 1.24rem);
    line-height: 1.32;
    max-width: 22ch;
    margin-inline: auto;
    padding: clamp(0.7rem, 2vh, 1.1rem) 0;
  }
}

/* Phones only (matches the 180°-flipped portrait-shell geometry in
   index.html's inline ≤768px block): the shell box is LEFT-flush with
   top = 58vh − 1.0827·--mw, and the device's ink starts at 26.8% of the
   box height (0.4765·--mw down the screen from the box top). The copy is
   CENTRE-anchored — translate(-50%,-50%) — to the midpoint of the empty
   band between the viewport top and the device, so the greeting + statement
   float perfectly balanced in that air at ANY screen size instead of
   hanging off a baked offset:
     bandBottom(screen) = 58vh − 1.0827mw + 0.268·(16/9)mw = 58vh − 0.6063mw
     top(in box) = bandBottom/2 − boxTop = 0.7795mw − 29vh
   Centred on the viewport: the box's left edge IS the screen edge now,
   so left is simply 50vw. */
@media (max-width: 768px) {
  .image-container .intro-copy {
    /* −shift/2: the container carries --land-shift (see index.html) to centre
       the whole composition; the copy re-centres in the taller band above
       the device by giving back half the shift. */
    top: calc(var(--mw, 100vw) * 0.7795 - 29vh - var(--land-shift, 0px) / 2) !important;
    bottom: auto;
    left: 50vw;
    transform: translate(-50%, -50%);
  }
}

/* 769px–52.99em (portrait tablets — iPad 820/834 land here): the desktop
   shell renders, but the band-era bottom:100% anchor above pushed the copy
   clean off the top of the full-height container. Pin it back to the
   desktop composition's top band so the greeting + statement are always
   on screen. */
@media (min-width: 769px) and (max-width: 52.99em) {
  .image-container .intro-copy {
    top: 7vh !important;
    bottom: auto;
  }
}

/* ===========================================================================
   No horizontal scroll on the content. Some sections use full-bleed hairlines
   (e.g. .gx-figure's brackets "bleed to the right edge"); because the figure
   is a non-centred grid column, that bleed can overshoot the viewport and open
   an empty half-page of horizontal scroll. Clip the content box so bleeds stop
   exactly at the screen edge. `clip` (not `hidden`) keeps overflow-y visible,
   creates no scroll container, and can't affect the pinned intro (in .wrapper).
   =========================================================================== */
.pages {
  overflow-x: clip;
}

/* ===========================================================================
   COPY v3 — new / reworked section styles (about one-liner, service taglines,
   testimonials, work insert). Reuses the existing tokens + card system so it
   sits on the same vertical rhythm as everything else.
   =========================================================================== */

/* SERVICES — italic tagline sits tight under each offer name. */
.svc__tag {
  margin: calc(-1 * clamp(0.6rem, 1.4vw, 1.1rem)) 0 0; /* pull up toward the name */
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* STRATEGY — subline under the masked display heading. */
.strategy__sub {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  max-width: 44ch;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

/* OUR WORK — the canonical insert line, spaced off the top block. */
.proof__insert {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  color: var(--ink-soft);
}

/* WHAT CLIENTS SAY — three-up quote grid on the same card system. */
.sec--voices { max-width: 1320px; }
.pages.blocks .voices {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.pages.blocks .voice {
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2rem);
}
.voice__quote {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.voice__by {
  margin: auto 0 0;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 52em) {
  .pages.blocks .voices { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================================
   CLOSER — the single editorial sign-off (merges the old final CTA + contact
   into one). Site system only: mono eyebrow, grotesque head, one hairline,
   ink on grain — no bordered card. The monitor-head figure sits seamlessly on
   the paper (no box); its cursor-follow animation is unchanged.
   =========================================================================== */
.sec--closer {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.4rem, 5vw, 4rem);
}
/* the sign-off line — same stepped masthead family as the other sections, held
   a touch smaller so it doesn't overpower the figure plate below it */
.closer__head {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* the figure sits inside a faint hairline plate — square corners, no fill, grain
   shows straight through: an editorial "specimen" frame, not the old card. The
   monitor-head guy is large and stands ON the bottom hairline. */
.closer__plate {
  position: relative;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--hair);
  /* the video fills the whole hairline box, edge to edge */
  padding: 0;
  overflow: hidden;
}
/* mono caption over the video, top-left — light with a soft shadow so it stays
   legible against the dark footage. */
.closer__cap {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 2vw, 1.4rem);
  left: clamp(1.2rem, 2.4vw, 1.8rem);
  max-width: 20ch;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.45);
}
.closer__figure {
  margin: 0;
  padding: 0;
  /* framed square holding the original (grain-background) figure. object-fit
     centres the off-centre figure; no mask needed now the asset has its own
     ground that blends with the site grain. */
  width: clamp(300px, 42vw, 520px);
  aspect-ratio: 435 / 395;
  overflow: hidden; /* clips the frame to the hairline box */
}
.closer__figure::before,
.closer__figure::after { content: none; }
.closer__figure .gx-frame {
  display: block;
  width: 100%;
  height: 100%;
  /* frames are pre-cropped to the box aspect and centred, so they just fill */
  object-fit: cover;
  object-position: center;
  background: var(--paper);
}

/* The robot box + its single large call-to-action, stacked and centred so the
   button sits squared directly beneath the box at the exact same width. */
.closer__stack {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

/* One large, clear "Book a call" — same pill shape as the small CTA, scaled up
   to the full box width. A hairline outline at rest that FILLS with ink on hover
   / keyboard focus: a clean invert, no sideways lift. Reads as a button by its
   shape and label; it doesn't need a fill until you're on it. */
.closer__cta {
  width: 100%;
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.1rem) 2em;
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(56, 57, 61, 0.3);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  letter-spacing: 0.16em;
  transition: background-color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.closer__cta:hover,
.closer__cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: none; /* override the shared pill's translateY lift */
  opacity: 1;
}
.closer__cta-arrow {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.closer__cta:hover .closer__cta-arrow,
.closer__cta:focus-visible .closer__cta-arrow {
  transform: translateX(5px);
}

@media (max-width: 820px) {
  .sec--closer { min-height: auto; padding-block: clamp(4rem, 12vh, 7rem); }
  .closer__stack { width: 100%; }
  /* The robot fills the hairline plate edge to edge — no inner gutters. The
     figure keeps its frame aspect and the canvas object-fit covers, so the
     full-width box crops cleanly instead of floating a smaller image. */
  .closer__plate { width: 100%; padding-inline: 0; }
  .closer__figure { width: 100%; }
}

/* ===========================================================================
   OUR WORK — the /canvas/ video grid, inline. Tile styles mirror canvas.css so
   the section reads identically. Tiles + the sliding logo bar are built by
   js/work-grid.js. A full-bleed marquee closes the section as the transition.
   =========================================================================== */
.work__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.work__top .sec__num {
  margin-bottom: 0;
}
.work__all {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.work__all:hover {
  color: var(--ink);
}

.wg {
  --cols: 4;
  position: relative; /* Flip positions leaving/entering tiles within this box */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  /* dense: when a filter (or a narrower column count) makes a wide tile wrap,
     later tiles backfill the gap — no mid-grid holes in any view */
  grid-auto-flow: row dense;
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
}
.wg-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* a horizontal clip promoted to a double-width slot (still 16:9, twice the
   presence). Never exceeds the column count: 2 of 4, 2 of 3, full row of 2. */
.wg-item--wide {
  grid-column: span 2;
}
.wg-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
  overflow: hidden;
  background: #ededea;
}
.wg-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wg-cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wg-cap b {
  font-weight: 400;
  color: var(--ink-soft);
}

/* Sliding social-proof logo bar — full-bleed, closes the work section. */
.work-marquee {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.work-marquee__track {
  display: flex;
  width: max-content;
  animation: work-marquee 34s linear infinite;
}
.work-marquee:hover .work-marquee__track {
  animation-play-state: paused;
}
.work-marquee__track span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.7rem, 4vw, 3.4rem);
  white-space: nowrap;
}
/* real client logos: monochrome, muted; a single one brightens when hovered
   (the whole track pauses on hover, so you can land on one) */
.work-marquee__track span img {
  display: block;
  height: clamp(24px, 2.6vw, 32px);
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.3s ease;
}
.work-marquee__track span:hover img { opacity: 0.85; }
@keyframes work-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-marquee__track {
    animation: none;
  }
}
@media (max-width: 900px) {
  .wg {
    --cols: 3;
  }
}
@media (max-width: 560px) {
  .wg {
    --cols: 2;
  }
}

/* ---------------------------------------------------------------------------
   WORK — filters, hover pop-up, type-B button, infinite overlay (folded in
   from the old /canvas/ page). Filters stick cleanly under the top bar.
   --------------------------------------------------------------------------- */
.wg-filters {
  position: sticky;
  top: clamp(4.4rem, 7vh, 5.4rem); /* clears the fixed top bar */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centred, not left-weighted */
  gap: 0.5rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  padding: 0.4rem 0;
}
/* Phones: the pills would wrap to two sticky rows and ride OVER the tiles —
   instead they become one calm, swipeable strip in flow (not sticky), bleeding
   to the screen edges so the row scrolls edge-to-edge like an iOS segmented
   rail. touch-action pan-x keeps vertical page scroll clean. */
@media (max-width: 720px) {
  .wg-filters {
    position: static;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .wg-filters::-webkit-scrollbar { display: none; }
  .wg-filter { flex: none; }
}
.wg-filter {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-soft);
  padding: 0.55rem 1.05rem;
  border-radius: 100px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wg-filter:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.wg-filter.is-active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.wg-item.is-hidden {
  display: none;
}

/* Type-B button — big glassy CTA into the infinite view. */
.wg-typeb-wrap {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(0.5rem, 2vw, 1.5rem);
}
.wg-typeb {
  cursor: pointer;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem); /* just a touch bigger than the filter pills */
  color: var(--ink);
  padding: 0.75em 1.6em;
  border-radius: 100px;
  border: 1px solid rgba(56, 57, 61, 0.22);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 30px -12px rgba(56, 57, 61, 0.25);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.35s ease, color 0.35s ease,
    border-color 0.35s ease;
}
.wg-typeb:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Hover description pop-up (fixed bottom-right; shows only while hovering). */
.wg-readout {
  position: fixed;
  right: clamp(1.2rem, 4vw, 2.4rem);
  bottom: clamp(1.2rem, 4vw, 2.4rem);
  z-index: 40;
  max-width: 30ch;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wg-readout.is-on {
  opacity: 1;
  transform: none;
}
.wg-readout__client {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.wg-readout__desc {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
@media (hover: none) {
  .wg-readout {
    display: none;
  }
}

/* Infinite view — full-screen overlay (the R3F canvas). */
.wg-infinite {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.wg-infinite.is-open {
  opacity: 1;
  visibility: visible;
}
.wg-infinite iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Lenis disables iframe pointer-events globally; the open canvas needs them. */
.wg-infinite.is-open iframe {
  pointer-events: auto !important;
}
/* page frozen while the infinite view is up (work-grid.js toggles the class;
   Lenis stops too — this pins native touch scroll behind the canvas) */
html.inf-lock, html.inf-lock body { overflow: hidden; }

/* Overlay chrome: back button with the hint as a caption directly beneath it,
   one centred unit, lifted a bit off the bottom. NOTE: the overlay is
   re-parented to <body> (work-grid.js) to escape .pages' stacking context, so
   the .pages-scoped tokens need literal fallbacks here. */
.wg-infinite__foot {
  position: absolute;
  left: 50%;
  bottom: clamp(3.6rem, 6vh, 5rem);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* the hint stretches to the (wider) button's width */
  gap: 0.75rem;
}
.wg-infinite__close {
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink, #38393d);
  padding: 0.95rem 1.9rem;
  border-radius: 100px;
  border: 1px solid rgba(56, 57, 61, 0.18);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 30px -12px rgba(56, 57, 61, 0.3);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
/* Phones: solid ink pill (the glass treatment can vanish over a live WebGL
   iframe on mobile compositors), pinned above the home-indicator area. */
@media (max-width: 720px) {
  .wg-infinite__foot {
    bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
    width: max-content;
  }
  .wg-infinite__close {
    background: #38393d;
    color: #fff;
    border-color: #38393d;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 14px 34px -14px rgba(56, 57, 61, 0.5);
  }
}
.wg-infinite__close:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
}
.wg-infinite__hint {
  text-align: center;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-soft, #6b6b69);
  opacity: 0.8;
}

/* Serve line — the one visible place the cities are named on the home page
   (search + AI engines quote visible text; schema mirrors this in the head).
   Quiet mono label under the services cards. */
.pages .serve-line {
  margin: clamp(1rem, 2vw, 1.4rem) auto 0;
  text-align: center;              /* match the centred outro above it */
  text-wrap: balance;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* narrow screens: let it wrap to a couple of tidy centred lines */
@media (max-width: 700px) {
  .pages .serve-line { letter-spacing: 0.04em; font-size: 0.64rem; max-width: 34ch; }
}