/* ============================================================
   PIVOT — Design System
   ------------------------------------------------------------
   1. Tokens        5. Hero            9.  Clients
   2. Base          6. Statement       10. CTA + Footer
   3. Layout        7. Work            11. Motion
   4. Navigation    8. Capabilities    12. Responsive
   ============================================================ */

/* 1 ── TOKENS ─────────────────────────────────────────────── */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surface */
  --paper:        #F5F3F0;
  --paper-deep:   #ECE8E2;
  --ink:          #0B0B0C;
  --ink-soft:     #17181B;

  /* Type */
  --fg:           #0B0B0C;
  --fg-muted:     #6E6C67;
  --fg-faint:     #9C9992;
  --fg-invert:    #F5F3F0;
  --fg-invert-mut:rgba(245,243,240,.58);

  /* Brand — used sparingly */
  --brand-deep:   #013C76;
  --brand:        #1590C9;
  --brand-light:  #44BFEC;

  /* Lines */
  --line:         rgba(11,11,12,.13);
  --line-strong:  rgba(11,11,12,.28);
  --line-invert:  rgba(245,243,240,.18);

  /* Rhythm */
  --gutter:       clamp(20px, 4.4vw, 72px);
  --gap:          clamp(16px, 1.6vw, 28px);
  --max:          1720px;
  --section:      clamp(96px, 13vw, 210px);
  --section-tight:clamp(72px, 8vw, 130px);

  /* Type scale */
  --t-display:    clamp(3.2rem, 12.4vw, 13rem);
  --t-statement:  clamp(2.35rem, 6.2vw, 6.4rem);
  --t-title:      clamp(1.9rem, 3.9vw, 4.1rem);
  --t-sub:        clamp(1.5rem, 2.6vw, 2.5rem);
  --t-lead:       clamp(1.05rem, 1.32vw, 1.4rem);
  --t-body:       clamp(0.975rem, 1.02vw, 1.075rem);
  --t-small:      0.875rem;
  --t-micro:      0.6875rem;

  /* Motion */
  --ease:         cubic-bezier(.16, 1, .3, 1);
  --ease-io:      cubic-bezier(.62, .01, .2, 1);
  --dur:          .8s;
}

/* 2 ── BASE ───────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-ligatures: common-ligatures;
}
body.is-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

::selection { background: var(--brand-deep); color: #fff; }

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

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 999;
  padding: 14px 22px; background: var(--ink); color: var(--fg-invert);
  transform: translateY(-110%); transition: transform .25s var(--ease);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em;
}
.skip-link:focus { transform: translateY(0); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 3 ── LAYOUT & TYPOGRAPHY ────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--flush { padding-inline: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: var(--section-tight); }
.section--deep  { background: var(--paper-deep); }
.section--ink   { background: var(--ink); color: var(--fg-invert); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Micro label — the small uppercase index that heads each section */
.eyebrow {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--fg-muted);
  display: flex;
  align-items: baseline;
  gap: .9em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .5;
  transform: translateY(-.35em);
}
.eyebrow--invert { color: var(--fg-invert-mut); }
.eyebrow--plain::before { display: none; }

.display {
  font-size: var(--t-display);
  line-height: .87;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.statement {
  font-size: var(--t-statement);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 450;
  text-wrap: balance;
}
.title {
  font-size: var(--t-title);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 500;
}
.sub {
  font-size: var(--t-sub);
  line-height: 1.14;
  letter-spacing: -0.024em;
  font-weight: 450;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--fg-muted);
  max-width: 34ch;
}
.prose { max-width: 46ch; color: var(--fg-muted); }
.prose p + p { margin-top: 1.15em; }
.muted { color: var(--fg-muted); }

/* Arrow link */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--t-small);
  letter-spacing: -0.008em;
  position: relative;
  padding-bottom: 4px;
}
.arrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.arrow:hover::after, a:hover > .arrow::after, .group:hover .arrow::after {
  transform: scaleX(1);
  transform-origin: left;
}
.arrow svg { width: 13px; height: 13px; transition: transform .5s var(--ease); }
.arrow:hover svg, .group:hover .arrow svg { transform: translateX(5px); }

.arrow--lg { font-size: var(--t-lead); gap: .5em; }
.arrow--lg svg { width: 18px; height: 18px; }

/* 4 ── NAVIGATION ─────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(18px, 2.1vw, 30px);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo {
  position: relative;
  display: block;
  width: clamp(96px, 8.6vw, 132px);
  flex: none;
}
.nav__logo img {
  width: 100%;
  transition: opacity .45s var(--ease);
}
.nav__logo img + img { position: absolute; inset: 0; }
.nav__logo .logo--dark { opacity: 0; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 46px);
}
.nav__link {
  font-size: var(--t-small);
  letter-spacing: -0.006em;
  color: var(--fg-invert);
  position: relative;
  padding-block: 2px;
  transition: color .45s var(--ease), opacity .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav.is-solid {
  background: rgba(245,243,240,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
  padding-block: clamp(13px, 1.4vw, 18px);
}
.nav.is-solid .nav__link { color: var(--fg); }
.nav.is-solid .logo--light { opacity: 0; }
.nav.is-solid .logo--dark  { opacity: 1; }
.nav.is-hidden { transform: translateY(-102%); }
.nav { transition: transform .6s var(--ease), background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease); }

/* dark-page variant (pages that start on ink) keeps light nav until scroll */
.nav--onlight .nav__link { color: var(--fg); }
.nav--onlight .logo--light { opacity: 0; }
.nav--onlight .logo--dark  { opacity: 1; }

/* Burger */
.nav__burger {
  display: none;
  width: 34px; height: 34px;
  position: relative;
  margin-right: -6px;
}
.nav__burger span {
  position: absolute; left: 4px; right: 4px; height: 1.5px;
  background: var(--fg-invert);
  transition: transform .5s var(--ease), opacity .3s var(--ease), background .45s var(--ease);
}
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav.is-solid .nav__burger span, .nav--onlight .nav__burger span { background: var(--fg); }
.nav.is-open .nav__burger span { background: var(--fg-invert); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink);
  color: var(--fg-invert);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(110px, 18vh, 170px) var(--gutter) clamp(36px, 6vh, 60px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
  pointer-events: none;
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  line-height: 1.16;
  letter-spacing: -0.038em;
  font-weight: 450;
  transform: translateY(105%);
  transition: transform .8s var(--ease);
}
.menu.is-open .menu__list a { transform: translateY(0); }
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: .10s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .16s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .22s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: .28s; }
.menu__foot {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: var(--t-small);
  color: var(--fg-invert-mut);
  opacity: 0; transition: opacity .5s var(--ease) .35s;
}
.menu.is-open .menu__foot { opacity: 1; }

/* 5 ── HERO ───────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  background: var(--ink);
  color: var(--fg-invert);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Poster sits under the video so the section is never empty
   while the film loads — or before it exists. */
.hero__poster { z-index: 0; }
.hero__video  { z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-ready { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, rgba(6,7,9,.86) 0%, rgba(6,7,9,.30) 42%, rgba(6,7,9,.42) 100%),
    radial-gradient(120% 90% at 78% 18%, rgba(1,60,118,.30), transparent 62%);
}
.hero__inner {
  position: relative; z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(34px, 5.4vh, 62px);
  padding-top: clamp(120px, 16vh, 180px);
}
.hero__eyebrow { margin-bottom: clamp(26px, 4.6vh, 54px); }

.hero__title {
  font-size: var(--t-display);
  line-height: .84;
  letter-spacing: -0.05em;
  font-weight: 500;
  margin: 0;
  max-width: 15ch;
}
.hero__title .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-right: .04em; }
.hero__title .word > span {
  display: inline-block;
}
.js .hero__title .word > span {
  transform: translateY(105%);
  transition: transform 1.15s var(--ease);
}
.hero.is-ready .hero__title .word > span { transform: translateY(0); }
.hero__title .accent { color: var(--brand-light); }

.hero__foot {
  margin-top: clamp(30px, 5vh, 58px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  transition: opacity 1s var(--ease) .55s, transform 1s var(--ease) .55s;
}
.js .hero__foot { opacity: 0; transform: translateY(18px); }
.js .hero.is-ready .hero__foot { opacity: 1; transform: none; }
.hero__lede {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: rgba(245,243,240,.76);
  max-width: 40ch;
  letter-spacing: -0.012em;
}
/* Hero sound. Autoplay with audio is blocked everywhere, so the film starts
   muted and this turns it on. Sits beside SCROLL at the same micro weight so it
   reads as part of the furniture rather than a widget. */
.hero__aside { display: flex; align-items: flex-end; gap: clamp(22px, 3vw, 46px); flex: none; }
.hero__sound {
  display: inline-flex; align-items: center; gap: .8em;
  font-family: inherit;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-invert-mut);
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: color .5s var(--ease);
}
.hero__sound:hover,
.hero__sound.is-on { color: var(--fg-invert); }
.hero__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.hero__eq i {
  display: block; width: 1px; height: 3px;
  background: currentColor;
  transition: height .45s var(--ease);
}
.hero__sound.is-on .hero__eq i { animation: eq 1.05s var(--ease-io) infinite alternate; }
.hero__sound.is-on .hero__eq i:nth-child(2) { animation-delay: .18s; }
.hero__sound.is-on .hero__eq i:nth-child(3) { animation-delay: .36s; }
.hero__sound.is-on .hero__eq i:nth-child(4) { animation-delay: .09s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
/* No autoplay under reduced motion, so there is nothing to unmute. */
@media (prefers-reduced-motion: reduce) { .hero__sound { display: none; } }

.hero__scroll {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-invert-mut);
  flex: none;
}
.hero__scroll i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(245,243,240,.7), rgba(245,243,240,0));
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand-light);
  animation: scrollpulse 2.6s var(--ease-io) infinite;
}
@keyframes scrollpulse {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* 6 ── STATEMENT / POSITIONING ────────────────────────────── */

.statement-block .statement { grid-column: 1 / span 10; }
.statement-block__aside {
  grid-column: 7 / span 5;
  margin-top: clamp(38px, 5.4vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.statement-block__eyebrow { grid-column: 1 / -1; margin-bottom: clamp(38px, 5vw, 76px); }

/* 7 ── WORK ───────────────────────────────────────────────── */

.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(30px, 3.6vw, 54px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(48px, 6vw, 96px);
}

.work-list {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 10vw, 190px);
}

.work-item { display: block; }
.work-item__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}
.work-item__media img {
  width: 100%;
  transition: transform 1.35s var(--ease), filter 1.1s var(--ease);
  will-change: transform;
}
.work-item:hover .work-item__media img { transform: scale(1.032); }

.work-item__foot {
  margin-top: clamp(20px, 2.2vw, 34px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.work-item__id {
  grid-column: 1 / span 12;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-faint);
  margin-bottom: 12px;
}
.work-item__title { grid-column: 1 / span 5; }
.work-item__title .title { display: inline; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .7s var(--ease); }
.work-item:hover .work-item__title .title { background-size: 100% 1px; }
.work-item__meta {
  grid-column: 6 / span 3;
  font-size: var(--t-small);
  color: var(--fg-muted);
  padding-top: .55em;
}
.work-item__desc {
  grid-column: 9 / span 3;
  font-size: var(--t-small);
  color: var(--fg-muted);
  padding-top: .55em;
}
.work-item__cta { grid-column: 12 / span 1; justify-self: end; padding-top: .55em; }

/* Compositional variants — art direction, not a grid of thumbnails */
.work-item--wide   .work-item__media { aspect-ratio: 21 / 9; }
.work-item--wide   .work-item__media img { height: 100%; object-fit: cover; }

.work-item--offset-r { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.work-item--offset-r .work-item__media { grid-column: 4 / span 9; aspect-ratio: 16 / 10; }
.work-item--offset-r .work-item__media img { height: 100%; object-fit: cover; }
.work-item--offset-r .work-item__foot { grid-column: 4 / span 9; }

.work-item--offset-l { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.work-item--offset-l .work-item__media { grid-column: 1 / span 8; aspect-ratio: 3 / 2; }
.work-item--offset-l .work-item__media img { height: 100%; object-fit: cover; }
.work-item--offset-l .work-item__foot { grid-column: 1 / span 8; }

/* Reel — a 9:16 vertical film, shown at its native ratio rather than cropped
   into a landscape slot. Sits right-offset so it reads as a deliberate tile. */
.work-item--reel { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.work-item--reel .work-item__media { grid-column: 8 / span 4; aspect-ratio: 9 / 16; }
.work-item--reel .work-item__media img { height: 100%; object-fit: cover; }
.work-item--reel .work-item__foot  { grid-column: 8 / span 4; }
.work-item--reel .work-item__title { grid-column: 1 / span 12; }
.work-item--reel .work-item__meta  { grid-column: 1 / span 12; padding-top: 10px; }
.work-item--reel .work-item__desc  { grid-column: 1 / span 12; padding-top: 10px; }
.work-item--reel .work-item__cta   { grid-column: 1 / span 12; justify-self: start; padding-top: 14px; }

.work-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap) var(--gap);
  align-items: start;
}
.work-pair > *:first-child { grid-column: 1 / span 5; }
.work-pair > *:last-child  { grid-column: 8 / span 5; margin-top: clamp(50px, 9vw, 150px); }
.work-pair .work-item__media { aspect-ratio: 4 / 5; }
.work-pair .work-item__media img { height: 100%; object-fit: cover; }
.work-pair .work-item__title { grid-column: 1 / span 12; }
.work-pair .work-item__meta  { grid-column: 1 / span 12; padding-top: 10px; }
.work-pair .work-item__desc  { display: none; }
.work-pair .work-item__cta   { grid-column: 1 / span 12; justify-self: start; padding-top: 14px; }

.work-more {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
}

/* 8 ── CAPABILITIES ───────────────────────────────────────── */

.caps { border-top: 1px solid var(--line-strong); }
.cap {
  border-bottom: 1px solid var(--line);
  transition: background-color .6s var(--ease);
}
.cap__link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(22px, 2.5vw, 40px);
}
.cap__index {
  grid-column: 1 / span 1;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  color: var(--fg-faint);
  transition: color .5s var(--ease);
}
.cap__name {
  grid-column: 2 / span 6;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 450;
  transition: transform .7s var(--ease);
  transform-origin: left;
}
.cap__items {
  grid-column: 8 / span 4;
  font-size: var(--t-small);
  color: var(--fg-faint);
  transition: color .6s var(--ease), transform .7s var(--ease);
  line-height: 1.6;
}
.cap__mark {
  grid-column: 12 / span 1;
  justify-self: end;
  align-self: center;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  color: var(--brand-deep);
}
.cap:hover .cap__name  { transform: translateX(clamp(6px, .9vw, 18px)); }
.cap:hover .cap__items { color: var(--fg-muted); }
.cap:hover .cap__index { color: var(--brand-deep); }
.cap:hover .cap__mark  { opacity: 1; transform: translateX(0); }

/* 9 ── ABOUT + CLIENTS ────────────────────────────────────── */

.about__eyebrow { grid-column: 1 / span 12; margin-bottom: clamp(34px, 4.6vw, 68px); }
.about__body   { grid-column: 1 / span 5; }
.about__media  { grid-column: 7 / span 6; }
.about__media img { width: 100%; }
.about__caption { margin-top: 14px; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }

/* About Pivot card, homepage. Poster plus film, the same mechanism the work
   cards use: nothing is fetched until the card scrolls in, and if the film
   cannot play the poster carries the card on its own. The ratio comes from the
   asset rather than the layout, so a replacement film sets its own here. */
.about__film {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 832 / 1114;
}
.about__film img,
.about__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.about__video { opacity: 0; transition: opacity 1s var(--ease); }
.about__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .about__video { transition: none; } }

.facts {
  grid-column: 1 / span 12;
  margin-top: clamp(56px, 7vw, 110px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  border-top: 1px solid var(--line);
}
.fact { padding-top: clamp(18px, 2vw, 30px); }
.fact dt { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-faint); margin-bottom: .9em; }
.fact dd { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.25; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; }
.marquee__item {
  font-size: clamp(2rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.038em;
  font-weight: 450;
  padding-inline: clamp(22px, 3vw, 56px);
  color: var(--fg);
  white-space: nowrap;
  display: flex; align-items: center; gap: clamp(22px, 3vw, 56px);
}
.marquee__item::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  opacity: .7;
  flex: none;
}
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.industries {
  margin-top: clamp(38px, 4.4vw, 64px);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: var(--t-small);
  color: var(--fg-faint);
}

/* 10 ── CTA + FOOTER ──────────────────────────────────────── */

.cta { padding-block: clamp(120px, 17vw, 260px); }
.cta__eyebrow { margin-bottom: clamp(38px, 5vw, 74px); }
.cta__title {
  font-size: clamp(2.6rem, 8.6vw, 9rem);
  line-height: .92;
  letter-spacing: -0.045em;
  font-weight: 450;
  max-width: 16ch;
}
.cta__row {
  margin-top: clamp(46px, 6vw, 90px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px 60px;
}
.cta__mail { font-size: var(--t-lead); color: var(--fg-muted); }
.cta__mail a { color: var(--fg); }

.footer { background: var(--ink); color: var(--fg-invert); padding-block: clamp(56px, 7vw, 104px); }
.footer a:hover { color: #fff; }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: start; }
.footer__brand { grid-column: 1 / span 4; }
.footer__brand img { width: clamp(110px, 11vw, 158px); }
.footer__brand p { margin-top: 22px; color: var(--fg-invert-mut); font-size: var(--t-small); max-width: 30ch; line-height: 1.7; }
.footer__col { grid-column: span 2; }
.footer__col:nth-of-type(2) { grid-column: 7 / span 2; }
.footer__col h4 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-invert-mut); font-weight: 500; margin-bottom: 1.6em; }
.footer__col li + li { margin-top: .85em; }
.footer__col a, .footer__col span { font-size: var(--t-small); color: rgba(245,243,240,.82); transition: color .4s var(--ease); }
.footer__bottom {
  margin-top: clamp(56px, 7vw, 100px);
  padding-top: 26px;
  border-top: 1px solid var(--line-invert);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-invert-mut);
}

/* 11 ── MOTION ────────────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="mask"] { transform: none; opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

[data-parallax] { will-change: transform; }

/* 12 ── PAGE HEADERS (inner pages) ────────────────────────── */

.page-head {
  padding-top: clamp(140px, 18vh, 230px);
  padding-bottom: clamp(56px, 7vw, 110px);
  border-bottom: 1px solid var(--line);
}
.page-head__eyebrow { margin-bottom: clamp(30px, 4vw, 56px); }
.page-head__title { max-width: 18ch; }
.page-head__lede { margin-top: clamp(30px, 3.4vw, 50px); }

/* 13 ── FORM ──────────────────────────────────────────────── */

.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px, 2.6vw, 40px); }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-faint); margin-bottom: 14px; }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--t-lead);
  letter-spacing: -0.015em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 14px;
  border-radius: 0;
  transition: border-color .5s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--brand-deep); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }

.btn {
  display: inline-flex; align-items: center; gap: .8em;
  background: var(--ink); color: var(--fg-invert);
  padding: 20px 34px;
  font-size: var(--t-small);
  letter-spacing: .02em;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.btn:hover { background: var(--brand-deep); }
.btn svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

/* 14 ── RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 1080px) {
  .statement-block .statement { grid-column: 1 / span 12; }
  .statement-block__aside { grid-column: 1 / span 12; }
  .about__body { grid-column: 1 / span 12; }
  .about__media { grid-column: 1 / span 12; margin-top: clamp(40px, 6vw, 70px); }
  .work-item__title { grid-column: 1 / span 12; }
  .work-item__meta  { grid-column: 1 / span 6; padding-top: 16px; }
  .work-item__desc  { grid-column: 7 / span 6; padding-top: 16px; }
  .work-item__cta   { grid-column: 1 / span 12; justify-self: start; padding-top: 18px; }
  .cap__name  { grid-column: 2 / span 10; }
  .cap__items { grid-column: 2 / span 10; padding-top: 12px; }
  .cap__mark  { display: none; }
  .work-item--offset-r .work-item__media,
  .work-item--offset-r .work-item__foot,
  .work-item--offset-l .work-item__media,
  .work-item--offset-l .work-item__foot { grid-column: 1 / span 12; }
  .work-item--reel .work-item__media,
  .work-item--reel .work-item__foot { grid-column: 7 / span 6; }
  .footer__brand { grid-column: 1 / span 12; }
  .footer__col { grid-column: span 4 !important; margin-top: 48px; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .work-pair > *:first-child,
  .work-pair > *:last-child { grid-column: 1 / span 12; }
  .work-pair > *:last-child { margin-top: clamp(64px, 10vw, 100px); }
  .work-pair .work-item__media { aspect-ratio: 4 / 5; }
  .work-item--wide .work-item__media { aspect-ratio: 4 / 3; }
  .work-item--reel .work-item__media { grid-column: 1 / span 10; }
  .work-item--reel .work-item__foot  { grid-column: 1 / span 12; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .fact { padding-block: clamp(20px, 4vw, 30px); border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .form { grid-template-columns: 1fr; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .work-more { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 30px; }
  .hero__scroll { flex-direction: row-reverse; }
  .hero__scroll i { width: 34px; height: 1px; background: linear-gradient(to right, rgba(245,243,240,.7), rgba(245,243,240,0)); }
  .hero__scroll i::after { animation-name: scrollpulse-x; }
  @keyframes scrollpulse-x { 0% { transform: translateX(-100%); } 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
  .footer__col { grid-column: span 6 !important; }
  .cta__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  :root { --t-display: clamp(2.9rem, 15.5vw, 4.4rem); }
  .hero__title { max-width: 100%; }
  .footer__col { grid-column: span 12 !important; }
}

/* 15 ── 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 !important; transform: none !important; clip-path: none !important; }
  .hero__title .word > span { transform: none !important; }
  .hero__foot { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .menu__list a { transform: none !important; }
}

@media print {
  .nav, .menu, .hero__media, .hero__scroll, .hero__sound { display: none !important; }
  body { background: #fff; }
}

/* 16 ── PATCHES ───────────────────────────────────────────── */

/* oversized hero media box gives the parallax room to move
   without ever exposing an edge */
.hero__media { top: -6%; height: 112%; inset-inline: 0; }

/* text arrows instead of icon files — one less request, scales with type */
.arrow i, .btn i { font-style: normal; display: inline-block; transition: transform .5s var(--ease); }
.arrow:hover i, .group:hover .arrow i, .btn:hover i { transform: translateX(5px); }
.cap__mark i { font-style: normal; font-size: 1.1rem; }

/* Typographic accent — one mark of punctuation, occasionally, in the logo's
   cyan. Which of the logo's two cyans depends on the ground: the bright one is
   luminous on ink but goes pale on warm white once the mark is only a few
   pixels across, so light sections take the mid cyan and dark sections take the
   bright one. Both are sampled from the wordmark and they never appear in the
   same field of view, so it reads as one accent colour, not two. */
:root { --accent-ink: var(--brand); }
.hero,
.section--ink,
.footer { --accent-ink: var(--brand-light); }

.accent { color: var(--accent-ink); }

/* footer column placement — explicit, so adding a column never shifts the rest */
.footer__col:nth-child(2) { grid-column: 6 / span 2; }
.footer__col:nth-child(3) { grid-column: 8 / span 2; }
.footer__col:nth-child(4) { grid-column: 10 / span 3; }
@media (max-width: 1080px) {
  .footer__col:nth-child(2),
  .footer__col:nth-child(3),
  .footer__col:nth-child(4) { grid-column: span 4; }
}
@media (max-width: 860px) {
  .footer__col:nth-child(2),
  .footer__col:nth-child(3),
  .footer__col:nth-child(4) { grid-column: span 6; }
}
@media (max-width: 520px) {
  .footer__col:nth-child(2),
  .footer__col:nth-child(3),
  .footer__col:nth-child(4) { grid-column: span 12; }
}

/* hero display words are marked up directly; italics reset for the accent mark */
.hero__title em { font-style: normal; }

/* the positioning section already carries a deep bottom margin of air —
   don't double it up against the work section */
#positioning { padding-bottom: clamp(72px, 8vw, 130px); }

/* 17 ── INNER PAGE COMPONENTS ─────────────────────────────── */

/* Founders */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 110px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 46px);
}
.person__role {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-faint);
  margin: 1.1em 0 1.6em;
}

/* Small index numeral — practices, studio departments */
.svc__index {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  color: var(--fg-faint);
}

/* Contact */
.contact__form  { grid-column: 1 / span 7; }
.contact__aside {
  grid-column: 9 / span 4;
  display: flex; flex-direction: column;
  gap: clamp(32px, 3.6vw, 52px);
}
.contact__item .eyebrow { margin-bottom: 1.1em; }
.contact__item .sub a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.form__note { margin-top: 1.4em; font-size: var(--t-small); }
.form__note--error { color: #B3261E; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1080px) {
  .people { grid-template-columns: 1fr; }
  .contact__form  { grid-column: 1 / span 12; }
  .contact__aside { grid-column: 1 / span 12; margin-top: clamp(56px, 8vw, 90px); }
}

/* the open mobile menu is ink — the wordmark has to invert with it */
.nav.is-open .logo--light { opacity: 1; }
.nav.is-open .logo--dark  { opacity: 0; }
.nav.is-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.nav.is-open .nav__link { color: var(--fg-invert); }

/* capabilities: one rule under the section head, not two close together */
#capabilities .work-head { margin-bottom: 0; border-bottom-color: var(--line-strong); }
#capabilities .caps { border-top: 0; }

/* 18 ── PEOPLE ────────────────────────────────────────────── */

/* Founders — portrait beside the words, not looming over them */
.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5.5vw, 96px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 46px);
}
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(20px, 2.2vw, 36px);
  align-items: start;
}
.founder__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-deep);
}
.founder__media img,
.member__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transition: filter .8s var(--ease), transform 1.3s var(--ease);
  will-change: filter, transform;
}
.founder:hover .founder__media img,
.member:hover .member__media img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.035);
}
.founder__name {
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-weight: 450;
}
.founder__body .prose { font-size: var(--t-small); }

/* Studio roster — one discipline per row: label across the top, people under it.
   The old layout gave each discipline a narrow eight-column strip, which forced
   two rows for Creative and left a lot of dead paper on the left. */
.team { padding-top: clamp(22px, 2.6vw, 38px); }

.team-row {
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 1.8vw, 26px);
  padding-bottom: clamp(38px, 4.4vw, 66px);
}
.team-row:first-child { border-top: 0; padding-top: 0; }
.team-row:last-child  { padding-bottom: 0; }

.team-row__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 24px);
  margin-bottom: clamp(20px, 2.2vw, 34px);
}
.team-row__name {
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  font-weight: 450;
}
.team-row__note {
  font-size: var(--t-small);
  color: var(--fg-faint);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 700px) {
  .team-row__note { margin-left: 0; text-align: left; flex-basis: 100%; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 38px) var(--gap);
}

/* Rosters that are a multiple of 3: grouped 3 per row above the 980px
   breakpoint, where the base .team-grid would otherwise run 5 or 4 wide.
   Each track is sized as if it were still part of a 5-column row (not
   1fr), so cards stay the same size as everywhere else on the page —
   only the row groups into 3s, with the remainder left as open space
   rather than the cards growing to fill it. Below 980px the existing
   .team-grid responsive rules already land on 3, then 2, so this is
   scoped to min-width to avoid overriding those. */
@media (min-width: 981px) {
  .team-grid.team-grid--3up {
    grid-template-columns: repeat(3, calc((100% - 4 * var(--gap)) / 5));
  }
}

.member__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 12px;
}
.member__name {
  font-size: clamp(0.95rem, 1.02vw, 1.08rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.member__role {
  margin-top: .42em;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-faint);
}
.member__bio {
  margin-top: .78em;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.team__note {
  margin-top: clamp(38px, 4.4vw, 64px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-faint);
}
.team__note code {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
}

@media (max-width: 1240px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .founders { grid-template-columns: 1fr; }
  .founder { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 6vw, 34px) 16px; }
}
@media (max-width: 560px) {
  .founder { grid-template-columns: 1fr; gap: 22px; }
  .founder__media { max-width: 300px; }
}

/* 19 ── SERVICES · IMAGE-LED PRACTICES ────────────────────── */

.svc-opener {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--paper-deep);
  margin: 0;
}
.svc-opener img {
  position: absolute;
  inset-inline: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
}

.practices { display: flex; flex-direction: column; }

.practice {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  padding-block: clamp(56px, 7vw, 120px);
  border-top: 1px solid var(--line);
}
.practice:first-child { border-top: 0; padding-top: clamp(28px, 3.4vw, 56px); }

.practice__media {
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}
.practice__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
  will-change: transform;
}
.practice:hover .practice__media img { transform: scale(1.03); }

.practice__body {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 2.8vw, 44px);
}
.practice__head { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 26px); }
.practice__note {
  margin-top: 1.05em;
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--fg-muted);
  max-width: 30ch;
}
.practice__list li {
  font-size: var(--t-body);
  color: var(--fg-muted);
  padding-block: .7em;
  border-bottom: 1px solid var(--line);
}
.practice__list li:first-child { border-top: 1px solid var(--line); }
.practice__list a { color: var(--fg); }

/* Compositions — deliberately no two neighbours alike */
.practice--mr    .practice__body  { grid-column: 1 / span 4; }
.practice--mr    .practice__media { grid-column: 6 / span 7; aspect-ratio: 16 / 10; }

.practice--ml    .practice__media { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.practice--ml    .practice__body  { grid-column: 9 / span 4; }

.practice--tall  .practice__media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.practice--tall  .practice__body  { grid-column: 7 / span 5; }

.practice--tallr .practice__body  { grid-column: 1 / span 5; }
.practice--tallr .practice__media { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }

.practice--wide  .practice__media { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.practice--wide  .practice__body {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(26px, 3vw, 48px);
}
.practice--wide .practice__intro { grid-column: 1 / span 5; }
.practice--wide .practice__list  { grid-column: 8 / span 5; }

@media (max-width: 1080px) {
  .practice__media,
  .practice__body,
  .practice--mr .practice__media,    .practice--mr .practice__body,
  .practice--ml .practice__media,    .practice--ml .practice__body,
  .practice--tall .practice__media,  .practice--tall .practice__body,
  .practice--tallr .practice__media, .practice--tallr .practice__body,
  .practice--wide .practice__media,  .practice--wide .practice__body { grid-column: 1 / -1; }

  .practice__media { grid-row: 1; }
  .practice__body  { grid-row: 2; margin-top: clamp(26px, 4vw, 42px); }
  .practice--wide .practice__body {
    display: flex; flex-direction: column;
    gap: clamp(26px, 2.8vw, 44px); margin-top: clamp(26px, 4vw, 42px);
  }
  .practice--tall .practice__media,
  .practice--tallr .practice__media { aspect-ratio: 4 / 3; }
  .practice__note { max-width: 46ch; }
}

@media (max-width: 620px) {
  .practice--mr .practice__media,
  .practice--ml .practice__media,
  .practice--tall .practice__media,
  .practice--tallr .practice__media { aspect-ratio: 5 / 4; }
  .practice--wide .practice__media { aspect-ratio: 16 / 10; }
  .svc-opener { aspect-ratio: 16 / 10; }
}

/* 20 ── KINETIC CURSOR ────────────────────────────────────── */

/* The custom cursor REPLACES the native pointer, so the native one is hidden.
   `has-cursor` is put on <html> by cursor.js on the first pointermove and never
   before, so a device without a mouse is never left with no pointer at all, and
   stop() removes it again if the machine switches to touch. Under reduced motion
   the dot is still drawn (plain and stable, no stretch or colour), so this never
   strands anyone. Descendants need covering too, or links and inputs reassert
   their own pointer/text cursors. */
html.has-cursor,
html.has-cursor * { cursor: none !important; }

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #171717;          /* matte charcoal — the resting state */
  overflow: hidden;             /* clips the prism to the disc */
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  transform: translate3d(-100px, -100px, 0);
}

/* The colour layer. A band four times the width of the disc, holding the
   palette twice over, so sliding it half its own width loops seamlessly.
   Only opacity and transform ever change — both stay on the compositor. */
.cursor__prism {
  position: absolute;
  top: 0; left: 0;
  width: 400%; height: 100%;
  opacity: 0;
  will-change: transform, opacity;

  /* sRGB fallback for engines without colour-space interpolation */
  background: linear-gradient(90deg,
    #146BFF 0%,  #00C8FF 12.5%, #6A35FF 25%, #D92BFF 37.5%,
    #146BFF 50%, #00C8FF 62.5%, #6A35FF 75%, #D92BFF 87.5%,
    #146BFF 100%);

  /* Interpolating in oklch is what keeps this reading as light rather than
     paint. Blended in sRGB, blue→violet sags through a grey-purple midpoint
     and the whole band goes muddy; oklch holds chroma the whole way across. */
  background: linear-gradient(90deg in oklch,
    #146BFF 0%,  #00C8FF 12.5%, #6A35FF 25%, #D92BFF 37.5%,
    #146BFF 50%, #00C8FF 62.5%, #6A35FF 75%, #D92BFF 87.5%,
    #146BFF 100%);
}

/* touch devices never see it, whatever the script decides */
@media (pointer: coarse) { .cursor { display: none; } }

/* 21 ── ABOUT PAGE · RHYTHM & VISUAL PUNCTUATION ──────────── */

/* Same spacing system, roughly a quarter tighter, scoped to this page only.
   The problem was never the design — it was long stretches of unbroken paper. */
.page-about {
  --section:       clamp(72px, 9vw, 152px);
  --section-tight: clamp(52px, 6vw, 94px);
}
.page-about .page-head {
  padding-top: clamp(116px, 14vh, 176px);
  padding-bottom: clamp(42px, 4.8vw, 76px);
}
.page-about .page-head__eyebrow { margin-bottom: clamp(24px, 2.8vw, 40px); }
.page-about .page-head__lede    { margin-top: clamp(20px, 2.2vw, 32px); }
.page-about .about__eyebrow     { margin-bottom: clamp(26px, 3.2vw, 46px); }
.page-about .founders           { padding-top: clamp(22px, 2.4vw, 36px); }
.page-about .facts              { margin-top: 0; }
.page-about .cta                { padding-block: clamp(96px, 12vw, 180px); }

/* A full-bleed band should cut in, so its neighbours pull back rather than
   leaving it stranded in the middle of a gap. */
.film + .section        { padding-top: clamp(54px, 6.5vw, 104px); }
.section:has(+ .film)   { padding-bottom: clamp(48px, 5.6vw, 88px); }

/* ---- the film component ----------------------------------
   Photograph today, film tomorrow: drop the mp4 in and the poster
   steps aside on its own. Nothing else has to change. */
.film { position: relative; margin: 0; }
.film__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--ink);
}
.film--tall .film__frame { aspect-ratio: 16 / 9; }

/* oversized so the parallax has somewhere to travel */
.film__frame > img,
.film__frame > video {
  position: absolute;
  inset-inline: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
}
.film__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.film__video.is-ready { opacity: 1; }
.film .about__caption { margin-top: 14px; }

@media (max-width: 700px) {
  /* The plain band tightens to 4:3 on narrow screens for presence. film--tall
     does NOT — it exists to match a 16:9 source exactly, and cropping a group
     photograph to 4:3 here would cut the people at both ends. */
  .film__frame { aspect-ratio: 4 / 3; }
}

/* 22 ── INTERACTION · THE CYAN RULE ───────────────────────── */

/* Cyan leads, the logo blue carries it, ink grounds it. The line is never
   wholly cyan — the point is a charge passing through the interface and
   settling, not a coloured link. On dark grounds the far end inverts, or
   the tail would disappear into the page. */
:root {
  --rule-base:   linear-gradient(90deg,
                   var(--brand-light) 0%, var(--brand) 46%, var(--ink) 100%);
  --rule-invert: linear-gradient(90deg,
                   var(--brand-light) 0%, var(--fg-invert) 100%);
  --rule: var(--rule-base);
}
.hero, .section--ink, .footer, .menu { --rule: var(--rule-invert); }

/* the nav floats over the hero before it solidifies, so it picks its own */
.nav                          { --rule: var(--rule-invert); }
.nav.is-solid, .nav--onlight  { --rule: var(--rule-base); }
.nav.is-open                  { --rule: var(--rule-invert); }

/* Movement is unchanged — the same wipe, the same easing, the same 1px.
   Only what the line is made of has changed. */
.arrow::after      { background: var(--rule); }
.nav__link::after  { background: var(--rule); }

/* the current-page marker is a state, not an interaction, so it stays ink */
.nav__link[aria-current="page"]::after { background: currentColor; }

/* project titles use a background-size wipe rather than a transform */
.work-item__title .title { background-image: var(--rule); }

/* Capabilities rows: the hairline already there, charged on hover.
   Absolutely placed over the existing border, so nothing moves. */
.cap { position: relative; }
.cap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.cap:hover::after { transform: scaleX(1); transform-origin: left; }

/* Footer links had colour-only hover; same rule as everywhere else now */
.footer__col a { position: relative; }
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }

/* The one line on the site that is visible at rest: it crosses from the
   resting hairline into the gradient rather than wiping in. */
.contact__item .sub a { position: relative; }
.contact__item .sub a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--rule);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.contact__item .sub a:hover::after { opacity: 1; }

/* the last two places still reaching for the old navy */
.cap:hover .cap__index,
.cap__mark { color: var(--brand); }
.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .cap::after, .footer__col a::after { transition: none; }
}

/* 23 ── WORK CARDS · FILM ──────────────────────────────────
   The card is unchanged: same box, same aspect ratios, same hover.
   A film simply sits over the poster inside it and fades in once it
   can play. If it never can — no codec, reduced motion, a missing
   file — the poster is what stays, which is the first frame anyway. */

.work-item__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1.35s var(--ease);
  will-change: opacity, transform;
}
.work-item__video.is-ready { opacity: 1; }
.work-item:hover .work-item__video { transform: scale(1.032); }

@media (prefers-reduced-motion: reduce) {
  .work-item__video { transition: none; }
}

/* A creative with type hard against all four edges cannot survive a crop.
   Rather than lose the line the film is built around, that one card shows
   the whole frame and lets the card's own ink fill the small remainder.
   The card box, ratio and hover are untouched. */
.work-item__media--contain { background: var(--ink); }
/* the layout variants set object-fit on the image at a higher specificity,
   so match it here — the poster and the film have to agree */
.work-item .work-item__media--contain img,
.work-item .work-item__media--contain .work-item__video { object-fit: contain; }

/* 20 ── CASE STUDY (standalone project pages, work/<slug>.html) ───────── */

.cs-hero {
  position: relative;
  min-height: min(92vh, 840px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(120px, 14vw, 190px) 0 clamp(48px, 6vw, 84px);
  overflow: hidden;
  color: var(--fg-invert);
  background: var(--ink);
}
.cs-hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.cs-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(.46) saturate(1.1);
  transform: scale(1.02);
  transition: transform 1.8s var(--ease);
}
.cs-hero:hover .cs-hero__media img { transform: scale(1.05); }
.cs-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,.28) 100%);
}
.cs-hero__content { position: relative; z-index: 2; width: 100%; }
.cs-hero__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}
.cs-hero__back {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fg-invert); text-decoration: none;
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11,11,12,.36); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 8px 16px 8px 14px;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cs-hero__back:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  transform: translateX(-3px);
}
.cs-hero__kicker {
  color: var(--fg-invert-mut); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(11,11,12,.36); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 8px 14px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.cs-hero__main { max-width: 900px; }
.cs-hero .eyebrow { color: var(--brand-light); }
.cs-hero .eyebrow::before { background: var(--brand-light); }
.cs-hero__title { margin-top: 10px; max-width: 18ch; color: var(--fg-invert); font-weight: 550; }
.cs-hero__lede { max-width: 58ch; margin-top: clamp(16px, 2vw, 26px); color: var(--fg-invert-mut); }

.cs-hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 36px; margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.cs-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.cs-tags li {
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-invert); border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  padding: 7px 14px; background: rgba(11,11,12,.28);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.cs-hero__meta-strip {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 32px);
}
.cs-hero__meta-item {
  display: flex; flex-direction: column; gap: 4px;
}
.cs-hero__meta-lbl {
  color: var(--fg-invert-mut); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase;
}
.cs-hero__meta-val {
  color: var(--fg-invert); font-size: var(--t-small); font-weight: 500;
}

/* Subtle film-grain on dark surfaces */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Two-column body: fixed chapter spine on left, content on right */
.cs-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  padding-top: clamp(64px, 8vw, 112px);
}
.cs-side-nav {
  position: sticky; top: clamp(110px, 14vh, 160px);
  display: flex; flex-direction: column; gap: 4px;
}
.cs-side-nav a {
  font-size: var(--t-small); color: var(--fg-faint); text-decoration: none;
  padding: 10px 0 10px 18px; border-left: 2px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cs-side-nav a:hover { color: var(--fg-muted); }
.cs-side-nav a.is-active { color: var(--fg); border-left-color: var(--brand-deep); font-weight: 600; }

.cs-content { min-width: 0; }
.cs-section { padding-bottom: clamp(80px, 10vw, 150px); }
.cs-section--tight { padding-bottom: clamp(96px, 13vw, 180px); }
.cs-section__head { margin-bottom: clamp(24px, 3vw, 40px); }
.cs-section__head .sub { margin: 0; }
.cs-section__body { max-width: var(--max); }

/* The Brief Callout in Section 01 */
.cs-brief {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper-deep);
  border-left: 3px solid var(--ink);
  border-radius: 0 12px 12px 0;
}
.cs-brief__bar { margin-bottom: 12px; }
.cs-brief__tag {
  display: inline-block;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.cs-brief__quote {
  margin: 0; font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.45;
  color: var(--fg); font-weight: 500; letter-spacing: -.01em;
}

/* Approach Pillars in Section 02 */
.cs-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 8px;
}
.cs-pillar {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.cs-pillar:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 16px 36px -12px rgba(11,11,12,.08);
}
.cs-pillar__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.cs-pillar__num {
  font-size: var(--t-small); font-weight: 600; color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.cs-pillar__kicker {
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.cs-pillar__title {
  font-size: clamp(1.15rem, 1.35vw, 1.35rem); font-weight: 600;
  line-height: 1.25; margin: 0 0 12px; letter-spacing: -.02em;
}
.cs-pillar__desc {
  font-size: var(--t-small); color: var(--fg-muted); line-height: 1.55; margin: 0;
}

/* Browser-chrome mockup in Section 03 */
a.cs-browser {
  display: block; position: relative; text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden; background: var(--paper-deep);
  box-shadow: 0 30px 70px -30px rgba(11,11,12,.35), 0 0 0 1px rgba(11,11,12,.08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
a.cs-browser:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -30px rgba(11,11,12,.45), 0 0 0 1px rgba(11,11,12,.12); }
.cs-browser__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 18px; background: #E6E2DC;
  border-bottom: 1px solid var(--line);
}
.cs-browser__dots { display: flex; gap: 7px; flex: none; }
.cs-browser__dot { width: 10px; height: 10px; border-radius: 50%; display: block; opacity: .85; }
.cs-browser__dot--red { background: #FF5F56; }
.cs-browser__dot--yellow { background: #FFBD2E; }
.cs-browser__dot--green { background: #27C93F; }
.cs-browser__url {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: var(--t-micro); color: var(--fg-muted);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-browser__lock { flex: none; opacity: .65; }
.cs-browser__action { width: 24px; height: 10px; display: flex; gap: 4px; justify-content: flex-end; opacity: .4; }
.cs-browser__action span { width: 4px; height: 4px; border-radius: 50%; background: var(--fg); }
.cs-browser__view {
  max-height: 560px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
}
.cs-browser__view img { display: block; width: 100%; height: auto; }
.cs-browser__visit {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-invert); background: var(--ink); border-radius: 999px;
  padding: 10px 18px;
  opacity: 0; transform: translateY(6px);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.4);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
a.cs-browser:hover .cs-browser__visit { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .cs-browser__visit { opacity: 1; transform: translateY(0); position: static; margin: 14px 16px; width: fit-content; }
}

/* Campaign Post Cards in Section 04 */
.cs-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cs-post { margin: 0; }
.cs-post__media {
  position: relative; overflow: hidden; border-radius: 8px; background: var(--paper-deep);
}
.cs-post img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .6s var(--ease);
}
.cs-post:hover img { transform: scale(1.04); }
.cs-post__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-invert); background: rgba(11,11,12,.5);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: 5px 10px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.cs-post figcaption { margin-top: 16px; }
.cs-post h4 { font-size: var(--t-body); font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.cs-post p { font-size: var(--t-small); color: var(--fg-muted); margin: 0; max-width: 36ch; line-height: 1.5; }

/* Wide creative frame -- for finished campaign collages that aren't a
   single square post (a whole page of ad tiles, exported as one image). */
.cs-frames { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.cs-frame { margin: 0; }
.cs-frame__media {
  border-radius: 14px; overflow: hidden; background: var(--paper-deep);
  box-shadow: 0 30px 70px -30px rgba(11,11,12,.25);
}
.cs-frame__media img { display: block; width: 100%; height: auto; }
.cs-frame figcaption { margin-top: 14px; max-width: 70ch; font-size: var(--t-small); color: var(--fg-muted); line-height: 1.5; }

/* ── 21. OUTCOME SECTION MASTERPIECE ───────────────────────────────── */

#outcome.cs-section--tight { padding-bottom: clamp(64px, 7vw, 104px); }
.cs-outcome {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 20px;
  padding: clamp(32px, 5vw, 64px);
  color: var(--fg-invert);
  background: linear-gradient(150deg, #0d0e11 0%, #16181d 55%, #0b0b0c 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.12);
}
.cs-outcome__hero {
  position: relative; z-index: 1;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.cs-outcome__metric {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4.5vw, 64px); align-items: center;
}
.cs-outcome__value {
  color: var(--brand-light); font-size: clamp(5.4rem, 11vw, 10.5rem);
  font-weight: 550; line-height: .82; letter-spacing: -.075em;
  text-shadow: 0 0 48px rgba(68,191,236,0.3);
}
.cs-outcome__label {
  display: block; color: var(--fg-invert); max-width: 30ch;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -.02em;
}

/* Timeline Runway */
.cs-outcome__timeline {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(130px, auto) minmax(80px, 1fr) minmax(160px, auto);
  gap: clamp(16px, 2.5vw, 32px); align-items: center;
  padding: clamp(24px, 3.2vw, 40px);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}
.cs-outcome__time-node { display: flex; flex-direction: column; gap: 4px; }
.cs-outcome__time-tag {
  color: var(--fg-invert-mut); font-size: var(--t-micro);
  letter-spacing: .09em; text-transform: uppercase;
}
.cs-outcome__time-node strong {
  color: var(--fg-invert); font-size: var(--t-body); font-weight: 600;
}
.cs-outcome__time-node--latest { text-align: right; }
.cs-outcome__track {
  position: relative; display: flex; align-items: center;
}
.cs-outcome__track-line {
  position: relative; width: 100%; height: 2px;
  background: rgba(245,243,240,.18);
  border-radius: 2px;
}
.cs-outcome__track-line::before,
.cs-outcome__track-line::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; transform: translateY(-50%);
}
.cs-outcome__track-line::before { left: 0; background: var(--fg-invert-mut); }
.cs-outcome__track-line::after { right: 0; background: var(--brand-light); box-shadow: 0 0 8px var(--brand-light); }
.cs-outcome__track-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--fg-invert-mut) 0%, var(--brand-light) 100%);
}

/* Next Case Study Footer Wrap */
.cs-next-wrap {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(72px, 9vw, 120px);
}
.cs-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 32px; padding: clamp(36px, 5vw, 64px);
  background: var(--ink); color: var(--fg-invert);
  border-radius: 16px;
}
.cs-next__copy { max-width: 54ch; }
.cs-next .eyebrow { color: var(--brand-light); }
.cs-next .eyebrow::before { background: var(--brand-light); }
.cs-next__title {
  margin: 10px 0 12px; font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 550; letter-spacing: -.03em; line-height: 1.15;
}
.cs-next__desc { margin: 0; color: var(--fg-invert-mut); font-size: var(--t-small); line-height: 1.5; }
.cs-next__cta { color: var(--fg-invert); }
.cs-next__cta:hover { color: var(--brand-light); }

/* Homepage work teaser: headline left, discipline toggles right, same
   .work-card grid as work.html capped to 6 visible cards via JS. */
.work-teaser__grid-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
.work-teaser__intro { grid-column: 1; grid-row: 1; max-width: 46ch; padding-bottom: clamp(24px, 3vw, 40px); }
.work-teaser__title { margin: 10px 0 0; }
.work-teaser__tabs { grid-column: 2; grid-row: 1; margin-bottom: 0; flex: none; justify-self: end; }
.work-teaser__divider {
  grid-column: 1 / -1; grid-row: 2;
  height: 1px; background: var(--line);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.work-grid { grid-column: 1 / -1; grid-row: 3; }
/* Tabs stick to the top of the viewport for as long as the grid-wrap
   (headline through the last card row) is on screen, so the filter stays
   reachable while scrolling the cards. Containing block is the grid-wrap
   itself, not just this row, so it sticks the whole way down. */
.work-teaser__tabs {
  position: sticky; top: clamp(70px, 9vw, 100px); z-index: 20;
  background: var(--paper); padding: 6px; margin: -6px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11,11,12,.08);
}
@media (max-width: 720px) {
  .work-teaser__grid-wrap { grid-template-columns: 1fr; }
  .work-teaser__tabs { grid-column: 1; grid-row: 2; justify-self: start; padding-top: 14px; box-shadow: none; }
  .work-teaser__divider { grid-row: 3; }
  .work-grid { grid-row: 4; }
}

/* Case-study index on work.html. The uniform grid gives a growing archive a
   reliable rhythm; the editorial hierarchy lives inside each card. */
.work-showcase { padding-top: clamp(64px, 7vw, 112px); }
.work-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(22px, 2.8vw, 40px);
  row-gap: clamp(64px, 7vw, 104px);
}
.work-card { min-width: 0; }
.work-card__link { display: block; color: inherit; text-decoration: none; }
.work-card__media {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--ink);
}
.work-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.52) 0%, rgba(11,11,12,.05) 32%, rgba(11,11,12,.04) 62%, rgba(11,11,12,.58) 100%);
}
.work-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.25s var(--ease), filter .6s var(--ease);
}
.work-card__top {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 1.35vw, 20px);
}
.work-card__kicker,
.work-card__tags li {
  color: var(--fg-invert); background: rgba(11,11,12,.24);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
          backdrop-filter: blur(12px) saturate(1.25);
}
.work-card__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 8px 12px;
  font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase;
}
.work-card__kicker::before {
  content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: var(--brand-light);
}
.work-card__index {
  color: var(--fg-invert); font-size: var(--t-micro); line-height: 1;
  letter-spacing: .12em; padding-top: 10px;
}
.work-card__tags {
  position: absolute; right: clamp(14px, 1.35vw, 20px); bottom: clamp(14px, 1.35vw, 20px); left: clamp(14px, 1.35vw, 20px); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.work-card__tags li {
  border-radius: 999px; padding: 7px 11px;
  font-size: var(--t-micro); letter-spacing: .055em; text-transform: uppercase;
}
.work-card__foot {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: start; margin-top: 20px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.work-card__foot::after {
  content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px;
  background: var(--rule); transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.work-card__title {
  margin: 0; font-size: clamp(1.25rem, 1.65vw, 1.7rem); line-height: 1.12;
  font-weight: 600; letter-spacing: -.025em;
}
.work-card__desc {
  max-width: 38ch; margin: 9px 0 0; color: var(--fg-muted);
  font-size: var(--t-small); line-height: 1.5;
}
.work-card__arrow {
  display: inline-block; color: var(--fg); font-size: 1.45rem; line-height: 1;
  transform: translateX(0); transition: transform .45s var(--ease), color .3s var(--ease);
}
.work-card__link:hover .work-card__media img { transform: scale(1.035); filter: saturate(1.04); }
.work-card__link:hover .work-card__foot::after { transform: scaleX(1); transform-origin: left; }
.work-card__link:hover .work-card__arrow { color: var(--brand); transform: translateX(6px); }
.work-card__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .work-card__media img,
  .work-card__foot::after,
  .work-card__arrow { transition: none; }
}

/* Discipline filter above the work list on work.html.
   Sticky so the filter stays reachable while scrolling the grid below it —
   its containing block is .wrap, which spans tabs through the last card
   row, so it sticks for exactly as long as that span is on screen. */
.work-tabs {
  display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vw, 14px);
  margin-bottom: clamp(28px, 4vw, 48px);
  position: sticky; top: clamp(70px, 9vw, 100px); z-index: 20;
  background: var(--paper); padding: 6px; margin-left: -6px; margin-top: -6px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11,11,12,.08);
  width: fit-content;
}
@media (max-width: 720px) { .work-tabs { box-shadow: none; } }
.work-tab {
  font: inherit; font-size: var(--t-small); color: var(--fg-muted);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.work-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.work-tab.is-active { color: var(--fg-invert); background: var(--ink); border-color: var(--ink); }
.work-item.is-filtered-out,
.work-card.is-filtered-out { display: none; }

@media (max-width: 980px) {
  .cs-layout { grid-template-columns: 1fr; gap: 32px; }
  .cs-side-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: clamp(18px, 2.4vw, 34px);
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .cs-side-nav a { padding: 0 0 6px; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .cs-side-nav a.is-active { border-left: none; border-bottom-color: var(--brand-deep); }
  .cs-pillars { grid-template-columns: 1fr; }
  .cs-outcome__metric { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 860px) {
  .cs-shots, .cs-posts { grid-template-columns: 1fr 1fr; }
  .cs-shot--wide { grid-column: span 2; }
  .work-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .cs-hero__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cs-hero__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cs-shots, .cs-posts { grid-template-columns: 1fr; }
  .cs-shot--wide { grid-column: span 1; }
  .cs-outcome { padding: 28px 20px; }
  .cs-outcome__value { font-size: clamp(4.6rem, 20vw, 6.5rem); }
  .cs-outcome__timeline { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .cs-outcome__time-node--latest { text-align: left; }
  .cs-outcome__track { display: none; }
  .cs-next { padding: 32px 24px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card__media { aspect-ratio: 5 / 6; }
  .work-card__foot { margin-top: 16px; }
}

/* ============ BLOG ============ */
.cs-hero--blog { min-height: min(62vh, 560px); }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(22px, 2.8vw, 40px); row-gap: clamp(48px, 5vw, 72px);
}
.blog-card { min-width: 0; }
.blog-card__link { display: block; color: inherit; text-decoration: none; }
.blog-card__media {
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 16 / 10; background: var(--ink);
}
.blog-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.25s var(--ease);
}
.blog-card__link:hover .blog-card__media img { transform: scale(1.035); }
.blog-card__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint);
}
.blog-card__meta span:not(:last-child)::after { content: "\00b7"; margin-left: 10px; }
.blog-card__title {
  margin: 10px 0 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.24;
  font-weight: 600; letter-spacing: -.02em;
}
.blog-card__desc { max-width: 42ch; margin: 10px 0 0; color: var(--fg-muted); font-size: var(--t-small); line-height: 1.6; }
.blog-card__link:hover .blog-card__title { color: var(--brand); }

.blog-more { text-align: center; margin-top: clamp(56px, 6vw, 88px); }

.blog-more-wrap { border-top: 1px solid var(--line); }
.blog-more__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(28px, 4vw, 48px);
}
.blog-more__head .eyebrow { margin: 0; }

/* Article body */
.blog-article { max-width: min(880px, 100%); margin: 0 auto; }
.blog-article > * + * { margin-top: 1.5em; }
.blog-article p { color: var(--fg-muted); line-height: 1.75; font-size: var(--t-lead); }
.blog-article h2 {
  margin-top: 2em; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 600;
  letter-spacing: -.02em; color: var(--fg);
}
.blog-article h3 { margin-top: 1.8em; font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; color: var(--fg); }
.blog-article h4 { margin-top: 1.6em; font-size: var(--t-lead); font-weight: 600; color: var(--fg); }
.blog-article ul, .blog-article ol { padding-left: 1.4em; color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.7; }
.blog-article li + li { margin-top: .6em; }
.blog-article a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.blog-article a:hover { color: var(--brand); }
.blog-article strong { color: var(--fg); font-weight: 600; }
.blog-article figure { margin: 0; }
.blog-article figure img { width: 100%; border-radius: 4px; display: block; }
.blog-article figcaption { margin-top: 10px; font-size: var(--t-micro); color: var(--fg-faint); }
.blog-article .blog-table-wrap { overflow-x: auto; }
.blog-article table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.blog-article th, .blog-article td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.blog-article th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); font-weight: 500; }
.blog-article__sign-off { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--line); color: var(--fg-faint); font-size: var(--t-small); }
.blog-article__source { margin-top: .5em; }

.blog-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-invert-mut);
}
.blog-byline span:not(:last-child)::after { content: "\00b7"; margin-left: 8px; }

@media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-article p, .blog-article ul, .blog-article ol { font-size: var(--t-small); }
}