/* ==========================================================================
   MERIDIAN — "DEEP FIELD"  ·  immersive art direction, 2026-09-06
   Replaces the pale "Operator's Record" surface. Founder rejected: colour,
   pale feel, lack of art, lack of pictures, lack of depth.

   THE COLOUR WORLD
   ----------------
   Mineral graphite from near-black to slate, one warm EMBER accent, and a
   deep teal chapter. The tension is warm light against cold rock — that is
   what makes it read as a lit space rather than a dark background. No purple,
   no cobalt gradient, nothing borrowed from a reference site's brand.

   Colour is used as CHAPTERING, not decoration: void hero -> mineral ->
   bone (light relief) -> teal system -> graphite case study -> ember close.
   Every section a different ground, so scrolling feels like moving rooms.

   THE DEPTH
   ---------
   Real CSS 3D, not a slower background. A fixed stage owns the perspective;
   .df-world is preserve-3d; each layer sits at its own translateZ from
   -2600px to +420px. Scroll drives the WORLD's Z, so the camera physically
   dollies forward past layers — near planes sweep by fast, far ones creep,
   because that is what perspective division does, not because two speeds
   were hand-tuned. Blur and opacity are keyed to depth so out-of-focus
   planes behave like a lens.

   WHY NOT WebGL: everything here is real geometry the browser composites on
   the GPU already, it degrades to a static frame with no shader fallback to
   write, screen readers see ordinary DOM, and the whole scene costs about
   400KB of art instead of a runtime plus textures. WebGL would have bought
   refraction and particles — neither of which a business buyer needs.
   ========================================================================== */

:root{
  --vo-void:#080A0C; --vo-graphite:#11161A; --vo-slate:#1A2329; --vo-mineral:#243138;
  --vo-teal:#0C332F; --vo-teal-lift:#12433D;
  --vo-bone:#EFE9DE; --vo-bone-dim:#D9D2C5; --vo-ink:#0E1216;
  --vo-ember:#E2803A; --vo-ember-hot:#F7A863; --vo-ember-dim:#8A4C22;
  --vo-signal:#3FAE8C;
  --vo-line:rgba(239,233,222,.13); --vo-line-2:rgba(239,233,222,.26);
  --vo-text:#EFE9DE; --vo-text-dim:#A7A79F; --vo-text-mid:#CFC9BE;

  --vo-max:1280px; --vo-gut:clamp(20px,5vw,72px);
  --vo-sec:clamp(96px,11vw,180px);
  --vo-disp:"Fraunces",Georgia,serif; --vo-body:"Inter",system-ui,sans-serif;
  --vo-ease:cubic-bezier(.19,1,.22,1);
}

.vo *{box-sizing:border-box}
.vo{margin:0;background:var(--vo-void);color:var(--vo-text);
  font-family:var(--vo-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.vo img{max-width:100%;height:auto;display:block}
/* .df and .co layers set their own box; height:auto must not fight them. */
.df__layer img,.co__img img{height:100%}
.vo a{color:inherit}
.vo ::selection{background:var(--vo-ember);color:#0B0D10}
.vo-wrap{width:100%;max-width:var(--vo-max);margin-inline:auto;padding-inline:var(--vo-gut)}
.vo-sec{padding-block:var(--vo-sec);position:relative}

/* film grain over the whole document — the single cheapest thing that makes
   flat colour read as photographed rather than filled */
.vo::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── type ─────────────────────────────────────────────────────────────── */
.vo h1,.vo h2,.vo h3{margin:0;font-weight:400}
.vo-disp{font-family:var(--vo-disp);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:430;letter-spacing:-.026em;line-height:1;text-wrap:balance}
.vo-h1{font-size:clamp(2.9rem,1.4rem+6.2vw,6.4rem)}
.vo-h2{font-size:clamp(2.1rem,1.2rem+3.6vw,3.8rem);line-height:1.03}
.vo-h3{font-size:clamp(1.35rem,1.1rem+1.05vw,1.85rem);line-height:1.14;letter-spacing:-.016em}
.vo-lede{font-size:clamp(1.1rem,1rem+.55vw,1.36rem);line-height:1.55;color:var(--vo-text-mid);max-width:60ch}
.vo-body{color:var(--vo-text-dim);max-width:66ch}
.vo-kicker{font-size:11.5px;font-weight:560;letter-spacing:.19em;text-transform:uppercase;
  color:var(--vo-ember);margin:0 0 18px;display:flex;align-items:center;gap:13px}
.vo-kicker::before{content:"";width:26px;height:1px;background:var(--vo-ember);flex:none;opacity:.7}
.vo-kicker--c{justify-content:center}
.vo-num{font-variant-numeric:tabular-nums}
/* oversized chapter numeral, sitting behind the content */
.vo-chapter{position:absolute;right:var(--vo-gut);top:calc(var(--vo-sec) * .42);
  font-family:var(--vo-disp);font-variation-settings:"opsz" 144;font-size:clamp(7rem,16vw,15rem);
  line-height:.8;color:var(--vo-line);pointer-events:none;user-select:none;z-index:0}

/* ── buttons ──────────────────────────────────────────────────────────── */
.vo-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:2px;
  border:1px solid transparent;font-size:15px;font-weight:530;text-decoration:none;
  position:relative;overflow:hidden;transition:transform .5s var(--vo-ease),background .3s,color .3s,border-color .3s}
.vo .vo-btn--p{background:var(--vo-ember);color:#120B05}
.vo-btn--p:hover{background:var(--vo-ember-hot);transform:translateY(-2px)}
.vo-btn--g{border-color:var(--vo-line-2);color:var(--vo-text)}
.vo-btn--g:hover{border-color:var(--vo-ember);color:var(--vo-ember);transform:translateY(-2px)}
.vo-btn--q{padding:0;border:0;background:none;color:var(--vo-ember);font-weight:540;
  border-bottom:1px solid rgba(226,128,58,.42);padding-bottom:3px;border-radius:0}
.vo-btn--q:hover{border-bottom-color:var(--vo-ember)}
.vo a:focus-visible,.vo button:focus-visible{outline:2px solid var(--vo-ember);outline-offset:4px}

/* ── header ───────────────────────────────────────────────────────────── */
.vo-head{position:fixed;inset:0 0 auto;z-index:50;transition:background .45s var(--vo-ease),border-color .45s,backdrop-filter .45s;
  border-bottom:1px solid transparent}
.vo-head[data-solid="true"]{background:rgba(10,13,16,.82);backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:var(--vo-line)}
.vo-head__bar{display:flex;align-items:center;gap:30px;height:76px}
.vo-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.vo-brand svg{width:27px;height:27px;color:var(--vo-ember);flex:none}
.vo-brand__w{font-family:var(--vo-disp);font-variation-settings:"opsz" 144;font-size:20px;letter-spacing:.012em}
.vo-nav{display:flex;gap:32px}
.vo-nav a{font-size:14.5px;color:var(--vo-text-mid);text-decoration:none;position:relative;padding:5px 0}
.vo-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--vo-ember);transition:right .45s var(--vo-ease)}
.vo-nav a:hover::after,.vo-nav a[aria-current="page"]::after{right:0}
.vo-head__cta{display:flex;align-items:center;gap:14px}
.vo-burger{display:none;width:44px;height:42px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--vo-line-2);border-radius:2px}
.vo-burger span{display:block;width:18px;height:1.5px;background:var(--vo-text);position:relative}
.vo-burger span::before,.vo-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--vo-text);transition:transform .3s var(--vo-ease)}
.vo-burger span::before{top:-6px}.vo-burger span::after{top:6px}
.vo-burger[aria-expanded="true"] span{background:transparent}
.vo-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.vo-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ══ THE DEPTH STAGE ═══════════════════════════════════════════════════ */
.df{position:relative;height:215vh}                    /* deliberate, but short enough for a sales visit */
.df__stage{position:sticky;top:0;height:100vh;overflow:hidden;
  perspective:1000px;perspective-origin:50% 46%;
  /* A cool floor under the warm flight path: the two ends of the palette
     meet in the same frame, which is what makes the void read as space
     rather than as an empty black box. */
  background:
    radial-gradient(70% 55% at 14% 88%,rgba(12,51,47,.85) 0%,transparent 68%),
    radial-gradient(58% 46% at 88% 12%,rgba(36,49,56,.7) 0%,transparent 70%),
    var(--vo-void)}
.df__world{position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform;transform:translateZ(var(--dolly,0px))}
.df__layer{position:absolute;inset:-30% -20%;display:grid;place-items:center;
  transform-style:preserve-3d;backface-visibility:hidden}
.df__layer img{width:100%;height:100%;object-fit:cover}
.df__layer--art{opacity:.95}
.df__vig{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%,transparent 34%,rgba(8,10,12,.62) 78%,var(--vo-void) 100%)}
.df__copy{position:absolute;inset:0;z-index:4;display:grid;align-content:center;
  padding-inline:var(--vo-gut);max-width:var(--vo-max);margin-inline:auto;pointer-events:none}
/* A soft scrim under the reading column keeps type legible while planes
   sweep behind it. Left-weighted so the right half of the frame stays open. */
.df__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,10,12,.86) 0%,rgba(8,10,12,.72) 34%,rgba(8,10,12,.18) 62%,transparent 82%)}
.df__copy > *{pointer-events:auto}
.df__scroll{position:absolute;left:50%;bottom:32px;translate:-50% 0;z-index:5;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vo-text-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.df__scroll i{display:block;width:1px;height:44px;background:linear-gradient(var(--vo-ember),transparent);animation:dfline 2.4s var(--vo-ease) infinite}
@keyframes dfline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* the second and third readable beats inside the dolly */
.df__beat{position:absolute;inset:0;z-index:4;display:grid;align-content:center;
  padding-inline:var(--vo-gut);max-width:var(--vo-max);margin-inline:auto;opacity:0}
.df__beat > *{max-width:46ch}
/* The two beats live in different halves of the frame, so even mid-handover
   they never share the same lines. */
.df__beat--a{align-content:start;padding-top:22vh}
.df__beat--b{align-content:end;padding-bottom:20vh}
@media (max-width:820px){.df__beat--a{padding-top:16vh}.df__beat--b{padding-bottom:14vh}}
.df__copy > h1,.df__copy > p,.df__beat > h2,.df__beat > p{text-wrap:balance}

/* an original SVG lattice used as a real mid-depth object */
.df__lattice{width:min(78vw,900px);height:auto;opacity:.85}

/* ── CHAPTER GROUNDS ──────────────────────────────────────────────────── */
.vo-ch--mineral{background:var(--vo-graphite) url("/assets/art/mineral-ground.webp") center/cover;background-blend-mode:luminosity}
.vo-ch--teal{background:var(--vo-teal) url("/assets/art/teal-ground.webp") center/cover}
.vo-ch--bone{background:var(--vo-bone);color:var(--vo-ink)}
.vo-ch--bone .vo-lede{color:#3B3B36}
.vo-ch--bone .vo-body{color:#57564F}
.vo-ch--bone .vo-kicker{color:#9B4F1B}
.vo-ch--bone .vo-kicker::before{background:#9B4F1B}
.vo-ch--bone .vo-chapter{color:#817E75;opacity:1}
.vo-ch--graphite{background:var(--vo-graphite)}
.vo-edge{border-top:1px solid var(--vo-line)}

/* ── chaos → order scene ──────────────────────────────────────────────── */
.co{position:relative;height:185vh}
.co__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.co__img{position:absolute;inset:0}
.co__img img{width:100%;height:100%;object-fit:cover}
.co__img--order{opacity:0}
.co__scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,10,12,.92) 8%,rgba(8,10,12,.42) 58%,rgba(8,10,12,.86) 100%)}
/* Narrow screens put the list directly over the grid, so the scrim has to
   carry the whole column rather than just its left edge. */
@media (max-width:820px){
  .co__scrim{background:linear-gradient(180deg,rgba(8,10,12,.9) 0%,rgba(8,10,12,.82) 46%,rgba(8,10,12,.9) 100%)}
}
.co__copy{position:relative;z-index:2;max-width:var(--vo-max);width:100%;padding-inline:var(--vo-gut)}
.co__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;max-width:52ch}
.co__list li{padding:13px 0;border-top:1px solid var(--vo-line);font-size:16.4px;color:var(--vo-text-mid);
  display:grid;grid-template-columns:22px 1fr;gap:12px;opacity:.32;transition:opacity .6s var(--vo-ease),color .6s}
.co__list li b{color:var(--vo-ember);font-weight:500;font-variant-numeric:tabular-nums;font-size:12px;padding-top:4px}
.co__list li.is-on{opacity:1;color:var(--vo-text)}

/* ── human operating context ───────────────────────────────────────────
   Documentary photography is the quiet counterweight to the drawn system
   worlds. It appears once on the home page, with no carousel or decorative
   motion, so the people and work remain the point. */
.vo-human__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.vo-human__photos{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(10px,1.4vw,20px);align-items:end}
.vo-human__photo{margin:0;overflow:hidden;border:1px solid var(--vo-line-2);background:var(--vo-slate)}
.vo-human__photo:first-child{transform:translateY(clamp(18px,3vw,44px))}
.vo-human__photo picture,.vo-human__photo img{display:block;width:100%;height:100%}
.vo-human__photo img{object-fit:cover;filter:saturate(.72) contrast(1.06);transition:filter .6s var(--vo-ease),transform .8s var(--vo-ease)}
.vo-human__photo:first-child img{aspect-ratio:4/5}
.vo-human__photo:last-child img{aspect-ratio:3/4}
.vo-human__photo:hover img{filter:saturate(.92) contrast(1.02);transform:scale(1.018)}
.vo-human__note{margin-top:24px;padding-top:18px;border-top:1px solid var(--vo-line);font-size:14px;color:var(--vo-text-dim)}
.vo-editorial{margin:30px 0 0;overflow:hidden;border:1px solid var(--vo-line-2);background:var(--vo-slate)}
.vo-editorial picture,.vo-editorial img{display:block;width:100%}
.vo-editorial img{aspect-ratio:16/10;object-fit:cover;filter:saturate(.76) contrast(1.05)}
.vo-editorial figcaption{padding:12px 14px;border-top:1px solid var(--vo-line);font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--vo-text-dim)}

/* ── services as worlds ───────────────────────────────────────────────── */
.sv{border-top:1px solid var(--vo-line)}
.sv__row{display:grid;grid-template-columns:64px minmax(0,.86fr) minmax(0,1.24fr);
  gap:clamp(20px,3vw,52px);padding:clamp(34px,4vw,58px) 0;border-bottom:1px solid var(--vo-line);
  position:relative;isolation:isolate;transition:padding .5s var(--vo-ease)}
.sv__row::before{content:"";position:absolute;inset:0 calc(var(--vo-gut) * -1);z-index:-1;
  background:linear-gradient(90deg,rgba(226,128,58,.10),transparent 62%);
  opacity:0;transition:opacity .55s var(--vo-ease)}
.sv__row:hover::before{opacity:1}
.sv__n{font-size:12px;letter-spacing:.1em;color:var(--vo-ember);padding-top:9px;font-variant-numeric:tabular-nums}
.sv__t{font-family:var(--vo-disp);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-size:clamp(1.5rem,1.1rem+1.4vw,2.25rem);line-height:1.06;letter-spacing:-.02em;
  transition:transform .55s var(--vo-ease)}
.sv__row:hover .sv__t{transform:translateX(8px)}
.sv__d{margin:0 0 16px;color:var(--vo-text-dim);font-size:16px}
.sv__tags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sv__tags li{font-size:12.6px;color:var(--vo-text-mid);border:1px solid var(--vo-line-2);
  border-radius:100px;padding:5px 12px}

/* ── depth cards / image effects ──────────────────────────────────────── */
.vo-plate{position:relative;border:1px solid var(--vo-line);overflow:hidden;background:var(--vo-slate);
  transform-style:preserve-3d;transition:transform .7s var(--vo-ease),border-color .5s}
.vo-plate img{transition:transform 1.1s var(--vo-ease),filter .8s var(--vo-ease);filter:saturate(.72) contrast(1.06)}
.vo-plate:hover{border-color:rgba(226,128,58,.42);transform:translateY(-5px)}
.vo-plate:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.02)}
.vo-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(8,10,12,.55))}
.vo-plate figcaption{position:relative;z-index:2;padding:16px 20px;font-size:13.4px;color:var(--vo-text-dim);
  border-top:1px solid var(--vo-line)}

/* Masked reveal — the one image effect used consistently.
   Implemented as a curtain that slides off rather than a clip-path on the
   element itself: a self-clipped element reports an intersection ratio of 0,
   so the observer that is supposed to reveal it can never see it, and the
   image stays invisible forever. */
.vo-mask{position:relative}
.vo-mask::before{content:"";position:absolute;inset:-1px;z-index:4;pointer-events:none;
  background:var(--vo-graphite);transform-origin:100% 50%;
  transition:transform 1.15s var(--vo-ease)}
.vo-mask.is-in::before{transform:scaleX(0)}
html:not(.js) .vo-mask::before{display:none}

/* ── case study environment ───────────────────────────────────────────── */
.cs2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.cs2__facts{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;border-top:1px solid var(--vo-line)}
.cs2__facts li{padding:15px 0;border-bottom:1px solid var(--vo-line);display:grid;
  grid-template-columns:1fr auto;gap:20px;align-items:baseline;font-size:15px}
.cs2__facts span{color:var(--vo-text-dim)}
.cs2__facts b{font-weight:500;text-align:right;color:var(--vo-text)}
.cs2__note{background:rgba(226,128,58,.07);border:1px solid rgba(226,128,58,.28);padding:clamp(22px,2.6vw,32px)}
.cs2__note p{margin:0;font-size:15.4px;color:var(--vo-text-mid)}

/* ── steps ────────────────────────────────────────────────────────────── */
.st{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--vo-line-2)}
.st > div{padding:28px clamp(14px,1.6vw,26px) 0 0;border-right:1px solid var(--vo-line)}
.st > div:last-child{border-right:0}
.st span{font-size:11.5px;letter-spacing:.15em;color:var(--vo-ember);font-variant-numeric:tabular-nums}
.st h3{font-size:18px;font-weight:550;margin:11px 0 9px;letter-spacing:-.012em}
.st p{margin:0;font-size:14.8px;color:var(--vo-text-dim)}

/* ── footer ───────────────────────────────────────────────────────────── */
.vo-foot{border-top:1px solid var(--vo-line);padding-block:clamp(56px,6vw,88px) 32px;background:var(--vo-void)}
.vo-foot__g{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,52px)}
.vo-foot h4,.vo-foot__label{font-size:11.5px;line-height:1.4;letter-spacing:.17em;text-transform:uppercase;color:var(--vo-text-dim);margin:0 0 16px;font-weight:560}
.vo-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vo-foot a{font-size:14.6px;color:var(--vo-text-mid);text-decoration:none}
.vo-foot a:hover{color:var(--vo-ember)}
.vo-foot__b{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;margin-top:clamp(40px,4vw,64px);
  padding-top:24px;border-top:1px solid var(--vo-line);font-size:13.4px;color:var(--vo-text-dim)}

/* ── motion ───────────────────────────────────────────────────────────── */
.vo-rise{opacity:0;transform:translateY(26px);transition:opacity .95s var(--vo-ease),transform .95s var(--vo-ease)}
.vo-rise.is-in{opacity:1;transform:none}
.vo-rise[data-d="1"]{transition-delay:.09s}.vo-rise[data-d="2"]{transition-delay:.18s}
.vo-rise[data-d="3"]{transition-delay:.27s}
html:not(.js) .vo-rise,html:not(.js) .vo-mask{opacity:1;transform:none;clip-path:none}

@media (prefers-reduced-motion:reduce){
  .vo-rise,.vo-mask{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .vo-mask::before{display:none}
  .df{height:auto}
  .df__stage{position:relative;height:auto;min-height:86vh;perspective:none;display:grid;align-content:center;gap:20px;padding-block:100px 54px}
  .df__world{position:absolute;inset:0;transform:none!important}
  .df__layer{position:absolute;inset:0;transform:none!important;filter:none!important}
  .df__copy,.df__beat{position:relative;inset:auto;opacity:1!important;transform:none!important;padding:32px var(--vo-gut);width:100%}
  .df__copy{padding-top:70px}
  .df__beat--a,.df__beat--b{align-content:unset}
  .co{height:auto}.co__stage{position:relative;height:auto;padding-block:var(--vo-sec)}
  .co__img--order{opacity:1}.co__list li{opacity:1;color:var(--vo-text)}
  .df__scroll,.vo::after{display:none}
  .vo *{animation:none!important;transition-duration:.01ms!important}
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .st{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st > div{border-right:0;border-bottom:1px solid var(--vo-line);padding-bottom:26px}
  .st > div:nth-child(odd){border-right:1px solid var(--vo-line);padding-right:26px}
  .vo-foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .vo-nav,.vo-head__cta .vo-btn{display:none}
  .vo-burger{display:inline-flex}
  .vo-nav[data-open="true"]{display:flex;flex-direction:column;gap:0;position:fixed;inset:76px 0 auto;
    background:var(--vo-void) url("/assets/art/deep-field.webp") center/cover;padding:12px var(--vo-gut) 34px;
    border-bottom:1px solid var(--vo-line)}
  .vo-nav[data-open="true"] a{padding:18px 0;border-bottom:1px solid var(--vo-line);font-size:19px;color:var(--vo-text)}
  .vo-nav[data-open="true"] a::after{display:none}
  .cs2,.sv__row{grid-template-columns:1fr}
  .sv__row{grid-template-columns:46px 1fr}
  .sv__row > div:last-child{grid-column:2}
  .sv__d{margin-top:12px}
  /* mobile keeps the dolly but with a shorter throw and fewer planes */
  .df{height:195vh}
  .df__stage{perspective:760px}
  .df__layer[data-mobile="off"]{display:none}
  .vo-chapter{font-size:6rem;top:auto;bottom:8px;opacity:.6}
  .vo-human__grid{grid-template-columns:1fr}
  .vo-human__photos{order:2;max-width:680px}
}
@media (max-width:720px){
  /* Editorial splits use inline ratios on wide screens; phone layouts need a
     single reading column regardless of those page-specific proportions. */
  .vo-sec [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .vo-sec [style*="align-items:end"]{align-items:start!important}
}
@media (max-width:560px){
  .df{height:180vh}
  .co{height:165vh}
  .vo-btn{width:100%;justify-content:center}
  .vo-btn--q{width:auto}
  .cs2__facts li{grid-template-columns:1fr;gap:3px}
  .cs2__facts b{text-align:left}
  .vo-foot__g{grid-template-columns:1fr}
  .vo-human__photos{grid-template-columns:.82fr 1.18fr}
  .st{grid-template-columns:1fr}
  .st > div,.st > div:nth-child(odd){border-right:0;padding-right:0}
}