/* =====================================================================
   motion-kit layout. Mobile-first, one breakpoint at 967px, type tweaks at
   1512px. Every box comes from Metalab's component CSS (see
   references/page-system.md). No CSS transitions on measured motion: every
   animated value is driven by GSAP in js/motion.js, so a virtual clock can
   step it frame by frame (scripts/verify).
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; background: var(--bg); scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { width: 0; background: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text-bold);
  font-family: var(--font-text); font-weight: var(--text-weight); font-size: 1.6rem;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html.is-preloading, body.is-preloading { background: #fff; overflow: hidden; }
:root { --cursor-ink: var(--text-bold); --cursor-highlight: var(--highlight); }   /* js/cursor.js: dot/ring = text colour (Metalab --text-bold), focus/drag ring = highlight */
h1, h2, h3, p, dl, dd, dt, ul, blockquote, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
img, video { display: block; }
.clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.kit-error { padding: 4rem var(--gutter); font: 1.6rem/1.4 var(--font-mono); color: #ff6060; white-space: pre-wrap; }

/* ---------- shared grids ---------- */
.grid6 { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
.grid12 { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
@media (min-width: 967px) { .grid12 { grid-template-columns: repeat(12, 1fr); } }

/* ---------- ContentMask (preloader) ---------- */
.content-mask { position: relative; z-index: 102; background: var(--bg); }
.content-mask.is-preloader { position: fixed; inset: 0; height: 100vh; overflow: hidden; clip-path: url(#preloader-clip); -webkit-clip-path: url(#preloader-clip); }

/* ---------- Sections (SectionContainer) ---------- */
.section { --spacing: var(--spacing-mobile); margin-bottom: var(--spacing); }
@media (min-width: 967px) { .section { --spacing: var(--spacing-desktop); } }
.section--title { --spacing-mobile: 56px; }          /* measured: title blocks are followed by 56px on mobile, 180 on desktop */
.section--collapse { margin-bottom: var(--gutter); }
.section--none { margin-bottom: 0; }
.section--last { margin-bottom: calc(var(--spacing) * .5); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 50%; width: 100%; z-index: 110; padding: 0 var(--gutter);
  border-radius: 100rem; overflow: hidden; opacity: 0; visibility: hidden; transform: translateX(-50%);
}
.nav__bg-color { position: absolute; inset: 0; z-index: 1; background: var(--nav-glass); opacity: 0; }
.nav__bg-blur  { position: absolute; inset: 0; z-index: 2; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; }
.nav__inner { position: relative; z-index: 3; width: 100%; height: 4.8rem; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 967px) { .nav__inner { height: 5.4rem; } }
.nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-text); font-weight: 500; font-size: 2.4rem; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.nav__logo img, .nav__logo svg { height: 2.2rem; width: auto; display: block; }
@media (min-width: 967px) { .nav__logo { font-size: 2.2rem; } }
.nav__btn {
  height: var(--button-height-md); min-width: var(--button-height-md); border-radius: 5rem;
  background-color: var(--button-bg); -webkit-backdrop-filter: blur(1.4rem); backdrop-filter: blur(1.4rem);
  border: .1rem solid transparent; display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--text-light-weight); font-size: 1.4rem; letter-spacing: -.01em; color: var(--text-bold);
}
@media (min-width: 967px) { .nav__btn { height: var(--button-height); min-width: var(--button-height); font-size: 1.2rem; } }
.nav__menu { padding: 0 1.6rem; }
.nav__round { width: var(--button-height-md); padding: 0; }
@media (min-width: 967px) { .nav__round { width: var(--button-height); } }
.nav__moon { width: .8rem; } .nav__mail { width: 1.3rem; }
@media (min-width: 967px) { .nav__moon { width: .7rem; } .nav__mail { width: 1rem; } }
.nav__right { display: flex; align-items: center; gap: var(--gutter-xs); }
/* back to work: same pill as the old Menu button; the link itself is the 44 px touch target on mobile */
.nav__back { display: inline-flex; align-items: center; min-height: 4.4rem; color: inherit; }
@media (min-width: 967px) { .nav__back { min-height: 0; } }
.nav__back .nav__menu { gap: .6rem; }
.nav__arrow { width: 1.3rem; flex: none; } @media (min-width: 967px) { .nav__arrow { width: 1rem; } }
.nav__time { display: none; font-weight: var(--text-light-weight); font-size: 1.2rem; line-height: 120%; letter-spacing: -.01em; margin-right: 1.2rem; white-space: nowrap; }
@media (min-width: 967px) { .nav__time { display: block; } }

/* ---------- MaskReveal ---------- */
.mask {
  position: relative; overflow: hidden; background-color: var(--bg-subtle);
  --left-y: 0%; --right-y: 0%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--left-y), 0 var(--right-y));
          clip-path: polygon(0 0, 100% 0, 100% var(--left-y), 0 var(--right-y));
}
.mask--from-bottom {
  --left-y: 100%; --right-y: 100%;
  -webkit-clip-path: polygon(0 var(--left-y), 100% var(--right-y), 100% 100%, 0 100%);
          clip-path: polygon(0 var(--left-y), 100% var(--right-y), 100% 100%, 0 100%);
}
.mask--hide-bg { background-color: transparent; }
.mask__scale { position: relative; width: 100%; height: 100%; transform: scale(1.3); }
.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.no-js .mask { --left-y: 100%; --right-y: 100%; }
html.no-js .mask--from-bottom { --left-y: 0%; --right-y: 0%; }

/* text reveal start state (GSAP autoAlpha) */
[data-reveal-item], [data-stats-fade] { opacity: 0; visibility: hidden; }
html.no-js [data-reveal-item], html.no-js [data-stats-fade] { opacity: 1; visibility: visible; }

/* ---------- caseStudyHero ---------- */
.hero { position: relative; overflow: hidden; --title-h: 42rem; }
@media (min-width: 967px) { .hero { --title-h: 45rem; } }
.hero__title-wrap { height: var(--title-h); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 var(--gutter); position: relative; }
.hero__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 6.4rem; line-height: 120%; letter-spacing: -.015em; font-variation-settings: var(--display-opsz); }
@media (min-width: 967px) { .hero__title { font-size: 14rem; } }
.hero__meta { position: absolute; left: 0; bottom: 0; width: 100%; display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter) var(--gutter); }
.hero__col { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; }
.hero__col dt { font-weight: 500; }
.hero__col dd { color: var(--text-subtle); font-weight: 400; }
.hero__tag { display: inline-block; }
.hero__col:nth-child(1) { grid-column: 1 / 3; }
.hero__col:nth-child(2) { grid-column: 3 / 5; }
.hero__col:nth-child(3) { grid-column: 5 / -1; }
@media (min-width: 967px) {
  .hero__col { font-size: 1.6rem; }
  .hero__col:nth-child(2) { grid-column: 4 / 4; }
}
/* four columns (Client · Year · Platform · Deliverables): row of three + Deliverables full width on mobile; one row on desktop */
.hero__meta--4 { row-gap: 1.2rem; }
.hero__meta--4 .hero__col:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 967px) {
  .hero__meta--4 .hero__col:nth-child(2) { grid-column: 3 / 4; }
  .hero__meta--4 .hero__col:nth-child(3) { grid-column: 4 / 5; }
  .hero__meta--4 .hero__col:nth-child(4) { grid-column: 5 / -1; }
}
.hero__media-wrap { position: relative; width: 100%; height: 173vw; }
@media (min-width: 967px) { .hero__media-wrap { height: 58.2vw; } }
.hero__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { z-index: 3; opacity: 0; }

/* ---------- titleAndText (positions 1-3) ---------- */
.tat { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
.tat__container { grid-column: 1 / -1; }
@media (min-width: 967px) {
  .tat__container { grid-column: 1 / 6; }
  .tat--pos2 .tat__container { grid-column: 2 / 5; }
  .tat--pos3 .tat__container { grid-column: 4 / -1; }
}
.tat__title { font-size: 1.8rem; line-height: 130%; letter-spacing: -.01em; margin-bottom: 1.6rem; }
.tat__desc { font-size: 2.8rem; line-height: 121%; letter-spacing: -.02em; }
.tat--pos2 .tat__desc, .tat--pos3 .tat__desc { font-size: 2.4rem; line-height: 120%; letter-spacing: -.03em; }
.tat__desc p + p { margin-top: 1em; }
@media (min-width: 967px) {
  .tat__title { font-size: 2rem; margin-bottom: 2.8rem; }
  .tat__desc { font-size: 5.6rem; }
  .tat--pos2 .tat__desc, .tat--pos3 .tat__desc { font-size: 4rem; }
}

/* ---------- TitleDescriptionBlock (small copy beside media) ---------- */
.small-desc, .tdc__desc { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; text-wrap: pretty; white-space: pre-line; }
.tdb__title { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; font-weight: 500; margin-bottom: .8rem; }
@media (min-width: 967px) {
  .small-desc, .tdc__desc { font-size: 1.6rem; letter-spacing: var(--small-tracking-desktop); }
  .tdb__title { font-size: 1.6rem; }
}
.tdc__desc + .tdc__desc { margin-top: 1em; }
.tdc { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); width: calc(100% + var(--gutter) * 2); margin-left: calc(var(--gutter) * -1); }
.tdc__inner { grid-column: 1 / 6; max-width: 100%; }
@media (min-width: 967px) {
  .tdc { display: block; padding: 0; width: auto; margin-left: 0; }
  .tdc__inner { width: 14.8vw; }
}

/* ---------- videoScrollerAndText ---------- */
.vscroller__box { position: relative; height: 60vw; }
@media (min-width: 967px) { .vscroller__box { height: calc((100vw - var(--gutter) * 2) * 9 / 16); } }
.vscroller__clip { position: absolute; top: 0; left: var(--gutter); width: calc(100% - var(--gutter) * 2); height: 100%; background: var(--bg-subtle); overflow: hidden; }
.vscroller__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vscroller__overlay { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; }
@media (min-width: 967px) { .vscroller__overlay { opacity: var(--desktop-overlay, 0); } }
.vscroller__play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 6.4rem; height: 6.4rem; margin: -3.2rem 0 0 -3.2rem; border-radius: 50%;
  background: hsla(0, 0%, 73%, .3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; }
.vscroller__play svg { width: 1.6rem; margin-left: .3rem; }
@media (min-width: 967px) and (pointer: fine) { .vscroller__play { display: none; } }  /* desktop: the video cursor is the affordance */
.vscroller.is-playing .vscroller__overlay, .vscroller.is-playing .vscroller__play { display: none; }
.vscroller__text { margin-top: 2.4rem; }
.vscroller__text-inner { grid-column: 1 / 6; }
@media (min-width: 967px) { .vscroller__text-inner { grid-column: 11 / -1; } }

/* ---------- textAnd1Image (layouts 1-5) ---------- */
.t1i { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
.t1i__media { grid-column: 1 / -1; }
.t1i__text { grid-column: 1 / 6; }
@media (max-width: 966px) { .t1i:not(.has-text) { margin-bottom: calc(var(--gutter) * -1); } }
.t1i--layout3:not(.has-text), .t1i--layout4:not(.has-text) { margin-bottom: calc(var(--gutter) * -1); }
.t1i--layout1 .t1i__media { height: 60.5vw; min-height: 51.425vw; max-height: calc(100vh - var(--gutter) * 2); }
.t1i--layout1 .t1i__text { align-self: flex-end; }
.t1i--layout2 .t1i__media { height: 60.5vw; min-height: 51.425vw; max-height: calc(100vh - var(--gutter) * 2); }
.t1i--layout3 .t1i__media { height: 51.6vw; min-height: 43.86vw; max-height: calc(100vh - var(--gutter) * 2); }
.t1i--layout4 .t1i__media { height: 39vw;   min-height: 33.15vw; max-height: calc(100vh - var(--gutter) * 2); }
.t1i--layout5 .t1i__media { height: 90vw;   min-height: 76.5vw;  max-height: calc(100vh - var(--gutter) * 2); }
@media (min-width: 967px) {
  .t1i--layout1 .t1i__media { height: 52vw; min-height: 44.2vw; order: 2; grid-column: 2 / -1; }
  .t1i--layout1 .t1i__text  { order: 1; grid-column: 1 / 2; }
  .t1i--layout2 .t1i__media { height: 52vw; min-height: 44.2vw; grid-column: 1 / 6; }
  .t1i--layout2 .t1i__text  { grid-column: 6 / -1; }
  .t1i--layout3 .t1i__media { height: 54vw; min-height: 45.9vw; grid-column: 1 / -1; }
  .t1i--layout3 .t1i__text  { grid-column: 1 / 2; }
  .t1i--layout4 .t1i__media { height: 41vw; min-height: 34.85vw; grid-column: 1 / -1; }
  .t1i--layout4 .t1i__text  { grid-column: 6 / -1; }
  .t1i--layout5 .t1i__media { height: 45vw; min-height: 38.25vw; grid-column: 1 / 4; }
  .t1i--layout5 .t1i__text  { align-self: flex-end; grid-column: 4 / 6; }
}
@media (min-width: 1200px) { .t1i--layout5 .t1i__text { grid-column: 4 / 5; } }

/* ---------- textAnd2Images (layouts 1-5) ---------- */
.t2i__inner, .t3i__inner { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--gutter); }
@media (min-width: 967px) { .t2i__inner, .t3i__inner { display: grid; } }
@media (max-width: 966px) { .t2i:not(.has-text), .t3i:not(.has-text) { margin-bottom: calc(var(--gutter) * -1); } }
.t2i--layout1:not(.has-text) { margin-bottom: calc(var(--gutter) * -1); }
.t2i__m1, .t2i__m2, .t3i__m1, .t3i__m2, .t3i__m3 { max-height: calc(100vh - var(--gutter) * 2); }
/* layout1: two equal media side by side, copy below */
.t2i--layout1 .t2i__m1, .t2i--layout1 .t2i__m2 { height: 91vw; min-height: 77.35vw; }
/* layout2: small media bottom-left under the copy, big media right (Suno) */
.t2i--layout2 .t2i__m1 { height: 114vw; min-height: 96.9vw; }
.t2i--layout2 .t2i__m2 { height: 73vw;  min-height: 62.05vw; }
/* layout3: tall media left, short media + copy right */
.t2i--layout3 .t2i__m1 { height: 91vw;   min-height: 77.35vw; }
.t2i--layout3 .t2i__m2 { height: 51.6vw; min-height: 43.86vw; }
/* layout4: big media left (80%), copy column (20%), small media bottom-right */
.t2i--layout4 .t2i__m1 { height: 60vw;   min-height: 51vw; }
.t2i--layout4 .t2i__m2 { height: 73.8vw; min-height: 48.45vw; }
/* layout5: like 2, copy under the small media */
.t2i--layout5 .t2i__m1 { height: 114vw; min-height: 96.9vw; }
.t2i--layout5 .t2i__m2 { height: 73vw;  min-height: 62.05vw; }
@media (min-width: 967px) {
  .t2i--layout1 .t2i__inner { grid-template-areas: "a b" "c c"; grid-template-columns: 1fr 1fr; }
  .t2i--layout1 .t2i__m1 { grid-area: a; height: 47vw; min-height: 39.95vw; }
  .t2i--layout1 .t2i__m2 { grid-area: b; height: 47vw; min-height: 39.95vw; }
  .t2i--layout1 .t2i__text { grid-area: c; }

  .t2i--layout2 .t2i__inner { grid-template-areas: "a c" "b c"; grid-template-columns: .31fr .69fr; }
  .t2i--layout2:not(.has-text) .t2i__inner { row-gap: 0; }
  .t2i--layout2 .t2i__m1 { grid-area: b; height: 39vw; min-height: 33.15vw; align-self: flex-end; }
  .t2i--layout2 .t2i__m2 { grid-area: c; height: 51vw; max-height: 100vh; min-height: 100%; }
  .t2i--layout2 .t2i__text { grid-area: a; }

  .t2i--layout3 .t2i__inner { grid-template-areas: "a b" "a c"; grid-template-columns: .5fr .5fr; }
  .t2i--layout3:not(.has-text) .t2i__inner { row-gap: 0; }
  .t2i--layout3 .t2i__m1 { grid-area: a; height: 47vw; max-height: 100vh; min-height: 100%; }
  .t2i--layout3 .t2i__m2 { grid-area: b; height: 26.7vw; min-height: 22.695vw; }
  .t2i--layout3 .t2i__text { grid-area: c; justify-self: flex-end; }

  .t2i--layout4 .t2i__inner { display: flex; flex-flow: row wrap; justify-content: flex-end; }
  .t2i--layout4 .t2i__m1 { height: 52vw; min-height: 44.2vw; width: calc(80% - var(--gutter)); }
  .t2i--layout4 .t2i__text { width: 20%; order: 2; }
  .t2i--layout4 .t2i__text .tdc__inner { width: 100%; }
  .t2i--layout4 .t2i__m2 { height: 24.9vw; min-height: 21.165vw; min-width: 31.2vw; max-width: 31.2vw; align-self: flex-end; order: 3; }

  .t2i--layout5 .t2i__inner { grid-template-areas: "a c" "b c"; grid-template-columns: .31fr .69fr; }
  .t2i--layout5:not(.has-text) .t2i__inner { row-gap: 0; }
  .t2i--layout5 .t2i__m1 { grid-area: a; height: 39vw; min-height: 33.15vw; }
  .t2i--layout5 .t2i__m2 { grid-area: c; height: 51vw; max-height: 100vh; min-height: 100%; }
  .t2i--layout5 .t2i__text { grid-area: b; }
}

/* ---------- textAnd3Images (layouts 1-6) ---------- */
.t3i--layout1 .t3i__m1, .t3i--layout1 .t3i__m2, .t3i--layout1 .t3i__m3,
.t3i--layout3 .t3i__m1, .t3i--layout3 .t3i__m2, .t3i--layout3 .t3i__m3 { height: 91vw; min-height: 77.35vw; }
.t3i--layout2 .t3i__m1 { height: 51vw;   min-height: 43.35vw; }
.t3i--layout2 .t3i__m2 { height: 91vw;   min-height: 77.35vw; }
.t3i--layout2 .t3i__m3 { height: 51.6vw; min-height: 43.86vw; }
.t3i--layout4 .t3i__m1, .t3i--layout4 .t3i__m2 { height: 91vw; min-height: 77.35vw; }
.t3i--layout4 .t3i__m3 { height: 73vw; min-height: 62.05vw; }
.t3i--layout5 .t3i__inner { display: grid; row-gap: var(--gutter); grid-template-areas: "a" "d" "b" "e" "c" "f"; }
.t3i--layout5 .t3i__m1 { grid-area: a; } .t3i--layout5 .t3i__m2 { grid-area: b; } .t3i--layout5 .t3i__m3 { grid-area: c; }
.t3i--layout5 .t3i__m1, .t3i--layout5 .t3i__m2, .t3i--layout5 .t3i__m3 { height: 120vw; min-height: 102vw; }
.t3i--layout5 .t3i__text1 { grid-area: d; } .t3i--layout5 .t3i__text2 { grid-area: e; } .t3i--layout5 .t3i__text3 { grid-area: f; }
.t3i--layout6 .t3i__m1, .t3i--layout6 .t3i__m2, .t3i--layout6 .t3i__m3 { height: 73vw; min-height: 62.05vw; }
@media (min-width: 967px) {
  .t3i--layout1 .t3i__inner { grid-template-areas: "a b" "c d"; grid-template-columns: .5fr .5fr; }
  .t3i--layout1 .t3i__m1, .t3i--layout1 .t3i__m2, .t3i--layout1 .t3i__m3 { height: 47vw; min-height: 39.95vw; }
  .t3i--layout1 .t3i__m1 { grid-area: a; } .t3i--layout1 .t3i__m2 { grid-area: b; } .t3i--layout1 .t3i__m3 { grid-area: c; }
  .t3i--layout1 .t3i__text { grid-area: d; align-self: flex-end; }

  .t3i--layout2 .t3i__inner { grid-template-areas: "a a" "b c" "b d"; grid-template-columns: .5fr .5fr; }
  .t3i--layout2 .t3i__m1 { grid-area: a; height: 54vw; min-height: 45.9vw; }
  .t3i--layout2 .t3i__m2 { grid-area: b; height: 47vw; max-height: 100vh; min-height: 100%; }
  .t3i--layout2 .t3i__m3 { grid-area: c; height: 26.7vw; min-height: 22.695vw; }
  .t3i--layout2 .t3i__text { grid-area: d; align-self: flex-end; }

  .t3i--layout3 .t3i__inner { grid-template-areas: "a b" "c d"; grid-template-columns: .5fr .5fr; }
  .t3i--layout3 .t3i__m1, .t3i--layout3 .t3i__m2, .t3i--layout3 .t3i__m3 { height: 47vw; min-height: 39.95vw; }
  .t3i--layout3 .t3i__m1 { grid-area: b; } .t3i--layout3 .t3i__m2 { grid-area: c; } .t3i--layout3 .t3i__m3 { grid-area: d; }
  .t3i--layout3 .t3i__text { grid-area: a; justify-self: flex-end; }

  .t3i--layout4 .t3i__inner { display: flex; flex-flow: row wrap; justify-content: space-between; }
  .t3i--layout4 .t3i__m1, .t3i--layout4 .t3i__m2 { height: 47vw; min-height: 39.95vw; width: calc(50% - var(--gutter) * .5); }
  .t3i--layout4 .t3i__text { order: 3; }
  .t3i--layout4 .t3i__m3 { height: 24.9vw; min-height: 21.165vw; order: 4; width: 31.2vw; margin-left: auto; }

  .t3i--layout5 .t3i__inner { grid-template-areas: "a b c" "d e f"; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t3i--layout5.no-text .t3i__inner { grid-template-areas: "a b c"; }
  .t3i--layout5 .t3i__m1, .t3i--layout5 .t3i__m2, .t3i--layout5 .t3i__m3 { height: 40vw; min-height: 34vw; }

  .t3i--layout6 .t3i__inner {
    --third: calc((100vw - var(--gutter) * 2) / 3 - var(--gutter) * .666666666 + var(--gutter) * .5);
    grid-template-areas: "a b" "a c" "d d"; grid-template-columns: calc(var(--third) * 2) auto;
  }
  .t3i--layout6:not(.has-text) .t3i__inner { grid-template-areas: "a b" "a c"; }
  .t3i--layout6 .t3i__m1 { grid-area: a; height: 50vw; min-height: 42.5vw; }
  .t3i--layout6 .t3i__m2 { grid-area: b; height: 10vw; max-height: 100vh; min-height: 100%; }
  .t3i--layout6 .t3i__m3 { grid-area: c; height: 10vw; max-height: 100vh; min-height: 100%; }
  .t3i--layout6 .t3i__text { grid-area: d; }
}

/* ---------- mediaSliderAndText ---------- */
.slider { position: relative; overflow: hidden; touch-action: pan-y; }
.slider__track { display: flex; align-items: center; will-change: transform; }
.slide { position: relative; flex: 0 0 auto; user-select: none; -webkit-user-select: none; overflow: hidden; padding: 0 1rem; }
.slide--tall { height: 104vw; width: calc(82% + 2rem); }
.slide--wide { height: 71vw; width: calc(89% + 2rem); }
@media (min-width: 768px) {
  .slide--tall { height: 39.4vw; width: calc(32% + 12.8vw); }
  .slide--wide { height: 31.7vw; width: calc(40% + 12.8vw); }
}
@media (min-width: 967px) { .slide { padding: 0 6.4vw; } }
.slide::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.slide__inner { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--bg-subtle); }
.slide__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
video.slide__media { opacity: 0; }
.slider__caption-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(12, 1fr); padding: 0 var(--gutter); margin-top: 2.4rem; }
.slider__caption { grid-column: 4 / 10; }
@media (min-width: 967px) {
  .slider__caption-grid { grid-template-columns: repeat(6, 1fr); }
  .slider__caption { grid-column: 2 / 3; }
}
.slider__title { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; font-weight: 500; margin-bottom: .8rem; }
.slider__desc { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; color: var(--text-bold); }
@media (min-width: 967px) { .slider__desc, .slider__title { font-size: 1.6rem; } }

/* ---------- statRows ---------- */
.stats__inner { display: grid; gap: var(--gutter); grid-template-columns: repeat(12, 1fr); padding: 0 var(--gutter); }
.stats__title-wrap { grid-column: 1 / -1; }
.stats__title { font-size: 2.8rem; line-height: 121%; letter-spacing: -.02em; margin-bottom: 5.6rem; }
.stats__desc-row { grid-column: 1 / -1; font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; }
.stats__desc-row dt { font-weight: 500; }
.stats__list { margin-top: 6.4rem; grid-column: 1 / -1; }
@media (min-width: 967px) {
  .stats__title-wrap { grid-column: 2 / 8; }
  .stats__title { font-size: 5.6rem; margin-bottom: 11.3rem; }
  .stats__desc-row { display: grid; grid-template-columns: .54fr .46fr; grid-column: 2 / 12; font-size: 1.6rem; }
  .stats__list { margin-top: 8rem; grid-column: 2 / 12; }
}
@media (max-width: 966px) { .stats__desc-row dt { margin-bottom: 2rem; } .stats__desc-row dt:empty { display: none; } }
.stat { position: relative; padding: 4.8rem 0; }
@media (min-width: 967px) { .stat { padding: 8rem 0; } }
.stat__line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--border-subtle); transform: scaleX(0); transform-origin: left center; }
.stat__text { display: flex; flex-direction: column; gap: 5.6rem; }
@media (min-width: 967px) { .stat__text { flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 7.2rem; } }
.stat__num-wrap { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 12rem; line-height: .85; letter-spacing: -.015em; position: relative; overflow: hidden; font-variation-settings: var(--display-opsz);
  /* mask room: Newsreader numerals are taller than PP Eiko's .85 line box; pad the mask and cancel it with negative margins so layout is unchanged */
  padding: .2em .02em .04em; margin: -.2em -.02em -.04em; white-space: nowrap; }
@media (min-width: 967px) { .stat__num-wrap { font-size: 8.4rem; } }
@media (min-width: 1512px) { .stat__num-wrap { font-size: 14rem; } }
.stat__num, .stat__suffix { display: inline-block; transform: translateY(105%); }
.stat__suffix--small { font-size: .5em; vertical-align: top; }
.stat__desc-wrap { opacity: 0; visibility: hidden; }
@media (min-width: 967px) { .stat__desc-wrap { min-width: 25.7%; max-width: 25.7%; } }
.stat__desc { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 120%; font-variation-settings: "opsz" 24; }
@media (min-width: 967px) { .stat__desc { font-size: 2rem; } }

/* ---------- quote (classic: copy left, image right + optional inset image) ---------- */
.quote { padding: 0 var(--gutter); }
.quote__grid { display: flex; flex-direction: column; }
.quote__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; order: 2; margin: 5.2rem 0; }
.quote__text { font-size: 2.4rem; line-height: 120%; letter-spacing: -.03em; margin-bottom: 2.8rem; position: relative; }
.quote__mark { position: absolute; right: calc(100% + .2rem); }
.quote__author { font-size: 1.8rem; line-height: 130%; letter-spacing: -.01em; }
.quote__role { color: var(--text-subtle); }
.quote__image { position: relative; height: 107vw; order: 1; }
.quote__image2 { position: relative; width: 100%; height: 49vw; }
@media (min-width: 967px) {
  .quote { padding: 0; }
  .quote__grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(12, 1fr); padding: 0 var(--gutter); }
  .quote__copy { margin: 0; order: 1; grid-column: 2 / 7; }
  .quote__text { font-size: 4rem; margin-bottom: 5.6rem; }
  .quote__author { font-size: 2rem; }
  .quote__image { grid-column: 8 / -1; order: 2; height: 47vw; }
  .quote__image2 { width: 41vw; height: 23vw; margin-left: var(--gutter); }
}
@media (min-width: 1200px) { .quote__image2 { margin-top: -9rem; } }
@media (min-width: 1512px) { .quote__copy { grid-column: 2 / 6; } }

/* ---------- minimalQuote (small headshot + 40px quote) ---------- */
.mquote { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
.mquote__inner { grid-column: 1 / -1; display: grid; gap: 4.4rem; }
.mquote__image { aspect-ratio: 224 / 180; position: relative; }
.mquote__image .mask { position: absolute; inset: 0; }
.mquote__author-wrap { margin-top: 2rem; display: block; }
.mquote__author, .mquote__role { font-size: 1.4rem; line-height: 140%; letter-spacing: -.01em; color: var(--text-subtle); }
.mquote__quote { position: relative; }
.mquote__open { font-size: 2.4rem; line-height: 120%; letter-spacing: -.03em; position: absolute; top: 0; right: calc(100% + .1em); }
.mquote__text { font-size: 2.4rem; line-height: 120%; letter-spacing: -.03em; }
.mquote__text p + p { margin-top: 1em; }
.mquote__text p:last-child::after { content: "\201D"; display: inline-block; }
.mquote--no-quotes .mquote__open, .mquote--no-quotes .mquote__text p:last-child::after { display: none; }
@media (max-width: 966px) { .mquote__image-side { justify-self: flex-end; width: 65%; } .mquote__quote { width: 83%; } }
@media (min-width: 967px) {
  .mquote__inner { grid-template-columns: .25fr .75fr; gap: 4.8rem; }
  .mquote__author, .mquote__role { font-size: 1.6rem; }
  .mquote__open, .mquote__text { font-size: 4rem; }
}
@media (min-width: 1200px) {
  .mquote[data-position="center"] .mquote__inner { grid-column: 2 / 6; }
  .mquote[data-position="left"] .mquote__inner { grid-column: 1 / 5; }
  .mquote[data-position="right"] .mquote__inner { grid-column: 3 / -1; }
}

/* ---------- largeTicker (standalone marquee, e.g. press headlines) ---------- */
.ticker { position: relative; width: 100%; height: 12.1rem; overflow: hidden; pointer-events: none; }
@media (min-width: 967px) { .ticker { height: 24.2rem; } }
.ticker__measure, .ticker__item { font-family: var(--font-text); font-weight: 400; font-size: 11rem; line-height: 1; letter-spacing: -.03em; white-space: nowrap; display: block; }
@media (min-width: 967px) { .ticker__measure, .ticker__item { font-size: 22rem; } }
.ticker__measure::after, .ticker__item::after { content: ""; display: inline-block; width: .3em; height: .3em; margin: 0 10.25rem; border-radius: 50%; background: currentColor; vertical-align: .2em; }  /* drawn dot: no third font family for one glyph */
.ticker__measure { position: absolute; top: 0; left: 0; opacity: 0; }
.ticker__track { display: flex; align-items: flex-start; will-change: transform; }

/* ---------- nextCaseStudy ---------- */
.next { position: relative; display: flex; align-items: center; justify-content: center; }
.next .ticker { position: absolute; top: 0; left: 0; }
@media (min-width: 967px) { .next .ticker { top: 50%; transform: translateY(-50%); } }
.next__link { position: relative; z-index: 2; display: block; padding-top: 8rem; }
@media (min-width: 967px) { .next__link { padding-top: 0; } }
.next__image-wrap { position: relative; overflow: hidden; width: 61vw; height: 90vw; background: var(--bg-subtle); border-radius: .8rem; }
@media (min-width: 967px) { .next__image-wrap { width: 31.2vw; height: 47vw; } }
.next__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.next__title { font-size: 1.8rem; line-height: 130%; letter-spacing: -.01em; margin-top: 2.4rem; }
@media (min-width: 967px) { .next__title { font-size: 2rem; } }

/* ---------- footer ---------- */
.footer { position: relative; color: #fff; background: var(--footer-bg); overflow: hidden; }
.footer__bg { position: absolute; inset: 0; z-index: 1; }
.footer__bg svg, .footer__bg video, .footer__bg img { width: 100%; height: 100%; display: block; object-fit: cover; }
.footer__top { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4rem; padding: 0 var(--gutter); height: 60rem; align-content: center; justify-items: center; }
.footer__title { grid-column: 1 / -1; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 4.4rem; line-height: 118.2%; letter-spacing: -.02em; white-space: pre-line; text-align: center; font-variation-settings: var(--display-opsz); }
.footer__links { grid-column: 1 / -1; width: 100%; }
.footer__link { border: solid hsla(0, 0%, 100%, .3); border-width: 0 0 1px; }
.footer__link:first-child { border-top-width: 1px; }
.footer__link a { display: flex; justify-content: space-between; align-items: center; padding: 24px 4px; font-weight: var(--text-light-weight); font-size: 1.6rem; line-height: 2; letter-spacing: -.01em; }
.footer__link svg { width: 1.6rem; }
@media (min-width: 967px) {
  .footer__top { gap: var(--gutter); justify-items: start; }
  .footer__title { grid-column: 1 / 4; font-size: 8.8rem; text-align: left; }
  .footer__links { grid-column: 4 / 6; }
}
.footer__bottom { position: relative; z-index: 3; padding: 5rem var(--gutter) 1.6rem; }
@media (min-width: 967px) { .footer__bottom { padding-bottom: var(--gutter); } }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); width: calc(100% - 4rem); }
@media (min-width: 967px) { .footer__cols { gap: var(--gutter); grid-template-columns: repeat(6, 1fr); width: 100%; } }
.footer__list { display: flex; flex-direction: column; gap: 1.6rem; align-self: flex-end; font-size: 1.4rem; line-height: 140%; }
@media (min-width: 967px) { .footer__list { gap: .8rem; font-size: 1.4rem; line-height: 1.35; } }
/* touch targets >= 44 px below 967 (the visual size stays: negative margins give the extra area back to the layout) */
@media (max-width: 966px) {
  .nav__logo { display: inline-flex; align-items: center; min-height: 4.4rem; }
  .nav__round { width: 4.4rem; height: 4.4rem; min-width: 4.4rem; padding: .6rem; margin: -.6rem; border: 0; background-clip: content-box; }
  .footer__list a { display: flex; width: fit-content; align-items: center; min-height: 4.4rem; min-width: 4.4rem; margin: calc((1.4rem * 1.4 - 4.4rem) / 2) 0; }
}

/* ---------- cursor: js/cursor.js injects its own styles (shared with the home) ---------- */

/* ---------- reduced motion: final states ---------- */
@media (prefers-reduced-motion: reduce) {
  .mask { --left-y: 100%; --right-y: 100%; }
  .mask--from-bottom { --left-y: 0%; --right-y: 0%; }
  .mask__scale { transform: none; }
}

/* ---------- typography (AAA pass, 2026-10-17; audit in ~/dev/portfolio-home/typography) ----------
   Body copy wraps "pretty" (no lone last word), headings and short display lines "balance".
   js/render.js also glues the last two words with   for engines without text-wrap: pretty.
   Caption measure: Metalab's 14.8vw column gave 17 chars/line at 1024 and 25 at 1440; captions
   now hold ~40-60 chars per line at every desktop width. */
p, dd, li, blockquote, .tat__desc, .small-desc, .tdc__desc, .slider__desc, .stats__desc-row dd { text-wrap: pretty; }
h1, h2, h3, dt, .hero__title, .tat__title, .tdb__title, .slider__title, .stats__title, .stat__desc,
.next__title, .footer__title, .tat--pos2 .tat__desc, .tat--pos3 .tat__desc, .squote__quote { text-wrap: balance; }
.stat__desc { line-height: 130%; }
@media (max-width: 966px) { .hero__title { font-size: min(6.4rem, 14.5vw); } }   /* a two-word name stays on one line at 390 */
@media (max-width: 767px) { .slider__caption { grid-column: 1 / 11; } }          /* was 4/10: 25 chars per line on phones */
@media (min-width: 967px) {
  :root { --caption-w: clamp(32rem, 26vw, 44rem); }
  .tdc__inner { width: var(--caption-w); }
  .t3i--layout5 .tdc__inner { width: auto; max-width: var(--caption-w); }
  .t1i--layout2 .t1i__media { grid-column: 1 / 5; }
  .t1i--layout2 .t1i__text  { grid-column: 5 / -1; max-width: var(--caption-w); }
  .t1i--layout3 .t1i__text  { grid-column: 1 / 3; max-width: var(--caption-w); }
  .t1i--layout4 .t1i__text  { grid-column: 5 / -1; max-width: var(--caption-w); }
  .t1i--layout5 .t1i__text  { grid-column: 4 / 6; max-width: var(--caption-w); }
  .vscroller__text-inner { grid-column: 9 / -1; max-width: var(--caption-w); }
  .slider__caption { grid-column: 2 / 4; max-width: var(--caption-w); }
  .footer__title { font-size: clamp(6rem, 6.1vw, 8.8rem); }  /* 8.8rem broke "something clear." at 1024 */
}
@media (min-width: 1200px) {
  .t1i--layout5 .t1i__text { grid-column: 4 / 6; }
  .vscroller__text-inner { grid-column: 10 / -1; }
}

/* ---------- mobile-specific media box (perf phase 1, 2026-10-17) ----------
   A media item with srcMobile + aspectMobile (render.js: data-m-aspect, --m-aspect) gets its own box aspect
   below the desktop breakpoint, so a separate portrait asset is shown whole (Metalab serves _mobile assets at
   the box aspect). Desktop is untouched. */
@media (max-width: 966px) { .mask[data-mask][data-m-aspect] { height: auto; min-height: 0; aspect-ratio: var(--m-aspect); } }