:root {
  --ink: #07080c;
  --cobalt: #3b6cff;
  --brass: #c9a566;
  --bone: #ece6da;
  --fog: #9a9ea8;

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(1rem, 3.2vw, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Channel triplets for translucent lines and washes: foreground, background, glass highlights. */
  --fg: 236 230 218;
  --bg: 7 8 12;
  --glass: 255 255 255;
  --surface: #111318;
  --panel: #0a0b10;

  /* Colours of the slow light drifting behind the whole page. */
  --amb-a: rgb(59 108 255 / 0.13);
  --amb-b: rgb(201 165 102 / 0.09);
  --amb-c: rgb(59 108 255 / 0.07);

  color-scheme: dark;
}

/* Light theme, set by the hero switch: the same tokens, inverted. */
:root[data-theme="light"] {
  --ink: #f2f0eb;
  --bone: #121318;
  --fog: #5d616b;
  --brass: #8a6526;
  --fg: 18 19 24;
  --bg: 242 240 235;
  --glass: 18 19 24;
  --surface: #e4e1da;
  --panel: #ebe8e1;
  --amb-a: rgb(201 165 102 / 0.26);
  --amb-b: rgb(120 145 210 / 0.22);
  --amb-c: rgb(150 140 130 / 0.2);

  color-scheme: light;
}

/* Text and controls sitting on photos and videos stay light-on-dark in both themes. */
:root[data-theme="light"] :is(.client-card, .reel, .ring__card, .about__photo, .wheel__card) {
  --ink: #07080c;
  --bone: #ece6da;
  --fog: #9a9ea8;
  --brass: #c9a566;
  --fg: 236 230 218;
  --bg: 7 8 12;
  --glass: 255 255 255;
}

/* Client and brand logos are white cut-outs: turn them dark on the light board. */
:root[data-theme="light"] .partners__grid img { filter: invert(1); }

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.6s var(--ease-out);
}

/* Transparent so the ambient light behind the page shows through; the page colour lives on <html>. */
body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out);
}

img, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Ambient background ---------- */
/* Three large, soft pools of light drifting slowly behind every section. */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
  will-change: transform;
  transition: background 0.6s var(--ease-out);
}
.ambient span:nth-child(1) {
  top: -28vmax;
  left: -22vmax;
  background: radial-gradient(closest-side, var(--amb-a), transparent);
  animation: amb-1 34s ease-in-out infinite alternate;
}
.ambient span:nth-child(2) {
  top: 15vh;
  right: -30vmax;
  background: radial-gradient(closest-side, var(--amb-b), transparent);
  animation: amb-2 41s ease-in-out infinite alternate;
}
.ambient span:nth-child(3) {
  bottom: -40vmax;
  left: 10vw;
  background: radial-gradient(closest-side, var(--amb-c), transparent);
  animation: amb-3 47s ease-in-out infinite alternate;
}
@keyframes amb-1 { to { transform: translate3d(38vw, 45vh, 0) scale(1.2); } }
@keyframes amb-2 { to { transform: translate3d(-42vw, 28vh, 0) scale(0.85); } }
@keyframes amb-3 { to { transform: translate3d(28vw, -55vh, 0) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .ambient span { animation: none; }
}

/* ---------- Skip link ---------- */

.skip {
  position: fixed;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--bone);
  color: var(--ink);
  font: 500 0.8rem/1 var(--font-mono);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Top bar ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(0.75rem, 2vw, 1.25rem) var(--gutter);
  /* Dark fade so headings scrolling underneath never collide with the mark and button. */
  background: linear-gradient(to bottom, rgb(var(--bg) / 0.92) 0%, rgb(var(--bg) / 0.65) 60%, rgb(var(--bg) / 0) 100%);
  pointer-events: none;
}
.topbar a { pointer-events: auto; }

.mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.mark__logo {
  display: block;
  width: auto;
  height: 1.55rem;
  fill: currentColor;
}

/* ---------- Intro ---------- */

/* Only shown when the head script adds .has-intro, so without JavaScript the page opens normally. */
.intro { display: none; }
.has-intro { overflow: hidden; }
.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  cursor: pointer;
}
.has-intro .mark__logo { visibility: hidden; }

.intro__panel {
  position: absolute;
  inset: 0;
  background: #07080c;
}

.intro__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(48vw, 15rem);
  color: #ece6da;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.intro__logo svg { display: block; width: 100%; overflow: visible; }
.intro__logo path { fill: currentColor; }
.intro__m, .intro__top, .intro__low, .intro__glint { opacity: 0; }
.intro__glint { fill: #fff; }

.intro__name {
  position: absolute;
  inset-inline: 0;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  margin: 0;
  color: #ece6da;
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

.topnav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin: 0 clamp(1rem, 3vw, 2.5rem) 0 auto;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(var(--fg) / 0.78);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.topnav a:hover { color: var(--bone); }

.talk {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.3rem 0 1.15rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color 0.25s var(--ease-out);
}
.talk i {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-style: normal;
  transition: transform 0.4s var(--ease-out);
}
.talk:hover { background: var(--brass); }
.talk:hover i { transform: rotate(-45deg); }

@media (max-width: 900px) {
  .topnav { display: none; }
}

/* ---------- Hero: two versions ---------- */
/* One cut-out portrait placed by hero-reveal.js over a canvas background; the name sits between them, behind the head.
   The reveal canvas on top shows the other version through the cursor trail. Colours are literal: the two scenes look
   the same whatever the page theme. */

.duo {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: #07080c;
  touch-action: pan-y;
  transition: background-color 0.6s var(--ease-out);
}
.duo[data-scene="light"] { background: #f2f0eb; }

.duo__bg,
.duo__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.duo__reveal { z-index: 3; }

.duo__name {
  position: absolute;
  z-index: 1;
  top: clamp(4.75rem, 12vh, 8rem);
  right: 0;
  left: 0;
  margin: 0;
  color: #ece6da;
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(11.2vw, 24vh);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  transition: color 0.5s var(--ease-out);
}
.duo__name span { display: block; }
.duo[data-scene="light"] .duo__name { color: #07080c; }

.duo__person {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.6s var(--ease-out);
}
/* Before the script has placed it. */
.duo:not(.is-placed) .duo__person {
  left: 50%;
  top: 8%;
  height: 160%;
  translate: -50% 0;
}

.duo__role {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  margin: 0;
  color: #c9a566;
  font: 500 0.75rem/1.6 var(--font-mono);
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
  transition: color 0.5s var(--ease-out);
}
.duo[data-scene="light"] .duo__role { color: #6b5024; }

.duo__hint {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: calc(var(--gutter) + 4.25rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  translate: 0 -50%;
  color: #ece6da;
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.duo[data-scene="light"] .duo__hint { color: #07080c; }
.duo__hint-dot {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: duo-pulse 1.8s var(--ease-out) infinite;
}
@keyframes duo-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.duo.is-touched .duo__hint { opacity: 0; }

/* Dark / light switch */
.duo__switch {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: var(--gutter);
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-width: 44px;
  padding: 0.45rem 0.45rem 0.6rem;
  translate: 0 -50%;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(7 8 12 / 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #ece6da;
  font: 500 0.58rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.duo__switch-track {
  position: relative;
  width: 1.9rem;
  height: 3.4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
}
.duo__switch-dot {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ece6da;
  box-shadow: 0 0 18px rgb(201 165 102 / 0.55);
  transition: transform 0.55s var(--ease-out), background-color 0.4s var(--ease-out);
}
.duo[data-scene="light"] .duo__switch {
  border-color: rgb(7 8 12 / 0.15);
  background: rgb(255 255 255 / 0.55);
  color: #07080c;
}
.duo[data-scene="light"] .duo__switch-track { background: rgb(7 8 12 / 0.1); }
.duo[data-scene="light"] .duo__switch-dot {
  transform: translateY(1.5rem);
  background: #07080c;
  box-shadow: none;
}

@media (max-width: 760px) {
  .duo__name { top: 13vh; }
  .duo__role { left: var(--gutter); text-align: left; }
  .duo[data-scene="light"] .duo__role { opacity: 0; }
  .duo__hint { display: none; }
  .duo__switch { top: auto; bottom: clamp(9rem, 26vh, 12rem); translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .duo__hint-dot { animation: none; }
}

/* ---------- Shared section parts ---------- */

.wrap {
  width: min(100% - 2 * var(--gutter), 90rem);
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  color: var(--brass);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

.section-title {
  max-width: 18ch;
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Scroll reveals ---------- */
/* sections.js tags content with [data-reveal] and adds .is-in as it scrolls into view. */

.reveal-on [data-reveal] {
  opacity: 0;
  translate: 0 2.25rem;
  transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out), scale 0.9s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal-on [data-reveal="pop"] { scale: 0.94; }
.reveal-on [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ---------- About ---------- */

.about {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem);
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 50% at 15% 40%, rgb(59 108 255 / 0.14), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
  pointer-events: none;
}

.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.about__photo {
  position: relative;
  margin: 0;
}
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(var(--glass) / 0.08);
}
.about__photo figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgb(var(--bg) / 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--bone);
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about__title,
.showcase__title {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.about__title { font-size: clamp(2.1rem, 4.2vw, 4.25rem); }
.about__title em,
.showcase__title em {
  display: block;
  margin-top: 0.15em;
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}

.about__lede {
  max-width: 52ch;
  margin: 1.5rem 0 0;
  color: rgb(var(--fg) / 0.78);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  text-wrap: pretty;
}

.about__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.about__roles li {
  padding: 0.6rem 0.95rem;
  border: 1px solid rgb(var(--fg) / 0.18);
  border-radius: 999px;
  font: 500 0.68rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.about__roles li.is-ai {
  border-color: rgb(59 108 255 / 0.75);
  background: rgb(59 108 255 / 0.16);
  color: #cdd8ff;
}
:root[data-theme="light"] .about__roles li.is-ai { color: #1f3fb8; }

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid rgb(var(--fg) / 0.14);
}
.about__stats div { padding-top: 1.1rem; }
.about__stats dt {
  color: var(--fog);
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.about__stats dd {
  margin: 0.6rem 0 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.about__stats i {
  color: var(--brass);
  font-style: normal;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__photo { max-width: 28rem; }
}
@media (max-width: 520px) {
  .about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.5rem;
  }
}

/* ---------- Selected work ---------- */

.showcase {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 11vw, 9rem);
  overflow-x: clip;
}

.showcase__head {
  display: grid;
  justify-items: center;
  text-align: center;
}
.showcase__head .eyebrow { justify-content: center; }
.showcase__title {
  max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 4.4rem);
}
.showcase__head .section-lede { margin-inline: auto; }

/* The ring: sections.js places each card on the inside of a curve, so the sides come towards you. */
.ring {
  --card-w: clamp(8.5rem, 13vw, 13.5rem);
  position: relative;
  height: calc(var(--card-w) * 1.5 * 1.55);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  perspective: 1100px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ring.is-dragging { cursor: grabbing; }

.ring__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.ring__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  will-change: transform;
}
.ring__card a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(var(--glass) / 0.1);
  -webkit-user-drag: none;
}
.ring__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ring__label {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgb(var(--bg) / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 0.58rem/1.25 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 0.4rem;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.ring__card a:hover .ring__label,
.ring__card a:focus-visible .ring__label {
  opacity: 1;
  translate: 0 0;
}

/* Light pooling under the centre of the ring. */
.ring__glow {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: min(46rem, 80%);
  height: 10rem;
  translate: -50% 0;
  background: radial-gradient(50% 60% at 50% 100%, rgb(59 108 255 / 0.5), transparent 70%);
  pointer-events: none;
}
.ring__glow::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  box-shadow: 0 0 26px 5px rgb(201 165 102 / 0.45);
}

.skills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.skills li::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 14px rgb(201 165 102 / 0.7);
}
.skills li.is-ai::before {
  background: var(--cobalt);
  box-shadow: 0 0 14px rgb(59 108 255 / 0.85);
}
.skills h3 {
  margin: 0;
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}
.skills p {
  max-width: 28ch;
  margin: 0.6rem auto 0;
  color: var(--fog);
  font-size: 0.92rem;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}
@media (max-width: 760px) {
  .ring { --card-w: 31vw; }
}

/* ---------- Websites ---------- */
/* Glass coverflow (sites.js): the site in front scrolls top to bottom inside its card, neighbours wait behind. */

.sites {
  position: relative;
  padding-block: clamp(5rem, 12vw, 10rem) 0;
  overflow: hidden;
}

.flow {
  --card-w: clamp(19rem, 46vw, 46rem);
  --screen-ratio: 0.625; /* screen height ÷ width (16:10) */
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.flow:focus-visible { outline-offset: -2px; }

/* Warm wash taken from the site in front. */
.flow__glow {
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(80rem, 120%);
  height: 90%;
  translate: -50% 0;
  background: center top / cover no-repeat;
  filter: blur(90px) saturate(1.5);
  opacity: 0.4;
  pointer-events: none;
  transition: background-image 0.8s var(--ease-out);
}

.flow__track {
  position: relative;
  height: calc(var(--card-w) * var(--screen-ratio) + 6.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1800px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.flow__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  padding: 0.55rem 0.55rem 0;
  border: 1px solid rgb(var(--glass) / 0.2);
  border-radius: 26px;
  background: linear-gradient(160deg, rgb(var(--glass) / 0.16), rgb(var(--glass) / 0.04));
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(var(--glass) / 0.18);
  transform: translate(-50%, 0);
  transform-origin: 50% 60%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.8s var(--ease-out), opacity 0.6s var(--ease-out);
}
/* Side cards dim with an overlay that fades (cheap), not a brightness filter (re-paints the whole card). */
.flow__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #07080c;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.flow__card.is-side::after { opacity: 0.4; }

.flow__screen {
  position: relative;
  aspect-ratio: 1 / var(--screen-ratio);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}
.flow__screen img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  will-change: transform;
}
.flow__card:not(.is-active) .flow__screen img { transition: transform 0.9s var(--ease-out); }

.flow__label {
  padding: 0.85rem 0.5rem 1rem;
  text-align: center;
  transition: opacity 0.5s var(--ease-out);
}
/* Cards two places out are just atmosphere: no label peeking in at the edges. */
.flow__card.is-far .flow__label { opacity: 0; }
.flow__label h3 {
  margin: 0;
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.1;
}
.flow__label p {
  margin: 0.3rem 0 0;
  color: rgb(var(--fg) / 0.6);
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Player-style glass bar. */
.flow__bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100% - 2 * var(--gutter), 52rem);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  padding: 0.45rem;
  border: 1px solid rgb(var(--glass) / 0.16);
  border-radius: 999px;
  background: linear-gradient(rgb(var(--glass) / 0.1), rgb(var(--glass) / 0.03));
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(var(--glass) / 0.12);
}

.flow__controls {
  display: flex;
  gap: 0.25rem;
}

.flow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.flow__btn--play span { font-size: 0.8rem; }
.flow__btn:hover {
  background: var(--bone);
  color: var(--ink);
}

.flow__now {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: 18px;
  background: rgb(var(--bg) / 0.55);
}
.flow__thumb {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  object-fit: cover;
  object-position: top;
}
.flow__text {
  display: grid;
  flex: 1;
  gap: 0.2rem;
  min-width: 0;
}
.flow__text strong,
.flow__text > span:not(.flow__progress) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flow__text strong {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.1;
}
.flow__text > span:not(.flow__progress) {
  color: var(--fog);
  font: 500 0.62rem/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flow__progress {
  display: block;
  height: 3px;
  margin-top: 0.3rem;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(var(--fg) / 0.15);
}
.flow__progress i {
  display: block;
  height: 100%;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: left;
}
.flow__count {
  color: var(--fog);
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.flow__visit,
.flow__private {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flow__visit {
  gap: 0.4rem;
  background: var(--bone);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.flow__visit::after { content: "↗"; }
.flow__visit:hover { background: var(--brass); }
.flow__private { color: var(--fog); }

@media (prefers-reduced-motion: reduce) {
  .flow__card,
  .flow__card:not(.is-active) .flow__screen img { transition: none; }
}

/* Phones: tall cards with the phone capture; the bar splits into two rows. */
@media (max-width: 760px) {
  .flow {
    --card-w: min(74vw, 20rem);
    --screen-ratio: 1.6667; /* 9:15 portrait */
  }
  .flow__bar {
    flex-wrap: wrap;
    border-radius: 26px;
  }
  .flow__now {
    flex-basis: 100%;
    order: -1;
  }
  .flow__controls { flex: 1; }
  .flow__count { display: none; }
}

/* ---------- Reels (shared tile) ---------- */

.section-lede {
  max-width: 44ch;
  margin: 1.25rem 0 0;
  color: var(--fog);
  text-wrap: pretty;
}

.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(var(--fg) / 0.08);
}
.reel--wide { aspect-ratio: 16 / 9; }

.reel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel__sound {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgb(var(--fg) / 0.35);
  border-radius: 999px;
  background: rgb(var(--bg) / 0.55);
  color: var(--bone);
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.reel__sound:hover { border-color: var(--bone); }
.reel__sound[aria-pressed="true"] {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.reel figcaption {
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgb(var(--bg) / 0.55);
  color: var(--bone);
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Horizontal rails (reels, posts, grids) bleed to the screen edge but start in line with the content. */
.rail {
  --rail-inset: max(var(--gutter), calc((100% - 90rem) / 2));
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0 var(--rail-inset) 1rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-inset);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--fg) / 0.25) transparent;
}
.rail > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---------- Clients ---------- */

.clients {
  padding-block: clamp(5rem, 12vw, 10rem) 0;
}

/* Cards: one compact row of portraits; hovering plays the client's first reel in place. */
.client-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.client-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #d9dade;
  color: var(--bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgb(var(--fg) / 0.08);
}

.client-card__media,
.client-card__media img,
.client-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.client-card__media img,
.client-card__media video {
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), opacity 0.45s var(--ease-out);
}
.client-card__media video { opacity: 0; }
.client-card.is-previewing video { opacity: 1; }
.client-card:hover img { transform: scale(1.04); }

/* Dark fade so the name reads on the light studio backdrop. */
.client-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--bg) / 0.88), rgb(var(--bg) / 0) 50%);
  pointer-events: none;
}

.client-card__count {
  position: absolute;
  z-index: 1;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgb(var(--bg) / 0.6);
  color: var(--bone);
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.client-card:hover .client-card__count,
.client-card:focus-visible .client-card__count {
  background: var(--brass);
  color: var(--ink);
}

.client-card__text {
  position: absolute;
  z-index: 1;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: grid;
  gap: 0.35rem;
}
.client-card__name {
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.client-card__brand {
  color: var(--brass);
  font: 500 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .client-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .client-cards {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .client-cards > li {
    flex: 0 0 min(56vw, 15rem);
    scroll-snap-align: start;
  }
  .client-card__name { font-size: 1.35rem; }
}

/* Sheet: one client at a time, portrait beside their three reels, sized to fit the screen. */
html:has(.client-sheet[open]) { overflow: hidden; }

.client-sheet {
  --gap: clamp(0.75rem, 1.5vw, 1.25rem);
  /* Reel height that fits both the screen height and the width (portrait 0.8h + three reels at 0.5625h). */
  --reel-h: min(64svh, calc((100vw - 2 * var(--gutter) - 4rem) / 2.49), 42rem);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0 var(--gutter) clamp(1rem, 3vw, 2rem);
  border: 0;
  background: var(--ink);
  color: var(--bone);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.client-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: fade-in 0.4s var(--ease-out);
}
.client-sheet::backdrop { background: rgb(var(--bg) / 0.7); }

.client-sheet__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.75rem, 2vw, 1.25rem);
  background: linear-gradient(rgb(var(--bg)) 60%, rgb(var(--bg) / 0));
}
.client-sheet__count {
  margin: 0;
  color: var(--fog);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.2em;
}
.client-sheet__nav {
  display: flex;
  gap: 0.5rem;
}

.sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(var(--fg) / 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--bone);
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.sheet-btn span {
  font-size: 1rem;
  letter-spacing: 0;
}
.sheet-btn:hover {
  border-color: var(--bone);
  background: var(--bone);
  color: var(--ink);
}

.client {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.client:not([hidden]) { animation: rise-in 0.6s var(--ease-out); }

.client__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.client__name {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.client__brand {
  margin: 0;
  color: var(--brass);
  font: 500 0.72rem/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.client__body {
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}

.client__photo {
  flex: 0 0 auto;
  width: calc(var(--reel-h) * 0.8);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: #d9dade;
}
.client__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client__reels {
  flex: 0 0 auto;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.client__reels > li {
  flex: 0 0 auto;
  width: calc(var(--reel-h) * 9 / 16);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(1.5rem); } }

@media (prefers-reduced-motion: reduce) {
  .client-sheet[open],
  .client:not([hidden]) { animation: none; }
}

/* Phones: the sheet runs edge to edge and the portrait plus reels become one swipeable row. */
@media (max-width: 760px) {
  .client-sheet {
    --reel-h: min(60svh, 30rem, calc((100vw - 2 * var(--gutter)) * 1.2));
    padding-inline: 0;
  }
  .client-sheet__bar,
  .client__meta { padding-inline: var(--gutter); }
  .client {
    justify-content: flex-start;
    width: 100%;
  }
  .client__body {
    align-items: stretch;
    padding: 0 var(--gutter) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  /* Portrait matches a reel's size so the reels peek in beside it. */
  .client__photo {
    width: calc(var(--reel-h) * 9 / 16);
    aspect-ratio: auto;
  }
  .client__photo,
  .client__reels > li { scroll-snap-align: start; }
}

/* ---------- More reels ---------- */

.more-reels {
  padding-block: clamp(5rem, 12vw, 10rem) 0;
  overflow: hidden;
}

/* Wheel: cards orbit a circle whose centre sits far below the stage (see wheel.js).
   --cy is the circle centre, measured from the top of the wheel. */
.wheel {
  --card-w: clamp(10.5rem, 17vw, 16.5rem);
  --card-h: calc(var(--card-w) * 16 / 9);
  --r: calc(var(--card-h) * 2.3); /* keep in step with RADIUS_FACTOR in wheel.js */
  --top: 3rem;
  --cy: calc(var(--top) + var(--card-h) / 2 + var(--r));
  position: relative;
  height: calc(var(--top) + var(--card-h) + 7.5rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  user-select: none;
  -webkit-user-select: none;
}
.wheel:focus-visible {
  outline-offset: -2px;
  border-radius: 0;
}

/* Soft colour wash taken from the reel on top. */
.wheel__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(70rem, 110%);
  height: calc(var(--card-h) * 1.1);
  translate: -50% 0;
  background: center / cover no-repeat;
  filter: blur(80px) saturate(1.4);
  opacity: 0.35;
  pointer-events: none;
  transition: background-image 0.8s var(--ease-out);
}

.wheel__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Fade out at both sides and along the bottom, so the outer reels dissolve instead of being cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(#000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(#000 62%, transparent);
  mask-composite: intersect;
}

.wheel__rim {
  --rim: calc(var(--r) - var(--card-h) * 0.34);
  position: absolute;
  top: calc(var(--cy) - var(--rim));
  left: 50%;
  width: calc(var(--rim) * 2);
  aspect-ratio: 1;
  translate: -50% 0;
  border-top: 1px solid rgb(var(--fg) / 0.16);
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 88%, rgb(var(--fg) / 0.06) 99%, transparent),
    linear-gradient(rgb(var(--fg) / 0.05), transparent 12%);
  pointer-events: none;
}

.wheel__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
}
.wheel.is-dragging .wheel__track { cursor: grabbing; }

.wheel__card {
  position: absolute;
  top: var(--cy);
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  /* A thin ring only: big soft shadows on every moving card were a large part of the lag on phones. */
  box-shadow: 0 0 0 1px rgb(var(--fg) / 0.1);
  will-change: transform;
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--r)));
}
/* Dims the side reels (wheel.js sets its opacity). Far cheaper than a CSS filter on a video. */
.wheel__shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.wheel__card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.wheel__card.is-active { box-shadow: 0 0 0 2px var(--brass), 0 30px 80px rgb(0 0 0 / 0.6); }

/* Glass bar under the reel on top: arrows, what's playing, sound. */
.wheel__bar {
  position: absolute;
  z-index: 200;
  top: calc(var(--top) + var(--card-h) + 1.5rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 0.35rem;
  translate: -50% 0;
  border: 1px solid rgb(var(--fg) / 0.14);
  border-radius: 999px;
  background: rgb(var(--bg) / 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

.wheel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--fg) / 0.08);
  color: var(--bone);
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.wheel__btn--icon { padding: 0; }
.wheel__btn--icon span {
  font-size: 1rem;
  letter-spacing: 0;
}
.wheel__btn:hover,
.wheel__btn[aria-pressed="true"] {
  background: var(--bone);
  color: var(--ink);
}

/* Fixed width so the bar doesn't change size as titles change. */
.wheel__now {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 15.5rem;
  min-width: 0;
  padding: 0 0.75rem 0 0.35rem;
}
.wheel__thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  object-fit: cover;
}
.wheel__text {
  display: grid;
  gap: 0.2rem;
  line-height: 1.1;
}
.wheel__text strong {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.wheel__text span {
  color: var(--brass);
  font: 500 0.6rem/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wheel__count {
  margin: 0 0.5rem;
  color: var(--fog);
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .wheel {
    --card-w: min(50vw, 14rem);
    --top: 2rem;
  }
  .wheel__thumb,
  .wheel__count { display: none; }
  .wheel__bar { width: calc(100% - 2 * var(--gutter)); }
  .wheel__now {
    flex: 1;
    width: auto;
    padding-inline: 0.5rem;
  }
  .wheel__text { min-width: 0; }
  .wheel__text strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- AI Lab ---------- */
/* A faint lab grid behind the section; a character viewer (tabs, portrait with a skin loupe, detail shots);
   then a rail of AI films that reuse the reel tile. */

.lab {
  position: relative;
  padding-block: clamp(5rem, 12vw, 10rem) 0;
}
.lab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--fg) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--fg) / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent);
  pointer-events: none;
}
.lab > * { position: relative; }

.lab__head .section-title em,
.lab__head .section-title em {
  display: block;
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  text-transform: none;
}

.lab__cast {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Character list */
.lab__tabs {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}
.lab__tab {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid rgb(var(--fg) / 0.12);
  border-radius: 14px;
  background: rgb(var(--fg) / 0.03);
  color: var(--bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.lab__tab img {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  object-fit: cover;
  object-position: 50% 15%;
}
.lab__tab span { display: grid; gap: 0.15rem; min-width: 0; }
.lab__tab strong { font-weight: 700; font-size: 0.95rem; }
.lab__tab small {
  color: var(--fog);
  font: 500 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lab__tab:hover { border-color: rgb(var(--fg) / 0.3); }
.lab__tab[aria-selected="true"] {
  border-color: var(--brass);
  background: rgb(var(--fg) / 0.07);
}
.lab__tab[aria-selected="true"] small { color: var(--brass); }

/* One character */
.lab__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.lab__panel:not([hidden]) { animation: lab-in 0.6s var(--ease-out); }
@keyframes lab-in { from { opacity: 0; transform: translateY(0.75rem); } }

.lab__hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  aspect-ratio: 3 / 4;
  max-height: 80svh;
  cursor: crosshair;
}
.lab__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.lab__hero figcaption {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}
.lab__tag,
.lab__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgb(7 8 12 / 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ece6da;
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lab__tag i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 10px rgb(59 108 255 / 0.9);
  animation: lab-pulse 1.8s ease-in-out infinite;
}
@keyframes lab-pulse { 50% { opacity: 0.35; } }
.lab__hero.is-inspecting .lab__hint { opacity: 0; }

/* Skin loupe (ailab.js positions it and sets the zoomed background) */
.lab__lens {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(8rem, 13vw, 12rem);
  aspect-ratio: 1;
  margin: calc(clamp(8rem, 13vw, 12rem) / -2) 0 0 calc(clamp(8rem, 13vw, 12rem) / -2);
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(0 0 0 / 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
  will-change: transform;
}
.lab__hero.is-inspecting .lab__lens { opacity: 1; }

.lab__side {
  display: grid;
  gap: 1rem;
}
.lab__note {
  margin: 0;
  color: rgb(var(--fg) / 0.75);
  font-size: 0.95rem;
  text-wrap: pretty;
}
.lab__note strong { color: var(--bone); }

.lab__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lab__details li.is-wide { grid-column: 1 / -1; }
.lab__details figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  aspect-ratio: 4 / 5;
}
.lab__details li.is-wide figure {
  aspect-ratio: 16 / 9;
  background: #fff;
}
.lab__details img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.lab__details li.is-wide img { object-fit: contain; }
.lab__details figure:hover img { transform: scale(1.06); }
.lab__details figcaption {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgb(7 8 12 / 0.6);
  color: #ece6da;
  font: 500 0.58rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* AI films */
.lab__films { margin-top: clamp(3.5rem, 7vw, 6rem); }
.lab__films-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(var(--fg) / 0.12);
}
.lab__films-head h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
}
.lab__films-head p {
  margin: 0;
  color: var(--fog);
}
.rail--lab > li { height: clamp(22rem, 58svh, 32rem); }
.rail--lab .reel { height: 100%; }
.rail--lab .reel figcaption span { color: #c9a566; }

/* Desktop: the list and the portrait stay put while the detail shots scroll past. */
@media (min-width: 1001px) {
  .lab__tabs,
  .lab__hero {
    position: sticky;
    top: 6rem;
  }
}

@media (max-width: 1000px) {
  .lab__cast { grid-template-columns: minmax(0, 1fr); }
  .lab__tabs {
    display: flex;
    gap: 0.5rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lab__tab { flex: none; width: auto; }
}
@media (max-width: 700px) {
  .lab__panel { grid-template-columns: minmax(0, 1fr); }
  .lab__hero { max-height: 70svh; }
  .lab__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lab__panel:not([hidden]),
  .lab__tag i { animation: none; }
}

/* ---------- HITEX ---------- */
/* Booth reels from the HITEX expo, titled with the HITEX logo. Reels reuse the shared reel tile. */

.hitex {
  position: relative;
  padding-block: clamp(5rem, 12vw, 10rem) 0;
}

.hitex__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.hitex__head .section-lede { margin: 0; }

/* The logo's tagline is black: dark mode gets a copy with light lettering. */
.hitex__logo {
  margin: 0;
  line-height: 0;
}
.hitex__logo img {
  width: min(100%, 40rem);
  height: auto;
}
.hitex__logo-light { display: none; }
:root[data-theme="light"] .hitex__logo-dark { display: none; }
:root[data-theme="light"] .hitex__logo-light { display: block; }

.hitex__reels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  /* Phones and tablets: a swipeable row that runs to the screen edge. */
  .hitex__reels {
    display: flex;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hitex__reels > li {
    flex: 0 0 min(62vw, 16rem);
    scroll-snap-align: start;
  }
}

/* ---------- Brand work ---------- */

.work {
  padding-block: clamp(5rem, 12vw, 10rem) 0;
}

.feeds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.feed {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.4s var(--ease-out);
}

.feed__phone {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(var(--fg) / 0.08);
  transition: transform 0.6s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.feed__phone img {
  display: block;
  width: 100%;
  height: auto;
}
.feed:hover .feed__phone,
.feed[aria-expanded="true"] .feed__phone { transform: translateY(-6px); }
.feed[aria-expanded="true"] .feed__phone { box-shadow: 0 0 0 2px var(--brass); }
.feeds.has-active .feed[aria-expanded="false"] { opacity: 0.5; }
.feeds.has-active .feed[aria-expanded="false"]:hover { opacity: 1; }

.feed__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--fg) / 0.12);
}
.feed__brand {
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}
.feed__meta {
  color: var(--fog);
  font: 500 0.68rem/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.feed[aria-expanded="true"] .feed__meta { color: var(--brass); }

/* The tray opens and closes instantly; only the posts fade and rise in (opacity and transform, no layout work).
   Animating the tray's height re-laid out the whole long page on every frame, which made rapid clicks lag. */
.feeds__tray { display: none; }
.feeds__tray.is-open {
  display: block;
  contain: layout paint;
}
.feed-posts { padding-top: clamp(2rem, 4vw, 3rem); }
/* Only the first open animates. Switching brands just swaps the panel: re-animating a strip of 14 images on
   every press is what made rapid clicking lag. */
.feeds__tray.is-open.is-entering .feed-posts:not([hidden]) { animation: posts-in 0.45s var(--ease-out); }
@keyframes posts-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
}
/* Posts are sized to how they're shown (about 340px tall), so a tray of 14 stays cheap to draw.
   content-visibility was tried here and made rapid switching worse, not better. */
.rail--posts > li { contain: layout paint; }

.feed-posts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.feed-posts__head h3 {
  margin: 0;
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.feed-posts__head p {
  margin: 0;
  color: var(--fog);
  font: 500 0.72rem/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.feed-posts__head .sheet-btn { margin-left: auto; }

.feed-posts .rail { margin-top: 1.25rem; }
.rail--posts > li { height: clamp(15rem, 24vw, 21rem); }
.rail--posts img {
  display: block;
  width: auto;
  height: 100%;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .feeds__tray.is-open .feed-posts:not([hidden]) { animation: none; }
}

@media (max-width: 900px) {
  .feeds {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.5rem var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .feeds > li {
    flex: 0 0 min(64vw, 18rem);
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .client-sheet { --reel-h: min(66svh, 34rem, calc((100vw - 2 * var(--gutter)) * 1.45)); }
  .feed-posts__head p { display: none; }
}

/* ---------- Phones: lighter effects ---------- */
/* Glass blur, big blurred glows and stacked masks over moving cards are what made the reels wheel and the websites
   coverflow stutter on phones. Phones get the same layout with flat translucent fills instead. */
@media (max-width: 760px) {
  .ambient span { animation: none; }

  .wheel__glow,
  .flow__glow { display: none; }
  /* No mask on phones (a masked layer full of videos is what made the wheel flash blank): plain gradient strips
     at the edges fade the outer reels instead. */
  .wheel__stage {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .wheel__stage::before,
  .wheel__stage::after {
    content: "";
    position: absolute;
    z-index: 150;
    top: 0;
    bottom: 0;
    width: 14%;
    pointer-events: none;
  }
  .wheel__stage::before {
    left: 0;
    background: linear-gradient(90deg, rgb(var(--bg)), rgb(var(--bg) / 0));
  }
  .wheel__stage::after {
    right: 0;
    background: linear-gradient(270deg, rgb(var(--bg)), rgb(var(--bg) / 0));
  }
  .flow__track {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .wheel__bar,
  .flow__bar,
  .flow__card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .wheel__bar { background: rgb(var(--bg) / 0.92); }
  .flow__bar { background: rgb(var(--bg) / 0.9); }
  .flow__card {
    background: rgb(var(--glass) / 0.07);
    box-shadow: inset 0 1px 0 rgb(var(--glass) / 0.14);
  }
}

/* ---------- Ad management ---------- */

.ads { padding-block: clamp(5rem, 12vw, 10rem) 0; }

.ads__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.ads__head .section-lede { margin: 0; }
.ads__head .section-title em {
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  text-transform: none;
}

.ads__board {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 2fr);
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ads__total,
.ads__brand {
  border: 1px solid rgb(var(--fg) / 0.12);
  border-radius: 22px;
  background: linear-gradient(160deg, rgb(var(--fg) / 0.06), rgb(var(--fg) / 0.015));
}

.ads__total {
  display: grid;
  align-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background:
    radial-gradient(80% 70% at 0% 100%, rgb(59 108 255 / 0.22), transparent 70%),
    linear-gradient(160deg, rgb(var(--fg) / 0.06), rgb(var(--fg) / 0.015));
}
.ads__big {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(3.25rem, 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ads__label {
  margin: 0.6rem 0 0;
  color: var(--brass);
  font: 500 0.72rem/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ads__total .ads__label { margin-top: -0.75rem; }

.ads__meta,
.ads__stats {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}
.ads__meta div,
.ads__stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgb(var(--fg) / 0.1);
}
.ads__meta dt,
.ads__stats dt {
  color: var(--fog);
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ads__meta dd,
.ads__stats dd {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ads__brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ads__brand {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: 1.25rem;
}
.ads__brand-head {
  display: grid;
  gap: 0.8rem;
  min-height: 4.5rem;
}
.ads__brand-head img {
  width: auto;
  max-width: 9rem;
  height: 2.25rem;
  object-fit: contain;
  object-position: left center;
}
:root[data-theme="light"] .ads__brand-head img { filter: invert(1); }
.ads__sector {
  color: var(--fog);
  font: 500 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ads__leads {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.2rem, 3.6vw, 3.25rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.ads__leads small {
  color: var(--fog);
  font: 500 0.68rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ads__extra {
  flex-basis: 100%;
  color: var(--brass);
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Share of all leads; grows in when the card is revealed. */
.ads__bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(var(--fg) / 0.1);
}
.ads__bar i {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cobalt), #c9a566);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) 0.25s;
}
.ads__brand.is-in .ads__bar i,
html:not(.reveal-on) .ads__bar i { transform: scaleX(var(--share)); }

.ads__note {
  margin: 1rem 0 0;
  color: var(--fog);
  font-size: 0.82rem;
}

@media (max-width: 1000px) {
  .ads__board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ads__brands { grid-template-columns: minmax(0, 1fr); }
  .ads__brand-head { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ads__bar i { transition: none; }
}

/* ---------- Companies and brands ---------- */

.partners {
  padding-block: clamp(5rem, 12vw, 10rem) 0;
}

.partners__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.partners__head .section-lede { margin: 0; }

.partners__board {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid rgb(var(--fg) / 0.12);
  border-radius: 24px;
  background: var(--panel);
}

.partners__group + .partners__group { border-top: 1px solid rgb(var(--fg) / 0.12); }

.partners__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgb(var(--fg) / 0.09);
  color: var(--fog);
  font: 500 0.72rem/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.partners__count {
  color: var(--brass);
  font: 800 1.35rem/1 var(--font-display);
  font-stretch: 125%;
  letter-spacing: 0;
}

/* The 1px gaps are the grid lines; their background turns into a cobalt spotlight under the cursor. */
.partners__grid {
  --mx: -100rem;
  --my: -100rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgb(var(--fg) / 0.09);
}
.partners__board.is-lit .partners__grid {
  background: radial-gradient(circle 17rem at var(--mx) var(--my), rgb(110 145 255 / 0.95), rgb(var(--fg) / 0.09));
}

.partners__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(6.5rem, 11vw, 9.5rem);
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  background: var(--panel);
}
/* Fixed caps (not percentages) so a tall logo can never stretch its row. */
.partners__grid img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 11rem);
  max-height: clamp(2.25rem, 4vw, 3.5rem);
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}

@media (max-width: 760px) {
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners__grid li { height: 6rem; }
  .partners__grid img { opacity: 0.85; }
  /* An odd count would leave an empty cell in the last row; let the final logo span it. */
  .partners__grid li:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  padding-block: clamp(6rem, 14vw, 12rem) clamp(4rem, 8vw, 7rem);
  overflow: clip;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 55% at 10% 80%, rgb(59 108 255 / 0.2), transparent 70%),
    radial-gradient(30% 45% at 92% 15%, rgb(201 165 102 / 0.1), transparent 70%);
  /* Fade out before the section edge so the glow never ends in a hard line. */
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}

.contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(3rem, 6vw, 6rem);
}

.contact__title {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.5rem, 5.4vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.contact__title em {
  display: block;
  margin-top: 0.12em;
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}

.contact__lede {
  max-width: 40ch;
  margin: 1.5rem 0 0;
  color: rgb(var(--fg) / 0.75);
  text-wrap: pretty;
}

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  margin-top: 2.25rem;
  padding: 0 0.5rem 0 1.75rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out);
}
.contact__cta i {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-style: normal;
  transition: transform 0.5s var(--ease-out);
}
.contact__cta:hover { background: var(--brass); }
.contact__cta:hover i { transform: rotate(-45deg); }

.contact__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact__wide { grid-column: 1 / -1; }

.contact__card {
  display: grid;
  gap: 2.25rem;
  height: 100%;
  padding: 1.2rem 1.25rem 1.35rem;
  border: 1px solid rgb(var(--glass) / 0.12);
  border-radius: 20px;
  background: linear-gradient(160deg, rgb(var(--glass) / 0.07), rgb(var(--glass) / 0.015));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), transform 0.5s var(--ease-out);
}
.contact__card:hover,
.contact__card:focus-visible {
  border-color: rgb(201 165 102 / 0.6);
  transform: translateY(-3px);
}

.contact__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--brass);
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contact__label i {
  color: var(--bone);
  font-style: normal;
  font-size: 0.95rem;
  transition: transform 0.4s var(--ease-out);
}
.contact__card:hover .contact__label i { transform: translate(2px, -2px); }

.contact__value {
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 520px) {
  .contact__cards { grid-template-columns: minmax(0, 1fr); }
  .contact__card { gap: 1.25rem; }
}

/* ---------- Footer ---------- */

.footer {
  padding-block: 0 1.25rem;
  overflow: hidden;
}

/* The name, stretched edge to edge in outline: the page signs off the way the hero opens.
   SVG text with textLength so it fills the width exactly at every screen size. */
.footer__name {
  display: block;
  width: calc(100% - 2 * var(--gutter));
  height: auto;
  margin: 0 auto clamp(0.75rem, 2vw, 1.5rem);
  overflow: visible;
}
.footer__name text {
  fill: transparent;
  stroke: rgb(var(--fg) / 0.24);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 80px;
}

.footer__inner {
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--fg) / 0.08);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  color: var(--fog);
  font: 500 0.72rem/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__inner p { margin: 0; }
.footer__inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bone);
  text-decoration: none;
}
.footer__inner a:hover { color: var(--brass); }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .hero__copy {
    grid-template-columns: 1fr;
    bottom: 3.5rem;
    gap: 1.25rem;
  }
  .hero__shot { display: none; }
  .hero__pitch { font-size: 1rem; }
}