/* Planet Ü
   Night water, warm bone light, one ember accent. Fraunces for the voice, Inter Tight for everything else.
   The umlaut (two ember dots) and slow orbital rings are the recurring device. Moe is drawn in outline.
   Colors and fonts live in :root below. */
:root{
  --void:#07121A; --void-2:#0A1A23; --petrol:#0E2530; --petrol-2:#143846;
  --bone:#F3ECE0; --bone-2:#E9DFCD; --bone-dim:#B3C3C9; --bone-soft:#D8D2C6; --mist:#D6E0E3; --dim-2:#8EA2A9;
  --ink:#0B1013; --ink-2:#3E4C53; --ink-3:#5A6A72;
  --ember:#F0662E; --ember-soft:#F9A05C; --ember-ink:#B0451A; --on-ember:#180800;
  --teal:#4CC7BC; --violet:#8B6BE0; --blue:#1218C4; --blue-2:#2A31E8;
  --line:rgba(243,236,224,.15); --line-ink:rgba(11,16,19,.14);
  --void-rgb:7,18,26; --petrol2-rgb:20,56,70; --ember-rgb:240,102,46; --ember-soft-rgb:249,160,92; --glow-rgb:240,102,46;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --brand:'Planet U','Fraunces',Georgia,serif;
  --body:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,5vw,64px); --sp:clamp(84px,10vw,144px);
  --e:cubic-bezier(.2,.8,.25,1);
  color-scheme:dark;
}
@font-face{font-family:"Planet U";src:url("fonts/planet-u.woff") format("woff");font-weight:400;font-style:normal;font-display:block}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
[id]{scroll-margin-top:calc(92px + env(safe-area-inset-top,0px))}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:clamp(1rem,.3vw + .95rem,1.07rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ember);color:var(--void)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ember);color:var(--on-ember);padding:.6rem 1rem}
.skip:focus{left:12px;top:12px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.8vw,4.9rem);line-height:1}
h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.05;max-width:21ch}
h3{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.18}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--ember-soft)}
.light h1 em,.light h2 em{color:var(--ember-ink)}
h1 .ln{display:block;overflow:hidden;padding-bottom:.07em}
h1 .ln>span{display:block}
h1.thesis{font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.03em}
.ghost{display:block;font-style:italic;font-weight:300;font-size:.42em;line-height:1.3;letter-spacing:-.005em;color:var(--teal);margin-top:.9em}
/* ---------- the brand hand: the lettering the wordmark is drawn in, used in four places only ----------
   hero "except you.", See/Say/Show/Stand, the depth numerals, and the closing "in you."
   Capitals carry the signature, so it is set in caps; the face has a narrow space, so words get extra room;
   the Y's swash hangs low, so lines that end in it get room below. */
.brand{font-family:var(--brand);font-style:normal;font-weight:400;font-synthesis:none;text-transform:uppercase;letter-spacing:.01em;word-spacing:.34em}
h1 em.brand,h2 em.brand{font-style:normal;font-weight:400;color:var(--ember-soft)}
h1 .ln.wl{overflow:visible;padding-bottom:0}
h1.thesis .brand{display:block;font-size:1.12em;line-height:1.08;letter-spacing:.01em;padding-bottom:.42em;margin-bottom:-.16em}
.final h2 em.brand{display:inline-block;font-size:1.08em;line-height:1.08;word-spacing:.5em;padding-bottom:.4em;margin-bottom:-.08em}
.seq-word .brand{display:inline-block;line-height:1.02;letter-spacing:.01em;padding-bottom:.08em}
/* write-on: the letters appear left to right, the way a pen would make them */
.write{-webkit-mask-image:linear-gradient(90deg,#000 0 46%,transparent 54% 100%);mask-image:linear-gradient(90deg,#000 0 46%,transparent 54% 100%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
.write.armed{-webkit-mask-position:100% 0;mask-position:100% 0}
.write.inked{animation:write 1.9s cubic-bezier(.45,.05,.2,1) both}
h1 .write.inked{animation-delay:2.85s}
@keyframes write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@media(prefers-reduced-motion:reduce){.write,.write.armed{-webkit-mask-image:none;mask-image:none}.write.inked{animation:none}}
.lede{font-size:clamp(1.06rem,.45vw + .98rem,1.26rem);color:var(--bone-dim);max-width:52ch;margin-top:1.4rem}
.plain{color:var(--bone);font-size:1.02rem;max-width:58ch;margin-top:1.4rem;padding-left:1.2rem;border-left:2px solid var(--ember)}
.prose{font-size:clamp(1.04rem,.35vw + .98rem,1.16rem);color:var(--bone-dim);max-width:56ch;margin-top:1.5rem;display:grid;gap:1rem}
.prose b{color:var(--bone);font-weight:500}
.light .prose{color:var(--ink-2)}
.light .prose b{color:var(--ink)}

/* the umlaut kicker: two ember dots, then an italic serif label */
.kicker,.eyebrow{display:flex;align-items:center;gap:.75rem;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1rem,1.4vw,1.16rem);color:var(--ember-soft);margin-bottom:1.2rem}
.kicker::before{content:"";flex:0 0 auto;width:16px;height:5px;background:radial-gradient(circle,var(--ember) 2.4px,transparent 2.7px) 0 0/8px 5px repeat-x}
.light .kicker{color:var(--ember-ink)}
.eyebrow{font-family:var(--body);font-style:normal;font-weight:500;font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mist);margin-bottom:1.8rem}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:0 0 7px}
.tag{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:2.1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:1rem 1.9rem;border-radius:999px;border:1px solid var(--ember);
  background:var(--ember);color:var(--on-ember);font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1.1;cursor:pointer;
  transition:transform .3s var(--e),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px);background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn-ghost{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:var(--mist);font-weight:500;font-size:.96rem;
  border-bottom:1px solid rgba(214,224,227,.3);padding-bottom:2px;transition:color .3s,border-color .3s}
.btn-ghost:hover{color:var(--ember-soft);border-color:var(--ember-soft)}
button.btn-ghost{background:none;border:0;border-bottom:1px solid rgba(214,224,227,.3);border-radius:0;cursor:pointer;font:inherit;font-weight:500}
.light .btn-ghost{color:var(--ink-2);border-color:rgba(11,16,19,.25)}
.go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--ember-soft);font-weight:500;
  border-bottom:1px solid rgba(var(--ember-soft-rgb),.4);padding-bottom:2px;transition:border-color .3s}
.go:hover{border-color:var(--ember-soft)}

/* ---------- header ---------- */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ember);z-index:95}
header.site{position:fixed;inset:0 0 auto;z-index:80;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s}
header.site.scrolled{background:rgba(var(--void-rgb),.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* a backdrop-filter traps fixed children, so the full-screen menu needs it off while open */
header.site.menu-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-bottom-color:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:76px}
.nav>a:first-child{position:relative;z-index:86;flex:0 0 auto}
.logo{height:38px;width:auto}
.links{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2rem)}
.links a{position:relative;font-size:.88rem;font-weight:500;color:var(--mist);padding-block:.3rem;transition:color .3s}
.links a:hover,.links a[aria-current="page"]{color:var(--bone)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:4px;transform:translateX(-50%);
  background:radial-gradient(circle,var(--ember) 1.9px,transparent 2.1px) 0 0/6px 4px repeat-x}
.links .m-only{display:none}
.nav-cta{padding:.68rem 1.25rem;border-radius:999px;background:var(--ember);color:var(--on-ember);font-size:.86rem;font-weight:600;white-space:nowrap;
  transition:background .3s,color .3s}
.nav-cta:hover{background:var(--bone);color:var(--ink)}
.burger{display:none;position:relative;z-index:86;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,236,224,.3);
  background:rgba(var(--void-rgb),.55);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:16px;height:1.5px;background:var(--bone);transition:transform .35s var(--e)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:980px){
  .links{position:fixed;inset:0;z-index:85;width:100%;height:100dvh;flex-direction:column;justify-content:center;gap:1.2rem;
    padding:calc(5.5rem + env(safe-area-inset-top,0px)) 1.5rem 3rem;overflow-y:auto;background:var(--void);
    transform:translateY(-101%);transition:transform .55s var(--e)}
  .links.open{transform:none}
  .links a{font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,6.6vw,2.15rem);color:var(--bone)}
  .links a[aria-current="page"]::after{bottom:-2px}
  .links .m-only{display:inline-flex}
  .links .m-cta{margin-top:1rem;font-family:var(--body);font-size:1rem;font-weight:600;background:var(--ember);color:var(--on-ember);
    padding:1rem 2rem;border-radius:999px}
  .links .m-moe{margin-top:.6rem;opacity:.85}
  .nav-cta{display:none}
  .burger{display:flex}
}

/* ---------- rings ---------- */
.rings{position:absolute;pointer-events:none;opacity:.55;z-index:0}
.rings svg{width:100%;height:100%;overflow:visible}
.rings circle{fill:none;stroke:rgba(243,236,224,.24);stroke-width:.3}
.spin{transform-origin:50% 50%;animation:spin 220s linear infinite}
.spin.rev{animation-duration:140s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sections ---------- */
section,.block{position:relative;padding-block:var(--sp)}
.dark{background:var(--void)}
.alt{background:var(--void-2)}
.petrol{background:linear-gradient(180deg,var(--petrol),var(--void-2))}
.light{background:var(--bone);color:var(--ink)}
.light .lede{color:var(--ink-2)}
.blue{background:linear-gradient(135deg,var(--blue),var(--blue-2) 58%,#0E13A6);color:var(--bone)}
.tight{padding-block:clamp(56px,7vw,96px)}
.hero,.page-hero{overflow:hidden;padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(56px,9vw,110px));
  background:radial-gradient(110% 80% at 82% 6%,rgba(var(--petrol2-rgb),.85),rgba(var(--void-rgb),0) 60%),
             radial-gradient(70% 60% at 0% 100%,rgba(var(--glow-rgb),.1),rgba(var(--void-rgb),0) 60%),var(--void)}
.hero{padding-bottom:clamp(48px,6vw,80px)}
.page-hero{padding-bottom:clamp(64px,8vw,104px)}
.hero .rings,.page-hero .rings{top:30%;left:78%;width:min(1100px,150vw);aspect-ratio:1;transform:translate(-50%,-50%)}
.hero .wrap,.page-hero .wrap{position:relative;z-index:2}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(36px,6vw,88px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- plates (photographs with a caption) ---------- */
figure{margin:0}
.plate figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem;font-size:.72rem;letter-spacing:.07em;color:var(--dim-2)}
.plate figcaption b{font-weight:500;letter-spacing:.13em;color:var(--mist)}
.light .plate figcaption{color:var(--ink-3)}
.light .plate figcaption b{color:var(--ink-2)}
.frame{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--petrol)}
.frame img{position:relative;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;will-change:transform}
.split .plate{max-width:460px;justify-self:end;width:100%}
@media(max-width:860px){.split .plate{justify-self:start}}

/* full-bleed photo band; the photo eases in as it enters */
.band{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,var(--petrol),var(--void));display:flex;justify-content:center;
  border-block:1px solid var(--line)}
.band img{width:100%;max-height:min(80vh,880px);object-fit:contain;transform:scale(var(--z,1));transition:transform .2s linear;will-change:transform}
.band.tall img{max-height:min(90vh,1000px)}
.band.cover img{object-fit:cover;max-height:none;height:min(66vh,660px)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--void-rgb),.42),rgba(var(--void-rgb),0) 30%,rgba(var(--void-rgb),0) 62%,rgba(var(--void-rgb),.66))}
.band .badge{position:absolute;z-index:2;left:max(var(--gut),env(safe-area-inset-left,0px));bottom:clamp(18px,3vw,30px);
  display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;border-radius:999px;font-size:.74rem;letter-spacing:.06em;color:var(--bone);
  background:rgba(var(--void-rgb),.62);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.band .badge b{font-weight:500;letter-spacing:.13em}
.band .badge .live{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.hero-photo{border-top:0}
.hero-photo img{max-height:min(900px,86svh)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.duo .cell{overflow:hidden;aspect-ratio:3/2;background:var(--petrol)}
.duo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.2s var(--e)}
.duo .cell:hover img{transform:scale(1.04)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* ---------- big quotes ---------- */
.quote{padding-block:clamp(72px,9vw,124px);background:var(--void)}
.quote.alt{background:var(--void-2)}
.bq{max-width:860px;margin:0 auto;text-align:center}
.bq .mark{display:block;width:24px;height:7px;margin:0 auto 1.6rem;background:radial-gradient(circle,var(--ember) 3.2px,transparent 3.5px) 0 0/12px 7px repeat-x}
.bq p{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.45rem);line-height:1.26;letter-spacing:-.012em;max-width:30ch;margin:0 auto}
.bq .attrib{display:block;margin-top:1.5rem;font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.blue .bq .attrib{color:var(--ember-soft)}

/* ---------- Icon Method: orbit on desktop, list everywhere it can't fit ---------- */
.method{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,76px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.stage{position:relative;width:min(420px,calc(100% - 96px));aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.stage .ring{position:absolute;border:1px solid rgba(179,195,201,.24);border-radius:50%}
.stage .r1{inset:0}.stage .r2{inset:20%;border-color:rgba(179,195,201,.13)}.stage .r3{inset:37%;border:1px dashed rgba(240,102,46,.38)}
.nodes{position:absolute;inset:0;transition:transform 1s var(--e)}
.nd{position:absolute;width:0;height:0}
.nd button{position:absolute;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;cursor:pointer;
  background:var(--void);border:1px solid rgba(179,195,201,.42);color:var(--mist);font-family:var(--display);font-size:1.1rem;line-height:1;
  transition:background .4s,border-color .4s,color .4s,transform 1s var(--e)}
.nd button small{display:block;font-family:var(--body);font-size:.58rem;letter-spacing:.14em;color:var(--dim-2);margin-bottom:.3rem}
.nd button:hover{border-color:var(--bone);color:var(--bone)}
.nd.on button{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
.nd.on button small{color:var(--on-ember)}
.core{position:relative;z-index:2;width:30%;aspect-ratio:1;border-radius:50%;background:var(--void);border:1px solid rgba(240,102,46,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.core b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1}
.core i{font-style:normal;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.panel{min-height:360px}
.panel .body{transition:opacity .3s}
.panel.swap .body{opacity:0}
.panel .num{display:block;font-family:var(--display);font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:.85;color:rgba(240,102,46,.42);margin-bottom:.5rem}
.panel h3{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:.4rem 0 .9rem}
.panel .desc{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.18rem;line-height:1.5;color:var(--bone-soft);max-width:44ch}
.panel .del-label,.step .del-label{display:block;margin:1.4rem 0 .7rem}
.bar{display:flex;gap:6px;margin-top:1.8rem}
.bar i{height:2px;flex:1;background:rgba(243,236,224,.2);transition:background .4s}
.bar i.on{background:var(--ember)}
.ticks{list-style:none;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.1rem;color:var(--bone-dim);font-size:.97rem;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--ember)}
.light .ticks li{color:var(--ink-2)}
.method-steps{list-style:none;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.method-steps>li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;padding-block:1.5rem;border-bottom:1px solid var(--line)}
.method-steps .gl{position:relative;width:44px;height:44px;border:1px solid rgba(179,195,201,.35);border-radius:50%}
.method-steps .gl::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ember);
  transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(-22px)}
.method-steps h3{margin:.25rem 0 .6rem}
.method-steps .desc{color:var(--bone-dim);margin-bottom:.4rem}
.method-wrap.has-orbit .method-steps{display:none}
.method-wrap:not(.has-orbit) .method{display:none}
@media(max-width:900px){.method-wrap .method{display:none!important}.method-wrap .method-steps{display:block!important}}

/* ---------- metrics on the blue band ---------- */
.metrics-label{margin-bottom:clamp(28px,3.6vw,44px)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(243,236,224,.28)}
.mstat{background:var(--blue);padding:clamp(22px,2.6vw,34px)}
.mstat .fig{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.mstat .fig small{font-size:.48em;color:var(--ember-soft)}
.mstat .desc{margin-top:.8rem;font-size:.9rem;line-height:1.45;color:rgba(243,236,224,.88)}
@media(max-width:860px){.metrics-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.metrics-grid{grid-template-columns:1fr}}

/* ---------- gallery rows ---------- */
.gallery{padding-block:var(--sp);overflow:hidden;background:var(--void)}
.gallery .wrap{margin-bottom:clamp(32px,4vw,52px)}
.row{display:flex;gap:1px;width:max-content;background:var(--void)}
.row+.row{margin-top:1px}
.shot{position:relative;flex:0 0 auto;height:clamp(260px,32vw,420px);overflow:hidden;background:var(--petrol)}
.shot img{height:100%;width:auto;transition:transform .9s var(--e),filter .9s}
.shot:hover img{transform:scale(1.05)}
@media(prefers-reduced-motion:no-preference){
  .row.l{animation:scrollx 70s linear infinite}.row.r{animation:scrollx 82s linear infinite reverse}
  .gallery:hover .row{animation-play-state:paused}
}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- doors (ways in) ---------- */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);margin-top:clamp(36px,4.5vw,58px)}
.door{background:var(--void);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;transition:background .4s}
.alt .door{background:var(--void-2)}
.door:hover{background:var(--petrol)}
.door h3{margin:.7rem 0 .4rem}
.door .val{font-family:var(--display);font-size:clamp(1.55rem,2.5vw,2.05rem);color:var(--ember-soft);line-height:1.05;margin-top:.5rem}
.door .val span{display:block;font-family:var(--body);font-size:.74rem;letter-spacing:.06em;color:var(--dim-2);margin-top:.5rem}
.door .desc{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.08rem;line-height:1.5;color:var(--bone-soft);margin:1.2rem 0 0}
.door .del-label{display:block;margin:1.4rem 0 .7rem}
.door .go{margin-top:auto;padding-top:1.4rem;align-self:flex-start;border:0}
.door .go span{border-bottom:1px solid rgba(var(--ember-soft-rgb),.4);padding-bottom:2px}
@media(max-width:920px){.doors{grid-template-columns:1fr}}

/* ---------- who this is for: photo bleeds off the edge ---------- */
.forwho{overflow:hidden;background:linear-gradient(180deg,var(--void),var(--petrol-2))}
.forwho-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.76fr);gap:clamp(36px,6vw,80px);align-items:center}
.forwho-photo{position:relative;align-self:stretch;min-height:560px;overflow:hidden;background:var(--petrol);
  margin:calc(-1 * var(--sp)) calc(-1 * max(var(--gut), 50vw - 536px)) calc(-1 * var(--sp)) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36%);mask-image:linear-gradient(90deg,transparent,#000 36%)}
.forwho-photo img{position:relative;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:46% 22%;will-change:transform}
@media(max-width:860px){.forwho{padding-bottom:0}.forwho-grid{grid-template-columns:1fr}.forwho-photo{min-height:0;aspect-ratio:4/5;margin:0 calc(-1 * var(--gut));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}}

/* ---------- close ---------- */
.final{position:relative;display:grid;align-items:center;text-align:center;overflow:hidden;padding:0;background:var(--void)}
.final>*{grid-area:1/1}
.final-bg{position:relative;z-index:0;height:100%}
.final-bg img{width:100%;height:100%;min-height:640px;object-fit:cover;opacity:.5;transform:scale(var(--z,1.06));transition:transform .2s linear}
.final-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 75% at 50% 50%,rgba(var(--void-rgb),.66),rgba(var(--void-rgb),.96))}
.final .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(110px,12vw,150px)}
.final .rings{top:50%;left:50%;width:min(900px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.4}
.final h2{margin:0 auto;max-width:17ch;font-size:clamp(2.3rem,5.8vw,4.6rem);line-height:1.02}
.final .lede{margin:1.4rem auto 2.2rem;max-width:46ch;color:var(--mist)}
.final .note{margin-top:1.8rem;font-size:.94rem;color:var(--bone-dim);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem}
.final .note a{color:var(--mist);border-bottom:1px solid rgba(214,224,227,.3);padding-bottom:1px}
.final .note a:hover{color:var(--ember-soft);border-color:var(--ember-soft)}

/* ---------- Icon Method page: the four words ---------- */
.seq{margin-top:clamp(36px,4.5vw,60px);border-top:1px solid var(--line)}
.seq-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,4vw,64px);padding-block:clamp(30px,4vw,56px);
  border-bottom:1px solid var(--line);align-items:start}
.seq-word{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,10vw,7.6rem);line-height:.82;letter-spacing:-.045em}
.seq-word small{display:block;font-family:var(--body);font-size:.74rem;font-weight:500;letter-spacing:.15em;color:var(--ember-soft);margin-bottom:.8rem}
.seq-row h3{margin-bottom:.8rem}
.seq-row p{color:var(--bone-dim);max-width:56ch}
@media(max-width:820px){.seq-row{grid-template-columns:1fr}}

/* ---------- depths ---------- */
.depths{border-top:1px solid var(--line);margin-top:clamp(36px,4.5vw,58px)}
.depth{display:grid;grid-template-columns:clamp(70px,9vw,124px) minmax(0,1fr) minmax(180px,.42fr);gap:clamp(16px,3vw,44px);align-items:start;
  padding-block:clamp(28px,3.6vw,50px);border-bottom:1px solid var(--line)}
.depth .rn{font-family:var(--brand);font-weight:400;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;letter-spacing:.04em;color:var(--ember-soft)}
.depth h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:.6rem 0 .8rem}
.depth .desc{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.12rem;color:var(--bone-soft);max-width:52ch}
.depth .del-label{display:block;margin:1.4rem 0 .7rem}
.depth .ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.6rem}
.depth .val{font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.1rem);color:var(--ember-soft);line-height:1.05}
.depth .val span{display:block;font-family:var(--body);font-size:.74rem;letter-spacing:.06em;color:var(--dim-2);margin-top:.5rem}
@media(max-width:860px){.depth{grid-template-columns:1fr;gap:.4rem}.depth .ticks{grid-template-columns:1fr}.depth .val{margin-top:1rem}}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-ink)}
.faq details{border-bottom:1px solid var(--line-ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  padding-block:clamp(18px,2.2vw,26px);font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 22px;height:22px;transition:transform .4s var(--e);
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:clamp(18px,2.4vw,28px);max-width:62ch;color:var(--ink-2)}

/* ---------- Sprint timeline ---------- */
.tl{position:relative;margin-top:clamp(38px,4.6vw,62px);padding-left:clamp(44px,6vw,72px)}
.tl::before,.tl-fill{content:"";position:absolute;left:clamp(14px,2vw,22px);top:8px;width:1px}
.tl::before{bottom:8px;background:var(--line)}
.tl-fill{height:calc((100% - 16px) * var(--p,1));background:var(--ember)}
.step{position:relative;padding-bottom:clamp(32px,4vw,54px)}
.step:last-child{padding-bottom:0}
.step .dot{position:absolute;top:.4rem;left:calc(-1 * clamp(44px,6vw,72px) + clamp(14px,2vw,22px) - 7px);width:15px;height:15px;border-radius:50%;
  background:var(--ember);border:1px solid var(--ember);transition:background .4s,border-color .4s}
.tl.live .step .dot{background:var(--void-2);border-color:rgba(179,195,201,.5)}
.tl.live .step.hit .dot{background:var(--ember);border-color:var(--ember)}
.step .num{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;color:var(--ember-soft);margin-bottom:.6rem}
.step .role{display:block;margin-bottom:.4rem}
.step h3{margin-bottom:.6rem}
.step p{color:var(--bone-dim);max-width:62ch}
.step p+p{margin-top:.7rem}
.step b{color:var(--bone);font-weight:500}

/* ---------- the commitment and price ---------- */
.decide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,80px);align-items:end}
.decide-body{display:grid;gap:1rem;max-width:60ch}
.decide-body p{font-size:clamp(1.04rem,.35vw + .98rem,1.16rem);color:var(--ink-2)}
.decide-body em{font-family:var(--display);font-size:1.15em;color:var(--ink)}
.decide-close{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding-top:1.4rem;border-top:1px solid var(--line-ink)}
.dc-label{color:var(--ember-ink)}
.dc-price{font-family:var(--display);font-size:clamp(3.4rem,8vw,5.6rem);line-height:.9;letter-spacing:-.03em}
.dc-note{color:var(--ink-2);max-width:32ch}
.decide-close .btn{margin-top:.8rem}
@media(max-width:860px){.decide{grid-template-columns:1fr}}

/* ---------- case studies ---------- */
.case{display:grid;grid-template-columns:clamp(70px,9vw,124px) minmax(0,1fr) minmax(0,.8fr);gap:clamp(18px,3.4vw,52px);align-items:start;
  padding-block:clamp(34px,4.4vw,62px);border-bottom:1px solid var(--line)}
.cases{border-top:1px solid var(--line);margin-top:clamp(8px,2vw,20px)}
.case .rn{font-family:var(--display);font-size:clamp(2.8rem,5.4vw,4.6rem);line-height:.82;color:rgba(240,102,46,.45)}
.case h3{font-size:clamp(2rem,3.6vw,3rem);margin:.6rem 0 0}
.case .val{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ember-soft);line-height:1.05;margin-top:1.2rem}
.case .val span{display:block;font-family:var(--body);font-size:.74rem;letter-spacing:.06em;color:var(--dim-2);margin-top:.5rem}
.case .desc{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.2rem;line-height:1.5;color:var(--bone-soft)}
.case .del-label{display:block;margin-bottom:.8rem}
@media(max-width:900px){.case{grid-template-columns:1fr;gap:1rem}}
.masonry{columns:3 260px;column-gap:1px;margin-top:clamp(36px,4.5vw,56px);counter-reset:plate}
.masonry figure{position:relative;break-inside:avoid;margin-bottom:1px;overflow:hidden;background:var(--petrol);counter-increment:plate}
.masonry img{width:100%;transition:transform 1s var(--e)}
.masonry figure:hover img{transform:scale(1.04)}
.masonry figure::after{content:"Plate " counter(plate,upper-roman);position:absolute;left:12px;bottom:10px;padding:.3rem .65rem;border-radius:999px;
  font-size:.66rem;letter-spacing:.14em;color:var(--bone);background:rgba(var(--void-rgb),.66);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.masonry figure:hover::after{opacity:1;transform:none}

/* ---------- beyond tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:clamp(28px,3.6vw,48px)}
.tile{background:var(--void-2);padding:clamp(26px,3.2vw,44px);display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.4rem 1rem;transition:background .4s}
.tile:hover{background:var(--petrol)}
.tile .n{grid-row:span 2;font-family:var(--display);font-size:1rem;color:rgba(240,102,46,.6);padding-top:.35rem}
.tile h3{font-size:clamp(1.45rem,2.4vw,1.9rem)}
.tile p{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.1rem;line-height:1.5;color:var(--bone-soft)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}

/* ---------- about ---------- */
.note-founder{max-width:62ch}
.note-founder p{font-size:clamp(1.08rem,.45vw + 1rem,1.24rem);color:var(--bone-dim)}
.note-founder p:first-child{font-family:var(--display);font-weight:300;font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.28;color:var(--bone)}
.note-founder b{color:var(--bone);font-weight:500}
.note-founder .sig{font-family:var(--display);font-style:italic;font-weight:300;color:var(--ember-soft);font-size:1.2rem}
.moe-card{display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.moe-card svg{width:min(240px,60vw);height:auto;transition:transform .5s var(--e)}
.moe-card:hover svg{transform:translateY(-6px) rotate(-3deg)}
.moe-card .cap{max-width:34ch;font-size:.95rem;color:var(--ink-2)}
.wont{list-style:none;margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line-ink);counter-reset:w}
.wont li{counter-increment:w;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding-block:clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line-ink);font-family:var(--display);font-size:clamp(1.25rem,2.3vw,1.75rem);line-height:1.28}
.wont li::before{content:counter(w,decimal-leading-zero);font-size:.9rem;color:var(--ember-ink);padding-top:.5rem}
.campus{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.4;color:var(--bone-soft);max-width:44ch;margin-top:2rem}

/* ---------- form ---------- */
.talk{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.talk{grid-template-columns:1fr}}
.form{display:grid;gap:1.7rem;max-width:680px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.field{display:grid;gap:.55rem;min-width:0;border:0}
.field>label,.field legend{font-size:.98rem;font-weight:500;color:var(--bone);padding:0}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--bone);background:var(--void-2);border:1px solid rgba(243,236,224,.22);
  border-radius:8px;padding:.95rem 1rem;transition:border-color .3s,background .3s}
.field textarea{min-height:112px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember);background:var(--petrol)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills span{display:inline-block;padding:.62rem 1.05rem;border-radius:999px;border:1px solid rgba(243,236,224,.26);font-size:.92rem;color:var(--mist);
  transition:background .25s,border-color .25s,color .25s}
.pills label:hover span{border-color:var(--bone)}
.pills input:checked+span{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
.pills input:focus-visible+span{outline:2px solid var(--ember);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .fine{font-size:.88rem;color:var(--dim-2)}
.ferr{color:#F2A08C;font-size:.92rem}
.thanks{border:1px solid var(--line);border-top:2px solid var(--ember);background:var(--void-2);padding:clamp(26px,3.4vw,44px);display:grid;gap:1rem;max-width:680px}
.thanks .moe-mini{width:96px;height:auto}
.thanks h3{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.thanks p{color:var(--bone-dim)}
.thanks pre{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.9rem;color:var(--bone-dim);background:var(--void);
  border:1px solid var(--line);padding:1rem;max-height:240px;overflow:auto}
.aside{display:grid;gap:1.4rem}
.aside .blk{border-top:1px solid var(--line);padding-top:1rem;display:grid;gap:.4rem;color:var(--bone-dim)}
.aside a{color:var(--mist)}
.aside a:hover{color:var(--ember-soft)}
.copyable{user-select:all;color:var(--bone)}

/* ---------- footer, with Moe walking along its top edge ---------- */
footer.site{position:relative;background:var(--void-2);border-top:1px solid var(--line);
  padding-top:clamp(64px,7vw,96px);padding-bottom:calc(2.2rem + env(safe-area-inset-bottom,0px))}
.moe-foot{position:absolute;top:-52px;left:0;width:84px;height:59px;cursor:pointer;
  transform:translateX(var(--mx,12vw)) scaleX(var(--mf,1))}
.moe-foot svg{display:block;transform-origin:50% 100%}
.moe-foot.hop svg{animation:hop .6s var(--e)}
@keyframes hop{40%{transform:translateY(-22px) rotate(-6deg)}70%{transform:translateY(0) rotate(2deg)}}
@media(prefers-reduced-motion:no-preference){.moe-foot.walking svg{animation:bob .5s ease-in-out infinite}}
@keyframes bob{50%{transform:translateY(-2px) rotate(-1.5deg)}}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.6rem}
.foot .mark{display:grid;gap:.9rem;align-content:start}
.foot .logo{height:40px}
.foot .tag-line{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.3rem;color:var(--bone)}
.foot nav{display:flex;flex-wrap:wrap;gap:2rem clamp(2rem,5vw,4rem)}
.foot nav div{display:grid;gap:.55rem;align-content:start}
.foot nav a,.foot nav .copyable{font-size:.94rem;color:rgba(243,236,224,.86);transition:color .3s}
.foot nav a:hover{color:var(--ember-soft)}
.foot nav .h{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:.35rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;margin-top:clamp(36px,4vw,56px);padding-top:1.4rem;
  border-top:1px solid var(--line);font-size:.8rem;color:var(--dim-2)}

/* Moe peeking in from an edge as you scroll */
.moe-roam{position:fixed;z-index:70;pointer-events:none;bottom:max(18px,env(safe-area-inset-bottom,0px));
  transition:transform .75s cubic-bezier(.34,1.56,.64,1)}
.moe-roam.left{left:0;transform:translateX(-110%)}
.moe-roam.right{right:0;transform:translateX(110%) scaleX(-1)}
.moe-roam.left.out{transform:translateX(-18%) rotate(6deg)}
.moe-roam.right.out{transform:translateX(18%) scaleX(-1) rotate(6deg)}
.moe-roam.quick{transition:transform .38s cubic-bezier(.55,0,.8,.2)}
@media(prefers-reduced-motion:reduce){.moe-roam{display:none}}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{transition:opacity .9s var(--e),transform .9s var(--e)}
  .reveal.pre{opacity:0;transform:translateY(24px)}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
  .eyebrow .dot{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spin{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- signature moments ----------
   1. The hero line prints fading copies of itself; then "except you." writes on alone.
   2. Photos marked data-focus start softly out of focus and pull sharp as they come into view ("half the resolution").
      Every photo fades in as it finishes loading, so nothing snaps into place.
   */
h1.thesis{position:relative}
h1.thesis .sel{background-image:linear-gradient(rgba(var(--ember-soft-rgb),.36),rgba(var(--ember-soft-rgb),.36));background-repeat:no-repeat;
  background-size:0% 100%;-webkit-box-decoration-break:slice;box-decoration-break:slice}
h1.thesis.selecting .sel{background-size:100% 100%;transition:background-size .55s cubic-bezier(.65,0,.35,1)}
h1.thesis.selected .sel{background-image:none}
h1.thesis .copy{position:absolute;z-index:3;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;color:inherit;
  opacity:0;transform-origin:35% 60%;will-change:transform,opacity,filter;text-shadow:0 .16em .42em rgba(0,0,0,.45)}
.frame[data-focus].soft img{filter:blur(18px) saturate(.85)}
.frame[data-focus].pull img{filter:blur(0) saturate(1);transition:filter 1.7s cubic-bezier(.25,.6,.2,1)}
img.fade{opacity:0}
img.in{animation:img-in .9s cubic-bezier(.25,.6,.2,1) both}
@keyframes img-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  h1.thesis .copy{display:none}
}

/* ---------- from the Justin Tyme blueprint, in Planet Ü's language ----------
   bands that drift and answer the speed of your scroll; headlines that rise word by word;
   See / Say / Show / Stand held in place while you scroll through them; the hero photo arriving out of a bright blur;
   a slow light across Ascension. All of it off for reduced motion. */
.driven{animation:none!important}
.hero-photo img.pre-arrive{opacity:0}
.hero-photo img.arrive{animation:arrive 2.3s cubic-bezier(.2,.8,.25,1) backwards}
@keyframes arrive{from{opacity:0;filter:blur(16px) brightness(1.5);transform:scale(1.12)}}
.seq.pinned{border-top:0;height:calc(100svh + var(--n,4) * 70svh)}
.seq-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(78px + env(safe-area-inset-top,0px));padding-bottom:clamp(14px,3vh,30px)}
.seq-stage{position:relative}
.seq.pinned .seq-word{font-size:clamp(4.4rem,10.2vw,9.2rem)}
@media(max-width:820px){.seq.pinned .seq-word{font-size:clamp(4.4rem,17vw,7rem)}}
.seq.pinned .seq-row h3{font-size:clamp(1.45rem,2.5vw,2.1rem)}
.seq.pinned .seq-row{align-items:end}
.seq-pin .kicker{margin-bottom:.6rem}
.seq-pin h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:clamp(20px,5vh,56px)}
@media(max-width:820px){.seq.pinned .seq-row{align-items:start}}
.seq.pinned .seq-row{position:absolute;left:0;right:0;top:0;border-bottom:0;padding-block:0;opacity:0;transform:translateY(28px);
  transition:opacity .5s ease,transform .9s var(--e);pointer-events:none}
.seq.pinned .seq-row.past{transform:translateY(-28px)}
.seq.pinned .seq-row.on{opacity:1;transform:none;pointer-events:auto}
.seq-nav{margin-top:clamp(22px,5vh,58px)}
.seq-meter{position:relative;height:2px;background:var(--line)}
.seq-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--ember),var(--ember-soft));box-shadow:0 0 14px rgba(240,102,46,.55)}
.seq-meter i::after{content:"";position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ember-soft);box-shadow:0 0 12px var(--ember)}
.seq-nav ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,28px);margin-top:14px}
.seq-nav button{background:none;border:0;padding:0;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--dim-2);transition:color .4s;text-align:left}
.seq-nav button small{font-size:.66rem;letter-spacing:.14em;color:var(--dim-2);transition:color .4s}
.seq-nav li.on button{color:var(--bone)}
.seq-nav li.on button small{color:var(--ember-soft)}
.seq-nav button:hover{color:var(--bone)}
#ascension{position:relative;overflow:hidden}
#ascension::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 40%,rgba(var(--ember-soft-rgb),.12) 46%,rgba(255,232,206,.26) 50%,rgba(var(--ember-soft-rgb),.12) 54%,transparent 60%);
  transform:translateX(-120%);animation:sheen 7s cubic-bezier(.45,.05,.25,1) 1.2s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){#ascension::after{animation:none;display:none}.hero-photo img.arrive{animation:none}}
.seq-home .seq-row p{margin-bottom:.2rem}
.seq-home .del-label{display:block;margin:1.1rem 0 .6rem}
.seq-home .ticks{margin:0}
/* headlines rise line by line from the very first frame (no flash before the motion starts) */
@media(prefers-reduced-motion:no-preference){
  h1 .ln>span{animation:h1rise 1.1s cubic-bezier(.2,.8,.25,1) .08s both}
  h1 .ln:nth-child(2)>span{animation-delay:.21s}
  h1 .ln:nth-child(3)>span{animation-delay:.34s}
}
@keyframes h1rise{from{transform:translateY(106%)}}

/* ---------- rooms ----------
   One house, a different mood in every room. Home is the foyer (the defaults above); every other page is anchored in its own hue.
   Each page sets a class on <html>. The hardware stays the same everywhere: the type, the ember buttons, the motion and Moe.
   Only the walls and the light change: --void is the floor, --void-2 the alternate rooms, --petrol the vivid anchor wall,
   --petrol-2 the glow behind each page's opening, --ember-soft the room's accent light, --teal its labels. */
html.room-blue{ /* The Icon Method: cobalt blue, lit in gold */
  --void:#070B24; --void-2:#0A1033; --petrol:#1426D6; --petrol-2:#0E1BA0; --void-rgb:7,11,36; --petrol2-rgb:14,27,160; --glow-rgb:20,38,214;
  --ember-soft:#F2B84B; --ember-soft-rgb:242,184,75; --teal:#B4C3FF; --bone-dim:#C3CBF0; --dim-2:#97A2D2; --bone-soft:#DCE0F5; --mist:#D8DEFF}
html.room-red{ /* The Sprint: oxblood red, forty-five days of heat */
  --void:#170507; --void-2:#200709; --petrol:#8C1626; --petrol-2:#5E0E19; --void-rgb:23,5,7; --petrol2-rgb:94,14,25; --glow-rgb:140,22,38;
  --ember-soft:#FFB98A; --ember-soft-rgb:255,185,138; --teal:#F2B84B; --bone-dim:#E6C9C9; --dim-2:#B79296; --bone-soft:#EBD8D4; --mist:#F0DEDA}
html.room-green{ /* Work: deep emerald, where the results grow */
  --void:#04140E; --void-2:#061B13; --petrol:#0B5439; --petrol-2:#0A4D33; --void-rgb:4,20,14; --petrol2-rgb:10,77,51; --glow-rgb:11,84,57;
  --ember-soft:#F2B84B; --ember-soft-rgb:242,184,75; --teal:#93E6C2; --bone-dim:#BCD8CB; --dim-2:#8AAE9D; --bone-soft:#D6E6DD; --mist:#D9EBE2}
html.room-violet{ /* LaunchPad: studio violet, the light of a room on air */
  --void:#0F0820; --void-2:#150B2C; --petrol:#4F25A3; --petrol-2:#3D1C80; --void-rgb:15,8,32; --petrol2-rgb:61,28,128; --glow-rgb:79,37,163;
  --ember-soft:#FFB3A1; --ember-soft-rgb:255,179,161; --teal:#CDBBFF; --bone-dim:#CBC1E8; --dim-2:#A093C6; --bone-soft:#E0D9F0; --mist:#E2DCF4}
html.room-amber{ /* About: warm amber, lamplight in the living room */
  --void:#150D06; --void-2:#1C1209; --petrol:#6B3F10; --petrol-2:#5E390F; --void-rgb:21,13,6; --petrol2-rgb:94,57,15; --glow-rgb:107,63,16;
  --ember-soft:#FFC27A; --ember-soft-rgb:255,194,122; --teal:#F2CF8B; --bone-dim:#DCCAB2; --dim-2:#AE977C; --bone-soft:#EBDDCB; --mist:#EFE3D3}
html.room-teal{ /* Beyond the Method: ocean teal, where the studios work */
  --void:#031417; --void-2:#051C20; --petrol:#0A5258; --petrol-2:#094E55; --void-rgb:3,20,23; --petrol2-rgb:9,78,85; --glow-rgb:10,82,88;
  --ember-soft:#FFB27A; --ember-soft-rgb:255,178,122; --teal:#86E3DA; --bone-dim:#B8D5D3; --dim-2:#86A8A8; --bone-soft:#D4E6E4; --mist:#D7EAE8}
html.room-rose{ /* Let's talk: dusk rose, a warm room for an honest conversation */
  --void:#160A10; --void-2:#1E0D16; --petrol:#62203F; --petrol-2:#4A1830; --void-rgb:22,10,16; --petrol2-rgb:74,24,48; --glow-rgb:98,32,63;
  --ember-soft:#FFB3A1; --ember-soft-rgb:255,179,161; --teal:#F2B6CE; --bone-dim:#DCC3CE; --dim-2:#AC8E9C; --bone-soft:#EBDAE1; --mist:#EFDFE6}

/* a client's photograph at the foot of their case study (work page) */
.case-plate{grid-column:2 / -1;margin-top:clamp(10px,1.6vw,22px)}
.case-plate .frame{aspect-ratio:3/2}
.case-plate .frame img{top:0;height:100%}
@media(max-width:900px){.case-plate{grid-column:1 / -1}}

/* work page: "Outside the founder box", three drifting rows of range */
.gallery.range .shot{height:clamp(220px,25vw,340px)}
.gallery.range .lede{max-width:52ch;margin-top:1.2rem;text-wrap:pretty}

/* ---------- Meet Moe (about): Moe stays pinned while his story scrolls past ---------- */
.moe-story{position:relative;padding-block:var(--sp);overflow:clip;
  background:radial-gradient(70% 50% at 12% 18%,rgba(var(--glow-rgb),.10),transparent 62%),var(--void)}
.moe-story .wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.moe-story .moe-card{position:sticky;top:clamp(96px,20vh,190px)}
.moe-story .moe-card .cap{color:var(--bone-dim)}
@media(prefers-reduced-motion:no-preference){.moe-story .moe-card svg{animation:graze 5.5s ease-in-out infinite}}
@keyframes graze{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2.5deg)}}
.moe-story h2{max-width:13ch}
.moe-story .story{max-width:60ch}
.moe-story .prose{max-width:none}
.beats{list-style:none;margin:2.4rem 0 .8rem;padding:0;display:grid;gap:.35rem}
.beats li{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--bone)}
.beats li:last-child{font-style:italic;font-weight:300;color:var(--ember-soft)}
.moe-story .big{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;letter-spacing:-.015em;color:var(--bone);margin:2.4rem 0 .4rem}
.called{font-style:italic;color:var(--ember-soft)}
.creed{list-style:none;counter-reset:c;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--line)}
.creed li{counter-increment:c;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.2;color:var(--bone)}
.creed li::before{content:"0" counter(c);font-family:var(--body);font-size:.72rem;letter-spacing:.14em;color:var(--ember-soft);padding-top:.55em}
.moe-story h2.moe-finale{max-width:none;margin-top:clamp(56px,7vw,96px);font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.12}
.moe-finale em.brand{font-style:normal;font-weight:400;color:var(--ember-soft);display:inline-block;padding-bottom:.3em;margin-bottom:-.2em}
@media(max-width:860px){.moe-story .wrap{grid-template-columns:1fr}.moe-story .moe-card{position:static}}

/* panoramic band (the Sprint's opening image): shown at its own thin proportion, held a little taller on phones */
.band.pano img{width:100%;height:auto;max-height:none;aspect-ratio:1800/539;min-height:220px;object-fit:cover;object-position:50% 50%}
@media(max-width:600px){.band.pano .badge .sub{display:none}}
/* a plate shown whole, with no overscan for drift (used where the crop has no room to spare) */
.frame.whole img{top:0;height:100%}