/* ============================================================================
   XP MEDIA — SECTION LAYER
   Loaded after studio.css. Owns every landing-page section below the hero.
   Tokens come from studio.css :root. No raw hex in here.

   Layout families used, each exactly once (no two sections share a shape):
     1. proof band .......... hairline stat band
     2. reel ................ full-bleed media with type mask   (studio.css)
     3. work index .......... numbered editorial rows + cursor preview
     4. showcase ............ feature + uniform 3-up grid, light band
     5. capabilities ........ hairline grid, dark band
     6. process ............. vertical timeline, light band
     7. studio .............. asymmetric editorial statement + roster
     8. faq ................. hairline accordion
     9. contact ............. split context / form
   ========================================================================= */

/* ---- shared rhythm ------------------------------------------------------ */
.sec {
  --sec-pad-x: clamp(1.25rem, 5vw, 5rem);
  padding: clamp(88px, 11vw, 176px) var(--sec-pad-x);
  max-width: 1440px;
  margin-inline: auto;
}
.sec--flush { padding-inline: 0 }

/* One headline treatment for the whole page. Size is the hierarchy, not decoration. */
.sec-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.sec-h em {
  font-style: italic;
  /* italic descender clearance */
  line-height: 1.1;
  padding-bottom: 2px;
  color: var(--accent);
}
.sec-sub {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: var(--space-5) 0 0;
}
/* Rationed: only two of these exist on the page. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

/* Words rise out of a mask as the headline enters. Communicates reading order.
   One mask per word so the browser still handles line breaking; the padding and
   matching negative margin give descenders (g, j, p, y) room inside the mask. */
.line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.line-mask > span { display: block; will-change: transform }

/* ---- 1. proof band ------------------------------------------------------ */
.proof {
  border-block: 1px solid var(--border-subtle);
  padding: clamp(48px, 6vw, 88px) clamp(1.25rem, 5vw, 5rem);
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.proof-lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  max-width: 26ch;
}
.proof-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.proof-fig { display: flex; flex-direction: column; gap: 6px }
/* Hairline sits between figures only, never boxing them in */
.proof-fig + .proof-fig {
  border-left: 1px solid var(--border-subtle);
  padding-left: clamp(20px, 3vw, 48px);
}
.proof-fig .stat-n {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.proof-fig .stat-l {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ---- 3. work index ------------------------------------------------------ */
.work { position: relative }
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(40px, 6vw, 72px);
}
/* display:block is explicit: this container used to also carry .pf-grid, whose
   12-column grid laid the rows out side by side instead of stacking them. */
.work-index { display: block; border-top: 1px solid var(--border-subtle) }

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--dur-med) var(--ease-out);
}
.work-row:hover,
.work-row:focus-visible { padding-left: clamp(8px, 1.5vw, 24px) }

.work-num {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.work-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.work-row:hover .work-title,
.work-row:focus-visible .work-title { color: var(--accent) }
.work-cat {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-secondary);
  white-space: nowrap;
}
.work-go {
  width: 22px; height: 22px;
  color: var(--text-muted);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
}
.work-row:hover .work-go,
.work-row:focus-visible .work-go { transform: translate(4px, -4px); color: var(--accent) }

/* Preview thumbnail rides the pointer. Pure feedback: shows what the row points at. */
.work-peek {
  position: fixed;
  top: 0; left: 0;
  width: clamp(200px, 20vw, 320px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
}
.work-peek img { width: 100%; height: 100%; object-fit: cover; display: block }
@media (hover: none), (pointer: coarse) { .work-peek { display: none } }

/* ---- BANDS: alternating light and dark surfaces --------------------------
   The page runs dark by default. A light band re-points the semantic tokens
   for its own subtree, so every component inside keeps using --text-primary /
   --border-subtle and simply lands on the right value.

   One thing does NOT flip: the lime accent. #D4FF00 as text on a light surface
   measures 1.02:1, so light bands get --accent-ink (#5A6800, 5.43:1) for any
   accent-coloured TEXT. Lime stays a fill in both themes, always with ink text
   on top (17.03:1). Use var(--accent) to fill, var(--accent-ink) to write.
-------------------------------------------------------------------------- */
.band {
  position: relative;
  background: var(--bg-base);
  --accent-ink: var(--accent);
}
.band-in {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(88px, 11vw, 176px) clamp(1.25rem, 5vw, 5rem);
}

.band--dark { background: var(--bg-base) }

.band--light {
  --bg-base:        #F1F1EC;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #E7E7E0;
  --bg-inverse:     #0A0A0F;
  --text-primary:   #0A0A0F;
  --text-secondary: rgba(10, 10, 15, .74);
  --text-muted:     rgba(10, 10, 15, .62);   /* .56 measured 4.39:1, under AA */
  --text-inverse:   #F4F4F6;
  --accent-ink:     #5A6800;
  --accent-subtle:  rgba(90, 104, 0, .10);
  --accent-border:  rgba(90, 104, 0, .32);
  --border-subtle:  rgba(10, 10, 15, .12);
  --border-default: rgba(10, 10, 15, .18);
  --border-strong:  rgba(10, 10, 15, .32);
  --border-field:   #6B6B62;
  --glass-bg:       rgba(10, 10, 15, .04);
  --glass-bg-hover: rgba(10, 10, 15, .07);
  --glass-border:   rgba(10, 10, 15, .12);
  --overlay-scrim:  rgba(10, 10, 15, .55);
  --shadow-md:      0 8px 28px rgba(10, 10, 15, .10);
  --shadow-lg:      0 20px 60px rgba(10, 10, 15, .14);
  background: var(--bg-base);
  color: var(--text-primary);
}
/* The page-level grain and orbs are tuned for dark; mask them off a light band */
.band--light::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg-base);
  z-index: 0;
}
.band--light > * { position: relative; z-index: 1 }

.band--light .eyebrow { color: var(--accent-ink) }
.band--light .sec-h em { color: var(--accent-ink) }

/* ---- 4. showcase (light) -------------------------------------------------
   One feature, then a strict 3-up grid. Every card in the grid is the same
   width and the same aspect ratio, so the section reads as an ordered set.
   The version before this gave each piece its own width and indent; the
   staggering read as misalignment, not as art direction.

   8:5 is the grid ratio because four of the six sources are exactly 8:5 and
   land uncropped. The two 16:7 pieces lose some width to object-fit: cover.
-------------------------------------------------------------------------- */
.fw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.fw-all {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-small); font-weight: 600;
  color: var(--text-primary); text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.fw-all svg { width: 16px; height: 16px }
.fw-all:hover { border-color: var(--accent-ink); color: var(--accent-ink) }

.fw {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
}
.fw-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
/* The one piece that earns extra size. Everything else stays identical. */
.fw-card--feature { grid-column: 1 / -1 }

.fw-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  aspect-ratio: 8 / 5;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.fw-card--feature .fw-shot { aspect-ratio: 21 / 9 }
.fw-shot img,
.fw-shot video { width: 100%; height: 100%; object-fit: cover; display: block }

.fw-card:hover .fw-shot,
.fw-card:focus-visible .fw-shot {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-border);
}

.fw-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: 2px;
}
.fw-name {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.fw-views {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- 5. capabilities (dark) ----------------------------------------------
   No card boxes: a hairline grid. Six equal cells read as a list of six equal
   services, which the bento version did not (its last service rendered larger
   than its first). Only the lead service gets a filled cell.
-------------------------------------------------------------------------- */
.caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
  padding: clamp(24px, 2.4vw, 40px);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-med) var(--ease-out);
}
.cap:hover,
.cap:focus-visible { background: var(--glass-bg) }
.cap--lead { background: var(--accent); color: var(--on-accent) }
.cap--lead:hover,
.cap--lead:focus-visible { background: var(--accent-hover) }

.cap-n {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.cap--lead .cap-n { color: var(--on-accent); opacity: .62 }

.cap-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}
.cap--lead .cap-name { color: var(--on-accent) }

.cap-copy {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 40ch;
}
.cap--lead .cap-copy { color: var(--on-accent); opacity: .8 }

.cap-go {
  margin-top: auto;
  width: 20px; height: 20px;
  color: var(--text-muted);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
}
.cap-go svg { width: 100%; height: 100% }
.cap--lead .cap-go { color: var(--on-accent) }
.cap:hover .cap-go,
.cap:focus-visible .cap-go { transform: translate(3px, -3px); color: var(--accent-ink) }
.cap--lead:hover .cap-go { color: var(--on-accent) }

/* ---- 6. process timeline (light) -----------------------------------------
   The pinned horizontal pan is gone: it hijacked a full extra viewport of
   scroll, needed a rebuild on every breakpoint change, and its row layout
   outranked the mobile stack (media queries add no specificity). A vertical
   timeline states "linear" just as plainly and costs one scrubbed transform.
-------------------------------------------------------------------------- */
.tl-head { margin-bottom: clamp(40px, 5vw, 72px) }

.tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(40px, 6vw, 88px);
}
.tl-rail {
  position: absolute;
  left: clamp(11px, 1.6vw, 23px);
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
}
.tl-rail-fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--accent-ink);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.tl-step {
  position: relative;
  padding-bottom: clamp(40px, 5vw, 72px);
  max-width: 62ch;
}
.tl-step:last-child { padding-bottom: 0 }
.tl-dot {
  position: absolute;
  left: calc(clamp(40px, 6vw, 88px) * -1 + clamp(5px, 1.15vw, 17px));
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--border-strong);
  transition: background-color var(--dur-med), border-color var(--dur-med);
}
.tl-step.is-live .tl-dot { background: var(--accent); border-color: var(--accent-ink) }

.tl-n {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.tl-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-3);
}
.tl-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ---- 7. studio statement + roster --------------------------------------- */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.studio-claim {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}
.studio-claim b { font-weight: 600; color: var(--accent) }
.studio-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: var(--space-6) 0 0;
}
.studio-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-8);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.studio-status svg { width: 15px; height: 15px }

.roster { border-top: 1px solid var(--border-subtle) }
/* Two fixed columns, not space-between: with space-between every row got a
   different gap (155px to 228px here) and the roles never lined up. */
.roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45%;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.roster-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.roster-role {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ---- 8. faq ------------------------------------------------------------- */
.faq2 {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq2-list { border-top: 1px solid var(--border-subtle) }

/* ---- 9. contact --------------------------------------------------------- */
.talk {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.talk-direct { margin-top: var(--space-8); display: grid; gap: var(--space-5) }
.talk-line {
  display: flex; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.talk-line svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0 }
.talk-line-k {
  font-family: var(--font-body);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  min-width: 84px;
}
.talk-line-v {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}
/* These sat at 1.00:1 against the adjacent non-link span: colour alone was not
   even distinguishing them, let alone at the 3:1 that would allow colour-only. */
a.talk-line-v { text-decoration: underline; text-underline-offset: 0.2em }
a.talk-line-v:hover { color: var(--accent) }

/* ---- responsive collapse ------------------------------------------------ */
@media (max-width: 1024px) {
  .studio, .faq2, .talk, .proof { grid-template-columns: 1fr }
  .proof { gap: var(--space-8) }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .fw { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 720px) {
  .fw { grid-template-columns: 1fr }
  .fw-card--feature .fw-shot { aspect-ratio: 16 / 9 }
  .caps { grid-template-columns: 1fr }
  .cap { min-height: 0 }
  .proof-figs { grid-template-columns: 1fr; gap: var(--space-5) }
  .proof-fig + .proof-fig {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--border-subtle); padding-top: var(--space-5);
  }
  .work-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; row-gap: 4px }
  .work-cat { display: none }
  .roster-row { grid-template-columns: 1fr; gap: 2px }
  .tl { padding-left: clamp(32px, 9vw, 56px) }
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .line-mask > span { transform: none !important; opacity: 1 !important }
  .work-peek { display: none }
  .work-row, .cap, .work-go, .cap-go, .fw-shot { transition: none }
  .fw-shot img, .fw-shot video { transform: none !important }
  /* The rail is a progress indicator, not decoration: show it complete */
  .tl-rail-fill { transform: scaleY(1) !important }
}

/* ---- CLS reservation ----------------------------------------------------- */
/* The hero canvas is the top-of-viewport element and had no intrinsic size, so
   nothing reserved its box before the frame sequence drew. */
.hero-video { aspect-ratio: 16 / 9 }
.vsx-video  { aspect-ratio: 16 / 9 }