/* =========================================================================
   IN COLOR / FILMS — shared stylesheet
   Cream type on near-black. Fraunces (serif) + Inter (sans).
   No build step. Fonts swappable via the variables below.
   ========================================================================= */

:root {
  /* Type stand-ins — swap these two for GT Sectra / Söhne Breit later */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Palette */
  --black: #0B0B0A;   /* primary canvas                   */
  --ink-2: #141312;   /* secondary bands — warm, ~5% lift */
  --cream: #EDE7D9;
  --cream-78: rgba(237, 231, 217, 0.78);
  --cream-60: rgba(237, 231, 217, 0.60);
  --cream-40: rgba(237, 231, 217, 0.40);
  --hairline: rgba(237, 231, 217, 0.16);

  /* Rhythm */
  --pad-x: clamp(20px, 5.2vw, 96px);
  --pad-y: clamp(56px, 9vw, 168px);
  --maxw: 1500px;

  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);     /* entrances, reveals, hovers */
  --ease-signature-out: cubic-bezier(0.7, 0, 0.84, 0); /* exits: lightbox/menu dismiss */

  /* Optical size tiers — Fraunces opsz axis (9..144).
     One place for the GT Sectra / Söhne Breit font swap.
     Display/heading/subhead/caption tiers override via explicit font-variation-settings.
     Body-tier elements rely on font-optical-sizing: auto below. */
  --opsz-display:  144;  /* hero title, giant wordmarks               */
  --opsz-heading:   96;  /* page titles, large section heads          */
  --opsz-subhead:   48;  /* card titles, lede, marquee, mid display   */
  --opsz-body:      24;  /* design-intent ref; auto-tracked at runtime */
  --opsz-caption:   14;  /* fine labels, small italic, index numbers  */

  font-optical-sizing: auto;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

::selection      { background: var(--cream); color: var(--black); }
::-moz-selection { background: var(--cream); color: var(--black); }

/* =========================================================================
   1 · FILM GRAIN OVERLAY
   ========================================================================= */
.grain {
  position: fixed;
  inset: -40%;
  width: 180%;
  height: 180%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: screen;
  animation: grain-shift 0.8s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -2%); }
  20%  { transform: translate(-8%, 4%); }
  30%  { transform: translate(3%, -12%); }
  40%  { transform: translate(-3%, 8%); }
  50%  { transform: translate(-8%, 2%); }
  60%  { transform: translate(6%, 0%); }
  70%  { transform: translate(0%, 6%); }
  80%  { transform: translate(4%, -4%); }
  90%  { transform: translate(-3%, 3%); }
  100% { transform: translate(2%, 1%); }
}

/* =========================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.rule { border: 0; border-top: 0.5px solid var(--hairline); margin: 0; }

.section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.section--tight { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(40px, 6vw, 96px); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-60);
}

.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-40);
}

/* =========================================================================
   HEADER · logo + nav
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(11, 11, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--hairline);
}
/* Inner row mirrors .shell (same max-width, margin, pad-x) so the logo's left
   edge lands on exactly the same left axis as the hero headline — at every
   viewport width — while the hairline + blur stay full-bleed on .site-header. */
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(16px, 2vw, 26px) var(--pad-x); /* existing header padding preserved */
  display: flex;
  align-items: center;            /* logo vertically centred in the header band */
  justify-content: space-between;
  gap: 24px;
}

/* Logo lockup — transparent cream PNG (IИ COLOЯ / FILMS), ~2.4× the former
   text wordmark's rendered height; scales down with the viewport. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
/* Live-text header wordmark — replaces the two-line logo-cream.png.
   Same mirrored-glyph device (.rev) as the footer signoff; no PNG dependency.
   Unified size across all pages — home size applied as the base. */
.brand-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--cream);
}

/* Brand sparkle — four-point mark sitting right of the wordmark lockup. */
.brand-spark {
  display: block;
  width: clamp(12px, 1.3vw, 18px);
  height: clamp(12px, 1.3vw, 18px);
  margin-left: clamp(12px, 1.2vw, 20px);
  margin-bottom: 0;
  align-self: center;
  flex: 0 0 auto;
  opacity: 0.9;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* TODO: real small caps — swap font-variant-caps: small-caps once GT Sectra / Söhne Breit
   are loaded (those cuts carry proper sc glyphs). The current Inter from Google Fonts does
   not ship small-cap alternates, so the synthesised version is weaker than the faked
   uppercase + tracking treatment used here and throughout (nav, labels, eyebrows, tile
   captions, form labels, signoff strip, footer links). Keep faked until the font swap. */
.nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-78);
  padding: 4px 0;
  transition: color 0.4s var(--ease-signature);
}
/* slash separator between every item — dimmed below the label colour */
.nav a:not(:last-child)::after {
  content: "/";
  color: var(--cream-40);
  margin: 0 clamp(10px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0;
}
.nav a:hover,
.nav a:focus-visible { color: var(--cream); }
.nav a.is-active,
.nav a[aria-current="page"] { color: var(--cream); }

/* Tablet & below: the nav drops to its own full-width row beneath the logo
   and wraps as needed, so the six slashed items never crowd the logo. */
@media (max-width: 1023px) {
  .header-inner { flex-wrap: wrap; row-gap: clamp(12px, 2vw, 18px); }
  .nav { order: 2; width: 100%; justify-content: flex-start; }
  .nav a:not(:last-child)::after { margin: 0 clamp(8px, 2vw, 12px); }
}
@media (max-width: 600px) {
  .nav a { font-size: 10px; letter-spacing: 0.18em; }
}

/* =========================================================================
   2 · HERO (home)
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(24px, 4.5vh, 64px);
  padding-bottom: clamp(20px, 3.5vh, 48px);
}

/* ---- Background film layer — all pages ----
   Layer order back-to-front: poster (bg-image) → video → scrim → grain (fixed) → type.
   Desktop: position:fixed so film holds in viewport while page content scrolls over it.
   Mobile (≤768px): reset to absolute — contained in the hero wrapper, poster only. */
.hero-film {
  position: fixed;
  inset: 0;
  transform: none;
  width: auto;
  height: auto;
  z-index: 0;
  /* Poster set dynamically by JS (matches chosen film). Fallback: body #0B0B0A. */
  background-size: cover;
  background-position: center;
}

.hero-film__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Grade: desaturate and darken toward the dark palette */
  filter: saturate(0.72) brightness(0.62) contrast(1.04);
}

.hero-film__scrim {
  position: absolute;
  inset: 0;
  /* 4-layer composite: bottom dissolve → top darken → left weight → vignette.
     Film is fixed, so the bottom dissolve always resolves at the footer threshold. */
  background:
    linear-gradient(to top, #0B0B0A 0%, rgba(11,11,10,0) 32%),
    linear-gradient(to bottom, rgba(11,11,10,0.75) 0%, rgba(11,11,10,0) 20%),
    linear-gradient(95deg,
      rgba(11,11,10,.92)  0%,
      rgba(11,11,10,.70) 36%,
      rgba(11,11,10,.42) 68%,
      rgba(11,11,10,.60) 100%),
    radial-gradient(ellipse 110% 110% at 50% 48%,
      transparent 24%,
      rgba(11,11,10,.54) 100%);
  pointer-events: none;
}
.hero-eyebrow {
  margin-bottom: clamp(20px, 3.4vh, 44px);
  opacity: 0;
  animation: hero-fade 1s var(--ease-signature) 0.05s forwards;
}

.hero-title {
  position: relative;
  z-index: 1; /* above .hero-film (z-index: 0) */
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' var(--opsz-display), 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: clamp(44px, 7.6vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 18ch;
  color: var(--cream);
}
/* triad: each word holds its own line and rises out of its own mask, on its own beat */
.hero-title .word {
  display: block;
  overflow: hidden;
}
.hero-title .word > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(112%);
  animation: hero-rise 1.05s var(--ease-signature) forwards;
}
.hero-title .word:nth-child(1) > i { animation-delay: 0.12s; }
.hero-title .word:nth-child(2) > i { animation-delay: 0.24s; }
.hero-title .word:nth-child(3) > i { animation-delay: 0.36s; }

.hero-sub {
  position: relative;
  z-index: 1; /* above .hero-film */
  display: block;
  overflow: hidden;
  margin-top: clamp(8px, 1.4vh, 18px);
}
.hero-sub > i {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' var(--opsz-heading), 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(24px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--cream-60);
  transform: translateY(112%);
  animation: hero-rise 1.05s var(--ease-signature) 0.52s forwards;
}
/* ✦ separators in the subline — same dimmed, upright, smaller treatment as the marquee sparkle */
.hero-sub .hero-spark {
  font-style: normal;
  font-size: 0.42em;
  color: var(--cream-40);
  vertical-align: 0.28em;
  margin: 0 0.06em;
}
@keyframes hero-rise { to { transform: translateY(0); } }
@keyframes hero-fade { to { opacity: 1; } }

/* =========================================================================
   3 · CLIENT MARQUEE
   ========================================================================= */
.marquee {
  border-top: 0.5px solid var(--hairline);
  border-bottom: 0.5px solid var(--hairline);
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px) 0;
  background: var(--ink-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex-shrink: 0; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' var(--opsz-subhead), 'wght' 300, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(20px, 2.6vw, 34px);
  color: var(--cream-78);
  white-space: nowrap;
  padding: 0 clamp(20px, 2.6vw, 40px);
}
.marquee-item::after {
  content: "✦";
  font-style: normal;
  font-size: 0.42em;
  color: var(--cream-40);
  margin-left: clamp(20px, 2.6vw, 40px);
  transform: translateY(-0.35em);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   INTRO / TEXT BLOCKS
   ========================================================================= */
.block-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 64px);
}
.lede {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: 'opsz' var(--opsz-subhead), 'wght' 350, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
  hanging-punctuation: first last;
}

.prose {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-variant-numeric: proportional-nums oldstyle-nums;
  max-width: 62ch;
  margin: 0 0 1.1em;
  color: var(--cream);
  text-wrap: pretty;
  hanging-punctuation: first last;
}
.prose:last-child { margin-bottom: 0; }
.prose em { font-style: italic; }

.page-head {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.page-head .eyebrow,
.page-head .page-title { position: relative; z-index: 1; }

/* Wrapper that spans heading + intro copy so the film covers both */
.page-hero-wrap {
  position: relative;
  overflow: hidden;
}
/* Lift the intro copy section above the absolutely-positioned film */
.page-hero-wrap > .section--tight { position: relative; z-index: 1; }
.page-title {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: 'opsz' var(--opsz-heading), 'wght' 350, 'SOFT' 0, 'WONK' 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: clamp(38px, 6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: clamp(20px, 3vw, 40px) 0 0;
  text-wrap: balance;
}
.page-title em { font-style: italic; color: var(--cream-40); }

/* split / two column rows */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 72px);
}
@media (min-width: 860px) {
  .split { grid-template-columns: 0.9fr 1.1fr; }
  .block-head { grid-template-columns: 0.9fr 1.1fr; align-items: end; }
}

.section-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.section-bar .link-arrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-78); }
.link-arrow:hover { color: var(--cream); }

/* =========================================================================
   4 · WORK GRID
   ========================================================================= */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 72px) clamp(20px, 3vw, 48px);
}
.work-card { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .work-card.wide { grid-column: span 7; }
  .work-card.tall { grid-column: span 5; }
  .work-card.tall { margin-top: clamp(40px, 7vw, 130px); }
  .work-card.wide:nth-of-type(4n+1) { margin-top: 0; }
  .work-card.wide.lower { margin-top: clamp(30px, 5vw, 90px); }
}

.frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #16161a 0%, #0d0d0c 55%, #1b1a17 100%);
  border: 0.5px solid var(--hairline);
}
.frame::before {
  /* subtle vignette so placeholders read as frames */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 30% 20%, rgba(237,231,217,0.05), transparent 60%);
  z-index: 1;
}
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-signature);
}
.frame-16x9 { aspect-ratio: 16 / 9; }
.frame-4x5 { aspect-ratio: 4 / 5; }

.frame-index {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: 'opsz' var(--opsz-caption), 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--cream-78);
  letter-spacing: 0.02em;
}
.frame-tc {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--cream-60);
}
.frame-arrow {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  color: var(--cream);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s var(--ease-signature), transform 0.5s var(--ease-signature);
}
.frame:hover img { transform: scale(1.05); }
.frame:hover .frame-arrow { opacity: 1; transform: translateX(0); }

/* Location tiles: crossfade to a second, decorative image on hover.
   The second <img> sits over the first and fades in. Higher specificity than
   `.frame img` so the opacity transition isn't lost to the base transform-only
   transition. Hover won't fire on touch — the label carries all meaning. */
.frame img.frame-hover-img {
  opacity: 0;
  transition: opacity 0.6s var(--ease-signature), transform 0.9s var(--ease-signature);
}
.frame:hover img.frame-hover-img { opacity: 1; }

/* Work cards (Option C): the frame holds the still + injected hover preview; a
   transparent overlay <button> is the click/keyboard target (a <button> may not
   legally contain the preview <iframe>, so it sits beside the frame children). */
.frame-still { z-index: 0; }            /* still/poster — beneath the preview */
/* the still itself doesn't zoom on hover (the video covers it) — keeps the
   mouse-out return to the still clean, with no leftover scale or motion jump */
.frame:hover .frame-still { transform: none; }

.frame-play {
  position: absolute;
  inset: 0;
  z-index: 3;                           /* above still, preview and labels */
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.frame-play:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 3px;
}

/* Muted hover preview — forced to 16:9 and over-scaled on the tall (4:5) cards
   so the 16:9 video covers the frame with no letterbox. Pointer-transparent so
   clicks reach .frame-play; sits above the still, below the index/timecode. */
.frame-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 0;
  pointer-events: none;
}
.frame-16x9 .frame-preview { width: 100%; height: 100%; }
.frame-4x5 .frame-preview { width: 222.23%; height: 100%; }

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 0.5px solid var(--hairline);
  margin-top: 16px;
}
.work-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-60); }
.work-title {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: 'opsz' var(--opsz-subhead), 'wght' 360, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.work-dir { font-size: 13px; color: var(--cream-60); }

.note { font-size: 12.5px; color: var(--cream-40); max-width: 60ch; line-height: 1.6; }

/* Card caption (e.g. Babylove) sits inside .work-meta. Scope it so it is not
   captured by the full-width `.note` section component defined later in this
   file (which would impose display:grid, large padding and auto-centring).
   Keeps the caption in normal flow, flush-left under the credits, with 1rem
   of breathing room above. Font size, colour and style are left untouched. */
.work-meta .note {
  display: block;
  max-width: 60ch;
  margin: 1rem 0 0;
  padding: 0;
  text-align: left;
}

/* =========================================================================
   TILE GRID (locations)
   ========================================================================= */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
}
@media (min-width: 620px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
.tile figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--hairline);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* portrait (about) */
.portrait { width: 100%; }
.portrait figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cream-60);
}

/* =========================================================================
   DEFINITION / DELIVERABLES LISTS
   ========================================================================= */
.service-col .num {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: 'opsz' var(--opsz-caption), 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-size: 15px;
  color: var(--cream-40);
}
.service-col h3 {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: 'opsz' var(--opsz-subhead), 'wght' 360, 'SOFT' 0, 'WONK' 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -0.01em;
  margin: 10px 0 16px;
  text-wrap: balance;
}
.hair-list { list-style: none; margin: 24px 0 0; padding: 0; }
.hair-list li {
  padding: 14px 0;
  border-top: 0.5px solid var(--hairline);
  font-size: 14px;
  color: var(--cream-78);
}
.hair-list li:last-child { border-bottom: 0.5px solid var(--hairline); }

.recognition-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  margin-top: 24px;
}
.recognition-row span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: 'opsz' var(--opsz-subhead), 'wght' 350, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--cream-78);
}

/* =========================================================================
   PILL BUTTON
   ========================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0.5px solid var(--cream-40);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  background: transparent;
  transition: background 0.45s var(--ease-signature), color 0.45s var(--ease-signature), border-color 0.45s var(--ease-signature);
}
.pill:hover { background: var(--cream); color: var(--black); border-color: var(--cream); }

/* =========================================================================
   CONTACT BAND
   ========================================================================= */
.contact-band { text-align: left; }
.contact-band .big {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: 'opsz' var(--opsz-heading), 'wght' 350, 'SOFT' 0, 'WONK' 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: clamp(32px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(28px, 4vw, 48px);
  max-width: 16ch;
  text-wrap: balance;
}
.contact-band .big em { font-style: italic; color: var(--cream-40); }
.contact-band .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.contact-band .mail { font-size: 14px; color: var(--cream-60); letter-spacing: 0.04em; }
.contact-band .mail:hover { color: var(--cream); }

/* =========================================================================
   ENQUIRY FORM
   ========================================================================= */
.form { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-40);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--hairline);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  padding: 10px 0;
  border-radius: 0;
  transition: border-color 0.4s var(--ease-signature);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--cream);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select option { background: var(--black); color: var(--cream); }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--cream-40); }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--cream-60);
  line-height: 1.5;
}
.consent input { margin-top: 3px; accent-color: var(--cream); }

.contact-detail h3 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-40); margin: 0 0 8px;
}
.contact-detail {
  padding: 22px 0;
  border-top: 0.5px solid var(--hairline);
}
.contact-detail:last-of-type { border-bottom: 0.5px solid var(--hairline); }
.contact-detail p { margin: 0; font-size: 16px; color: var(--cream); }
.contact-detail a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* structured contact directory — stacked lines, team members, dept rows.
   Reuses the .contact-detail group rhythm (hairlines + 22px padding) above. */
.contact-detail > p + p { margin-top: 7px; }
.contact-detail .cr-label,
.contact-detail .contact-muted { color: var(--cream-60); }
.contact-detail .contact-person { margin-top: 18px; }
.contact-detail .contact-person:first-of-type { margin-top: 10px; }
.contact-detail .cp-name {
  font-family: var(--serif); font-weight: 400; font-size: 19px;
  line-height: 1.15; color: var(--cream); margin: 0;
}
.contact-detail .cp-role {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em;
  color: var(--cream-60); margin: 3px 0 0;
}
.contact-detail .cp-email { font-size: 15px; margin: 7px 0 0; }

/* =========================================================================
   5 · GIANT SIGN-OFF
   ========================================================================= */
/* Signoff sits inside .site-footer — the footer's own top padding provides breathing room */
.signoff { padding: 0; }

/* Mirrored Latin glyphs — reversed N and R in IИ COLOЯ replaced with scaleX(-1)
   so stroke weight, contrast, and opsz match the surrounding Inter 800 caps exactly.
   transform-origin: 50% 50% (default) = horizontal mirror about the glyph's own centre. */
.rev {
  display: inline-block;
  transform: scaleX(-1);
}
.signoff .so-top {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(29px, 6.25vw, 93px);
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin: 0;
}
.signoff .so-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 56px);
  padding-top: 20px;
  border-top: 0.5px solid var(--hairline);
  padding-bottom: clamp(18px, 2.2vw, 26px);
  border-bottom: 0.5px solid var(--hairline);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.signoff .so-strip a:hover { color: var(--cream); }

/* =========================================================================
   FOOTER
   ========================================================================= */
/* All pages: content scrolls above the fixed film layer */
main { position: relative; z-index: 1; }

.site-footer {
  position: relative;
  z-index: 1;                    /* sits above fixed film; --ink-2 bg covers film in footer zone */
  padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
  border-top: 0.5px solid var(--hairline);
  background: var(--ink-2);
}

/* Split links row — sister brands LEFT, social RIGHT, balanced on the
   same left/right axis as the .so-strip above. Wrapper owns the hairline
   and the bottom spacing; the inner nav groups are gap-only flex rows. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(18px, 3vw, 32px) clamp(20px, 4vw, 60px);
  padding-bottom: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 0.5px solid var(--hairline);
}
@media (max-width: 720px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 3.4vw, 22px);
  }
  .signoff .so-strip { flex-direction: column; gap: clamp(8px, 2vw, 12px); }
}

/* Sister-brand wordmark links — Inter caps + tracking, plain text, quiet hover.
   Bare wordmarks only: no descriptor, no tagline (brand boundary). */
.footer-brands {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
}
.footer-brands a {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-60);
  transition: color 0.4s var(--ease-signature);
}
.footer-brands a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 0.5px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-signature);
}
.footer-brands a:hover { color: var(--cream); }
.footer-brands a:hover::after { transform: scaleX(1); }

/* Social links — Instagram/LinkedIn. Same footer treatment as the sister-brand
   row: Inter caps, 0.2em tracking, hairline underline on hover. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
}
.footer-social a {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-60);
  transition: color 0.4s var(--ease-signature);
}
.footer-social a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 0.5px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-signature);
}
.footer-social a:hover { color: var(--cream); }
.footer-social a:hover::after { transform: scaleX(1); }

/* Legal lines — holding-page footer treatment (10.5px / 0.04em / 1.7 / 0.4 cream) */
.footer-legal p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--cream-40);
  max-width: 80ch;
}
.footer-legal p + p { margin-top: 6px; }

.footer-spark {
  position: absolute;
  right: var(--pad-x);
  top: clamp(10px, 1.4vw, 18px);
  width: 18px;
  height: 18px;
  opacity: 0.5;
}

/* =========================================================================
   HOME — single screen (no scroll ≥1024; flows & scrolls naturally below).
   Driven by html.home so every other page is untouched.
   ========================================================================= */
html.home body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
html.home main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Hero section grows to fill the upper space; marquee drops to the bottom of main */
html.home .hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Enlarged logo carries the brand on home — the giant sign-off is dropped here.
   Left edge still rides the hero's axis (shared --pad-x on header-inner + .shell). */
/* .brand-logo rule removed — header now uses live-text .brand-wordmark */
/* Home header carries the brand — drop the giant sign-off from the footer */
html.home .signoff { display: none; }
/* Marquee: film shows through; feathered scrim replaces --ink-2 band */
html.home .marquee {
  background: linear-gradient(to bottom,
    transparent,
    rgba(11,11,10,0.28) 25%,
    rgba(11,11,10,0.28) 75%,
    transparent);
  border-top: none;
  border-bottom: none;
}
@media (min-width: 1024px) {
  html.home,
  html.home body { height: 100vh; }
  html.home body { overflow: hidden; }
  /* tighten only the footer's whitespace so the screen holds — treatment unchanged */
  html.home .site-footer { padding: clamp(14px, 2.2vh, 26px) 0; }
  html.home .footer-links {
    padding-bottom: clamp(10px, 1.4vh, 16px);
    margin-bottom: clamp(10px, 1.4vh, 16px);
  }
}

/* =========================================================================
   HALATION — editorial "page notes"
   ========================================================================= */
.note {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 16vh, 168px) var(--pad-x) clamp(48px, 11vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.note > div:not(.hero-film) { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .note { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
}
.note h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' var(--opsz-display), 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  line-height: 0.96;
  letter-spacing: -0.015em;
  font-size: clamp(54px, 10vw, 128px);
  color: var(--cream);
  margin-top: clamp(14px, 1.4vw, 22px);
  text-wrap: balance;
}
.note h1 em { font-style: italic; color: var(--cream-60); }
.note .note-body p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.42;
  font-variant-numeric: proportional-nums oldstyle-nums;
  color: var(--cream);
  max-width: 42ch;
  margin: 0 0 1.4rem;
  text-wrap: pretty;
  hanging-punctuation: first last;
}
.note .note-body p.muted { color: var(--cream-60); }
.out {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 0.5px solid var(--cream-40);
  padding-bottom: 0.45rem;
  transition: border-color 0.4s var(--ease-signature);
}
.out:hover { border-color: var(--cream); }
.out span { display: inline-block; transition: transform 0.4s var(--ease-signature); }
.out:hover span { transform: translateX(0.35rem); }

/* =========================================================================
   WORK → CLOUDFLARE STREAM LIGHTBOX
   ========================================================================= */
.reel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  background: rgba(11, 11, 10, 0.92); /* fallback */
  background: color-mix(in srgb, var(--black) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 0.35s var(--ease-signature);
}
.reel[hidden] { display: none; } /* author rule beats display:flex above */

.reel__frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
}
.reel__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reel__close {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);
  right: var(--pad-x);
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--cream-78);
  cursor: pointer;
  transition: color 0.4s var(--ease-signature);
}
.reel__close:hover { color: var(--cream); }
.reel__close:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 3px;
  color: var(--cream);
}

/* =========================================================================
   PROJECT PAGE (template — courvoisier.html, future project pages)
   ========================================================================= */
.project-credits {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-60);
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* the film — centred 16:9, capped at ~1100px */
.project-film {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border: 0.5px solid var(--hairline);
}
.project-film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-variant-numeric: proportional-nums oldstyle-nums;
  color: var(--cream-60);
  max-width: 32em;
  margin: 0;
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* stills gallery — 2 columns on desktop, 1 on mobile */
.stills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: clamp(24px, 3vw, 44px);
}
@media (min-width: 720px) {
  .stills-grid { grid-template-columns: repeat(2, 1fr); }
}
.still {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 16 / 9;
  border: 0.5px solid var(--hairline);
  background: linear-gradient(135deg, #16161a 0%, #0d0d0c 55%, #1b1a17 100%); /* dark fallback */
}
.still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-signature);
}
.still:hover img { transform: scale(1.04); }

/* next-project link */
.next-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-60);
  transition: color 0.4s var(--ease-signature);
}
.next-link:hover { color: var(--cream); }
.next-link span { display: inline-block; transition: transform 0.4s var(--ease-signature); }
.next-link:hover span { transform: translateX(0.3rem); }

/* =========================================================================
   6 · SCROLL REVEALS  (gated behind html.js so content stays visible w/o JS)
   ========================================================================= */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-signature), transform 1s var(--ease-signature);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
html.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
html.js .reveal[data-delay="5"] { transition-delay: 0.40s; }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
/* Mobile ≤768px: poster still only — no video; film pinned to hero wrapper (no fixed on iOS) */
@media (max-width: 768px) {
  .hero-film {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .hero-film__video { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .marquee-track { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-eyebrow { opacity: 1; animation: none; }
  .hero-title .word > i,
  .hero-sub > i { transform: none; animation: none; }
  .hero-film__video { display: none; } /* poster still only */
  .frame img,
  .frame img.frame-hover-img,
  .still img { transition: none; }
  * { scroll-behavior: auto; }
}

/* ============================================================
   Production-network globe (canvas) — the reach interstitial.
   Used by about.html, locations.html and services.html.
   Cream-on-ink, scoped to .nx-about.
   Local vars match the site tokens exactly (--cream/--black/Inter).
   ============================================================ */
.nx-about{
  --cream:#EDE7D9;
  --ink:#0B0B0A;
  --cream-rgb:237,231,217;
  font-family:var(--sans);
  position:relative;
  width:100%;
  height:100vh;
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(320px,40%) 1fr;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
}

/* left copy + staggered load reveal */
.nx-copy{position:relative;z-index:5;padding:0 0 0 clamp(32px,6vw,110px);max-width:560px}
.nx-copy > *{opacity:0;transform:translateY(14px);animation:nxRise .9s var(--ease-signature) forwards}
.nx-eyebrow{animation-delay:.05s}
.nx-headline{animation-delay:.16s}
.nx-lede{animation-delay:.28s}
@keyframes nxRise{to{opacity:1;transform:none}}

.nx-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12.5px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(var(--cream-rgb),.85);margin-bottom:26px;
}
.nx-eyebrow .nx-tick{width:34px;height:1px;background:rgba(var(--cream-rgb),.6);transform-origin:left center;transform:scaleX(0);animation:nxDraw .85s var(--ease-signature) .5s forwards}
.nx-eyebrow .nx-spark{font-size:10px;color:rgba(var(--cream-rgb),.5)}
@keyframes nxDraw{to{transform:scaleX(1)}}

.nx-headline{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:.12em;line-height:1.12;text-transform:uppercase;margin-bottom:30px}
.nx-headline .nx-dot{color:rgba(var(--cream-rgb),.4);font-weight:400;margin:0 .12em}

.nx-lede{font-size:clamp(14px,1.05vw,16px);line-height:1.7;font-weight:400;color:rgba(var(--cream-rgb),.62);max-width:430px}
.nx-lede + .nx-lede{margin-top:18px;animation-delay:.4s}
.nx-lede a{color:rgba(var(--cream-rgb),.92);text-decoration:none;border-bottom:1px solid rgba(var(--cream-rgb),.32);padding-bottom:1px;white-space:nowrap;transition:border-color .35s var(--ease-signature),color .35s var(--ease-signature)}
.nx-lede a:hover{color:var(--cream);border-color:rgba(var(--cream-rgb),.75)}

/* globe stage */
.nx-stage{position:relative;width:100%;height:100%;z-index:2;cursor:grab}
.nx-stage.nx-dragging{cursor:grabbing}
.nx-stage canvas{display:block;width:100%;height:100%}

/* corner reticles */
.nx-reticle{position:absolute;width:34px;height:34px;pointer-events:none;opacity:.5;z-index:4}
.nx-reticle::before,.nx-reticle::after{content:"";position:absolute;background:rgba(var(--cream-rgb),.4)}
.nx-reticle::before{width:100%;height:.5px}
.nx-reticle::after{height:100%;width:.5px}
.nx-reticle.tl{top:30px;left:24px}
.nx-reticle.tl::before{top:0;left:0}.nx-reticle.tl::after{top:0;left:0}
.nx-reticle.tr{top:30px;right:24px}
.nx-reticle.tr::before{top:0;right:0}.nx-reticle.tr::after{top:0;right:0}
.nx-reticle.bl{bottom:30px;left:24px}
.nx-reticle.bl::before{bottom:0;left:0}.nx-reticle.bl::after{bottom:0;left:0}
.nx-reticle.br{bottom:30px;right:24px}
.nx-reticle.br::before{bottom:0;right:0}.nx-reticle.br::after{bottom:0;right:0}

/* telemetry readout */
.nx-hud{position:absolute;top:34px;left:30px;z-index:4;pointer-events:none;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--cream-rgb),.42);font-variant-numeric:tabular-nums;line-height:2}
.nx-hud .row{display:flex;gap:10px;align-items:center}
.nx-hud .k{color:rgba(var(--cream-rgb),.3)}
.nx-hud .v{color:rgba(var(--cream-rgb),.66)}
.nx-hud .live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cream);margin-right:7px;vertical-align:middle;animation:nxBlink 2.4s ease-in-out infinite}
@keyframes nxBlink{0%,100%{opacity:1}50%{opacity:.25}}

.nx-vlabel{position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:4;pointer-events:none;font-size:9px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:rgba(var(--cream-rgb),.26);font-variant-numeric:tabular-nums}

.nx-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;font-size:9px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:rgba(var(--cream-rgb),.34);transition:opacity .8s var(--ease-signature)}
.nx-hint.nx-gone{opacity:0}

/* scanline */
.nx-scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(var(--cream-rgb),.025) 50%,transparent 100%);height:40%;animation:nxSweep 9s linear infinite;mix-blend-mode:screen;opacity:.7}
@keyframes nxSweep{0%{transform:translateY(-120%)}100%{transform:translateY(320%)}}

@media (max-width:860px){
  .nx-about{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .nx-copy{padding:90px 32px 0}
  .nx-vlabel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nx-scan{display:none}
  .nx-copy > *{opacity:1;transform:none;animation:none}
  .nx-eyebrow .nx-tick{transform:scaleX(1);animation:none}
}