/* Worldgence — marketing site
   Palette, film stage, haze, sections, and the architecture map. */

:root{
  --bg:#070907;
  --bg-2:#0a0d0b;
  --ink:#F4F1EA;
  --ink-2:rgba(244,241,234,.66);
  --ink-3:rgba(244,241,234,.42);
  --ink-4:rgba(244,241,234,.24);
  --line:rgba(244,241,234,.10);
  --line-2:rgba(244,241,234,.06);
  --accent:#C3D488;
  --accent-2:#A8C46B;
  --glow:rgba(195,212,136,.55);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(22px,5vw,64px);
  /* viewport-fit=cover is on, so every fixed edge has to clear the notch,
     the Dynamic Island and the home indicator itself. */
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --pad-l:calc(var(--pad) + var(--sa-l));
  --pad-r:calc(var(--pad) + var(--sa-r));
}

*{box-sizing:border-box}
/* No `scroll-behavior:smooth` here on purpose. A smooth anchor jump animates
   through every intermediate scroll position, which on this page means
   scrubbing — and therefore downloading — the whole film on the way past.
   app.js smooths short hops and jumps long ones. */
html,body{margin:0;padding:0;background:var(--bg)}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family:var(--sans);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
a{color:var(--ink);text-decoration:none}
::selection{background:rgba(195,212,136,.26)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
code{font-family:var(--mono);font-size:.92em;color:var(--accent)}
em{font-style:italic;color:rgba(244,241,234,.82)}

@keyframes cue{0%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:.30}100%{transform:translateY(0);opacity:.85}}
@keyframes drift-a{0%{transform:translate3d(-6%,4%,0) scale(1)}50%{transform:translate3d(8%,-5%,0) scale(1.16)}100%{transform:translate3d(-6%,4%,0) scale(1)}}
@keyframes drift-b{0%{transform:translate3d(6%,-3%,0) scale(1.1)}50%{transform:translate3d(-9%,6%,0) scale(.94)}100%{transform:translate3d(6%,-3%,0) scale(1.1)}}
@keyframes drift-c{0%{transform:translate3d(0,6%,0) scale(.96)}50%{transform:translate3d(5%,-7%,0) scale(1.2)}100%{transform:translate3d(0,6%,0) scale(.96)}}
@keyframes dashrun{to{stroke-dashoffset:-320}}

/* ─────────────────────────  FILM STAGE  ───────────────────────── */

/* JS sets the real runway in px off a locked viewport height; this is the
   pre-script value and the graceful no-JS one. */
.film{position:relative;width:100%;height:100svh;z-index:0}
.stage{position:fixed;inset:0;overflow:hidden;background:var(--bg);z-index:0}
.stage img,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video{opacity:0;will-change:opacity,filter,transform}
.stage img{object-position:center}

.veil{position:absolute;inset:-8%;pointer-events:none;opacity:0;transform:translateZ(0);
 backdrop-filter:blur(7px) saturate(.82) contrast(.98);-webkit-backdrop-filter:blur(7px) saturate(.82) contrast(.98);
 background:linear-gradient(180deg,rgba(146,152,150,.13),rgba(120,126,124,.17));
 -webkit-mask-image:radial-gradient(85% 85% at 50% 45%,#000 55%,rgba(0,0,0,.72) 82%,transparent 100%);
 mask-image:radial-gradient(85% 85% at 50% 45%,#000 55%,rgba(0,0,0,.72) 82%,transparent 100%)}
.veil2{position:absolute;inset:-10%;pointer-events:none;opacity:0;filter:blur(30px);mix-blend-mode:luminosity;
 background:radial-gradient(65% 60% at 50% 40%,rgba(198,203,200,.10),rgba(160,166,163,.04) 70%,rgba(140,146,143,0) 100%)}

/* soft smoke — drifting depth of field, no filter cost */
.smoke{position:absolute;inset:-25%;pointer-events:none;mix-blend-mode:screen;opacity:.62;z-index:3}
.smoke i{position:absolute;display:block;border-radius:50%;will-change:transform}
.smoke i:nth-child(1){left:-10%;top:-6%;width:78vw;height:78vw;animation:drift-a 64s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(206,216,196,.085),rgba(206,216,196,.03) 42%,rgba(206,216,196,0) 68%)}
.smoke i:nth-child(2){right:-16%;top:8%;width:66vw;height:66vw;animation:drift-b 82s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(186,204,168,.075),rgba(186,204,168,.025) 44%,rgba(186,204,168,0) 70%)}
.smoke i:nth-child(3){left:14%;bottom:-24%;width:92vw;height:70vw;animation:drift-c 96s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(222,228,214,.07),rgba(222,228,214,.022) 40%,rgba(222,228,214,0) 66%)}
.smoke i:nth-child(4){left:32%;top:22%;width:52vw;height:52vw;animation:drift-b 58s ease-in-out infinite reverse;
 background:radial-gradient(circle at 50% 50%,rgba(196,212,180,.055),rgba(196,212,180,0) 62%)}

/* the dark overlay — a little, not a lot */
.tint{position:absolute;inset:0;pointer-events:none;z-index:4;
 background:linear-gradient(180deg,rgba(4,7,5,.34) 0%,rgba(4,7,5,.20) 38%,rgba(4,7,5,.26) 66%,rgba(4,7,5,.46) 100%)}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(122% 92% at 50% 45%,rgba(0,0,0,0) 38%,rgba(3,5,4,.50) 100%)}
.edge-top{position:absolute;top:0;left:0;right:0;height:280px;pointer-events:none;z-index:6;background:linear-gradient(180deg,rgba(4,7,6,.58),rgba(4,7,6,.24) 46%,rgba(4,7,6,0))}
.edge-bottom{position:absolute;bottom:0;left:0;right:0;height:320px;pointer-events:none;z-index:6;background:linear-gradient(0deg,rgba(4,7,6,.74),rgba(4,7,6,.30) 48%,rgba(4,7,6,0))}
.grain{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.06;mix-blend-mode:overlay;background-size:160px 160px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ─────────────────────────  NAV  ───────────────────────── */

.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;
 padding:calc(22px + var(--sa-t)) var(--pad-r) 22px var(--pad-l);opacity:0;pointer-events:none;
 border-bottom:1px solid rgba(244,241,234,0);
 transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease,padding .5s ease,opacity .6s ease}
.nav.is-on{pointer-events:auto}
/* The chrome is invisible on the opening frame, so a keyboard user would be
   tabbing into nothing. Focus brings it back. */
.nav:focus-within{opacity:1 !important;pointer-events:auto}
.nav.is-solid{background:rgba(7,9,7,.55);border-bottom-color:rgba(244,241,234,.09);
 padding:calc(15px + var(--sa-t)) var(--pad-r) 15px var(--pad-l);
 backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1)}
.brand{font-size:12.5px;font-weight:700;letter-spacing:.30em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);flex:1 1 auto;justify-content:center;min-width:0}
.nav-links a,.cta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav-links a{color:var(--ink-2);transition:color .3s ease}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:0 0 auto}
.cta{color:var(--ink);padding:11px 20px;border:1px solid rgba(244,241,234,.30);border-radius:999px;background:rgba(244,241,234,.06);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.cta:hover{background:var(--accent);color:#101408;border-color:var(--accent);box-shadow:0 0 28px rgba(195,212,136,.28)}

/* ─────────────────────────  FILM CHROME  ───────────────────────── */


.seq{position:fixed;right:var(--pad-r);top:50%;transform:translateY(-50%);z-index:35;display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .5s ease}
.seq-counter{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);writing-mode:vertical-rl}
.seq-track{position:relative;width:1px;height:210px;background:rgba(244,241,234,.20)}
.seq-fill{position:absolute;top:0;left:0;width:1px;height:0;background:var(--accent)}

/* The caption block used to sit on the left of this row, which is what put the
   scroll cue in the middle of it. With the caption gone the cue would slide to
   the left edge, so the row grows a phantom of exactly the width of .foot-end —
   the two ends now balance and the cue is centred on the page rather than
   centred on whatever happens to be beside it. */
.filmfoot::before{content:"";flex:0 0 200px}
.filmfoot{position:fixed;left:0;right:0;bottom:0;z-index:38;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
 padding:0 var(--pad-r) calc(30px + var(--sa-b)) var(--pad-l);pointer-events:none}
.filmfoot.is-gone{visibility:hidden}
.filmfoot:focus-within{opacity:1 !important;visibility:visible}
.cue{display:flex;flex-direction:column;align-items:center;gap:9px;padding-bottom:2px;transition:opacity .5s ease}
.cue span{display:block;width:1px;height:26px;background:linear-gradient(180deg,rgba(244,241,234,.7),rgba(244,241,234,0));animation:cue 2.4s ease-in-out infinite}
.foot-end{min-width:200px;display:flex;justify-content:flex-end;align-items:flex-end}
.skip{pointer-events:auto;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--ink-2);background:rgba(7,9,7,.34);border:1px solid rgba(244,241,234,.20);border-radius:999px;
 min-height:44px;padding:0 20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 transition:color .3s ease,border-color .3s ease,background .3s ease}
.skip:active{background:rgba(244,241,234,.14);color:var(--ink)}

/* ─────────────────────────  CONTENT SHELL  ───────────────────────── */

.content{position:relative;z-index:50}
.dissolve{height:78svh;background:linear-gradient(180deg,rgba(7,9,7,0) 0%,rgba(7,9,7,.28) 34%,rgba(7,9,7,.72) 68%,var(--bg) 100%)}
.sheet{position:relative;background:var(--bg);overflow:hidden}
.sheet-haze{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.9}
.sheet-haze i{position:absolute;display:block;border-radius:50%;will-change:transform}
.sheet-haze i:nth-child(1){left:-18%;top:1%;width:76vw;height:76vw;animation:drift-a 90s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(150,178,132,.10),rgba(150,178,132,.03) 38%,rgba(150,178,132,0) 66%)}
.sheet-haze i:nth-child(2){right:-22%;top:23%;width:70vw;height:70vw;animation:drift-b 106s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(198,210,186,.078),rgba(198,210,186,.024) 40%,rgba(198,210,186,0) 68%)}
.sheet-haze i:nth-child(3){left:6%;top:51%;width:84vw;height:64vw;animation:drift-c 118s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(160,186,140,.085),rgba(160,186,140,.026) 38%,rgba(160,186,140,0) 64%)}
.sheet-haze i:nth-child(4){right:-10%;top:73%;width:64vw;height:64vw;animation:drift-a 84s ease-in-out infinite reverse;
 background:radial-gradient(circle at 50% 50%,rgba(190,206,172,.07),rgba(190,206,172,.02) 40%,rgba(190,206,172,0) 68%)}
.sheet-haze i:nth-child(5){left:-6%;bottom:-8%;width:78vw;height:60vw;animation:drift-b 130s ease-in-out infinite;
 background:radial-gradient(circle at 50% 50%,rgba(176,196,158,.065),rgba(176,196,158,.02) 38%,rgba(176,196,158,0) 66%)}
.sheet-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;background-size:170px 170px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='170' height='170' filter='url(%23m)'/></svg>")}

.sec{position:relative;z-index:2;padding:clamp(92px,13vh,176px) 0;scroll-margin-top:86px}
.sec-open{padding-top:clamp(40px,7vh,90px)}
.sec+.sec{border-top:1px solid var(--line-2)}
.sec-close{padding-bottom:clamp(110px,15vh,200px)}
.wrap{width:100%;max-width:calc(1180px + var(--pad-l) + var(--pad-r));margin:0 auto;padding-left:var(--pad-l);padding-right:var(--pad-r)}
.wrap-wide{max-width:calc(1420px + var(--pad-l) + var(--pad-r))}

/* type */
.kicker{margin:0 0 26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
 display:flex;align-items:center;gap:14px}
.kicker::before{content:"";display:block;width:34px;height:1px;background:var(--accent);opacity:.55;flex:0 0 auto}
.display{margin:0 0 30px;font-size:clamp(34px,5.6vw,74px);font-weight:300;line-height:1.02;letter-spacing:-.026em}
.h2{margin:0 0 30px;font-size:clamp(28px,4.2vw,54px);font-weight:300;line-height:1.08;letter-spacing:-.022em}
.lead{margin:0 0 22px;max-width:66ch;font-size:clamp(16px,1.25vw,19px);line-height:1.72;color:var(--ink-2);font-weight:400}
.body{margin:0 0 20px;max-width:62ch;font-size:15.5px;line-height:1.78;color:var(--ink-2)}
.body strong{color:var(--ink);font-weight:600}

.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,84px);align-items:start}
.split-tight{margin-top:clamp(44px,6vw,80px);padding-top:clamp(34px,5vw,58px);border-top:1px solid var(--line-2)}
.split-l .kicker{margin-bottom:18px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin:clamp(44px,6vw,72px) 0 clamp(36px,5vw,54px);
 padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:12px}
.stat-n{font-size:clamp(30px,3.6vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat-c{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;max-width:26ch}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,46px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;
 text-transform:uppercase;padding:15px 30px;border-radius:999px;border:1px solid transparent;transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.btn-lg{padding:19px 42px;font-size:12px}
.btn-solid{background:var(--accent);color:#111608;border-color:var(--accent);box-shadow:0 0 0 rgba(195,212,136,0)}
.btn-solid:hover{background:#D8E7A4;border-color:#D8E7A4;box-shadow:0 0 40px rgba(195,212,136,.30);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(244,241,234,.24);color:var(--ink-2);background:rgba(244,241,234,.03)}
.btn-ghost:hover{border-color:rgba(244,241,234,.5);color:var(--ink)}
.btn.full{display:flex;width:100%;margin-top:auto}

/* ticks */
.ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.ticks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
 background:var(--accent);opacity:.85;border-radius:60% 0 60% 0;transform:rotate(45deg)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(44px,6vw,72px);
 background:var(--line-2);border:1px solid var(--line-2)}
.card{background:var(--bg);padding:clamp(26px,3vw,38px);transition:background .5s ease}
.card:hover{background:var(--bg-2)}
.card h3{margin:0 0 14px;font-size:17px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.card p{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink-2)}

/* flow */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,40px);margin-top:clamp(44px,6vw,68px)}
.flow-step{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.flow-step::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--accent)}
.flow-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.flow-step h4{margin:0 0 10px;font-size:16px;font-weight:500;letter-spacing:-.005em}
.flow-step p{margin:0;font-size:14px;line-height:1.68;color:var(--ink-2)}

/* capability grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,3.2vw,48px);margin-top:clamp(44px,6vw,72px)}
.cell{padding-top:20px;border-top:1px solid var(--line)}
.cell-i{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cell p{margin:0;font-size:14.5px;line-height:1.74;color:var(--ink-2)}

/* ─────────────────────────  ARCHITECTURE MAP  ───────────────────────── */

.sec-map{padding-bottom:clamp(80px,10vh,140px)}
.map{margin-top:clamp(36px,5vw,62px);position:relative}
.map-canvas{position:relative;width:100%;height:760px;
 border:1px solid var(--line);border-radius:3px;overflow:hidden;
 background:
  radial-gradient(120% 100% at 18% 50%,rgba(195,212,136,.045),rgba(195,212,136,0) 62%),
  linear-gradient(180deg,rgba(244,241,234,.022),rgba(244,241,234,0) 55%),
  var(--bg-2)}
.map-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(rgba(244,241,234,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.026) 1px,transparent 1px);
 background-size:56px 56px;
 -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 92%);
 mask-image:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 92%)}
.map-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.map-links path{fill:none;stroke:rgba(203,216,166,.26);stroke-width:1;transition:stroke .4s ease,stroke-width .4s ease,opacity .4s ease}
.map-links path.is-dim{opacity:.28}
.map-links path.is-lit{stroke:var(--accent);stroke-width:1.35;stroke-dasharray:5 9;animation:dashrun 9s linear infinite;opacity:1}

.node{position:absolute;display:flex;align-items:center;gap:11px;background:none;border:0;padding:6px 10px 6px 0;margin:0;
 transform:translateY(-50%);cursor:pointer;color:inherit;text-align:left;font-family:inherit;
 transition:opacity .4s ease;z-index:3}
.node.is-dim{opacity:.34}
.node-mark{position:relative;flex:0 0 auto;width:11px;height:11px;border-radius:50%;
 border:1px solid rgba(244,241,234,.42);background:rgba(7,9,7,.9);
 transition:border-color .35s ease,background .35s ease,box-shadow .45s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.node-mark::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:rgba(244,241,234,.30);transition:background .35s ease}
.node-leaf .node-mark{border-radius:62% 0 62% 0;transform:rotate(45deg);width:10px;height:10px;border-color:rgba(195,212,136,.44)}
.node-leaf .node-mark::after{border-radius:60% 0 60% 0;background:rgba(195,212,136,.36)}
.node-root .node-mark{width:15px;height:15px;border-color:var(--accent);background:rgba(195,212,136,.10)}
.node-root .node-mark::after{inset:3.5px;background:var(--accent)}
.node-branch .node-mark{width:12px;height:12px;border-color:rgba(195,212,136,.62)}
.node-branch .node-mark::after{background:rgba(195,212,136,.62)}
.node-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.node-l{font-size:13px;font-weight:500;letter-spacing:-.004em;color:var(--ink-2);white-space:nowrap;transition:color .35s ease}
.node-k{font-family:var(--mono);font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:rgba(244,241,234,.34);white-space:nowrap;transition:color .35s ease}
.node-root .node-l{font-size:16px;font-weight:400;color:var(--ink)}
.node-branch .node-l{font-size:14.5px;color:rgba(244,241,234,.86)}
.node-leaf .node-l{font-size:12.5px}

/* Keyboard focus lights a node everywhere; pointer hover only where a pointer
   can actually leave again — on touch a :hover state sticks after the tap. */
.node:focus-visible .node-mark{border-color:var(--accent);background:rgba(195,212,136,.18);
 box-shadow:0 0 0 4px rgba(195,212,136,.09),0 0 22px 2px var(--glow)}
.node-leaf:focus-visible .node-mark{transform:rotate(45deg) scale(1.28)}
.node:not(.node-leaf):focus-visible .node-mark{transform:scale(1.16)}
.node:focus-visible .node-mark::after{background:var(--accent)}
.node:focus-visible .node-l{color:var(--ink)}
.node:focus-visible .node-k{color:rgba(195,212,136,.75)}
@media (hover:hover) and (pointer:fine){
  .node:hover .node-mark{border-color:var(--accent);background:rgba(195,212,136,.18);
   box-shadow:0 0 0 4px rgba(195,212,136,.09),0 0 22px 2px var(--glow)}
  .node-leaf:hover .node-mark{transform:rotate(45deg) scale(1.28)}
  .node:not(.node-leaf):hover .node-mark{transform:scale(1.16)}
  .node:hover .node-mark::after{background:var(--accent)}
  .node:hover .node-l{color:var(--ink)}
  .node:hover .node-k{color:rgba(195,212,136,.75)}
}
.node:active .node-mark{box-shadow:0 0 0 6px rgba(195,212,136,.14),0 0 26px 3px var(--glow)}
.node.is-open .node-mark{border-color:var(--accent);background:rgba(195,212,136,.22);box-shadow:0 0 0 5px rgba(195,212,136,.10),0 0 30px 3px var(--glow)}
.node.is-open .node-mark::after{background:#EAF3C8}
.node.is-open .node-l{color:var(--ink)}
.node.is-open .node-k{color:var(--accent)}

.map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:16px;
 font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.map-legend span{display:inline-flex;align-items:center;gap:9px}
.lg{width:9px;height:9px;border-radius:50%;border:1px solid rgba(195,212,136,.6);display:block}
.lg-root{background:var(--accent)}
.lg-branch{background:rgba(195,212,136,.55)}
.lg-leaf{border-radius:62% 0 62% 0;transform:rotate(45deg);background:rgba(195,212,136,.3)}
.lg-hint{margin-left:auto;color:var(--ink-4)}

.map-detail{margin-top:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:3px;background:linear-gradient(180deg,rgba(244,241,234,.028),rgba(244,241,234,.008));
 padding:clamp(24px,3vw,40px);min-height:190px}
.detail-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(22px,4vw,64px);
 opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.detail-in.is-in{opacity:1;transform:none}
.detail-path{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px}
.detail-path b{color:var(--accent);font-weight:400}
.detail-title{margin:0 0 12px;font-size:clamp(20px,2.4vw,29px);font-weight:300;letter-spacing:-.018em;line-height:1.12}
.detail-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.detail-body{margin:0;font-size:15px;line-height:1.78;color:var(--ink-2)}
.detail-stat{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--accent);border:1px solid rgba(195,212,136,.28);border-radius:999px;padding:8px 15px;background:rgba(195,212,136,.05)}
.detail-kids{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.detail-kids button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
 background:rgba(244,241,234,.04);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;
 transition:color .3s ease,border-color .3s ease,background .3s ease}
.detail-kids button:hover{color:var(--ink);border-color:rgba(195,212,136,.45);background:rgba(195,212,136,.08)}

/* ─────────────────────────  PRICING  ───────────────────────── */

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(44px,6vw,72px)}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;padding:clamp(28px,3.2vw,44px);
 background:linear-gradient(180deg,rgba(244,241,234,.022),rgba(244,241,234,0));transition:border-color .5s ease,background .5s ease}
.plan:hover{border-color:rgba(244,241,234,.2)}
.plan-hi{border-color:rgba(195,212,136,.34);background:linear-gradient(180deg,rgba(195,212,136,.055),rgba(195,212,136,.008))}
.plan-hi:hover{border-color:rgba(195,212,136,.55)}
.plan header{display:flex;flex-direction:column;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.plan-price{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-.024em;line-height:1.05;display:flex;flex-direction:column;gap:9px}
.plan-per{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.plan-note{margin:20px 0 0;font-size:14px;line-height:1.65;color:var(--ink-3)}
.plan .ticks{margin:22px 0 34px}
.plan .ticks li{font-size:14px}

.faq{margin-top:clamp(50px,6vw,80px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-size:16px;font-weight:400;color:var(--ink);
 transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
 border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);transform:rotate(45deg);transition:transform .35s ease,border-color .3s ease}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq p{margin:0 0 26px;max-width:70ch;font-size:14.5px;line-height:1.76;color:var(--ink-2)}

/* ─────────────────────────  FOOTER  ───────────────────────── */

.foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 clamp(38px,5vw,56px)}
.foot-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:34px}
.foot-brand{display:flex;flex-direction:column;gap:11px;max-width:32ch}
.foot-mark{font-size:12.5px;font-weight:700;letter-spacing:.30em;text-transform:uppercase}
.foot-sub{font-size:13.5px;line-height:1.68;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:color .3s ease}
.foot-links a:hover{color:var(--accent)}
.foot-legal{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);width:100%;
 padding-top:26px;border-top:1px solid var(--line-2)}

/* ─────────────────────────  REVEAL  ───────────────────────── */

.js .reveal{opacity:0;transform:translateY(20px);filter:blur(6px);
 transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s ease}
.js .reveal.in{opacity:1;transform:none;filter:none}

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

@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:26px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav-links{display:none}
  .foot-spacer{display:none}
  .filmfoot{padding:0 var(--pad) 24px}
  .stats{grid-template-columns:1fr;gap:26px}
  .stat{flex-direction:row;align-items:baseline;gap:16px}
  .stat-n{min-width:110px}
  .detail-in{grid-template-columns:1fr;gap:22px}
  .map-legend .lg-hint{margin-left:0;width:100%}
  .map-canvas{height:auto}
  .map-canvas::after{background-size:44px 44px}
  .node{padding-right:4px}
  .node-l{font-size:12px}
  .node-branch .node-l{font-size:13px}
  .node-leaf .node-l{font-size:11.5px}
  .node-root .node-l{font-size:14px}
  .node-k{font-size:8.5px;letter-spacing:.16em}
  .btn{width:100%}
  .actions{gap:12px}
}
@media (max-width:600px){
  .nav{padding:16px var(--pad)}
  .seq{right:14px}
  .seq-track{height:150px}
  .display{font-size:clamp(30px,9vw,44px)}
  .h2{font-size:clamp(26px,7.6vw,38px)}
  .cards{grid-template-columns:1fr}
  .faq summary{font-size:15px}
}

/* ───────────────────  TOUCH: iOS Safari and friends  ─────────────────── */

/* A :hover state that can never be left reads as "stuck selected" after a tap. */
@media (hover:none){
  .nav-links a:hover{color:var(--ink-2)}
  .cta:hover{background:rgba(244,241,234,.06);color:var(--ink);border-color:rgba(244,241,234,.30);box-shadow:none}
  .btn-solid:hover{background:var(--accent);border-color:var(--accent);box-shadow:none;transform:none}
  .btn-ghost:hover{border-color:rgba(244,241,234,.24);color:var(--ink-2)}
  .card:hover{background:var(--bg)}
  .detail-kids button:hover{color:var(--ink-3);border-color:var(--line);background:rgba(244,241,234,.04)}
  .plan:hover{border-color:var(--line)}
  .plan-hi:hover{border-color:rgba(195,212,136,.34)}
  .faq summary:hover{color:var(--ink)}
  .foot-links a:hover{color:var(--ink-3)}
  /* …and touch gets its own feedback instead */
  .cta:active,.btn-ghost:active{background:rgba(244,241,234,.14);border-color:rgba(244,241,234,.5);color:var(--ink)}
  .btn-solid:active{background:#D8E7A4;transform:scale(.985)}
  .detail-kids button:active{border-color:rgba(195,212,136,.45);background:rgba(195,212,136,.10);color:var(--ink)}
  .faq summary:active{color:var(--accent)}
  .foot-links a:active,.nav-links a:active{color:var(--accent)}
}

/* Every target a finger has to hit clears 44px. */
@media (pointer:coarse){
  .cta{min-height:44px;display:inline-flex;align-items:center}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px}
  .node{min-height:44px;padding-right:16px}
  .detail-kids button{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .detail-kids{gap:10px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px}
  .foot-links{gap:2px 24px}
  .faq summary{padding-top:20px;padding-bottom:20px;min-height:44px;display:flex;align-items:center}

  /* iOS pays for every full-screen blend, backdrop-filter and animated layer.
     The haze stays; it just stops being a compositing exercise. */
  .smoke{mix-blend-mode:normal;opacity:.55}
  .smoke i:nth-child(3),.smoke i:nth-child(4){display:none}
  .smoke i{will-change:auto}
  .sheet-haze{mix-blend-mode:normal;opacity:.7}
  .sheet-haze i:nth-child(4),.sheet-haze i:nth-child(5){display:none}
  .sheet-haze i{will-change:auto}
  .sheet-grain{display:none}
  .grain{opacity:.05}
  .veil{backdrop-filter:none;-webkit-backdrop-filter:none;
   background:linear-gradient(180deg,rgba(146,152,150,.20),rgba(120,126,124,.25))}
  .stage video{will-change:opacity}
}

/* ── The film, held upright ──
   The clips are 16:9. Cover-cropping one into a 9:19.5 screen leaves a 26%-wide
   slot down the middle of the shot, which for a flythrough is not the shot. So
   on a portrait phone the film plays as a band instead — and not an arbitrary
   one: `max(66.66vw, 33.333%)` is the algebra of the portrait hero's own sharp
   strip (720 of 2160, covered), so the live frame lands exactly where the still
   frame was. The percentage is of the stage rather than of svh on purpose: a
   fixed element and a small-viewport unit do not always agree in Safari, and
   the band has to track the picture it is standing in, not the chrome.
   The hero never fades, so what the band feathers into is that same picture,
   still there, out of focus. 85% of each frame survives. */
@media (orientation:portrait) and (max-width:820px){
  .stage video{
    margin:auto;
    height:max(66.66vw,33.333%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 19%,#000 81%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 19%,#000 81%,transparent 100%);
  }
}

/* Phone portrait: the film caption, the scroll cue and Skip stop competing
   for one 346px-wide line. */
@media (max-width:600px){
  .filmfoot{flex-direction:column;align-items:flex-start;gap:12px;
   padding-bottom:calc(58px + var(--sa-b))}
  .foot-end{order:-1;align-self:flex-end;min-width:0}
  .cue{position:absolute;left:50%;bottom:calc(20px + var(--sa-b));transform:translateX(-50%);margin:0}
  .skip{font-size:9.5px;padding:0 16px}
}

/* Phone landscape: 390px of height, most of it the film. */
@media (orientation:landscape) and (max-height:540px){
  .nav{padding-top:calc(10px + var(--sa-t));padding-bottom:10px}
  .nav.is-solid{padding-top:calc(8px + var(--sa-t));padding-bottom:8px}
  .seq-track{height:110px}
  .filmfoot{flex-direction:row;align-items:flex-end;padding-bottom:calc(14px + var(--sa-b))}
  .foot-end{order:0;align-self:auto}
  .cue{position:static;transform:none}
  .cue span{height:18px}
  .sec{padding:clamp(56px,12vh,120px) 0}
  .display{font-size:clamp(28px,6vw,40px)}
  .h2{font-size:clamp(24px,5vw,34px)}
}

@media (prefers-reduced-motion:reduce){
  .smoke i,.sheet-haze i{animation:none}
  .cue span{animation:none}
  .map-links path.is-lit{animation:none;stroke-dasharray:none}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
}


/* ═════════════════════════  SPIRIT WISP  ═════════════════════════════ */

/* The creature is drawn on canvas, not in the DOM: one element per wisp,
   whatever the particle count. Everything below is placement and chrome. */

spirit-wisp{display:block;width:100%;height:100%}

@keyframes wisp-a{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(64px,-40px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes wisp-b{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-52px,-26px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes wisp-c{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(46px,30px,0)}100%{transform:translate3d(0,0,0)}}

/* ── depth in the opening frame ── */

/* The frame is one flat photograph, so the depth has to be rebuilt: a masked
   copy of it puts the wordmark and the front conifers back on top, and the
   rays and the wisps go underneath. The mask keeps the letters translucent —
   a glow behind them should still bleed through, dimmed, because that is what
   depth actually looks like. Under the vignette (z5), so the frame's own
   falloff still closes over the whole stack.

   The outer layer owns the one-time entrance; the inner one is what the
   scroll writes to, so a scroll-driven opacity is never fighting a
   two-second transition. */
.frame-depth{position:absolute;inset:0;z-index:5;pointer-events:none;
 animation:depth-in 2s ease 1.15s backwards}
.frame-depth-in{position:absolute;inset:0}
@keyframes depth-in{from{opacity:0}to{opacity:1}}

/* Same box, same cover geometry as the hero image, so the plate lands exactly
   on the pixels it was cut from — and it is the same file, already cached. */
.frame-plate{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;
 -webkit-mask-image:url(assets/landing-mask.png);mask-image:url(assets/landing-mask.png);
 -webkit-mask-size:cover;mask-size:cover;
 -webkit-mask-position:center;mask-position:center;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Rays. The picture already has shafts falling left to right; these are the
   same angle, animated, and they sit *under* the plate — which is the whole
   trick: over a letter the shaft is dimmed to the letter's own translucency,
   in the counter of the O it is not. Gradients on transform, no blur pass —
   the same rule the rest of the haze on this page follows. */
.godrays{position:absolute;inset:0;overflow:hidden}
.godrays i{position:absolute;top:-34%;height:176%;display:block;
 transform-origin:50% 0;will-change:opacity,transform;
 background:linear-gradient(90deg,rgba(232,240,220,0),rgba(232,240,220,.085) 42%,rgba(232,240,220,.085) 58%,rgba(232,240,220,0));
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 58%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 58%,transparent 100%)}
.gr-1{left:2%;width:10%;animation:ray-a 53s ease-in-out infinite}
.gr-2{left:13%;width:5.5%;animation:ray-b 71s ease-in-out infinite}
.gr-3{left:31%;width:12%;animation:ray-a 61s ease-in-out infinite reverse}
.gr-4{left:50%;width:8%;animation:ray-b 83s ease-in-out infinite}
/* Threads the counter of the O in WORLD. Its left is solved at runtime from
   the frame's own cover geometry (wisp-boot.js) rather than pinned to a
   percentage that only lines up at one viewport — the rotation carries the
   shaft right as it falls, so where it has to start depends on how the frame
   is cropped. Brighter than its neighbours because it is read against the dark
   inside of a letter rather than against the forest. */
.gr-o{left:17%;width:6%;animation:ray-o 44s ease-in-out infinite;
 background:linear-gradient(90deg,rgba(236,244,224,0),rgba(236,244,224,.17) 30%,rgba(236,244,224,.17) 70%,rgba(236,244,224,0))}

@keyframes ray-a{0%,100%{opacity:.30;transform:rotate(22deg) translate3d(0,0,0)}
                 50%{opacity:.95;transform:rotate(22deg) translate3d(1.4%,0,0)}}
@keyframes ray-b{0%,100%{opacity:.55;transform:rotate(22deg) translate3d(0,0,0)}
                 50%{opacity:.16;transform:rotate(22deg) translate3d(-1.1%,0,0)}}
/* barely there, and slower than the rest — it should be noticed second */
@keyframes ray-o{0%,100%{opacity:.10;transform:rotate(22deg) scaleX(.86)}
                 50%{opacity:.66;transform:rotate(22deg) scaleX(1.12)}}

/* ── the air between the trees ──
   Above the rays and the wisps, under the plate: the masked copy of the frame
   draws the wordmark and the front conifers back over the smoke, which is what
   puts it *between* the trunks instead of over the picture. The blending is
   done inside the canvas (one stamped sprite, no filter and no blend mode), so
   nothing here asks the compositor for a full-screen pass — the same rule the
   rest of the haze on this page follows. */
.frame-fog{position:absolute;inset:0;width:100%;height:100%;display:block;
 pointer-events:none;opacity:.92}

.hw{position:absolute;will-change:transform}
/* The dodge lives here rather than on .hw: .hw is running the drift keyframe,
   and a CSS animation owns the entire transform property for as long as it is
   on the element — a second translate written to the same node is discarded
   every frame the animation ticks. */
.hw-i{display:block;width:100%;height:100%;will-change:transform}
.hw-1{left:16%;top:22%;width:170px;height:190px;animation:wisp-a 44s ease-in-out infinite}
.hw-2{left:71%;top:30%;width:140px;height:160px;animation:wisp-b 58s ease-in-out infinite}
.hw-3{left:38%;top:58%;width:118px;height:136px;animation:wisp-c 51s ease-in-out infinite}

/* The frame arrives rather than appearing — a slow settle out of a hair over
   1:1. Still nothing written over the wordmark.

   This is a keyframe rather than a transition off a JS-set attribute on
   purpose: the opening frame IS the first screen, and it must not be able to
   stay invisible because a script did not run. It also covers the plate, which
   is what keeps the two locked together through the settle. */
.stage img{animation:frame-in 2.8s cubic-bezier(.2,.7,.2,1) .1s backwards}
@keyframes frame-in{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
/* .stage img covers the plate too, which is what keeps it locked to the
   frame it was cut from all the way through the settle. */

/* A phone in portrait gets a different cut of the frame, and the mask was cut
   from the landscape one — so the plate comes off rather than landing on the
   wrong pixels. The wisps and the rays stay. */
@media (orientation:portrait) and (max-width:820px){
  .frame-plate{display:none}
  .godrays{opacity:.7}
}

/* ── the cursor ── */

/* Set by SpiritWisp.cursor() on its first pointer move, and only on a pointer
   that can leave again. The creature is the cursor, so the native one goes —
   including on the controls, where a stray arrow would otherwise show through. */
html[data-wisp-cursor],
html[data-wisp-cursor] *{cursor:none !important}

/* ═══════════════════════  MOTION, SHARPENED  ═════════════════════════ */

/* Reveals: less blur, a hair of scale, and a curve that settles rather than
   coasts — the same idea, read more clearly. */
.js .reveal{opacity:0;transform:translateY(18px) scale(.994);filter:blur(4px);
 transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.js .reveal.in{opacity:1;transform:none;filter:none}

/* Nav: the link underline is drawn in from the side the pointer came from. */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
 background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
 transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.brand{transition:letter-spacing .5s cubic-bezier(.2,.7,.2,1)}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(60% 140% at 50% 120%,rgba(195,212,136,.35),rgba(195,212,136,0) 70%);
 opacity:0;transition:opacity .45s ease}

@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .brand:hover{letter-spacing:.34em}
  .cta:hover::before{opacity:1}
}

/* The chains draw themselves in once, outward from the core; wisp-boot.js
   clears the inline dash afterwards so `.is-lit` still owns the lit state. */
.map-links path{will-change:stroke-dashoffset}

@media (prefers-reduced-motion:reduce){
  .hw{animation:none}
  .frame-fog{display:none}
  .godrays i{animation:none;opacity:.45}
  .frame-depth{animation:none;opacity:1}
  .stage img{animation:none;opacity:1;transform:none}
  .nav-links a::after{transition:none}
  .map-links path{will-change:auto}
}


/* ─────────────────────────  FILM DEPTH  ─────────────────────────
   The nine arrivals. A plate is the clip's own first frame, masked down to the
   thing in front, laid back over the video so the wisps and the rays have
   something to pass behind. It sits in the same slot as the hero's plate —
   above the film, below the tint — and takes the video's geometry exactly,
   because it has to land on the pixels it was cut from.
   film-depth.js ships with an empty manifest; nothing here renders until a
   still and a mask exist for a clip. */
.film-depth{position:absolute;inset:0;z-index:3;pointer-events:none}
.film-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
 opacity:0;will-change:opacity;
 -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Portrait phones play the film as a centred band off a different crop, which
   no landscape-cut mask registers against. film-depth.js returns before it
   builds anything there; this is the belt to that braces. */
@media (orientation:portrait) and (max-width:820px){ .film-depth{display:none} }
@media (prefers-reduced-motion:reduce){ .film-depth{display:none} }