/* ------------------------------------------------------------- WEBFONTS
   Self-hosted (Archivo + Instrument Serif, SIL Open Font License).
   No third-party request, no layout shift, works offline. */
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ==========================================================================
   MOHIT DOP — DESIGN SYSTEM
   Tokens → Reset → Primitives → Layout → Components → Responsive
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root{
  /* Surface */
  --ink:        #050609;
  --ink-1:      #08090d;
  --ink-2:      #0d0f14;
  --ink-3:      #14171e;

  /* Type */
  --paper:      #f0eeea;
  --paper-2:    rgba(240,238,234,.62);
  --paper-3:    rgba(240,238,234,.38);
  --paper-4:    rgba(240,238,234,.18);

  /* Structure */
  --line:       rgba(240,238,234,.10);
  --line-2:     rgba(240,238,234,.18);

  /* The one accent — pulled from the lens coating in the film */
  --glass:      #7fa39c;
  --glass-dim:  rgba(127,163,156,.28);

  /* Type families */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Type scale */
  --t-mega:  clamp(2.5rem, 7.2vw, 8rem);
  --t-xxl:   clamp(2.6rem, 7.4vw, 7.2rem);
  --t-xl:    clamp(2.1rem, 5.0vw, 4.4rem);
  --t-lg:    clamp(1.5rem, 2.8vw, 2.5rem);
  --t-md:    clamp(1.05rem, 1.28vw, 1.28rem);
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  /* Space */
  --gut:     clamp(1.25rem, 4.2vw, 4.5rem);
  --sec:     clamp(3.5rem, 7vw, 7.5rem);
  --maxw:    1560px;

  /* Motion */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --dur:     .9s;
}

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-size:var(--t-md); font-weight:400;
  line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--glass); color:var(--ink); }
:focus-visible{ outline:1px solid var(--glass); outline-offset:4px; }

/* ------------------------------------------------------------- PRIMITIVES */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--sec); position:relative; }

.eyebrow{
  font-size:var(--t-micro); font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--paper-3);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:""; width:1.75rem; height:1px; background:var(--line-2); flex:none;
}

.display{
  font-size:var(--t-xxl); font-weight:500; line-height:.94;
  letter-spacing:-.045em; text-wrap:balance;
}
.display em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }

.h2{ font-size:var(--t-xl); font-weight:500; line-height:1.0; letter-spacing:-.04em; }
.h3{ font-size:var(--t-lg); font-weight:500; line-height:1.1; letter-spacing:-.03em; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.45rem); line-height:1.5; color:var(--paper-2); letter-spacing:-.015em; }
.small{ font-size:var(--t-sm); color:var(--paper-2); line-height:1.65; }
.meta{
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-3); font-weight:500;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* Reveal-on-scroll primitive */
.rv{ opacity:0; transform:translateY(28px); }
.rv.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1.15s var(--ease); }
.rv-d1.in{ transition-delay:.08s } .rv-d2.in{ transition-delay:.16s }
.rv-d3.in{ transition-delay:.24s } .rv-d4.in{ transition-delay:.32s }

/* Masked word reveal — each word carries its own mask, so natural line
   wrapping can never break the effect at any viewport width. */
.lines .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.lines .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(110%); transition:transform 1s var(--ease);
  transition-delay:calc(var(--i) * 42ms);
}
.lines.in .w > i{ transform:none; }
.lines em, .lines .w em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }

/* Button */
.btn{
  --bg:var(--paper); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1.02rem 1.7rem; border-radius:2px;
  background:var(--bg); color:var(--fg);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--glass); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.btn:hover::after{ transform:scaleY(1); }
.btn .ar{ transition:transform .55s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover{ color:var(--ink); }

/* Link with underline sweep */
.ul{ position:relative; display:inline-block; }
.ul::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.ul:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Film grain — very subtle, keeps flat blacks from banding */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

/* ------------------------------------------------------------- PRELOADER */
#pre{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center; transition:opacity .9s var(--ease), visibility .9s;
}
#pre.done{ opacity:0; visibility:hidden; }
.pre-in{ width:min(78vw,360px); text-align:center; }
.pre-mark{
  font-size:var(--t-micro); letter-spacing:.42em; font-weight:600;
  color:var(--paper-2); margin-bottom:1.6rem;
}
.pre-bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
.pre-bar i{
  position:absolute; inset:0; background:var(--paper);
  transform:scaleX(0); transform-origin:left; transition:transform .35s linear;
}
.pre-pc{ margin-top:1rem; font-size:var(--t-micro); letter-spacing:.2em; color:var(--paper-3); }

/* ------------------------------------------------------------------- NAV */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gut);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .7s var(--ease), transform .8s var(--ease), background .5s, backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
#nav.on{ opacity:1; transform:none; pointer-events:auto; }
#nav.solid{ background:rgba(5,6,9,.72); backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line); }
.nav-mark{ font-size:.8125rem; font-weight:700; letter-spacing:.26em; }
.nav-links{ display:flex; gap:2.4rem; }
.nav-links a{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-2); transition:color .35s; }
.nav-links a:hover{ color:var(--paper); }
.nav-cta{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; }
.burger{ display:none; width:34px; height:34px; place-items:center; }
.burger i{ display:block; width:20px; height:1px; background:var(--paper); position:relative; transition:.4s var(--ease); }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:20px; height:1px; background:var(--paper); transition:.4s var(--ease); }
.burger i::before{ top:-6px } .burger i::after{ top:6px }
body.menu .burger i{ background:transparent }
body.menu .burger i::before{ top:0; transform:rotate(45deg) }
body.menu .burger i::after{ top:0; transform:rotate(-45deg) }

#menu{
  position:fixed; inset:0; z-index:890; background:var(--ink-1);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:0 var(--gut); clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease); pointer-events:none;
}
body.menu #menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }
#menu a{ font-size:clamp(2.4rem,10vw,4.2rem); font-weight:500; letter-spacing:-.045em; line-height:1.12; color:var(--paper); }
#menu .m-contact{ margin-top:2.6rem; display:grid; gap:.4rem; }
#menu .m-contact a{ font-size:var(--t-sm); letter-spacing:0; color:var(--paper-2); }

/* ------------------------------------------------------------------ FILM */
#film{ position:relative; }
#film-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--ink); z-index:1;
}
#film-canvas{ width:100%; height:100%; object-fit:cover; }
/* vignette so the frame never reads as a rectangle on wide screens */
#film-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%, transparent 38%, rgba(5,6,9,.55) 78%, var(--ink) 100%);
}

.cap{
  position:absolute; z-index:3; left:var(--gut); right:var(--gut);
  opacity:0; transition:opacity .7s var(--ease), transform .9s var(--ease);
  transform:translateY(14px); pointer-events:none; will-change:opacity,transform;
}
.cap.on{ opacity:1; transform:none; }
.cap--center{ top:50%; translate:0 -50%; text-align:center; }
.cap--bl{ bottom:clamp(4.5rem,11vh,9rem); }
.cap-t{
  font-size:clamp(2.6rem,9.4vw,8.6rem); font-weight:500;
  line-height:.9; letter-spacing:-.05em;
}
.cap-t em{ font-family:var(--serif); font-style:italic; font-weight:400; }
.cap-s{ margin-top:1.1rem; font-size:var(--t-micro); letter-spacing:.32em; text-transform:uppercase; color:var(--paper-3); }
.cap--bl .cap-t{ font-size:clamp(1.9rem,5.2vw,4.4rem); }

/* hero brand lockup (chapter 1) — role + wordmark together at the top left,
   location alone at the bottom right */
.cap--lock{
  top:0; bottom:0; display:grid; align-content:space-between; justify-items:start;
  padding-top:clamp(3.6rem,9vh,6rem); padding-bottom:clamp(4.5rem,11vh,9rem);
}
.hero-lock{ display:grid; gap:.95rem; justify-items:start; margin:0; font-weight:inherit; }
.hero-lock .sub{
  font-size:var(--t-micro); letter-spacing:.42em; text-transform:uppercase;
  color:var(--paper-2); margin:0;
}
.hero-lock .mark{
  font-size:clamp(2.9rem,8.6vw,9rem); font-weight:700; letter-spacing:-.055em; line-height:.84;
  display:flex; align-items:baseline; flex-wrap:wrap;
}
.mark-dim{ opacity:.26; }
/* the second discipline, stated but not shouted */
.mark-amp{
  font-size:.24em; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  opacity:.42; margin-left:.9em; align-self:center; white-space:nowrap;
}
.lock-meta{
  justify-self:end; text-align:right; margin:0;
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--paper-3);
}

/* the film's black end-frame hands over to the page */
#film-out{ position:relative; z-index:2; height:0; }

/* --------------------------------------------------------------- SHOWREEL */
#showreel{ position:relative; z-index:2; background:var(--ink); padding-top:clamp(4rem,9vw,8rem); }
.reel-head{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:end; justify-content:space-between; margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.reel-head .h2{ max-width:16ch }
/* A vertical film in the hero slot sits beside the headline rather than
   floating alone in the middle of a wide screen. */
#showreel.reel-v .wrap{
  display:grid; grid-template-columns:min(400px,38%) 1fr;
  gap:clamp(1.8rem,4vw,4.5rem); align-items:center;
}
#showreel.reel-v #reel-mount{ order:1 }
#showreel.reel-v .reel-head{ order:2; margin:0; display:block; align-self:center }
#showreel.reel-v .reel-head .h2{ max-width:14ch; margin-top:1rem }
#showreel.reel-v #reel-meta{ margin-top:1.2rem }
#showreel.reel-v .reel--v{ max-width:none }
@media (max-width:900px){
  #showreel.reel-v .wrap{ grid-template-columns:1fr; gap:1.6rem }
  #showreel.reel-v .reel-head{ order:1 }
  #showreel.reel-v #reel-mount{ order:2; max-width:min(400px,86vw); margin-inline:auto }
}

/* Video facade — used everywhere a YouTube video appears */
.vid{
  position:relative; aspect-ratio:16/9; background:var(--ink-2);
  overflow:hidden; cursor:pointer; isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--line);
}
.vid img{ width:100%; height:100%; object-fit:cover; opacity:0;
  transition:transform 1.4s var(--ease), opacity .7s var(--ease); }
.vid img.ok{ opacity:1 }
/* poster blocked or offline — the card still reads as a film */
.vid.no-poster::after{
  content:attr(data-label); position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem; text-align:center; font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-3); pointer-events:none;
}
.vid:hover img{ transform:scale(1.035); }
.vid::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,6,9,.35) 0%, transparent 32%, transparent 55%, rgba(5,6,9,.78) 100%);
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; }
/* a silently looping card keeps its click target but drops the play triangle */
.vid.playing .play{ opacity:0; pointer-events:none }
.vid.playing iframe{ pointer-events:none }

/* sound toggle — only offered once a card is actually playing */
.vid-snd{
  position:absolute; right:.6rem; bottom:.6rem; z-index:7;
  width:2.1rem; height:2.1rem; display:none; place-items:center;
  border:0; border-radius:50%; cursor:pointer; padding:0;
  color:var(--paper); background:rgba(5,6,9,.55); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(240,238,234,.22);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.vid.playing .vid-snd{ display:grid }
.vid-snd:hover{ background:var(--paper); color:var(--ink); transform:scale(1.07) }
.vid-snd svg{ width:1.05rem; height:1.05rem; fill:currentColor }
.vid-snd .i-on{ display:none }
.vid.snd-on .vid-snd{ background:var(--paper); color:var(--ink) }
.vid.snd-on .vid-snd .i-on{ display:block }
.vid.snd-on .vid-snd .i-off{ display:none }
@media (max-width:720px){
  .vid-snd{ right:.45rem; bottom:.45rem; width:1.9rem; height:1.9rem }
  .vid-snd svg{ width:.95rem; height:.95rem }
}
.play{
  position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%;
  width:clamp(74px,7vw,104px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:var(--paper);
  background:rgba(5,6,9,.34); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(240,238,234,.32);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease);
}
.vid:hover .play{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--paper); transform:translate(-50%,-50%) scale(1.06); }
.play svg{ width:26%; margin-left:12%; }
.vid-meta{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(1.1rem,2.4vw,2rem); display:flex; gap:1rem;
  justify-content:space-between; align-items:end; pointer-events:none;
}
.vid-meta .t{ font-size:clamp(1.05rem,1.9vw,1.7rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; }

/* Empty-slot state — a designed placeholder, never a broken image */
.slot{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(180deg,var(--ink-2),var(--ink-1)),
    var(--ink-2);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line);
}
.slot::before{
  content:""; position:absolute; inset:clamp(10px,1.6vw,20px);
  border:1px dashed rgba(240,238,234,.09);
}
.slot-l{ text-align:center; padding:1.5rem; }
.slot-l b{ display:block; font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--paper-3); font-weight:600; }
.slot-l s{ display:block; margin-top:.55rem; font-size:var(--t-micro); letter-spacing:.1em; color:var(--paper-4); text-decoration:none; }
.aspect-vid{ aspect-ratio:16/9 }
.vid--v{ aspect-ratio:9/16 }

/* ------------------------------------------------------------------ WORK */
.reel-head--tight{ margin-bottom:clamp(1.2rem,2vw,1.8rem) }

/* Stacked, not split: every film first, then every still. Each section gets
   the full width, so films run four across instead of two. */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(2.8rem,6vw,5.5rem) }
.pane{ min-width:0; display:flex; flex-direction:column }
.pane[hidden]{ display:none }
.pane-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.7rem 0; margin-bottom:.7rem; border-bottom:1px solid var(--line-2);
  position:sticky; top:4.3rem; z-index:5; background:var(--ink);
}
.pane-head h3{ font-size:clamp(.9rem,1.35vw,1.25rem); font-weight:500; letter-spacing:-.03em }
.pane-n{ font-size:var(--t-micro); letter-spacing:.16em; color:var(--paper-3) }

/* Films flow in four masonry columns, not a row grid: the set mixes 9:16
   Shorts with 16:9 films, and a row grid sizes every row to its tallest card,
   leaving a hole under every landscape one. */
.pane-scroll{
  display:block; columns:4; column-gap:clamp(.6rem,1.4vw,1.4rem);
}
.pcard{ break-inside:avoid; margin-bottom:clamp(1rem,2vw,1.8rem) }
.pcard{ min-width:0; -webkit-column-break-inside:avoid }
.pcard-info{ padding-top:.6rem }
.pcard-info h4{ font-size:clamp(.8rem,.95vw,1rem); font-weight:500; letter-spacing:-.02em; line-height:1.25 }
.pj-sub{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3); line-height:1.5 }
.pcard-info .pj-sub{ margin-top:.25rem }

/* Stills flow in four masonry columns at each photograph's own aspect ratio —
   nothing is cropped to fit a grid cell. */
.pane[data-pane="stills"] .pane-scroll{
  display:block; columns:4; column-gap:clamp(.6rem,1.4vw,1.4rem);
}
.scard{
  position:relative; overflow:hidden; background:var(--ink-2); cursor:zoom-in;
  break-inside:avoid; margin-bottom:clamp(.6rem,1.4vw,1.4rem); aspect-ratio:4/5;
}
.scard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease); filter:saturate(.94) }
.scard:hover img{ transform:scale(1.05) }
.scard figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
  background:linear-gradient(transparent,rgba(5,6,9,.85)); opacity:0; transition:opacity .5s var(--ease);
}
.scard:hover figcaption{ opacity:1 }

@media (max-width:1100px){
  .pane-scroll{ columns:3 }
  .pane[data-pane="stills"] .pane-scroll{ columns:3 }
}
@media (max-width:720px){
  /* Phones get a real two-column grid, not column-masonry.
     Masonry flows items DOWN column one and then down column two, so with
     mixed 9:16 and 16:9 cards nothing lines up across — which reads as
     broken rather than as a considered layout. A grid with one shared
     aspect ratio puts every card on the same baseline. The work is the
     whole point of this site; it has to look composed on a phone. */
  .pane-scroll,
  .pane[data-pane="stills"] .pane-scroll{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:.55rem; row-gap:1.1rem; columns:auto;
  }
  .pcard{ margin-bottom:0 }
  /* One ratio for every film card, whatever the source orientation, so the
     rows align. 4:5 is the compromise that crops a vertical film least while
     still giving a landscape one room. */
  .pcard .vid, .pcard .vid--v{ aspect-ratio:4/5 }
  /* Stills carry their true ratio inline for the desktop masonry; on a phone
     that has to be overridden or the rows go ragged again. */
  .scard{ aspect-ratio:4/5 !important; margin-bottom:0 }
  .pane-head{ top:5.2rem; padding:.55rem 0; margin-bottom:.55rem }
  .pcard-info{ padding-top:.45rem }
  .pcard-info .s-rest{ display:none }
}

/* ------------------------------------------------------------- CATEGORIES */
.cats{ border-top:1px solid var(--line) }
.cat{
  display:grid; grid-template-columns:5.5rem 1fr auto; gap:clamp(1rem,3vw,3rem);
  align-items:center; padding:clamp(1.5rem,3.1vw,2.5rem) 0;
  border-bottom:1px solid var(--line); position:relative; isolation:isolate;
  transition:padding-inline .6s var(--ease);
}
.cat::before{
  content:""; position:absolute; inset:0 -1.5rem; z-index:-1; background:var(--ink-2);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease);
}
.cat:hover::before{ transform:scaleY(1) }
.cat:hover{ padding-inline:1.5rem }
.cat-n{ font-size:var(--t-micro); letter-spacing:.18em; color:var(--paper-4) }
.cat-txt{ display:grid; gap:.4rem; justify-items:start; min-width:0; }
.cat-name{ font-size:clamp(1.5rem,3.6vw,2.9rem); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.cat-blurb{ font-size:var(--t-sm); color:var(--paper-3); line-height:1.4; }
.cat-c{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3); display:flex; align-items:center; gap:.8rem; }
.cat-c .ar{ transition:transform .55s var(--ease) }
.cat:hover .cat-c .ar{ transform:translateX(6px) }
.cat[data-empty="1"]{ opacity:.42; pointer-events:none }

#lb{ position:fixed; inset:0; z-index:9990; background:rgba(5,6,9,.96); backdrop-filter:blur(10px);
  display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
#lb.on{ opacity:1; visibility:visible }
#lb img{ max-width:92vw; max-height:86vh; object-fit:contain }
#lb .x{ position:absolute; top:1.4rem; right:1.6rem; font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--paper-2) }
#lb .nav{ position:absolute; top:50%; translate:0 -50%; padding:1.4rem; color:var(--paper-2); font-size:1.4rem }
#lb .prev{ left:.6rem } #lb .next{ right:.6rem }

/* ----------------------------------------------------------------- ABOUT */
.about{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.6rem,4vw,4.5rem); align-items:start; }
.about-media{ grid-column:span 5; position:relative }
.about-media .box{ aspect-ratio:4/5; overflow:hidden; background:var(--ink-2) }
.about-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.03) }
.about-body{ grid-column:span 7 }
.about-body .display{ font-size:clamp(2.1rem,4.1vw,4.1rem); margin-bottom:clamp(1.6rem,3vw,2.6rem) }
.about-body p{ color:var(--paper-2); max-width:56ch; margin-bottom:1.15rem; font-size:clamp(1rem,1.18vw,1.15rem) }
.facts{ display:flex; flex-wrap:wrap; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.2rem,4vw,3.4rem); padding-top:2rem; border-top:1px solid var(--line) }
.fact b{ display:block; font-size:clamp(2rem,3.4vw,3rem); font-weight:500; letter-spacing:-.045em; line-height:1 }
.fact span{ display:block; margin-top:.5rem; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-3) }
.about-body .philo{ margin-top:clamp(2rem,3.6vw,3rem); font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,2.3vw,2rem); letter-spacing:-.02em; color:var(--paper) }

/* -------------------------------------------------------------- SERVICES */
.svc{ border-top:1px solid var(--line) }
.svc-i{ display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(1rem,3vw,3rem); padding:clamp(1.7rem,3.4vw,2.9rem) 0; border-bottom:1px solid var(--line) }
.svc-i .n{ font-size:var(--t-micro); letter-spacing:.18em; color:var(--paper-4) }
.svc-r{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(.8rem,3vw,3rem); align-items:baseline }
.svc-name{ font-size:clamp(1.4rem,2.9vw,2.4rem); font-weight:500; letter-spacing:-.04em; line-height:1.05 }
.svc-copy{ color:var(--paper-3); font-size:var(--t-sm) }

/* ------------------------------------------------------------------- WHY */
.why-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.8rem,3.4vw,3.4rem) }
.why-i{ padding-top:1.2rem; border-top:1px solid var(--line-2); position:relative }
.why-i .why-n{ display:block; font-size:var(--t-micro); letter-spacing:.18em; color:var(--paper-4); margin-bottom:.7rem }
.why-i h3{ font-size:clamp(1.05rem,1.5vw,1.45rem); font-weight:500; letter-spacing:-.03em;
  line-height:1.2; margin-bottom:.8rem; max-width:22ch }
.why-i p{ font-size:var(--t-sm); color:var(--paper-3); max-width:46ch }
/* an odd last item runs the full width rather than leaving a hole */
.why-i:last-child:nth-child(odd){ grid-column:1 / -1 }
.why-i:last-child:nth-child(odd) p{ max-width:60ch }

/* --------------------------------------------------------------- CLIENTS */
/* each cell carries its own hairline, so an incomplete last row leaves plain
   background rather than a block of the grid's own colour */
.cl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.55rem }
.cl-i{ background:var(--ink); min-height:126px; display:grid; place-items:center; align-content:center;
  gap:.5rem; padding:1.4rem 1.1rem; text-align:center; color:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); }
.cl-n{ font-size:clamp(.95rem,1.5vw,1.15rem); font-weight:500; letter-spacing:-.02em; line-height:1.2 }
.cl-s{ font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--paper-4) }
.cl-i:hover{ color:var(--paper); background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2) }
.cl-i img{ max-height:38px; width:auto; opacity:.62; filter:grayscale(1) brightness(1.7); transition:opacity .5s }
.cl-i:hover img{ opacity:1 }

/* ---------------------------------------------------------- TESTIMONIALS */
.tm{ max-width:24ch }
.tm-q{ font-family:var(--serif); font-size:clamp(1.7rem,4vw,3.2rem); line-height:1.16; letter-spacing:-.02em; max-width:20ch }
.tm-w{ display:grid; gap:clamp(2.5rem,6vw,5rem) }
.tm-a{ margin-top:1.6rem; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3) }

/* ------------------------------------------------------------------- CTA */
#cta{ position:relative; overflow:hidden }
.cta-head{ font-size:var(--t-mega); font-weight:500; line-height:.86; letter-spacing:-.055em; text-wrap:balance }
.cta-head em{ font-family:var(--serif); font-style:italic; font-weight:400 }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(2.2rem,4vw,3.4rem) }

/* --------------------------------------------------------------- CONTACT */
.ct{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(2rem,4vw,4.5rem) }
.ct-form{ grid-column:span 7 }
.ct-side{ grid-column:span 5 }
.f-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1rem,2vw,1.6rem) }
.f{ position:relative; min-width:0; margin-bottom:clamp(1.3rem,2.4vw,1.9rem) }
.f label{ position:absolute; top:.9rem; left:0; font-size:var(--t-sm); color:var(--paper-3);
  pointer-events:none; transition:.4s var(--ease); transform-origin:left }
.f input,.f textarea,.f select{
  width:100%; min-width:0; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  padding:.9rem 0 .75rem; color:var(--paper); font:inherit; font-size:var(--t-sm);
  border-radius:0; transition:border-color .4s }
.f select{ color:var(--paper-3); cursor:pointer }
.f select option{ background:var(--ink-2); color:var(--paper) }
.f textarea{ resize:vertical; min-height:112px }
.f input:focus,.f textarea:focus,.f select:focus{ outline:0; border-bottom-color:var(--paper) }
.f input:focus ~ label,.f textarea:focus ~ label,.f.filled label{ transform:translateY(-1.35rem) scale(.72); color:var(--paper-3) }
.f--sel label{ display:none }
.ct-list{ display:grid; gap:0; border-top:1px solid var(--line) }
.ct-list a,.ct-list div{ display:flex; justify-content:space-between; gap:1.5rem; align-items:center;
  padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:var(--t-sm) }
.ct-list .k{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3) }
.ct-list a:hover .v{ color:var(--glass) }
.ct-list .v{ transition:color .4s }
.f-note{ font-size:var(--t-xs); color:var(--paper-3); margin-top:1rem }

/* ---------------------------------------------------------------- FOOTER */
footer{ padding:clamp(3rem,6vw,5rem) 0 2.2rem; border-top:1px solid var(--line) }
.ft-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:end }
.ft-mark{ font-size:clamp(2.6rem,9vw,7rem); font-weight:700; letter-spacing:-.06em; line-height:.82 }
.ft-bot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3) }
.ft-social{ display:flex; gap:1.6rem }

/* ---------------------------------------------------------------- CURSOR */
#cur{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--paper);
  translate:-50% -50%; transition:width .45s var(--ease),height .45s var(--ease),background .45s;
  display:grid; place-items:center; mix-blend-mode:difference }
#cur span{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  opacity:0; transition:opacity .3s; white-space:nowrap; font-weight:600 }
#cur.big{ width:78px; height:78px; background:var(--paper); mix-blend-mode:normal }
#cur.big span{ opacity:1 }
@media (hover:none),(pointer:coarse){ #cur{ display:none } }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1080px){
  .about-media{ grid-column:span 5 } .about-body{ grid-column:span 7 }
  .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* Both halves already span the full twelve, so the twelve-column grid buys
     nothing here — and it actively breaks: eleven column gaps of ~32px need
     352px, more than the whole content box on a 320-360px phone, so every
     track collapses to 0 and the row is laid out on gaps alone — 352px wide
     inside a 280px page. One column, no column gaps, no sideways scroll. */
  .ct{ grid-template-columns:minmax(0,1fr) }
  .ct-form, .ct-side{ grid-column:1 }
}
@media (max-aspect-ratio:1/1){
  .cap--center{ top:auto; bottom:13vh; translate:0 0; }
  .cap--bl{ bottom:9vh }
  #film-stage::after{ background:radial-gradient(150% 118% at 50% 45%, transparent 62%, rgba(5,6,9,.42) 92%, var(--ink) 100%) }
}
@media (max-width:860px){
  .cap--lock{ padding-top:clamp(3rem,7vh,4.5rem) }
  /* "& AI CREATOR" no longer fits beside the wordmark on a phone, so rather
     than letting flex-wrap decide at some arbitrary width, put it on its own
     line deliberately — and drop the inline margin, which would otherwise
     indent that line a few pixels off the M. */
  .mark-amp{ font-size:.26em; margin-left:0; flex-basis:100%; margin-top:.5em }
  .nav-links{ display:none } .nav-cta{ display:none } .burger{ display:grid }
  /* Same arithmetic as .ct above — collapse rather than span twelve. */
  .about{ gap:2.2rem; grid-template-columns:minmax(0,1fr) }
  .about-media,.about-body{ grid-column:1 }
  .about-media .box{ aspect-ratio:4/5 }
  .cat{ grid-template-columns:2.5rem 1fr; row-gap:.6rem } .cat-c{ grid-column:2 }
  .svc-i{ grid-template-columns:2.5rem 1fr } .svc-r{ grid-template-columns:1fr; gap:.6rem }
  .f-row{ grid-template-columns:1fr }
  .why-grid{ grid-template-columns:1fr; gap:0 }
  .why-i{ padding:1.3rem 0; border-top:1px solid var(--line) }
  .cap--center{ text-align:left } .hero-lock{ justify-items:start }
}

/* ------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .rv{ opacity:1 !important; transform:none !important }
  .lines span > i{ transform:none !important }
  .grain{ display:none } #cur{ display:none }
}

/* --------------------------------------------------------- PROJECT PAGE */
.pp-hero{ min-height:74svh; display:grid; align-content:end; padding-bottom:clamp(2.5rem,5vw,4.5rem) }
.pp-title{ font-size:var(--t-xxl); font-weight:500; line-height:.94; letter-spacing:-.05em }
.pp-facts{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,4rem); margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:1.5rem; border-top:1px solid var(--line) }
.pp-facts .k{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3) }
.pp-facts .v{ margin-top:.4rem; font-size:var(--t-sm) }
.pp-gal{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.5rem) }
.pp-gal figure{ grid-column:span 6; aspect-ratio:3/2; overflow:hidden; background:var(--ink-2) }
.pp-gal figure:nth-child(3n+1){ grid-column:span 12; aspect-ratio:16/9 }
.pp-gal img{ width:100%; height:100%; object-fit:cover }
.pp-next{ display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:clamp(2rem,4vw,3.4rem) 0; border-top:1px solid var(--line) }

/* ------------------------------------------------------------- ESTIMATOR */
.est{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(2rem,4vw,4.5rem); align-items:start }
.est-steps{ display:grid; gap:clamp(2rem,3.6vw,3.2rem) }
.est-step > .meta{ margin-bottom:1.1rem; display:block }
.est-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.75rem }
.est-o{
  position:relative; display:block; cursor:pointer; padding:1.05rem 1.15rem;
  box-shadow:inset 0 0 0 1px var(--line); background:var(--ink-1);
  transition:box-shadow .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.est-o:hover{ box-shadow:inset 0 0 0 1px var(--line-2); background:var(--ink-2) }
.est-o input{ position:absolute; opacity:0; pointer-events:none }
.est-o b{ display:block; font-size:var(--t-sm); font-weight:500; letter-spacing:-.015em }
.est-o s{ display:block; margin-top:.3rem; font-size:var(--t-micro); letter-spacing:.04em;
  color:var(--paper-3); text-decoration:none; line-height:1.45 }
.est-o::after{
  content:""; position:absolute; top:1.15rem; right:1.15rem; width:7px; height:7px; border-radius:50%;
  background:var(--glass); opacity:0; transform:scale(.4); transition:.4s var(--ease);
}
.est-o.on{ box-shadow:inset 0 0 0 1px var(--glass-dim); background:var(--ink-2) }
.est-o.on::after{ opacity:1; transform:none }
.est-o:has(input:focus-visible){ outline:1px solid var(--glass); outline-offset:3px }

.est-panel{ position:sticky; top:6rem }
.est-card{ padding:clamp(1.5rem,2.4vw,2rem); box-shadow:inset 0 0 0 1px var(--line); background:var(--ink-1) }
.est-figure{
  margin-top:.9rem; font-size:clamp(1.7rem,2.9vw,2.5rem); font-weight:500;
  letter-spacing:-.045em; line-height:1.05; font-variant-numeric:tabular-nums;
}
.est-figure.idle{ color:var(--paper-4); font-size:clamp(1.1rem,1.5vw,1.35rem); letter-spacing:-.02em }
.est-summary{ margin:1.4rem 0; display:grid; gap:.55rem; border-top:1px solid var(--line); padding-top:1.2rem }
.est-summary:empty{ display:none }
.est-summary div{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-micro);
  letter-spacing:.06em; color:var(--paper-3) }
.est-summary div span:last-child{ color:var(--paper-2); text-align:right }
.est-card .btn{ width:100%; justify-content:center; margin-top:.3rem }
.est-note{ margin-top:1.1rem; font-size:var(--t-micro); line-height:1.6; color:var(--paper-3); letter-spacing:.02em }

.est-note--m{ display:none }

@media (max-width:1080px){
  .est{ grid-template-columns:1fr }
  .est-steps{ padding-bottom:1rem }
  .est-note--m{ display:block; margin-top:.5rem }
  /* slim sticky bar: the range and one button, nothing else competing for
     the screen the client is trying to tap */
  .est-panel{ position:sticky; top:auto; bottom:0; z-index:50; margin-inline:calc(var(--gut) * -1) }
  .est-card{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:.1rem .9rem;
    padding:.85rem var(--gut); background:rgba(8,9,13,.93); backdrop-filter:blur(16px);
    box-shadow:0 -1px 0 var(--line-2);
  }
  .est-card .meta{ grid-column:1; grid-row:1 }
  .est-figure{ grid-column:1; grid-row:2; margin-top:.1rem; font-size:1.15rem }
  .est-figure.idle{ font-size:.8125rem }
  .est-card .est-summary{ display:none }
  .est-card .est-note{ display:none }
  .est-card .btn{ grid-column:2; grid-row:1 / span 2; width:auto; margin:0; padding:.9rem 1rem; white-space:nowrap }
}
@media (max-width:560px){
  .est-opts{ grid-template-columns:1fr }
}

/* ------------------------------------------- WORK · paging and filtering */
.scard.over{ display:none }
.pcard.out,.scard.out{ display:none }
.more{
  margin-top:1.4rem; width:100%; padding:1.05rem 1rem;
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:color .4s, background .4s, box-shadow .4s;
}
.more:hover{ color:var(--ink); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper) }
.filter-chip{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; justify-content:space-between;
  padding:.9rem 1.1rem; margin-bottom:1.2rem; background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-2);
}
.filter-clear{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--glass) }
.filter-clear:hover{ color:var(--paper) }
.cat.on{ background:var(--ink-2) }
.cat.on::before{ transform:scaleY(1) }

/* ------------------------------------------------- WORK PAGE · filter row */
.cats--inline{
  display:flex; flex-wrap:wrap; gap:.5rem; border:0; margin-bottom:clamp(1.4rem,2.6vw,2.2rem);
}
.cats--inline .cat{
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1rem;
  border:0; box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-2);
}
.cats--inline .cat::before{ content:none }
.cats--inline .cat:hover{ padding-inline:1rem; box-shadow:inset 0 0 0 1px var(--line-2); background:var(--ink-2) }
.cats--inline .cat.on{ color:var(--ink); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper) }
.cats--inline .cat-n,.cats--inline .cat-blurb,.cats--inline .cat-c .ar{ display:none }
.cats--inline .cat-txt{ display:inline }
.cats--inline .cat-name{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:500 }
.cats--inline .cat-c{ color:inherit; opacity:.6; font-size:var(--t-micro) }
.cats--inline .cat[data-empty="1"]{ display:none }

/* home page: the split is a doorway, not the archive */
.work-all{ margin-top:clamp(1.6rem,3vw,2.4rem) }


/* ============================================ GOOD · FAST · CHEAP ========
   Everything is legible at rest, as in the classic diagram. Interaction is
   emphasis, not revelation: picking two brightens that pair and dims the
   rest. All type is sized in container units, so a label can never outgrow
   the region it sits in — the diagram and its words scale together. */
:root{
  --v-good:  #7fa39c;
  --v-cheap: #8c9ac2;
  --v-fast:  #c2a173;
}
.real{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center }
.real-note{ margin-top:clamp(1.4rem,2.4vw,2rem); font-size:var(--t-sm);
  color:var(--paper-3); max-width:42ch; line-height:1.65 }
.real-state{
  margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--glass);
  min-height:1.2em; transition:color .5s var(--ease);
}

.venn{ position:relative; width:100%; max-width:620px; margin-inline:auto;
  container-type:inline-size }
.venn svg{ width:100%; height:auto; overflow:visible }

.v-ring{ fill:none; stroke-width:1.25; transition:stroke .55s var(--ease), opacity .55s var(--ease) }
.v-ring[data-ring="good"]{  stroke:color-mix(in srgb, var(--v-good) 45%, transparent) }
.v-ring[data-ring="cheap"]{ stroke:color-mix(in srgb, var(--v-cheap) 45%, transparent) }
.v-ring[data-ring="fast"]{  stroke:color-mix(in srgb, var(--v-fast) 45%, transparent) }
.v-ring[data-ring="good"].on{  stroke:var(--v-good) }
.v-ring[data-ring="cheap"].on{ stroke:var(--v-cheap) }
.v-ring[data-ring="fast"].on{  stroke:var(--v-fast) }
.v-ring.dim{ opacity:.3 }

.v-fill circle{ opacity:.11; transition:opacity .55s var(--ease) }
.v-fill[data-region="good"] circle{  fill:var(--v-good) }
.v-fill[data-region="cheap"] circle{ fill:var(--v-cheap) }
.v-fill[data-region="fast"] circle{  fill:var(--v-fast) }
.v-fill.on circle{ opacity:.24 }
.v-fill.dim circle{ opacity:.05 }

.v-lens circle{ opacity:.20; transition:opacity .6s var(--ease) }
.v-lens[data-region="goodcheap"] circle{ fill:#8397b0 }
.v-lens[data-region="goodfast"] circle{  fill:#a1a288 }
.v-lens[data-region="fastcheap"] circle{ fill:#a79eaa }
.v-lens.on circle{ opacity:.46 }
.v-lens.dim circle{ opacity:.08 }
.v-core circle{ fill:var(--paper); opacity:.74 }
.v-core.on circle{ opacity:.95 }
.v-core.dim circle{ opacity:.30 }

/* the three choices are the labels themselves — one target, mouse or thumb */
.v-pick{
  position:absolute; translate:-50% -50%; z-index:3; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  padding:.35em .5em;
  font-size:5.2cqw; font-weight:600; letter-spacing:-.035em; line-height:1;
  color:var(--paper); background:transparent;
  transition:color .45s var(--ease), transform .45s var(--ease), opacity .45s var(--ease);
}
.v-pick::after{
  content:""; position:absolute; left:50%; translate:-50% 0; bottom:.05em;
  width:0; height:.06em; background:currentColor; transition:width .45s var(--ease);
}
.v-pick:hover::after{ width:calc(100% - 1em) }
.v-pick.on{ transform:scale(1.05) }
.v-pick.on::after{ width:calc(100% - 1em) }
.v-pick[data-pick="good"].on::after{  background:var(--v-good) }
.v-pick[data-pick="cheap"].on::after{ background:var(--v-cheap) }
.v-pick[data-pick="fast"].on::after{  background:var(--v-fast) }
.v-pick.dim{ opacity:.4 }

.v-out{
  position:absolute; translate:-50% -50%; z-index:2; pointer-events:none;
  text-align:center; line-height:1.3;
  font-size:2.1cqw; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); opacity:.62;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.v-out.on{ opacity:1; transform:translate(-50%,-50%) scale(1.06) }
.v-out.dim{ opacity:.22 }
.v-out--all{
  font-family:var(--serif); font-style:italic; text-transform:none;
  font-size:3.5cqw; letter-spacing:-.02em; color:var(--ink); opacity:.92;
}
.v-out--all.dim{ opacity:.45 }

@media (max-width:900px){
  .real{ grid-template-columns:1fr; gap:clamp(1.8rem,4vw,2.6rem) }
  .real-copy{ order:1 } .real-venn{ order:2 }
  .real-state{ margin-top:1.2rem }
}
@media (max-width:560px){
  .why-grid{ grid-template-columns:1fr; gap:0 }
  .why-i{ padding:1.4rem 0; border-top:1px solid var(--line) }
  .why-i:last-child:nth-child(odd){ grid-column:auto }
}
@media (prefers-reduced-motion:reduce){
  .v-ring,.v-fill circle,.v-lens circle,.v-pick,.v-out{ transition:none !important }
}

/* footer navigation — quiet, but real crawlable links to every category */
.ft-nav{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  padding:1.6rem 0 1.9rem; margin-top:.4rem; border-top:1px solid var(--line);
}
.ft-nav a{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-3); transition:color .35s var(--ease);
}
.ft-nav a:hover{ color:var(--paper) }
@media (max-width:720px){ .ft-nav{ gap:.55rem 1.1rem } }

/* ---------------------------------------------- CLIENT ROLL (inside the film)
   The last act of the intro: the film has faded to black, the names assemble
   one after another as you keep scrolling, then the work begins. */
.film-clients{
  position:absolute; inset:0; z-index:4; overflow:hidden;
  display:grid; place-items:center;
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
  --spin:0deg;
}
.film-clients.on{ opacity:1 }

/* The orbit is a square; every dot sits on its right edge and is swung into
   place by a rotation, so one number — the square's size — sets the radius. */
.fc-orbit{
  position:relative;
  width:min(52vw,68vh); aspect-ratio:1;
  display:grid; place-items:center;
}
.fc-path{                                   /* the faint line the names sit on */
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(240,238,234,.14);
}
.fc-core{                                   /* the lit inner circle */
  position:absolute; width:57%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(240,238,234,.66);
  /* A tight shadow, weighted upwards so the crown of the ring reads brightest.
     Blur radius is what a soft shadow costs to re-rasterise, so this is kept
     small and the wider falloff is handed to the gradient below. */
  box-shadow:0 -5px 14px -5px rgba(240,238,234,.55),
             0 0 9px -3px rgba(240,238,234,.30);
}
/* The wide falloff lives in this gradient rather than in a bigger shadow — over
   a canvas that repaints every frame, a soft shadow is re-rasterised every
   frame while a background gradient is painted once. The middle stays black,
   so "Trusted by" sits on nothing. */
.fc-halo{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle closest-side,
    transparent 0 55%,
    rgba(240,238,234,.085) 58%,
    rgba(240,238,234,.026) 66%,
    transparent 76%);
}

.fc-lead{
  position:relative; z-index:2; margin:0;
  font-size:var(--t-micro); letter-spacing:.62em; text-transform:uppercase;
  color:var(--paper); white-space:nowrap; text-indent:.62em;
}

.fc-ring{ position:absolute; inset:0 }

/* Each name owns a full-size square rotated to its own angle. The dot rides
   the right edge; translateX after the rotation slides it along its radius,
   which is what the reveal animates. */
.fc-i{
  position:absolute; inset:0;
  transform:rotate(calc(var(--a) + var(--spin)));
  opacity:0;
  /* Only opacity transitions here. This transform is rewritten every frame by
     the scroll (--spin), and a transform transition chasing a target that
     moves every frame costs about 5fps across sixteen elements. The movement
     in the reveal is carried by the dot's own scale instead, which nothing
     else touches. */
  transition:opacity .5s var(--ease);
}
/* The delay only applies on the way in, so scrolling back up clears the ring
   at once instead of unwinding the sweep. */
.fc-i.on{ opacity:1; transition-delay:var(--d, 0s) }
.fc-dot{
  position:absolute; left:100%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--paper);
  box-shadow:0 0 10px 1px rgba(240,238,234,.5);
  transform:scale(.35);
  transition:transform .55s var(--ease);
}
.fc-i.on .fc-dot{ transform:scale(1); transition-delay:var(--d, 0s) }
/* Counter-rotating by the same angle puts the label back on the screen axis —
   after which its own translate is plain screen space, so the four hangs below
   read exactly as written. */
.fc-t{
  position:absolute; left:100%; top:50%;
  transform-origin:0 0;
  transform:rotate(calc(-1 * (var(--a) + var(--spin)))) translate(var(--ox,14px), var(--oy,-50%));
  width:max-content; max-width:min(21ch,20vw);
  font-size:clamp(.9rem,1.12vw,1.16rem); font-weight:500; letter-spacing:-.015em;
  line-height:1.25; color:var(--paper);
}
.fc-i--r .fc-t{ --ox:15px;              --oy:-50% }
.fc-i--l .fc-t{ --ox:calc(-100% - 15px); --oy:-50%; text-align:right }
.fc-i--t .fc-t{ --ox:-50%; --oy:calc(-100% - 15px); text-align:center }
.fc-i--b .fc-t{ --ox:-50%; --oy:15px;                text-align:center }

/* Under 900px sixteen brand names will not fit around a circle, so they stack
   down the middle over the same glow.
   The list of sixteen is taller than the square the ring lives in, so on a
   phone the square has to go — otherwise the column overflows and the top
   names are clipped by the section's overflow:hidden. Height comes from the
   content and the parent's place-items:center does the rest, which is what
   gives equal space above and below. */
.fc--stack .fc-orbit{
  width:100%; max-width:86vw; aspect-ratio:auto; height:auto;
  display:grid; align-content:center; justify-items:center;
  gap:clamp(.7rem,2vh,1.3rem); padding-block:clamp(1rem,3vh,2rem);
}
.fc--stack .fc-path{ display:none }
/* No ring on a phone — a hard circle edge slicing through the middle of the
   name list reads as a mistake. The halo alone carries the light. */
.fc--stack .fc-core{ display:none }
.fc--stack .fc-halo{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:min(130vw,104vh); aspect-ratio:1; inset:auto;
  background:radial-gradient(circle closest-side,
    rgba(240,238,234,.07) 0%, rgba(240,238,234,.03) 46%, transparent 76%);
}
.fc--stack .fc-ring{
  position:relative; inset:auto; z-index:2;
  display:grid; justify-items:center; gap:clamp(.35rem,1.1vh,.7rem);
}
.fc--stack .fc-i{ position:relative; inset:auto; transform:translateY(10px) }
.fc--stack .fc-i.on{ transform:none; transition-delay:var(--d, 0s) }
.fc--stack .fc-t{
  position:relative; left:auto; top:auto; transform:none; max-width:86vw;
  text-align:center; line-height:1.22;
  /* Sized so all sixteen names plus the lead clear the shortest phone without
     the list ever reaching the top or bottom edge. */
  font-size:clamp(.88rem,3.6vw,1.08rem);
}
.fc--stack .fc-lead{ position:relative; left:auto; top:auto; transform:none }

@media (prefers-reduced-motion:reduce){
  .fc-i{ opacity:1 !important; transform:rotate(var(--a)) !important; transition-delay:0s !important }
  .fc-dot{ transform:scale(1) !important }
  .fc--stack .fc-i{ transform:none !important }
  .film-clients{ opacity:1 !important }
}

/* ---------------------------------------------------------------- ABOUT
   Name and role sit on the portrait itself, over a gradient that keeps the
   type legible without hiding the frame. */
.about-shot{ margin:0; position:relative; isolation:isolate }
.ab-over{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:grid; gap:.35rem;
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.3rem,3.4vw,2.2rem) clamp(1.2rem,3vw,1.9rem);
  background:linear-gradient(to top,
    rgba(5,6,9,.94) 0%, rgba(5,6,9,.82) 28%, rgba(5,6,9,.5) 58%, rgba(5,6,9,0) 100%);
  pointer-events:none;
}
.ab-name{
  font-size:clamp(1.35rem,2.5vw,2rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.05; color:var(--paper);
}
.ab-role{
  font-size:var(--t-micro); letter-spacing:.34em; text-transform:uppercase;
  color:var(--paper-3);
}

/* --------------------------------------------------------------- CLIENTS
   A page of its own: every brand, what was shot, and a door into that work. */
.clp-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:.5rem; margin-top:clamp(2.4rem,5vw,3.6rem);
}
.clp-i{
  background:var(--ink); box-shadow:inset 0 0 0 1px var(--line);
  display:grid; align-content:center; gap:.5rem;
  padding:clamp(1.6rem,3.2vw,2.3rem) clamp(1.3rem,2.6vw,1.9rem);
  min-height:150px; color:var(--paper-2); text-decoration:none;
  transition:background .45s var(--ease), color .45s var(--ease);
}
a.clp-i:hover{ background:var(--ink-2); color:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2) }
.clp-n{ font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:500; letter-spacing:-.025em; line-height:1.15; color:var(--paper) }
.clp-s{ font-size:var(--t-micro); letter-spacing:.28em; text-transform:uppercase; color:var(--paper-3) }
.clp-c{ font-size:.86rem; color:var(--paper-3); letter-spacing:.01em }
a.clp-i:hover .clp-c{ color:var(--paper-2) }
.clp-note{ margin-top:clamp(1.6rem,3vw,2.2rem); color:var(--paper-3) }
@media (max-width:640px){ .clp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .clp-i{ min-height:120px } }

/* ------------------------------------------------------- PAGE TRANSITION
   A short wash between pages, so a click never lands on a white flash. */
#swipe{
  position:fixed; inset:0; z-index:900; background:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .34s var(--ease);
}
#swipe.on{ opacity:1 }
body.page-in main,
body.page-in footer{ animation:pageIn .6s var(--ease) both }
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  #swipe{ display:none }
  body.page-in main, body.page-in footer{ animation:none }
}

/* ============================================================== ESTIMATOR
   Three cards on the page open one full-screen wizard. The cards borrow the
   rule-and-number language of the services list so the two read as the same
   family; the wizard is its own surface, deliberately quieter than the site
   around it so the questions are the only thing competing for attention. */
.qcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.qcards--svc{ margin-top:clamp(2.6rem,5vw,4.5rem) }
.qcard{
  display:grid; align-content:start; gap:.7rem; text-align:left;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  background:var(--ink); color:inherit;
  transition:background .45s var(--ease);
}
.qcard:hover{ background:var(--ink-2) }
.qcard:focus-visible{ outline:1px solid var(--glass); outline-offset:-3px }
.qcard-n{ font-size:var(--t-micro); letter-spacing:.18em; color:var(--paper-4) }
.qcard-h{
  font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:500;
  letter-spacing:-.03em; line-height:1.15;
}
.qcard-p{ font-size:var(--t-sm); line-height:1.6; color:var(--paper-3) }
.qcard-go{
  margin-top:.5rem; display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-2); transition:color .4s var(--ease), gap .4s var(--ease);
}
.qcard:hover .qcard-go{ color:var(--glass); gap:.95rem }

/* The estimate link on each services row. */
.svc-est{
  margin-top:.9rem; display:inline-block;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-3); border-bottom:1px solid var(--line-2); padding-bottom:.25rem;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.svc-est:hover{ color:var(--glass); border-color:var(--glass-dim) }
.svc-est:focus-visible{ outline:1px solid var(--glass); outline-offset:3px }

/* ---- the wizard ---- */
html.qlock, html.qlock body{ overflow:hidden }
.qmodal{
  position:fixed; inset:0; z-index:1200; overflow-y:auto; overscroll-behavior:contain;
  background:var(--ink); opacity:0; transition:opacity .26s var(--ease);
}
.qmodal.on{ opacity:1 }
.qmodal-bar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gut);
  background:var(--ink); border-bottom:1px solid var(--line);
}
.qmodal-mark{ font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--paper-3) }
.qmodal-x{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-2); transition:color .35s var(--ease);
}
.qmodal-x:hover{ color:var(--paper) }
.qwrap{ max-width:860px; margin:0 auto; padding:clamp(2.4rem,5vw,4.2rem) var(--gut) clamp(4rem,8vw,6rem) }

/* The phase rail. It names where you are without pretending the steps are
   evenly weighted — they are not, and a percentage bar would lie about it. */
.qphases{
  display:flex; flex-wrap:wrap; gap:.35rem 1.15rem;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-4);
}
.qphases span.on{ color:var(--paper) }
.qstepno{ margin-top:1.5rem; font-size:var(--t-micro); letter-spacing:.16em; color:var(--paper-2) }
.qstepno em{ font-style:normal; color:var(--paper-4) }

.qtitle{
  margin-top:.9rem; font-size:clamp(1.6rem,3.6vw,2.7rem); font-weight:500;
  letter-spacing:-.04em; line-height:1.08;
}
.qhint{ margin-top:.9rem; font-size:var(--t-sm); line-height:1.6; color:var(--paper-3); max-width:52ch }
.qhint--note{ color:var(--glass) }
.qhint--inline{ margin:0; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase }
.qerr{ margin-top:1rem; font-size:var(--t-xs); color:var(--v-fast) }
.qerr:empty{ display:none }

.qopts{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.65rem;
}
.qopts--wide{ grid-template-columns:1fr }
.qopt{
  display:grid; gap:.35rem; text-align:left;
  padding:1.05rem 1.2rem; border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--line); background:var(--ink-1); color:inherit;
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.qopt:hover{ box-shadow:inset 0 0 0 1px var(--line-2); background:var(--ink-2) }
.qopt.on{ box-shadow:inset 0 0 0 1px var(--glass-dim); background:var(--ink-2) }
.qopt:focus-visible{ outline:1px solid var(--glass); outline-offset:3px }
.qopt .l{ font-size:var(--t-sm); font-weight:500; letter-spacing:-.015em }
.qopt .s{ font-size:var(--t-micro); line-height:1.55; letter-spacing:.02em; color:var(--paper-3) }
.qopts--inc{ list-style:none }
.qopt--inc{
  padding:.85rem 1.2rem; font-size:var(--t-sm); color:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line); background:var(--ink-1); border-radius:2px;
}

.qfields{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;
}
.qf{ display:grid; gap:.5rem }
.qf--full{ grid-column:1/-1 }
.qf span{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3) }
.qf input, .qf select{
  width:100%; padding:.85rem 1rem; border-radius:2px;
  background:var(--ink-1); color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
  font:inherit; font-size:var(--t-sm);
}
.qf select{ appearance:none; background-image:none }
.qf input:focus, .qf select:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--glass-dim) }

.qnav{
  margin-top:clamp(2rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.qnav--center{ justify-content:center }
.qsend{ display:flex; gap:.7rem; flex-wrap:wrap }
.qback{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-3); transition:color .35s var(--ease);
}
.qback:hover{ color:var(--paper) }
.btn--ghost{
  --bg:transparent; --fg:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{ --fg:var(--ink) }

.qpricehead{ margin-top:1.6rem; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-3) }
.qprice{
  margin-top:.7rem; font-size:clamp(2.1rem,6vw,4rem); font-weight:500;
  letter-spacing:-.05em; line-height:1;
}
.qprice--hand{ font-size:clamp(1.4rem,3.4vw,2.2rem); letter-spacing:-.035em; color:var(--paper-2) }
.qsum{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  display:grid; gap:.6rem; border-top:1px solid var(--line); padding-top:1.4rem;
}
.qsum div{ display:flex; justify-content:space-between; gap:1.2rem; font-size:var(--t-micro); letter-spacing:.03em; color:var(--paper-3) }
.qsum div span:last-child{ color:var(--paper-2); text-align:right }
.qdisc{ margin-top:1.3rem; font-size:var(--t-micro); line-height:1.65; color:var(--paper-3); max-width:60ch }
.qdisc--flag{ color:var(--glass) }
.qthanks{ padding-block:clamp(2rem,5vw,4rem) }

@media (max-width:720px){
  .qcards{ grid-template-columns:1fr }
  .qopts{ grid-template-columns:1fr }
  .qfields{ grid-template-columns:1fr }
  .qnav{ gap:1.2rem }
  .qnav .btn{ width:100%; justify-content:center }
  .qsend{ width:100%; flex-direction:column }
  .qsend .btn{ width:100% }
}
@media (prefers-reduced-motion:reduce){
  .qmodal{ transition:none }
}
/* The panel takes focus when the wizard opens so screen readers land inside
   it, but it is not an interactive control — no ring. */
.qwrap:focus{ outline:none }