/* =========================================================
   Maró Bureau — site styles
   ========================================================= */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } /* Inter Light, Google Fonts (OFL) */
@font-face { font-family: "Inter"; src: url("../fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/1ZFS7N918ojhhd0nQWdj3jz4w.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f3f2ef;
  --ink: #150d0b;
  --ink-2: #3b3330;
  --muted: #8a827d;
  --line: rgba(21, 13, 11, .13);
  --card: #ffffff;
  --dark: #1b1311;
  --cream: #f3ede4;
  --pad: clamp(20px, 4.45vw, 88px);   /* side padding: 40px on a 900px mockup */
  --edge: clamp(8px, .9vw, 16px);     /* inset of full-bleed dark cards */
  --pm-size: clamp(22px, 2.4vw, 46px);   /* (+) buttons in Services; the menu icon lines up with them on phones */
  --radius: clamp(10px, 1.1vw, 18px);
  --ease: cubic-bezier(.22, .61, .21, 1);
  --fs-xs: clamp(11px, .84vw, 14px);
  --fs-s: clamp(12px, .9vw, 15px);
  --fs-m: clamp(14px, 1.06vw, 17px);
  --fs-l: clamp(16px, 1.36vw, 22px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Inter Placeholder", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-m);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

.wrap { padding-left: var(--pad); padding-right: var(--pad); }

/* Display headings ------------------------------------------------------ */
.display {
  font-weight: 600;
  letter-spacing: -.09em;
  line-height: .88;
  margin-left: -.045em;
}
.h-xxl { font-size: clamp(56px, 14vw, 280px); }   /* project titles */
.h-xl  { font-size: clamp(52px, 8.4vw, 170px); }
.h-talk { font-size: clamp(60px, 10.2vw, 200px); letter-spacing: -.078em; }    /* Projects. / Process. / Let's talk. */
.h-l   { font-size: clamp(44px, 7.1vw, 140px); }    /* Services. / The film. */
.h-m   { font-size: clamp(36px, 5.5vw, 108px); line-height: .92; letter-spacing: -.063em; }
.h-s   { font-size: clamp(30px, 4.3vw, 86px); line-height: .92; letter-spacing: -.072em; }
.h-xs  { font-size: clamp(24px, 3.05vw, 60px); line-height: .98; letter-spacing: -.06em; }

.label {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: -.005em;
}
.label::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM6.6 4.6l-.9.9L8.2 8l-2.5 2.5.9.9L10 8 6.6 4.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM6.6 4.6l-.9.9L8.2 8l-2.5 2.5.9.9L10 8 6.6 4.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.caps { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 500; }

/* Header / nav ----------------------------------------------------------- */
.site-header {
  position: absolute; z-index: 50; top: 0; left: 0; right: 0;
  height: clamp(52px, 5vw, 80px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(16px, 1.75vw, 30px);
  color: var(--ink);
}
.site-header.is-light { color: #fff; }
.brand { justify-self: start; display: block; width: clamp(56px, 4.8vw, 92px); }
.brand img { width: 100%; height: auto; }
.nav { display: grid; grid-template-columns: repeat(4, clamp(70px, 11.6vw, 190px)); }
.nav a {
  text-align: center; font-size: var(--fs-xs); font-weight: 500; letter-spacing: -.005em;
  position: relative; padding: 6px 0;
}
.nav a span { position: relative; }
.nav a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:hover span::after { transform: scaleX(1); transform-origin: left; }
/* Menu button: always fixed in the top-right corner. JS sets .on-dark when the background right under
   it is dark (measured from the actual image / video pixels, or a dark block), so it turns white there.
   Wide screens: centred in the right page margin (--pad), equal space between the content blocks and
   the icon and between the icon and the window edge. */
.burger {
  --burger-w: clamp(28px, 2.15vw, 40px);
  position: fixed; z-index: 60;
  top: calc(clamp(52px, 5vw, 80px) / 2 - 12px); right: max(16px, (var(--pad) - var(--burger-w)) / 2);
  width: var(--burger-w); height: 12px; box-sizing: content-box; padding: 6px 0;
  color: var(--ink); transition: color .35s var(--ease);
}
/* Narrower screens (phones, tablets, small laptops): the margin is too narrow to centre the icon in,
   so its right end lines up with the right edge of the content blocks instead. */
@media (max-width: 1390px) { .burger { right: var(--pad); } }
/* Phones / tablets (single-column layout): the icon's centre sits on the same vertical line as the
   centres of the (+) buttons in Services, which are inset by --edge (dark card) + --pad (its padding). */
@media (max-width: 900px) { .burger { right: calc(var(--edge) + var(--pad) + (var(--pm-size) - var(--burger-w)) / 2); } }
.burger.on-dark { color: #fff; }
.menu-active .burger { color: var(--ink); }
.burger-slot { justify-self: end; }
/* Lines are SVG paths. Open/close morphs the path geometry itself (CSS `d`) instead of rotating it:
   no transforms on the strokes, so they always render with full anti-aliasing. */
.burger svg { display: block; width: 100%; height: auto; overflow: visible; }
.burger path {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transform-box: view-box; transform-origin: 20px 6px;
  /* closing: rotate back first, then spread apart */
  transition: transform .3s cubic-bezier(.65, 0, .35, 1), d .3s cubic-bezier(.65, 0, .35, 1) .2s;
}
/* opening: the two bars slide together and shorten, then turn around the shared centre into a
   45deg cross — symmetric at every frame; 45deg strokes rasterise cleanly (no stair-stepping) */
.menu-open .burger path { transition: d .3s cubic-bezier(.65, 0, .35, 1), transform .35s cubic-bezier(.34, 1.2, .64, 1) .2s; }
.menu-open .burger .b1 { d: path("M7 6L33 6"); transform: rotate(45deg); }
.menu-open .burger .b2 { d: path("M7 6L33 6"); transform: rotate(-45deg); }
/* browsers without CSS `d` (Safari): same idea with transforms only */
@supports not (d: path("M0 0")) {
  .burger path { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
  .menu-open .burger path { transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
  .menu-open .burger .b1 { transform: translateY(5px) rotate(45deg) scaleX(.68); }
  .menu-open .burger .b2 { transform: translateY(-5px) rotate(-45deg) scaleX(.68); }
}
.burger:focus { outline: none; }
.burger:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* Fullscreen menu */
.brand--menu { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.menu-open .brand--menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease) .15s, visibility 0s; }
.menu-active .site-header { position: fixed; color: var(--ink); }
/* header links come back only once the panel has gone, so they never flash over it */
.nav { transition: opacity .35s var(--ease) .45s, visibility 0s linear .45s; }
.menu-open .nav { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
/* The panel reveals from the top like a blind: the outer box slides down from -100%, the inner layer
   slides the other way by the same amount, so the content stays put while the bottom edge travels.
   Pure transforms (GPU) instead of an animated clip-path, which flickered to full size on some frames. */
.menu {
  --menu-ease: cubic-bezier(.96, -.02, .38, 1.01);
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  max-height: 100vh; max-height: 100svh; overflow: hidden;
  background: #fff; color: var(--ink);
  transform: translate3d(0, -100%, 0); visibility: hidden;
  transition: transform .5s var(--menu-ease), visibility 0s linear .5s;
}
.menu-inner {
  padding: clamp(52px, 5vw, 80px) clamp(20px, 1.9vw, 36px) clamp(24px, 1.9vw, 36px);
  transform: translate3d(0, 100%, 0);
  transition: transform .5s var(--menu-ease);
}
.menu-active .menu, .menu-active .menu-inner { will-change: transform; }
.menu-open .menu { transform: none; visibility: visible; transition: transform .5s var(--menu-ease), visibility 0s; }
.menu-open .menu-inner { transform: none; }
.menu-backdrop { position: fixed; inset: 0; z-index: 39; display: none; }
.menu-open .menu-backdrop { display: block; }
.menu-body {
  display: flex; flex-direction: column; align-items: center; gap: clamp(60px, 6.25vw, 120px);
  padding-top: clamp(60px, 6.25vw, 120px);
  transform: translateY(-750px); opacity: 0;
  transition: transform .5s var(--menu-ease), opacity .5s var(--menu-ease);
}
.menu-open .menu-body { transform: none; opacity: 1; }
.menu-links { display: flex; flex-direction: column; align-items: center; }
.menu-links a {
  position: relative; display: block; overflow: hidden; padding-right: 3px;
  font-size: clamp(38px, 3.125vw, 60px); font-weight: 600; letter-spacing: -.06em; line-height: 1.2;
  opacity: 0; transform: translateY(-40px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* items drop in once the blind is down (studio-aiko: y -40px + fade, spring damping 30 / stiffness 210,
   i.e. critically damped ~.45s, staggered .06s) */
.menu-open .menu-links a {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.18, .85, .3, 1), transform .55s cubic-bezier(.18, .85, .3, 1);
}
.menu-stagger.menu-open .menu-links a { transition-delay: calc(.38s + var(--i) * .06s); }
.menu-links .mi { display: block; transition: transform .45s cubic-bezier(.34, 1.45, .64, 1); }
.menu-links .mi-2 { position: absolute; left: 0; top: 0; transform: translateY(150%); }
.menu-links a:hover .mi:first-child { transform: translateY(-150%); }
.menu-links a:hover .mi-2 { transform: none; }
.menu-foot { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; }
/* e-mail link, as studio-aiko "Email": 18px plus-in-a-circle centred on the line, 7px gap,
   a 2px rule 6px under the text; hover = the circle turns 90deg (spring) and the rule fades out */
.menu-mail { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: clamp(20px, 1.8vw, 34px); font-weight: 600; letter-spacing: -.05em; line-height: 1.1; }
.menu-mail .u { position: relative; }
.menu-mail .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transition: opacity .4s cubic-bezier(.34, 1.3, .64, 1); }
.menu-mail:hover .u::after { opacity: 0; }
.menu-mail .plus {
  position: relative; top: .075em; /* centre on the lowercase x-height, not the full line box */ flex: none; width: clamp(14px, .94vw, 18px); height: clamp(14px, .94vw, 18px);
  border-radius: 50%; background: var(--ink);
  transition: transform .4s cubic-bezier(.34, 1.45, .64, 1);
}
.menu-mail:hover .plus { transform: rotate(90deg); }
.menu-mail .plus::before, .menu-mail .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 44%; background: #fff; border-radius: 1px; transform: translate(-50%, -50%); }
.menu-mail .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.menu-social { display: flex; gap: clamp(20px, 2.2vw, 42px); font-size: clamp(13px, .82vw, 15px); font-weight: 500; padding-bottom: 4px; }
.menu-social a:hover { opacity: .6; }
.menu-copy { justify-self: end; font-size: clamp(12px, .72vw, 14px); color: var(--muted); padding-bottom: 4px; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(36px, 3.2vw, 50px); padding: 0 clamp(18px, 1.55vw, 26px);
  border-radius: 999px; border: 1px solid var(--ink);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.005em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: clamp(6px, .65vw, 10px); }

/* Arrow icon */
.arrow { display: inline-block; width: 1em; height: 1em; flex: none; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* PRE-LOADER (home page) ------------------------------------------------
   Timings copied from studio-aiko.com:
   - logo block rises from +640px, 2.1s, ease (.56,.22,.05,.99)
   - each letter: from +270px, blur 5px, opacity 0; .4s, ease (.96,-.02,.38,1.01); start .3s, +.09s per letter
   - at 1.5s the backdrop collapses to the top edge and the logo moves up to -3%; .9s, ease (.96,-.02,.38,1.01)
   - the hero then rises from +400px (delay 1.9s)
   All of the above run 30% faster here (every duration/delay x0.7; whole intro ~1.7s instead of ~2.45s). */
.splash { position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: splashOff 0s linear 1.715s forwards; }
@keyframes splashOff { to { visibility: hidden; } }
.no-intro .splash { display: none; }
.splash-bg {
  position: absolute; inset: 0; transform-origin: 50% 0; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, #2a201d 0%, #1b1311 55%, #140d0b 100%);
  animation: splashCollapse .63s cubic-bezier(.96, -.02, .38, 1.01) 1.05s forwards;
}
@keyframes splashCollapse { to { transform: scaleY(0); } }
.splash-move {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  animation: splashMoveUp .63s cubic-bezier(.96, -.02, .38, 1.01) 1.05s forwards;
}
@keyframes splashMoveUp { 0% { top: 50%; opacity: 1; } 55% { opacity: 0; } 100% { top: -3%; opacity: 0; } }
.splash-logo {
  --L: clamp(150px, 13vw, 250px);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--L) * .096);
  opacity: .001; transform: translateY(640px);
  animation: splashRise 1.47s cubic-bezier(.56, .22, .05, .99) forwards;
}
@keyframes splashRise { to { opacity: 1; transform: none; } }
.splash-maro { --lw: var(--L); display: flex; }
.splash-bureau { --lw: calc(var(--L) * .425); display: flex; }
.lt {
  display: block; overflow: hidden; width: calc(var(--lw) * var(--w));
  opacity: .001; filter: blur(5px); transform: translateY(270px);
  animation: ltIn .28s cubic-bezier(.96, -.02, .38, 1.01) calc(.21s + var(--i) * .063s) forwards;
}
.lt img { display: block; width: var(--lw); max-width: none; height: auto; margin-left: calc(var(--lw) * var(--x) * -1); }
@keyframes ltIn { to { opacity: 1; filter: blur(0); transform: none; } }

/* the hero rises in as the backdrop collapses */
/* the photo stays put under the curtain (nothing behind it is ever revealed); its content rises in */
.intro-run .hero-logo { animation: heroLogoRise 0.7s cubic-bezier(.16, 1, .3, 1) 1.33s both; }
@keyframes heroLogoRise { from { opacity: .001; transform: translate(-50%, 400px); } }
.intro-run .hero-bottom { animation: heroRise 0.7s cubic-bezier(.16, 1, .3, 1) 1.4s both; }
@keyframes heroRise { from { opacity: .001; transform: translateY(120px); } }
/* intro switched off: the hero still comes in, just without waiting for the curtain */
.no-intro .hero-logo { animation: heroLogoSoft 1.3s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes heroLogoSoft { from { opacity: .001; transform: translate(-50%, 160px); filter: blur(6px); } }
.no-intro .hero-bottom { animation: heroRise 1.1s cubic-bezier(.16, 1, .3, 1) .35s both; }
.no-intro .site-header { animation: headerIn .8s var(--ease) .4s both; }
.intro-run .site-header { animation: headerIn .42s var(--ease) 1.47s both; }
@keyframes headerIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

/* HERO (home) ------------------------------------------------------------ */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  color: #fff; background: #1b1311;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 14, 12, .5) 0%, rgba(20, 14, 12, .22) 35%, rgba(20, 14, 12, .12) 60%, rgba(20, 14, 12, .38) 100%);
}
.hero-logo {
  --lw: clamp(200px, 23.5vw, 420px);
  position: absolute; z-index: 2; left: 50%; top: 15.5%;
  width: var(--lw); transform: translateX(-50%); margin: 0;
  display: flex; flex-direction: column; align-items: center;
}
.hero-logo img { display: block; width: 100%; height: auto; }
/* tagline: live text in the site font (Inter, like the nav), sized from the logo width
   so it keeps the proportions the artwork had (cap height 52/1600, line pitch 99/1600) */
.hero-tag {
  display: block; text-align: center; color: #f3ede4;
  font-size: calc(var(--lw) * .0447); line-height: 1.385; font-weight: 300;
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: calc(var(--lw) * .1);
}
.hero-bottom {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(14px, 1.6vw, 26px);
  padding: 0 clamp(16px, 1.75vw, 30px);
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: var(--fs-xs); font-weight: 500;
}

/* Section heads ---------------------------------------------------------- */
.section { padding-top: clamp(80px, 10.5vw, 180px); }
/* heading + ©-line on the left, lede on the right, vertically centred on the big heading */
.split-head { display: grid; grid-template-columns: 1fr auto; column-gap: 4vw; align-items: start; }
.split-head h2 { grid-column: 1; grid-row: 1; }
.split-head .sub-mark { grid-column: 1; grid-row: 2; }
.split-head .lede { grid-column: 2; grid-row: 1; align-self: center; position: relative;
  /* centre on the lowercase middle of the heading, not its line box: .087 x heading size */
  top: calc(clamp(52px, 8.4vw, 170px) * .087); }
.split-head .lede { max-width: clamp(220px, 18.5vw, 340px); font-size: var(--fs-s); color: var(--ink-2); line-height: 1.4; }
.sub-mark { margin-top: clamp(14px, 1.6vw, 26px); font-size: var(--fs-l); font-weight: 500; letter-spacing: -.02em; }

/* Projects grid (home) --------------------------------------------------- */
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, .9vw, 14px); margin-top: clamp(40px, 4.6vw, 80px); }
.pcard { display: block; }
.pcard-bar {
  display: flex; align-items: center; gap: 1em;
  height: clamp(36px, 3.95vw, 64px); padding: 0 clamp(14px, 1.45vw, 24px);
  background: var(--card); border-radius: var(--radius);
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.pcard-bar .yr { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.pcard-bar .arrow { margin-left: auto; width: 1.15em; height: 1.15em; transition: transform .45s var(--ease); }
.pcard:hover .pcard-bar .arrow { transform: translateX(5px); }
.pcard-img { margin-top: clamp(4px, .55vw, 8px); border-radius: var(--radius); overflow: hidden; aspect-ratio: 406 / 295; background: #ddd; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.04); }

.cap { display: flex; justify-content: space-between; gap: 1em; margin-top: clamp(6px, .65vw, 10px); font-size: clamp(10px, .76vw, 13px); font-weight: 500; }
.cap span:last-child { color: var(--muted); font-weight: 400; }

/* About (home) ----------------------------------------------------------- */
.about {
  display: grid; grid-template-columns: 30.5% 25.3% 11.4% 27.8% 5%;
  grid-template-rows: auto auto; align-items: start;
}
.about-title { grid-column: 1 / 3; grid-row: 1; }
.about-title h2 { margin-top: clamp(14px, 1.6vw, 28px); }
.h-about { font-size: clamp(40px, 6.85vw, 132px); line-height: .9; letter-spacing: -.063em; }
.about-sketch { grid-column: 3 / 5; grid-row: 1; padding-left: 2%; margin-top: clamp(10px, 1.4vw, 26px); }
.about-sketch img { width: 100%; height: auto; }
.about-sketch-2 { grid-column: 2 / 3; grid-row: 2; margin-top: -1vw; }
.about-sketch-2 img { width: 100%; height: auto; }
.about-text {
  grid-column: 4 / 5; grid-row: 2; align-self: end; margin-bottom: 2.7vw;
  font-size: clamp(14px, 1.02vw, 18px); line-height: 1.68; color: #4f4744; letter-spacing: 0;
}

/* "Coming soon" placeholders for content that is not delivered yet */
.placeholder {
  display: grid; place-items: center; width: 100%;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em;
  background: repeating-linear-gradient(135deg, #e7e3dc 0 14px, #e2ded6 14px 28px);
}

.rows { margin-top: clamp(40px, 6.4vw, 110px); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: clamp(40px, 3.9vw, 66px) 1fr 1fr; align-items: center;
  min-height: clamp(44px, 3.85vw, 64px); border-bottom: 1px solid var(--line);
  font-size: clamp(12px, .95vw, 16px);
}
.row .n { font-size: clamp(10px, .68vw, 12px); color: var(--muted); }
.row .t { font-weight: 600; letter-spacing: -.01em; }
.row .d { color: var(--ink-2); }
.rows-foot { display: flex; justify-content: space-between; margin-top: clamp(14px, 1.4vw, 24px); }
.rows-foot .caps { font-size: clamp(10px, .7vw, 12px); letter-spacing: .2em; }
.rows-foot .muted { font-size: clamp(10px, .7vw, 12px); }

/* Dark card -------------------------------------------------------------- */
.dark {
  position: relative; margin: 0 var(--edge); border-radius: var(--radius); overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(92, 70, 60, .35) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(60, 44, 38, .35) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #2b211e 0%, #1e1513 45%, #170f0d 100%);
}
/* Film grain, after studio-aiko.com's "Grain" component: a black/white noise tile at 8% opacity,
   flickering between 24 offsets at film frame rate (12 fps, 2s loop) so the grain "lives".
   The 256px noise tile is drawn at 128px, so every screen pixel averages 2x2 noise pixels: the grain
   reads finer and softer (on 2x screens it lands 1:1 on device pixels). The layer overhangs the block
   by a fixed 256px rather than a percentage, and the jumps are whole pixels, so the tile is never
   shifted by a fraction of a pixel (that would smear each grain into a ~2px blob). */
.dark::before, .splash-bg::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -256px;
  background: url("../img/grain.png") 0 0 / 128px 128px repeat;
  opacity: .08;
  animation: grain 2s steps(1, end) infinite;   /* steps apply per keyframe interval: hold each frame, then jump */
  will-change: transform;
}
@keyframes grain {
  /* 24 whole-pixel positions, one every 1/12 s (film frame rate); consecutive frames are far apart
     within the 128px tile, so the grain flickers in place instead of sliding */
  0%        { transform: translate(0, 0); }
  4.1667%   { transform: translate(-75px, -163px); }
  8.3333%   { transform: translate(225px, 19px); }
  12.5%     { transform: translate(-196px, -18px); }
  16.6667%  { transform: translate(-26px, -205px); }
  20.8333%  { transform: translate(42px, -23px); }
  25%       { transform: translate(81px, 58px); }
  29.1667%  { transform: translate(-215px, -127px); }
  33.3333%  { transform: translate(199px, -172px); }
  37.5%     { transform: translate(-83px, 46px); }
  41.6667%  { transform: translate(87px, -144px); }
  45.8333%  { transform: translate(-208px, 48px); }
  50%       { transform: translate(-135px, 14px); }
  54.1667%  { transform: translate(59px, 232px); }
  58.3333%  { transform: translate(-8px, -55px); }
  62.5%     { transform: translate(-87px, -113px); }
  66.6667%  { transform: translate(-116px, -199px); }
  70.8333%  { transform: translate(-156px, 147px); }
  75%       { transform: translate(-65px, -163px); }
  79.1667%  { transform: translate(237px, 10px); }
  83.3333%  { transform: translate(151px, 45px); }
  87.5%     { transform: translate(64px, 14px); }
  91.6667%  { transform: translate(-7px, -205px); }
  95.8333%  { transform: translate(-82px, 91px); }
  100%      { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .dark::before, .splash-bg::after { animation: none !important; } }
.dark > * { position: relative; }

/* Services --------------------------------------------------------------- */
.services { scroll-margin-top: clamp(52px, 5vw, 80px); padding: clamp(60px, 8.4vw, 150px) 0 clamp(60px, 7.5vw, 130px); }
.services-grid { display: grid; grid-template-columns: 14.3vw 13.9vw 1fr 14.4vw; }
.services-grid > .side:first-child { grid-column: 2; }
.services .label { color: #fff; margin-top: clamp(10px, 1.1vw, 20px); }
.services h2 { display: inline-flex; align-items: flex-start; }
.services h2 sup { font-size: clamp(14px, 1.45vw, 24px); letter-spacing: 0; color: rgba(243,237,228,.55); font-weight: 400; margin-left: .2em; line-height: 1; transform: translateY(-.1em); }

.acc { margin-top: clamp(40px, 5.3vw, 96px); --acc-ease: cubic-bezier(.82, .11, .37, .82); --acc-t: .4s; }
.acc-item {
  position: relative; cursor: pointer;
  padding-top: clamp(16px, 1.75vw, 30px);
  border-bottom: 1px solid rgba(243,237,228,.12);
}
.acc-num {
  position: absolute; right: 100%; width: 13.9vw; top: clamp(18px, 1.9vw, 32px);
  font-size: clamp(9px, .68vw, 12px); color: rgba(243,237,228,.5);
  transition: color var(--acc-t) var(--acc-ease);
}
.acc-item.is-open .acc-num { color: var(--cream); }
/* the mask: its height eases between "title row" and "open block" (set in px by JS) */
.acc-mask {
  position: relative; overflow: hidden; margin-right: clamp(40px, 3.6vw, 64px);
  transition: height var(--acc-t) var(--acc-ease);
}
.acc-content {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: clamp(12px, 1.6vw, 28px); align-items: start;
  padding-bottom: clamp(20px, 2.2vw, 40px);
  transform: translate3d(0, -101%, 0);
  transition: transform var(--acc-t) var(--acc-ease);
}
.acc-item.is-open .acc-content { transform: none; }
.acc-title {
  position: absolute; left: 0; right: 0; top: 0;
  padding-bottom: clamp(16px, 1.75vw, 30px);
  font-size: clamp(14px, 1.22vw, 21px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  transition: top var(--acc-t) var(--acc-ease), opacity var(--acc-t) var(--acc-ease);
}
.acc-item.is-open .acc-title { top: 100%; opacity: 0; }
.acc-toggle { position: absolute; right: 0; top: clamp(12px, 1.4vw, 24px); }
.pm {
  display: block; width: var(--pm-size); height: var(--pm-size); border-radius: 50%;
  border: 1px solid rgba(243,237,228,.55); position: relative; flex: none;
  transform: rotate(270deg);
  transition: transform var(--acc-t) var(--acc-ease), background .3s, border-color .3s;
}
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 35%; height: 1.5px; background: var(--cream); transform: translate(-50%, -50%); transition: transform var(--acc-t) var(--acc-ease); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.is-open .pm { transform: none; }
.acc-item.is-open .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-item:hover .pm { background: rgba(243,237,228,.1); border-color: var(--cream); }
.acc-thumb { width: clamp(80px, 8.1vw, 156px); aspect-ratio: 156 / 71; border-radius: clamp(4px, .5vw, 8px); overflow: hidden; }
.acc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-content h3 { font-size: clamp(18px, 1.75vw, 32px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.acc-content p { margin-top: clamp(12px, 1.2vw, 20px); font-size: clamp(12px, .85vw, 16px); color: rgba(243,237,228,.6); max-width: 22em; line-height: 1.45; }
.acc-cats .small { color: rgba(243,237,228,.5); font-size: clamp(8px, .6vw, 11px); }
.pills { display: flex; flex-wrap: wrap; gap: clamp(4px, .45vw, 7px); margin-top: clamp(6px, .6vw, 10px); }
.pill { display: inline-flex; align-items: center; height: clamp(20px, 1.85vw, 30px); padding: 0 clamp(8px, .78vw, 13px); border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(9px, .66vw, 11.5px); font-weight: 500; }
.services-cta { margin-top: clamp(28px, 3.1vw, 54px); }
.services-cta p { margin-top: clamp(12px, 1.3vw, 22px); font-size: var(--fs-xs); color: rgba(243,237,228,.55); }

/* Process ---------------------------------------------------------------- */
.process-head { display: flex; justify-content: space-between; align-items: flex-end; }
.process-head .lede { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; margin-bottom: clamp(36px, 4vw, 66px); }
.process-head .right { text-align: right; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, .95vw, 15px); margin-top: clamp(36px, 4.6vw, 80px); }
.step-bar { display: flex; align-items: center; gap: 1.1em; height: clamp(32px, 3.35vw, 54px); padding: 0 clamp(12px, 1.25vw, 20px); background: var(--card); border-radius: var(--radius); font-size: clamp(9px, .66vw, 11.5px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.step-bar span { color: var(--muted); font-weight: 400; }
/* The card and its media sit on their own GPU layers: the rounded clip stays fixed and the zoom is
   composited, so a playing <video> scales smoothly instead of re-rasterising (which made it shake). */
.step-img {
  margin-top: clamp(4px, .55vw, 8px); aspect-ratio: 266 / 212; border-radius: var(--radius); overflow: hidden; background: #ece8e1;
  isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.step-img > img, .step-zoom {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, 0, 0) scale(1); backface-visibility: hidden; will-change: transform;
  transition: transform 1.4s cubic-bezier(.22, .61, .21, 1);
}
.step:hover .step-img > img, .step:hover .step-zoom { transform: translate3d(0, 0, 0) scale(1.04); }
/* Video card: the <video> stays still underneath (frame source only); its frames are painted
   into a <canvas> on top and only the canvas zooms — canvases scale as smoothly as images,
   whereas Chrome snaps a scaling <video> to whole pixels (the "earthquake" on hover). */
.step-video { position: relative; }
.step-video .step-src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.step-video .step-zoom { position: absolute; inset: 0; }
.step-canvas { display: block; width: 100%; height: 100%; }
/* until the first frame is painted the canvas is transparent and the poster/video shows through */
.step-img.mood { display: flex; justify-content: center; gap: 6%; padding: 0 6%; background: #ebe6dc; }
.step-img.mood img { width: 38%; height: auto; align-self: flex-start; margin-top: 9%; box-shadow: 0 10px 24px rgba(60, 45, 30, .16); }
.step h3 { margin-top: clamp(12px, 1.4vw, 22px); font-size: clamp(17px, 1.68vw, 28px); font-weight: 500; letter-spacing: -.035em; padding-left: 2px; }
.step p { margin-top: clamp(6px, .7vw, 12px); font-size: clamp(12px, .93vw, 16px); color: var(--ink-2); line-height: 1.45; padding: 0 2px; max-width: 30em; }

/* Contact ---------------------------------------------------------------- */
.contact-head { display: grid; grid-template-columns: 1fr auto; column-gap: 4vw; align-items: center; }
.contact-head .lede { max-width: clamp(240px, 26.5vw, 480px); font-size: clamp(13px, 1.06vw, 18px); line-height: 1.45; color: var(--ink-2);
  position: relative; top: calc(clamp(60px, 10.2vw, 200px) * .087); /* lowercase middle of "Let's talk." */ }
.email {
  display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 34px);
  margin-top: clamp(36px, 5.3vw, 90px); padding-bottom: clamp(6px, .55vw, 10px);
  border-bottom: 1.5px solid var(--ink);
  font-size: clamp(24px, 3.15vw, 58px); letter-spacing: -.078em; line-height: 1.1;
}
.email .arrow { width: .78em; height: .78em; transition: transform .45s var(--ease); }
.email .arrow path { stroke-width: 1.3; }
.email:hover .arrow { transform: translateX(8px); }
.contact .btn-row { margin-top: clamp(20px, 2.8vw, 46px); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5.6vw, 96px); border-top: 1px solid var(--line); padding-top: clamp(14px, 1.7vw, 28px); }
.facts .small { font-size: clamp(10px, .7vw, 12px); color: var(--muted); }
.facts p:last-child { margin-top: clamp(6px, .9vw, 14px); font-size: clamp(13px, 1.08vw, 18px); letter-spacing: -.01em; }

/* Footer ----------------------------------------------------------------- */
.footer { margin-top: clamp(70px, 8vw, 140px); margin-bottom: var(--edge); padding: clamp(28px, 4.45vw, 76px) var(--pad) 0; }
.footer-cols { display: grid; grid-template-columns: 39.7% 1fr 1fr 1fr; }
.footer .small { font-size: clamp(10px, .7vw, 12px); color: rgba(243,237,228,.5); }
.footer-cols p:not(.small) { margin-top: clamp(10px, 1.1vw, 18px); max-width: 22em; font-size: clamp(12px, .98vw, 16px); color: rgba(243,237,228,.65); line-height: 1.45; }
.footer-cols ul { list-style: none; margin: clamp(10px, 1.1vw, 18px) 0 0; padding: 0; }
.footer-cols li + li { margin-top: clamp(3px, .4vw, 6px); }
.footer-cols ul a { font-size: clamp(12px, .98vw, 16px); color: var(--cream); position: relative; }
.footer-cols ul a:hover { opacity: .6; }
.footer-logo { display: flex; align-items: flex-start; margin-top: clamp(40px, 6vw, 110px); }
.footer-logo .maro { width: 56.7%; }
.footer-logo .bureau { width: 20.1%; margin-left: 1.6%; margin-top: 4.1%; }
.footer-logo img { width: 100%; height: auto; }
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: clamp(20px, 2.9vw, 50px); border-top: 1px solid rgba(243,237,228,.12); padding: clamp(10px, 1.1vw, 18px) 0 clamp(16px, 1.7vw, 28px); font-size: clamp(10px, .7vw, 12px); color: rgba(243,237,228,.6); }
.footer-bottom a:last-child { justify-self: end; color: rgba(243,237,228,.75); }
.footer-bottom a:last-child:hover { color: var(--cream); }

/* PROJECT PAGES ========================================================== */
.p-hero { padding-top: clamp(80px, 10.6vw, 180px); }
.crumbs { font-size: clamp(10px, .74vw, 12.5px); color: var(--muted); padding-left: 2px; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 600; margin-left: .5em; }
.crumbs i { font-style: normal; margin: 0 .55em 0 .7em; }
.p-hero h1 { margin-top: clamp(10px, 1.1vw, 18px); white-space: nowrap; }

.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: clamp(50px, 6.2vw, 110px); }
.intro p { font-size: clamp(15px, 1.38vw, 24px); line-height: 1.38; letter-spacing: -.012em; max-width: 28em; }
.meta { margin-top: clamp(40px, 5.6vw, 96px); border-top: 1px solid var(--line); }
.meta > div { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); min-height: clamp(36px, 3.2vw, 54px); align-items: center; }
.meta dl { display: contents; }
.meta-row { display: flex; justify-content: space-between; align-items: center; grid-column: 2; }
.meta-row span:first-child { font-size: clamp(10px, .72vw, 12px); color: var(--muted); }
.meta-row span:last-child { font-size: clamp(12px, .9vw, 15px); font-weight: 500; }

.started { display: grid; grid-template-columns: 34% 1fr; align-items: center; margin-top: clamp(60px, 7.6vw, 130px); }
.started p { margin-top: clamp(12px, 1.5vw, 24px); font-size: clamp(12px, .98vw, 16px); color: var(--ink-2); line-height: 1.45; max-width: 21em; }
.started img { width: 100%; height: auto; }

.bleed { margin: clamp(60px, 7.6vw, 130px) var(--edge) 0; border-radius: var(--radius); overflow: hidden; background: #ddd; }
.bleed { aspect-ratio: 884 / 550; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }

.chapter { padding-top: clamp(70px, 9.6vw, 170px); }
.chapter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; margin-bottom: clamp(18px, 2.5vw, 42px); }
.chapter-head p { text-align: right; font-size: clamp(12px, .93vw, 15px); color: var(--ink-2); line-height: 1.45; max-width: 27em; }
.chapter-head .display { margin-left: -.06em; }

.gallery { display: flex; flex-direction: column; gap: clamp(14px, 1.45vw, 24px); }
.g-row { display: flex; gap: clamp(8px, 1.05vw, 17px); }
.g-item { flex: var(--r) 1 0; min-width: 0; }
.g-img { border-radius: var(--radius); overflow: hidden; background: #e2ded7; }
.g-img img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.g-item:hover .g-img img { transform: scale(1.025); }
.g-placeholder { aspect-ratio: 3 / 4; }

/* Film */
.film { margin-top: clamp(80px, 10vw, 170px); padding: clamp(40px, 8.6vw, 150px) clamp(14px, 4.45vw, 66px) clamp(14px, 4.45vw, 66px) clamp(14px, 4.45vw, 66px); }
.film-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4vw; margin-bottom: clamp(18px, 2.6vw, 44px); }
.film-head h2 { margin-left: -.04em; }
.film-head p { max-width: clamp(220px, 22vw, 380px); font-size: clamp(12px, .95vw, 16px); color: rgba(243,237,228,.62); line-height: 1.45; margin-top: clamp(20px, 2.6vw, 44px); }
.player { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 805 / 437; background: #000; cursor: pointer; }
.player img, .player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player img { transition: transform 1.4s var(--ease), opacity .5s; object-position: 50% 30%; }
.player:hover img { transform: scale(1.03); }
.player .play { position: absolute; left: 50%; top: 50%; width: clamp(48px, 6.4vw, 104px); height: clamp(48px, 6.4vw, 104px); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); display: grid; place-items: center; transition: transform .45s var(--ease); }
.player:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.player .play svg { width: 26%; margin-left: 6%; }
.player .p-cap { position: absolute; bottom: clamp(12px, 1.4vw, 22px); left: clamp(12px, 1.35vw, 22px); right: clamp(12px, 1.35vw, 22px); display: flex; justify-content: space-between; font-size: clamp(9px, .68vw, 12px); font-weight: 500; color: #fff; }
.player.is-playing img, .player.is-playing .play, .player.is-playing .p-cap { opacity: 0; pointer-events: none; }

/* Next project */
.next { display: block; position: relative; margin: clamp(80px, 9.6vw, 170px) var(--edge) 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 884 / 325; color: #fff; background: #777; }
.next img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: grayscale(1) blur(4px) brightness(.86) contrast(.95); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.next:hover img { filter: grayscale(.4) blur(2px) brightness(.8); transform: scale(1.03); }
.next::after { content: ""; position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.next-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.next-title { display: flex; align-items: center; gap: .32em; font-size: clamp(34px, 5.3vw, 100px); font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.next-title .arrow { width: .7em; height: .7em; transition: transform .5s var(--ease); }
.next-title .arrow path { stroke-width: 1.2; }
.next:hover .next-title .arrow { transform: translateX(10px); }
.next-sub { margin-top: clamp(4px, .6vw, 10px); font-size: clamp(11px, 1.02vw, 17px); }
.next-count { position: absolute; z-index: 1; top: clamp(12px, 2.2vw, 36px); right: clamp(14px, 2.3vw, 38px); font-size: clamp(9px, .68vw, 12px); font-weight: 500; }

/* Reveal animations ----------------------------------------------------- */
/* Projects list (as on studio-aiko.com): the whole list glides up 140px when it enters the view,
   each card fades in on its own (spring ~1.2s, slight settle, .2s delay). Transform/opacity only. */
.js .rv-list { transform: translate3d(0, 140px, 0); transition: transform 1.3s cubic-bezier(.19, 1, .22, 1); }
.js .rv-list.in { transform: none; }
.js .rv-card { opacity: 0; transition: opacity 1.2s cubic-bezier(.25, .8, .3, 1) .2s; }
.js .rv-card.in { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-img { clip-path: inset(6% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease); }
.js .rv-img img { transform: scale(1.08); transition: transform 1.6s var(--ease); }
.js .rv-img.in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .rv-img.in img { transform: scale(1); }
/* line masks: room for the last glyph on the right and for descenders (j, g, y, p) below —
   with line-height .88 they hang ~.17em under the line box */
.js .split .ln { display: block; overflow: hidden; padding: 0 .15em .3em 0; margin: 0 -.15em -.3em 0; }
.js .split .ln > span { display: block; transform: translateY(140%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .split.in .ln > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .split .ln > span, .js .rv-card, .js .rv-list { opacity: 1; transform: none; }
  .js .rv-img, .js .rv-img img { clip-path: none; transform: none; }
}

/* RESPONSIVE ============================================================= */
@media (max-width: 900px) {
  .nav { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .chapter-head, .film-head, .process-head { flex-direction: column; align-items: flex-start; }
  .contact-head { grid-template-columns: 1fr; }
  .contact-head .lede { top: 0; margin-top: 20px; }
  .split-head { grid-template-columns: 1fr; }
  .split-head .lede { grid-column: 1; grid-row: 3; margin-top: 20px; top: 0; }
  .chapter-head p { text-align: left; }
  .process-head .right { text-align: left; order: -1; }
  .process-head .lede { margin: 14px 0 0; }
  .projects-grid, .steps { grid-template-columns: 1fr; }
  .steps { gap: 36px; }
  .about { grid-template-columns: 1fr; }
  .about-title, .about-sketch, .about-sketch-2, .about-text { grid-column: 1; grid-row: auto; }
  .about-sketch { margin: 28px 0 0; padding: 0; }
  .about-sketch-2 { margin: 24px 0 0; width: 70%; }
  .about-text { margin: 24px 0 0; align-self: start; }
  .menu-foot { grid-template-columns: 1fr 1fr; }
  .menu-mail { grid-column: 1 / -1; }
  .menu-copy { grid-column: 2; }
  .row { grid-template-columns: 34px 1fr; padding: 12px 0; }
  .row .d { grid-column: 2; margin-top: 4px; font-size: 13px; }
  .services-grid { grid-template-columns: 1fr; padding: 0 var(--pad); }
  .services-grid > .side:first-child { grid-column: auto; }
  .services-grid > .side:last-child { display: none; }
  .acc-num { position: static; display: block; width: auto; margin: 0 0 6px; }
  .acc-content { grid-template-columns: auto 1fr; }
  .acc-cats { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .footer-cols > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .footer-bottom span:nth-child(2) { display: none; }
  .intro { grid-template-columns: 1fr; gap: 20px; }
  .meta > div { grid-template-columns: 1fr; }
  .meta-row { grid-column: 1; }
  .started { grid-template-columns: 1fr; gap: 30px; }
  .g-row { flex-direction: column; }
  .g-row .g-item { flex: none; }
  .p-hero h1 { white-space: normal; }
  .next { aspect-ratio: 4 / 3; }
  .hero-logo { top: 22%; width: 56vw; }
}
@media (max-width: 520px) {
  .h-xxl { font-size: 17vw; }
  .facts { grid-template-columns: 1fr; }
}

/* SCROLLBAR ===================================================================
   The native bar always sits in its own gutter (a light strip beside the hero video), so it is
   hidden and replaced by a thin overlay thumb drawn by main.js that floats over the page. */
html { scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
.sb { position: fixed; z-index: 95; top: 0; right: 0; width: 12px; height: 100vh; user-select: none; -webkit-user-select: none; touch-action: none; }
.sb-thumb {
  position: absolute; right: 3px; top: 0; width: 4px; min-height: 40px; border-radius: 999px;
  background: rgba(120, 110, 104, .55);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12);
  transition: width .2s var(--ease), right .2s var(--ease), background .2s;
  will-change: transform;
}
.sb:hover .sb-thumb, .sb.is-drag .sb-thumb { width: 6px; right: 2px; background: rgba(120, 110, 104, .85); }
.is-sb-drag, .is-sb-drag * { user-select: none !important; }
.sb[hidden] { display: none; }
/* touch screens scroll with the finger and show their own indicator */
@media (hover: none) and (pointer: coarse) { .sb { display: none; } }