/* ============================================================
   SPARK EXPERIENCE — "The Title Card"
   Cinematic design system. Single stylesheet, no dependencies.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --ink:          #070707;
  --ink-raised:   #0e0e0f;
  --ink-lift:     #151517;
  --chrome:       #e8e8ea;
  --chrome-dim:   #9a9aa2;
  --chrome-mute:  #6a6a72;
  --ember:        #c8863c;
  --ember-lift:   #e0a35c;
  --hairline:     rgba(232, 232, 234, .12);
  --hairline-hi:  rgba(232, 232, 234, .28);

  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Hoefler Text", Garamond, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut:   clamp(1.25rem, 4vw, 3.5rem);   /* page gutter */
  --bay:   clamp(4.5rem, 11vh, 9rem);     /* vertical section rhythm */
  --max:   1320px;

  --ease:  cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--ink);
  color: var(--chrome);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto is load-bearing — the width/height attributes on <img> (kept for
   CLS) act as presentational hints setting a fixed height, and an explicit
   height makes the browser ignore aspect-ratio entirely. */
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

/* Film grain — cinematic texture, inline SVG so it costs no request.
   No mix-blend-mode: blending a viewport-sized fixed layer forces a full-page
   recomposite on every frame. Over a near-black page a plain low-opacity tile
   is visually equivalent and effectively free. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--ember); color: #0a0a0a; }

:focus-visible {
  outline: 2px solid var(--ember-lift);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ember); color: #0a0a0a; padding: .75rem 1.25rem;
  font: 600 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.bay { padding-block: var(--bay); }
.rule { border: 0; border-top: 1px solid var(--hairline); }

/* ---------- 4. Type ---------- */
.eyebrow {
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: .875rem;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 5rem;
  background: linear-gradient(90deg, var(--ember), transparent);
}
.eyebrow--plain::after { display: none; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  height: 1px; flex: 1; max-width: 5rem;
  background: linear-gradient(270deg, var(--ember), transparent);
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
}

.t-hero    { font-size: clamp(2.5rem, 5.8vw, 5rem); }
.t-section { font-size: clamp(2rem, 4.6vw, 3.75rem); }
.t-card    { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }

.lede {
  font-size: clamp(1rem, 1.28vw, 1.1875rem);
  line-height: 1.72;
  color: var(--chrome-dim);
  max-width: 62ch;
}
.small { font-size: .875rem; line-height: 1.7; color: var(--chrome-dim); }
.meta {
  font: 500 .6875rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chrome-mute);
}
.ember { color: var(--ember); }

/* Title card — the repeating section opener. */
.titlecard { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.titlecard--center { justify-items: center; text-align: center; }
.titlecard--center .lede { text-align: center; }
.titlecard--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .titlecard--split { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
  .titlecard--split .lede { padding-bottom: .4rem; }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.75rem;
  border: 1px solid var(--hairline-hi);
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome);
  background: transparent;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover { background: var(--chrome); border-color: var(--chrome); color: var(--ink); }
.btn__arrow { transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ember { background: var(--ember); border-color: var(--ember); color: #0a0a0a; }
.btn--ember:hover { background: var(--ember-lift); border-color: var(--ember-lift); color: #0a0a0a; }

.btn--sm { padding: .7rem 1.25rem; font-size: .6875rem; }

/* Text link with an underline that draws in. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--hairline-hi);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.tlink:hover { color: var(--ember); border-color: var(--ember); }
.tlink:hover .btn__arrow { transform: translateX(4px); }

/* ---------- 6. Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Solid alpha rather than backdrop-filter: this class toggles on every scroll
   frame, and a viewport-wide backdrop blur re-rasterises the page behind it each
   time — enough to peg the renderer. Over a near-black page the two are
   indistinguishable, so the blur buys nothing and costs everything. */
.nav.is-stuck {
  background: rgba(7, 7, 7, .94);
  border-bottom-color: var(--hairline);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}
.nav__logo img {
  height: clamp(26px, 3.2vw, 34px);
  width: auto;
  transition: opacity .35s var(--ease);
}
.nav__logo:hover img { opacity: .78; }

.nav__links { display: none; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
@media (min-width: 1000px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  padding-block: .5rem;
  transition: color .35s var(--ease);
}
.nav__link:hover { color: var(--chrome); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--ember);
  transition: width .38s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__link.is-here { color: var(--chrome); }
.nav__link.is-here::after { width: 100%; }

.nav__cta { display: none; }
@media (min-width: 1000px) { .nav__cta { display: inline-flex; } }

/* Burger — flex column with an explicit gap, so the bar spacing is a number we
   control (6px gap + 1px bar = 7px between centres). Under `display:grid` each
   bar became its own auto-sized row, spacing them ~17px apart, and the 7px
   translate below then landed them in a chevron instead of an X. */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  margin-right: -.5rem;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--chrome);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 6rem var(--gut) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
/* :not(.btn) matters — .drawer a (0,1,1) outranks .btn (0,1,0), so without it
   the CTA inherits the huge serif link styling and blows out of its box. */
.drawer a:not(.btn) {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  padding-block: .6rem;
  border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer a:not(.btn):hover,
.drawer a:not(.btn).is-here { color: var(--ember); padding-left: .75rem; }
.drawer .btn { margin-top: 2rem; justify-self: start; }
@media (min-width: 1000px) { .drawer { display: none; } }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__plate {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.72) contrast(1.06) brightness(.82);
}
/* Vignette + floor + left scrim, so type always lands on darkness.
   The plate has bright light-rays through its middle; the left wash keeps the
   headline legible over them without dimming the whole frame. */
.hero__plate::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,7,7,.86) 0%, rgba(7,7,7,.6) 36%, rgba(7,7,7,.05) 70%, rgba(7,7,7,.4) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(7,7,7,.35) 80%, rgba(7,7,7,.8) 100%),
    linear-gradient(to top, var(--ink) 1%, rgba(7,7,7,.5) 24%, transparent 58%, rgba(7,7,7,.5) 100%);
}
.hero__in { padding-bottom: clamp(3.5rem, 9vh, 6rem); padding-top: 7.5rem; }
.hero h1 { max-width: 13ch; margin-bottom: 1.5rem; }
.hero .lede { max-width: 52ch; margin-bottom: 2.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Scroll hint — parked hard right so it never collides with the CTAs. */
.hero__hint {
  position: absolute;
  right: var(--gut); bottom: 2rem;
  display: grid; justify-items: center; gap: .75rem;
}
.hero__hint span { writing-mode: vertical-rl; }
.hero__hint span {
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--chrome-mute);
}
.hero__hint i {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(var(--chrome-mute), transparent);
  transform-origin: top;
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (max-height: 700px) { .hero__hint { display: none; } }

/* Page header (interior pages) */
.phead {
  position: relative;
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: var(--bay);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.phead__plate { position: absolute; inset: 0; z-index: -1; }
.phead__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) brightness(.4) contrast(1.05);
}
.phead__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 4%, rgba(7,7,7,.86) 45%, rgba(7,7,7,.7) 100%);
}
.phead h1 { max-width: 16ch; margin-block: 1.5rem 1.5rem; }

/* ---------- 8. The Broadcast Wall ---------- */
.wall {
  background: var(--ink-raised);
  border-block: 1px solid var(--hairline);
  position: relative;
}
.wall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 760px)  { .wall__grid { grid-template-columns: repeat(4, 1fr); } }

.wall__cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(120px, 15vw, 172px);
  padding: 1.75rem 1.25rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  transition: background .5s var(--ease);
}
/* Ember bloom behind the logo on hover — the "spark". */
.wall__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 50%, rgba(200, 134, 60, .16), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.wall__cell:hover, .wall__cell:focus-visible { background: var(--ink-lift); }
.wall__cell:hover::before, .wall__cell:focus-visible::before { opacity: 1; }

.wall__cell img {
  position: relative;
  width: auto;
  max-width: min(160px, 78%);
  max-height: 46px;
  object-fit: contain;
  /* Rest: chrome/silver to match the logo. Hover: resolve to full brand colour. */
  filter: grayscale(1) brightness(1.9) contrast(.85) opacity(.62);
  transform: scale(.97);
  transition: filter .55s var(--ease), transform .55s var(--ease);
}
.wall__cell:hover img, .wall__cell:focus-visible img {
  filter: grayscale(0) brightness(1) contrast(1) opacity(1);
  transform: scale(1);
}

/* Per-logo optical sizing — these source files have wildly different padding. */
.wall__cell img[data-fit="wide"] { max-width: min(190px, 88%); }
.wall__cell img[data-fit="tall"] { max-height: 58px; }

/* Caption revealed under each logo */
.wall__name {
  position: absolute;
  left: 0; right: 0; bottom: .875rem;
  text-align: center;
  font: 500 .5625rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome-mute);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  padding-inline: .5rem;
}
.wall__cell:hover .wall__name, .wall__cell:focus-visible .wall__name {
  opacity: 1; transform: translateY(0);
}

/* Honest grouping legend */
.wall__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 2rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.wall__legend div { display: flex; align-items: baseline; gap: .625rem; }
/* Side-by-side label/value goes ragged once the label wraps — stack it instead. */
@media (max-width: 700px) {
  .wall__legend { gap: 1.25rem; }
  .wall__legend div { flex-direction: column; gap: .25rem; }
}
.wall__legend b {
  font: 600 .625rem/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember);
}
.wall__legend span { font-size: .8125rem; color: var(--chrome-mute); }

/* Condensed strip (interior pages) */
.strip { background: var(--ink-raised); border-block: 1px solid var(--hairline); }
.strip__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-block: 2.5rem;
}
.strip__label {
  width: 100%;
  text-align: center;
  margin-bottom: .5rem;
}
.strip a { display: grid; place-items: center; }
.strip img {
  max-height: 26px;
  max-width: 112px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.9) opacity(.48);
  transition: filter .5s var(--ease);
}
.strip a:hover img, .strip a:focus-visible img { filter: grayscale(0) brightness(1) opacity(1); }

/* ---------- 9. Feature spread (Travel by Dart) ---------- */
.spread { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 950px) {
  .spread { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 5vw, 5rem); }
  .spread--flip .spread__media { order: 2; }
}
.spread__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.spread__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .8s var(--ease);
}
.spread__media:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }

/* ---------- Video facade ----------
   A poster + play button that swaps in the YouTube iframe only on click.
   Keeps the page fast (no YouTube scripts at load) and means YouTube sets no
   cookies for visitors who never press play. */
.player {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-raised);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.player img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.78);
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.player:hover img, .player:focus-visible img { transform: scale(1.04); filter: saturate(1) brightness(.9); }
.player::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(7,7,7,.5));
  pointer-events: none;
}
.player__btn {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(232,232,234,.45);
  background: rgba(7,7,7,.5);
  color: var(--chrome);
  transition: background .4s var(--ease), border-color .4s var(--ease), scale .4s var(--ease);
}
.player:hover .player__btn, .player:focus-visible .player__btn {
  background: var(--ember);
  border-color: var(--ember);
  color: #0a0a0a;
  scale: 1.08;
}
.player__btn svg { margin-left: 3px; }
.player__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2.5rem 1.25rem 1.125rem;
  text-align: center;
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--chrome-dim);
  background: linear-gradient(to top, rgba(7,7,7,.9), transparent);
  pointer-events: none;
}
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player.is-playing::after,
.player.is-playing .player__btn,
.player.is-playing .player__label,
.player.is-playing .slate { display: none; }

/* Play badge on portfolio cards */
.card__play {
  position: absolute;
  right: 1rem; bottom: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(232,232,234,.35);
  background: rgba(7,7,7,.6);
  color: var(--chrome);
  transition: background .4s var(--ease), border-color .4s var(--ease), scale .4s var(--ease);
}
.card:hover .card__play,
.card:focus-visible .card__play {
  background: var(--ember); border-color: var(--ember); color: #0a0a0a; scale: 1.1;
}
.card__play svg { margin-left: 2px; }

/* Film-slate tag on media */
.slate {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .875rem;
  background: rgba(7, 7, 7, .9);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.slate::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ember);
  border-radius: 50%;
}

.spread__body h2 { margin-bottom: 1.5rem; }
.spread__body .lede { margin-bottom: 2rem; }

/* Numbered facts under the spread */
.facts { display: grid; gap: 0; margin-bottom: 2rem; border-top: 1px solid var(--hairline); }
.facts div {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.facts dt {
  font: 500 .625rem/1.6 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember);
  min-width: 5.5rem;
}
.facts dd { font-size: .9375rem; color: var(--chrome-dim); }

/* ---------- 10. Work grid ---------- */
.work {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (min-width: 640px)  { .work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .work { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: block;
  background: var(--ink);
  overflow: hidden;
  transition: background .5s var(--ease);
}
.card:hover { background: var(--ink-lift); }
.card__media { position: relative; overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.6) brightness(.72) contrast(1.05);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img,
.card:focus-visible .card__media img {
  transform: scale(1.06);
  filter: saturate(1) brightness(.95) contrast(1.02);
}
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,.85), transparent 55%);
}
.card__cat {
  position: absolute;
  left: 1rem; top: 1rem;
  z-index: 2;
  padding: .35rem .625rem;
  background: rgba(7,7,7,.88);
  border: 1px solid var(--hairline);
  font: 500 .5625rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome-dim);
}
.card__body { padding: 1.5rem 1.5rem 1.75rem; }
.card__client {
  font: 500 .625rem/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember);
  margin-bottom: .625rem;
}
.card__title { margin-bottom: 1rem; transition: color .35s var(--ease); }
.card:hover .card__title { color: var(--chrome); }
.card__go {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .625rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome-mute);
  transition: color .35s var(--ease), gap .35s var(--ease);
}
.card:hover .card__go { color: var(--ember); gap: .75rem; }

/* Filter chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.chip {
  padding: .55rem 1rem;
  border: 1px solid var(--hairline);
  background: transparent;
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrome-mute);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip:hover { color: var(--chrome); border-color: var(--hairline-hi); }
.chip[aria-pressed="true"] {
  background: var(--chrome); border-color: var(--chrome); color: var(--ink);
}
.chip__n { opacity: .5; margin-left: .4rem; }

.card.is-hidden { display: none; }

.work__empty { padding: 3rem 0; text-align: center; color: var(--chrome-mute); }

/* ---------- 11. Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 1.25rem;
  text-align: center;
  transition: background .5s var(--ease);
}
.stat:hover { background: var(--ink-raised); }
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font: 500 .625rem/1.5 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--chrome-mute);
}

/* ---------- 12. Quote ---------- */
.quote { position: relative; }
.quote__mark {
  font-family: var(--serif);
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: .8;
  color: var(--ember);
  opacity: .22;
  margin-bottom: -.35em;
  user-select: none;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.9vw, 2.25rem);
  line-height: 1.34;
  letter-spacing: -.01em;
  max-width: 26ch;
  margin-bottom: 2rem;
}
.quote--wide blockquote { max-width: 34ch; }
.quote figcaption { display: grid; gap: .35rem; }
.quote figcaption b {
  font: 600 .6875rem/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}
.quote figcaption span { font-size: .8125rem; color: var(--chrome-mute); }

/* Testimonial panels */
.panel {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
.panel:last-of-type { border-bottom: 0; }
.panel__in { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .panel__in { grid-template-columns: 1fr 1.55fr; gap: clamp(3rem, 6vw, 5rem); }
}
.panel__id {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline-hi);
  margin-bottom: 1.25rem;
}
.panel__flag {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
}
.panel__flag img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }

/* ---------- 13. Process (services) ---------- */
.acts { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 900px) { .acts { grid-template-columns: repeat(3, 1fr); } }
.act {
  position: relative;
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
  transition: background .5s var(--ease);
}
.act:hover { background: var(--ink-raised); }
/* Scoped as .act .act__n (0,2,0) so it outranks the .act p rule below (0,1,1)
   — otherwise the body-copy size wins and the numerals collapse. */
.act .act__n {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ember);
  opacity: .6;
  margin-bottom: 1.5rem;
  transition: opacity .5s var(--ease);
}
.act:hover .act__n { opacity: 1; }
.act h3 { margin-bottom: 1rem; }
.act p { font-size: .9375rem; color: var(--chrome-dim); }

/* Industry list */
.trades { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 700px)  { .trades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .trades { grid-template-columns: repeat(3, 1fr); } }
.trade {
  background: var(--ink);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: grid;
  gap: .875rem;
  align-content: start;
  transition: background .5s var(--ease);
}
.trade:hover { background: var(--ink-raised); }
.trade__i {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-hi);
  color: var(--ember);
  margin-bottom: .25rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.trade:hover .trade__i { border-color: var(--ember); background: rgba(200,134,60,.1); }
.trade h3 { font-size: 1.125rem; line-height: 1.25; }
.trade p { font-size: .875rem; color: var(--chrome-dim); }

/* Craft marquee */
.craft {
  border-block: 1px solid var(--hairline);
  overflow: hidden;
  padding-block: 1.75rem;
  background: var(--ink-raised);
}
/* Sized so all six disciplines sit on one line at desktop — a lone orphaned
   "Motion Graphics" on row two reads like a mistake rather than a rhythm. */
.craft__row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  flex-wrap: wrap;
  justify-content: center;
}
.craft__row li {
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--chrome-mute);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  transition: color .4s var(--ease);
}
.craft__row li:hover { color: var(--chrome); }
.craft__row li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--ember);
  border-radius: 50%;
  opacity: .7;
}

/* ---------- 14. Team ---------- */
.team { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 560px)  { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px)  { .team { grid-template-columns: repeat(3, 1fr); } }
.mate { background: var(--ink); position: relative; overflow: hidden; }
.mate img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.82);
  transition: filter .6s var(--ease), transform 1s var(--ease);
}
.mate:hover img { filter: grayscale(0) contrast(1) brightness(.95); transform: scale(1.04); }
.mate figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(7,7,7,.94), transparent);
}
.mate b { display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 400; }
.mate span {
  font: 500 .5625rem/1.5 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember);
}

/* ---------- 15. Client roster ---------- */
.roster {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .375rem;
  align-items: center;
}
.roster li {
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  line-height: 1.35;
  color: var(--chrome-mute);
  transition: color .35s var(--ease);
}
.roster li:hover { color: var(--chrome); }
.roster li:not(:last-child)::after {
  content: "·";
  color: var(--ember);
  margin-inline: .5rem .125rem;
  opacity: .8;
}

/* Brand logo grid (About) */
.brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (min-width: 700px)  { .brands { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .brands { grid-template-columns: repeat(7, 1fr); } }
.brands div {
  background: var(--ink);
  display: grid; place-items: center;
  min-height: 110px;
  padding: 1.25rem;
  transition: background .5s var(--ease);
}
.brands div:hover { background: var(--ink-raised); }
/* Source logos vary wildly (dark marks, light marks, lots of internal padding),
   so keep the mute gentle — a heavier wash makes the already-light ones
   (Antigua, Ritz-Carlton) disappear entirely. */
.brands img {
  max-height: 44px; max-width: 100%;
  width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.25) opacity(.78);
  transition: filter .5s var(--ease);
}
.brands div:hover img { filter: grayscale(0) brightness(1) opacity(1); }

/* ---------- 16. Reasons ---------- */
.reasons { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 700px)  { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .reasons { grid-template-columns: repeat(3, 1fr); } }
.reason {
  background: var(--ink);
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  display: grid;
  gap: .75rem;
  align-content: start;
  transition: background .5s var(--ease);
}
.reason:hover { background: var(--ink-raised); }
.reason b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
}
.reason p { font-size: .875rem; color: var(--chrome-dim); }
.reason i {
  display: block;
  width: 22px; height: 1px;
  background: var(--ember);
  margin-bottom: .25rem;
  transition: width .45s var(--ease);
}
.reason:hover i { width: 44px; }

/* ---------- 17. Contact ---------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 950px) { .contact { grid-template-columns: 1fr 1.15fr; gap: clamp(3rem, 6vw, 5.5rem); } }

/* Rows are <div> wrappers — <dl> may only contain dt/dd/div, so links live
   inside the <dd> rather than wrapping the pair. */
.det { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.det > div {
  display: grid;
  gap: .35rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.det dt {
  font: 500 .625rem/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember);
}
.det dd { font-size: 1rem; color: var(--chrome); }
.det dd a {
  display: inline-block;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.det dd a:hover { color: var(--ember-lift); transform: translateX(4px); }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .5rem; }
.field label {
  font: 500 .625rem/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--chrome-mute);
}
.field input, .field textarea {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  padding: .95rem 1rem;
  font-size: .9375rem;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--ink-lift);
}
.field textarea { resize: vertical; min-height: 140px; }
.field ::placeholder { color: var(--chrome-mute); opacity: .6; }
@media (min-width: 560px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.form__status {
  font-size: .875rem;
  line-height: 1.6;
  padding: .875rem 1rem;
  border-left: 2px solid var(--chrome-mute);
  background: var(--ink-raised);
}
.form__status.is-pending { border-left-color: var(--chrome-mute); color: var(--chrome-dim); }
.form__status.is-ok      { border-left-color: var(--ember); color: var(--chrome); }
.form__status.is-bad     { border-left-color: #c8543c; color: var(--chrome); }
.form__status a { color: var(--ember); border-bottom: 1px solid currentColor; }

.form__note {
  font-size: .8125rem;
  color: var(--chrome-mute);
  border-left: 1px solid var(--ember);
  padding-left: .875rem;
}
.form__note a { color: var(--ember); border-bottom: 1px solid transparent; transition: border-color .3s; }
.form__note a:hover { border-bottom-color: var(--ember); }

/* ---------- 18. FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.3;
  transition: color .35s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ember); }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .4s var(--ease);
}
.faq details[open] summary { color: var(--ember); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p {
  padding-bottom: 1.5rem;
  max-width: 68ch;
  font-size: .9375rem;
  color: var(--chrome-dim);
}

/* ---------- 18b. Legal prose ---------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose p, .prose li { font-size: .9375rem; line-height: 1.8; color: var(--chrome-dim); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 0 1.25rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--ember); }
.prose dl { margin-top: 1rem; display: grid; gap: 1rem; }
.prose dt { color: var(--chrome); font-weight: 600; font-size: .9375rem; margin-bottom: .25rem; }
.prose dd { font-size: .9375rem; line-height: 1.8; color: var(--chrome-dim); }
/* Also scoped up to (0,2,0) to outrank the .prose p rule above. */
.prose .prose__stamp {
  display: inline-block;
  margin-bottom: 2.5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--hairline);
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome-mute);
}
.prose a { color: var(--ember); border-bottom: 1px solid transparent; transition: border-color .3s; }
.prose a:hover { border-bottom-color: var(--ember); }

/* ---------- 19. CTA band ---------- */
.band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  isolation: isolate;
}
.band__plate { position: absolute; inset: 0; z-index: -1; }
.band__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.7) brightness(.55);
}
.band__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--ink) 8%, rgba(7,7,7,.82) 48%, rgba(7,7,7,.55) 100%);
}
.band__in {
  padding-block: clamp(4rem, 10vh, 7rem);
  display: grid;
  gap: 2rem;
  justify-items: start;
}
.band h2 { max-width: 18ch; }
.band .lede { max-width: 46ch; }

/* ---------- 20. Footer ---------- */
.foot { border-top: 1px solid var(--hairline); background: var(--ink-raised); }
.foot__top {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3rem, 7vh, 4.5rem);
}
@media (min-width: 900px) { .foot__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; } }

.foot__brand img { height: 40px; width: auto; margin-bottom: 1.5rem; }
.foot__brand p { font-size: .875rem; color: var(--chrome-mute); max-width: 34ch; }

.foot h4 {
  font: 600 .625rem/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.25rem;
}
.foot ul { list-style: none; display: grid; gap: .625rem; }
.foot ul a, .foot address a {
  font-size: .8125rem;
  color: var(--chrome-dim);
  transition: color .3s var(--ease);
}
.foot ul a:hover, .foot address a:hover { color: var(--ember); }
.foot address { font-style: normal; display: grid; gap: .625rem; font-size: .8125rem; color: var(--chrome-dim); }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.foot__bar p { font-size: .75rem; color: var(--chrome-mute); }
.foot__social { display: flex; gap: 1.25rem; list-style: none; }
.foot__social a {
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrome-mute);
  transition: color .3s var(--ease);
}
.foot__social a:hover { color: var(--ember); }

/* ---------- 21. Reveal ----------
   Scoped to .js (set by an inline script in <head> before first paint).
   Without it the content is plain visible: if scripting is off or the reveal
   script fails to run, the page must still render — never hide content behind
   JS that might not arrive. reveal.js also carries a timed failsafe for the
   case where IntersectionObserver is present but never fires. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__hint i { animation: none; opacity: .6; }
}