/* =========================================================================
   STUDIO HIGH DESIGN: site.css
   Brand colours unchanged: near-black, gold, champagne, cream.
   One direction: a machined gold object in a dark room. One signature:
   the gold rule, a single hairline that measures, draws and reveals.
   ========================================================================= */

:root{
  --canvas:#0A0A0B; --canvas-2:#0D0D0F; --panel:#131318; --panel-2:#111016;
  --hairline:rgba(190,157,99,.16); --hairline-2:rgba(244,239,228,.08);
  --border-int:#5E5342;
  --accent:#BE9D63; --accent-hover:#D5B676; --accent-muted:rgba(190,157,99,.22);
  --champagne:#E8CD8E; --gold-deep:#9A7C42; --accent-ink:#14110A;
  --text:#F4EFE4; --text-2:#A9A395; --text-3:#7C7769;
  --rule:linear-gradient(90deg,var(--champagne),var(--accent) 45%,var(--gold-deep));
  --tshadow:0 1px 2px rgba(5,5,8,.95),0 3px 12px rgba(5,5,8,.78),0 10px 44px rgba(5,5,8,.8);
  --e-out:cubic-bezier(.22,.7,.24,1); --e-soft:cubic-bezier(.4,.05,.2,1);
  --f-disp:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,72px); --wrap:1280px;
  --sec-y:clamp(76px,11vh,150px);
  --nav-h:74px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font:400 clamp(15px,.95rem + .2vw,17.5px)/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;letter-spacing:.004em;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:14px;top:-60px;z-index:300;background:var(--accent);color:var(--accent-ink);padding:11px 18px;border-radius:0 0 8px 8px;font:600 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;transition:top .22s var(--e-out)}
.skip:focus{top:0}

/* ---------------------------------------------------------- typography */
h1,h2,h3,.disp{font-family:var(--f-disp);font-weight:700;line-height:1.02;letter-spacing:-.032em;color:var(--text)}
h2{font-size:clamp(2rem,1.3rem + 2.8vw,3.9rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem);line-height:1.15;letter-spacing:-.02em}
.lede{font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);line-height:1.55;color:var(--text-2);max-width:56ch}
.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.kicker::before{content:"";width:28px;height:1px;background:var(--rule)}
.kicker.plain::before{display:none}
.u{ /* the one gold word per headline, underlined by the rule */
  position:relative;white-space:nowrap;
}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:2px;background:var(--rule);transform:scaleX(var(--uk,1));transform-origin:left;transition:transform 1.1s var(--e-out)}
.rv .u::after,.stag .u::after{--uk:0}
.rv.in .u::after,.stag.in .u::after{--uk:1;transition-delay:.35s}
.mono{font-family:var(--f-mono)}
.muted{color:var(--text-2)}
.num{font:400 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--text-3)}

/* -------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;z-index:2;padding:var(--sec-y) 0}
.sec:not(.after-hero),footer{content-visibility:auto;contain-intrinsic-size:auto 800px}
.sec.tight{padding:clamp(48px,7vh,96px) 0}
.sec.alt{background:linear-gradient(180deg,var(--canvas-2),rgba(17,16,22,.55))}
.head{max-width:760px}
.head .kicker{margin-bottom:22px}
.head h2{margin-bottom:18px}
.head.center{margin-inline:auto;text-align:center}
.head.center .kicker::before{display:none}
.rule{height:1px;background:var(--hairline);border:0;margin:0}

/* ------------------------------------------------- the fixed environment */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(46% 36% at 78% 22%,rgba(190,157,99,.13),transparent 62%),
    radial-gradient(40% 32% at 14% 78%,rgba(232,205,142,.05),transparent 60%),
    radial-gradient(60% 46% at 50% 110%,rgba(154,124,66,.09),transparent 66%);
  animation:envDrift 110s var(--e-soft) -30s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes envDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2.4%,0) scale(1.08)}}
.dust{position:fixed;inset:0;z-index:0;pointer-events:none}
.dust span{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--champagne);
  opacity:0;animation:dust 26s linear infinite;
  box-shadow:0 0 6px rgba(232,205,142,.7);
}
@keyframes dust{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.35}
  90%{opacity:.25}
  100%{transform:translate3d(var(--dx,-40px),-42vh,0);opacity:0}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ----------------------------------------------------------------- nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gut);
  transition:background .4s linear,border-color .4s linear,transform .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(10,10,11,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-color:var(--hairline)}
.scrub .nav.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,11,.92)}
.nav.pre{transform:translateY(-100%)}
.nav.arriving .brand img{opacity:0}
.nav .brand img{transition:opacity .25s linear}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:auto}
.brand span{font:700 15px/1 var(--f-disp);letter-spacing:-.01em;color:var(--text)}
.nav-links{display:flex;align-items:baseline;gap:clamp(16px,2.2vw,34px)}
.nav-links a{font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);position:relative;padding-bottom:6px;transition:color .3s var(--e-out)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .4s var(--e-out),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
  .brand span{display:none}
}
.menu{
  position:fixed;inset:0;z-index:99;background:rgba(10,10,11,.97);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--gut) 40px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility 0s .45s;
}
.menu.open{opacity:1;visibility:visible;transition:opacity .45s var(--e-out),visibility 0s}
.menu a.big{font:700 clamp(2rem,9vw,3.2rem)/1.15 var(--f-disp);letter-spacing:-.03em;display:flex;align-items:baseline;gap:18px;padding:8px 0;transform:translateY(18px);opacity:0;transition:transform .6s var(--e-out),opacity .6s var(--e-out)}
.menu.open a.big{transform:none;opacity:1}
.menu.open a.big:nth-child(2){transition-delay:.06s}.menu.open a.big:nth-child(3){transition-delay:.12s}.menu.open a.big:nth-child(4){transition-delay:.18s}.menu.open a.big:nth-child(5){transition-delay:.24s}
.menu a.big .num{min-width:2.4ch}
.menu-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 28px;color:var(--text-2);font-size:.95rem}
.menu-foot a{border-bottom:1px solid var(--hairline)}

/* ------------------------------------------------------------- buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1px solid var(--accent);border-radius:2px;cursor:pointer;
  font:600 12.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);overflow:hidden;
  transition:transform .42s var(--e-out),box-shadow .42s var(--e-out),background .3s linear,border-color .3s linear;
  box-shadow:0 12px 34px -16px rgba(190,157,99,.5);text-shadow:none;
}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 64%);transform:translateX(-120%);transition:transform .9s var(--e-out)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(190,157,99,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-int);box-shadow:none}
.btn.ghost:hover{background:rgba(190,157,99,.08);border-color:var(--accent)}
.btn.ghost::after{display:none}
.btn.small{padding:12px 18px;font-size:11.5px}
.btn .ico{width:16px;height:16px;flex:none}
@media (pointer:coarse){.btn{min-height:46px}}
.link{display:inline-flex;align-items:baseline;gap:8px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:6px;position:relative}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--rule);transform-origin:right;transition:transform .5s var(--e-out)}
.link:hover::after{transform:scaleX(.5);transform-origin:left}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ----------------------------------------------------- entrances (IO) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.rv.in{opacity:1;transform:none}
.stag > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.stag.in > *{opacity:1;transform:none}
.stag.in > :nth-child(2){transition-delay:.09s}.stag.in > :nth-child(3){transition-delay:.18s}.stag.in > :nth-child(4){transition-delay:.27s}.stag.in > :nth-child(5){transition-delay:.36s}.stag.in > :nth-child(6){transition-delay:.45s}
.stag.in.done > *{transition-delay:0s!important}

/* ================================================================ HERO */
.hero{position:relative;height:720vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.stage .poster{position:absolute;inset:0;background:#0A0A0B center/cover no-repeat}
.stage .film{position:absolute;inset:0}
.stage canvas.film{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--e-soft)}
.flyer{position:fixed;left:0;top:0;width:100px;height:100px;background:url("../assets/hero-ending.jpg") no-repeat;opacity:0;pointer-events:none;z-index:99;transform-origin:0 0;will-change:transform,opacity;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.after-hero{margin-top:-100vh;background:var(--canvas);z-index:3}
.after-hero .rise-edge{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;will-change:transform}
.stage.film-ready canvas.film{opacity:1}
.stage.film-failed canvas.film{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,8,10,0) 35%,rgba(8,8,10,.6) 100%)}
/* the scrim element only serves the poster: once the canvas is up it paints
   its own, so this layer is removed rather than blended every frame */
.stage.film-ready .scrim{display:none}
.ring{position:absolute;right:var(--gut);bottom:32px;width:38px;height:38px;color:var(--accent);opacity:.9;transition:opacity .5s}
.ring circle{transition:stroke-dashoffset .12s linear;transform:rotate(-90deg);transform-origin:center}
.stage.film-usable .ring{opacity:0}
.cue{position:absolute;right:var(--gut);bottom:34px;display:flex;align-items:center;gap:10px;font:400 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);writing-mode:vertical-rl;transform:rotate(180deg);opacity:1;transition:opacity .5s}
.cue::before{content:"";width:1px;height:44px;background:var(--rule)}
.hero.scrolled .cue{opacity:0}
.band{
  z-index:3;
  position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  width:min(54vw,740px);opacity:0;pointer-events:none;text-shadow:var(--tshadow);
  --k:0;
}
.band::before{content:"";position:absolute;inset:-12% -10%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 40% 50%,rgba(5,5,8,.66) 0%,rgba(5,5,8,.44) 46%,rgba(5,5,8,0) 76%)}
.band.on{pointer-events:auto}
.band .kicker{margin-bottom:22px;text-shadow:none}
.band .line{font:700 clamp(2rem,1.2rem + 2.9vw,3.9rem)/1 var(--f-disp);letter-spacing:-.035em}
.band .line .w{display:inline-block;white-space:nowrap}

/* entrance a: word rise (band 1) */
.band[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
/* entrance b: sweep from the left, echoing the light raking across */
.band[data-fx="sweep"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*-38px))}
/* entrance c: approach from depth as the face comes square */
.band[data-fx="approach"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:scale(calc(.86 + .14*var(--kc)))}
/* entrance d: staged settle */
.band[data-fx="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.band .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));margin-top:22px;font-size:clamp(1rem,.95rem + .35vw,1.25rem);line-height:1.5;color:var(--text);max-width:44ch}
.band .actions{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px));margin-top:30px;text-shadow:none}
.band .u::after{--uk:clamp(0,(var(--k,0) - .5)*2.4,1);transition:none}
.hud{position:absolute;left:var(--gut);bottom:34px;z-index:4;display:flex;align-items:center;gap:14px;font:400 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.hud .bar{width:120px;height:1px;background:var(--hairline-2);position:relative;overflow:hidden}
.hud .bar i{position:absolute;inset:0;background:var(--rule);transform:scaleX(var(--p,0));transform-origin:left}
.hud b{font-weight:400;color:var(--accent);min-width:3ch;text-align:right}
@media (max-height:560px){.cue,.hud{display:none}}

/* the static hero (phones, portrait tablets, reduced motion) */
/* The phone hero. Nothing here is measured in viewport height, on purpose:
   a phone's address bar shrinks and grows as you scroll, which changes the
   viewport, and anything anchored to the bottom of it visibly chases the bar.
   The picture's height comes from its width, and the words sit below it, so
   the whole thing holds still. */
.hero-static{display:none;flex-direction:column;position:relative;z-index:1;padding:0 0 clamp(40px,7vw,68px);background:var(--canvas);overflow:hidden}
.hero-static .shot{position:relative;width:100%;aspect-ratio:1/1;flex:none}
.hero-static .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.hero-static .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,0) 48%,rgba(10,10,11,.82) 82%,var(--canvas) 100%)}
.hero-static .inner{position:relative;z-index:1;margin-top:-15%;padding:0 var(--gut)}
.hero-static h1{font-size:clamp(2.4rem,9vw,3.4rem);line-height:1;margin:16px 0 14px;text-shadow:var(--tshadow)}
.hero-static p{max-width:34ch;color:var(--text);font-size:1.05rem;line-height:1.5}
.hero-static .actions{margin-top:24px}
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:flex}
  .flyer{display:none}
  .nav.pre{transform:none}
  .nav.arriving .brand img{opacity:1}
  .after-hero{margin-top:0}
  .after-hero .rise-edge{transform:scaleX(1)!important}
}

/* ============================================================ PROOF RAIL */
.rail-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;align-items:end}
.rail-wrap > .head{grid-column:1;grid-row:1}
.rail-wrap > .rail-nav{grid-column:2;grid-row:1;justify-self:end}
.rail-wrap > .rail{grid-column:1/-1;grid-row:2;margin-top:38px}
@media (max-width:760px){
  .rail-wrap{grid-template-columns:minmax(0,1fr)}
  .rail-wrap > .rail{grid-row:2;margin-top:26px}
  .rail-wrap > .rail-nav{grid-column:1;grid-row:3;justify-self:start;margin-top:20px}
}
.rail{position:relative}
.rail-track{display:flex;gap:clamp(18px,2.2vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 26px;margin:0 calc(-1*var(--gut));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail-track::-webkit-scrollbar{display:none}
.card{
  flex:0 0 min(78vw,720px);scroll-snap-align:start;position:relative;
  border:1px solid var(--hairline);background:var(--panel-2);border-radius:4px;overflow:hidden;
  transition:transform .6s var(--e-out),border-color .5s;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.card .shot{aspect-ratio:16/10;overflow:hidden;background:#111 linear-gradient(135deg,rgba(190,157,99,.18),rgba(154,124,66,.05))}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.02);transition:transform 1.4s var(--e-out)}
.card:hover .shot img{transform:scale(1.06)}
.card .meta{display:grid;grid-template-columns:auto 1fr auto;gap:14px 18px;align-items:baseline;padding:18px 22px 20px;border-top:1px solid var(--hairline)}
.card .meta h3{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem)}
.card .meta .sector{font:400 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card .meta p{grid-column:1/-1;color:var(--text-2);font-size:.98rem;margin-top:2px}
.card .tile{aspect-ratio:16/10;display:grid;place-items:center;font:700 clamp(2rem,4vw,3.4rem)/1 var(--f-disp);color:var(--accent);background:linear-gradient(135deg,rgba(190,157,99,.16),rgba(20,20,24,.6))}
.rail-nav{display:flex;gap:10px}
.rail-nav button{width:48px;height:48px;border:1px solid var(--border-int);border-radius:50%;display:grid;place-items:center;color:var(--text);transition:border-color .3s,background .3s,transform .4s var(--e-out)}
.rail-nav button:hover{border-color:var(--accent);background:rgba(190,157,99,.08);transform:translateY(-2px)}
.rail-nav svg{width:16px;height:16px}
.rail-progress{height:1px;background:var(--hairline-2);position:relative;margin-top:2px}
.rail-progress i{position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--rule);transform:translateX(var(--rx,0%));transition:transform .4s var(--e-out)}

/* ========================================================== THE LEDGER */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.ledger > div{padding:38px clamp(18px,2.6vw,38px) 42px;position:relative}
.ledger > div + div{border-left:1px solid var(--hairline)}
.ledger .num{display:block;margin-bottom:26px}
.ledger h3{margin-bottom:14px}
.ledger p{color:var(--text-2)}
.ledger .glow{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e-out)}
.ledger.in .glow{transform:scaleX(1)}
.ledger.in > :nth-child(2) .glow{transition-delay:.2s}.ledger.in > :nth-child(3) .glow{transition-delay:.4s}
@media (max-width:820px){
  .ledger{grid-template-columns:1fr}
  .ledger > div + div{border-left:0;border-top:1px solid var(--hairline)}
}

/* ============================================================ THE REVEAL */
.reveal-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.reveal{position:relative;aspect-ratio:16/10;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;background:var(--panel-2);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.reveal .under{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,transparent 0 79px,var(--hairline-2) 79px 80px),
  repeating-linear-gradient(0deg,transparent 0 79px,var(--hairline-2) 79px 80px),
  var(--canvas-2)}
.reveal .under .ph{position:absolute;left:8%;top:12%;width:40%;height:8%;border:1px dashed var(--border-int);border-radius:2px}
.reveal .under .ph.b{top:26%;width:62%;height:5%}.reveal .under .ph.c{top:36%;width:52%;height:5%}.reveal .under .ph.d{top:50%;width:22%;height:9%}
.reveal .under .ph.e{left:56%;top:12%;width:36%;height:60%}
.reveal .under .lbl{position:absolute;left:8%;bottom:10%;font:400 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.reveal .over{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,12%)) 0 0)}
.reveal .handle{position:absolute;top:0;bottom:0;left:var(--x,12%);width:0;pointer-events:none}
.reveal .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--rule);box-shadow:0 0 18px rgba(232,205,142,.5)}
.reveal .handle i{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.reveal .handle i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--champagne);opacity:0;animation:ping 4.5s var(--e-out) -1s infinite}
.reveal.complete .handle i::after{animation:none}
@keyframes ping{0%{transform:scale(.7);opacity:.7}60%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.reveal .handle i svg{width:18px;height:18px}
.reveal .done-tag{position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:2px;background:rgba(10,10,11,.7);border:1px solid var(--accent-muted);font:500 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);opacity:0;transform:translateY(-6px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.reveal.complete .done-tag{opacity:1;transform:none}
.reveal-copy .steps{margin-top:26px;display:grid;gap:12px}
.reveal-copy .steps li{display:flex;gap:14px;align-items:baseline;color:var(--text-2);opacity:.45;transition:opacity .6s var(--e-out),color .6s}
.reveal-copy .steps li.lit{opacity:1;color:var(--text)}
.reveal-copy .steps .num{color:var(--accent)}
@media (max-width:860px){.reveal-grid{grid-template-columns:1fr}}

/* ============================================================ TIMELINE */
.tl{position:relative;display:grid;grid-template-columns:52px 1fr;gap:0 clamp(18px,3vw,40px)}
.tl .line{position:relative;width:1px;margin-left:12px;background:var(--hairline-2)}
.tl .line i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--rule);transform:scaleY(var(--d,0));transform-origin:top}
.tl ol{display:grid;gap:clamp(30px,4vw,54px);padding-bottom:10px}
.tl li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;opacity:.4;transform:translateX(10px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.tl li.lit{opacity:1;transform:none}
.tl li .num{font-size:12px;color:var(--accent);position:relative}
.tl li .num::before{content:"";position:absolute;left:calc(-1*clamp(18px,3vw,40px) - 44px);top:.35em;width:9px;height:9px;border-radius:50%;background:var(--canvas);border:1px solid var(--border-int);transition:background .5s,border-color .5s,box-shadow .5s}
.tl li.lit .num::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(190,157,99,.6);animation:dotglow 5s var(--e-soft) infinite alternate}
@keyframes dotglow{0%{box-shadow:0 0 8px rgba(190,157,99,.35)}100%{box-shadow:0 0 18px rgba(232,205,142,.8)}}
.tl li h3{margin-bottom:8px}
.tl li p{color:var(--text-2);max-width:52ch}
@media (max-width:640px){.tl{grid-template-columns:28px 1fr}.tl li{grid-template-columns:1fr;gap:8px}.tl li .num::before{left:calc(-1*clamp(18px,3vw,40px) - 20px)}}

/* ============================================================== PRICING */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--hairline);background:var(--panel-2);border-radius:4px;padding:clamp(24px,2.6vw,36px);transition:transform .6s var(--e-out),border-color .5s}
.plan:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.plan.popular{border-color:var(--accent-muted);background:linear-gradient(180deg,rgba(190,157,99,.07),rgba(17,16,22,.9))}
.plan.popular::after{content:"";position:absolute;inset:-1px;border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px rgba(190,157,99,.35),0 24px 60px -30px rgba(190,157,99,.45);animation:halo 6s var(--e-soft) -1.5s infinite alternate}
@keyframes halo{0%{opacity:.35}100%{opacity:1}}
.plan .tag{position:absolute;top:-1px;right:22px;padding:8px 12px;background:var(--accent);color:var(--accent-ink);font:600 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;border-radius:0 0 3px 3px}
.plan .who{font:400 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:8px 0 22px}
.plan .price{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.plan .price small{font:400 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.plan .price b{font:700 clamp(2.1rem,1.5rem + 1.9vw,3.2rem)/1 var(--f-disp);letter-spacing:-.03em}
.plan .note{color:var(--text-2);font-size:.95rem;margin-bottom:24px}
.plan ul{display:grid;gap:11px;margin-bottom:30px;flex:1}
.plan li{display:flex;gap:12px;align-items:baseline;font-size:.98rem;color:var(--text)}
.plan li::before{content:"";flex:none;width:14px;height:1px;background:var(--rule);transform:translateY(-.35em)}
.plan .actions{margin-top:auto}
.plan .fine{margin-top:14px;font-size:.84rem;color:var(--text-3)}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:560px}}

/* ================================================================= FAQ */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:baseline;padding:26px 0;font:500 clamp(1.05rem,.95rem + .5vw,1.35rem)/1.25 var(--f-disp);letter-spacing:-.015em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--champagne)}
.faq summary .pm{width:26px;height:26px;position:relative;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);transition:transform .45s var(--e-out)}
.faq summary .pm::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:1px;height:14px;transform:translate(-50%,-50%)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq .a{padding:0 0 28px 0;color:var(--text-2);max-width:62ch;margin-left:calc(2.4ch + 22px)}
@media (max-width:640px){.faq .a{margin-left:0}}

/* ================================================================ CTA */
.cta{position:relative;border:1px solid var(--hairline);border-radius:4px;padding:clamp(44px,7vw,96px) clamp(24px,5vw,72px);text-align:center;overflow:hidden;background:var(--panel-2)}
.cta::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(50% 50% at 50% 50%,rgba(190,157,99,.18),transparent 70%);pointer-events:none;animation:breathe 7s var(--e-soft) -2s infinite alternate}
@keyframes breathe{0%{opacity:.55;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
.cta h2{max-width:20ch;margin:18px auto 16px}
.cta p{max-width:48ch;margin:0 auto 32px;color:var(--text-2)}
.cta .actions{justify-content:center}

/* ============================================================== FOOTER */
footer{position:relative;z-index:2;border-top:1px solid var(--hairline);padding:64px 0 96px;background:var(--canvas)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.fgrid h4{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.fgrid a,.fgrid span{display:block;color:var(--text-2);padding:5px 0;transition:color .3s}
.fgrid a:hover{color:var(--text)}
.fbrand img{width:120px;margin-bottom:18px}
.fbrand p{color:var(--text-2);max-width:32ch}
.socials{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border:1px solid var(--border-int);border-radius:50%;display:grid;place-items:center;padding:0;transition:border-color .3s,background .3s,transform .4s var(--e-out)}
.socials a:hover{border-color:var(--accent);background:rgba(190,157,99,.08);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.socials a[hidden]{display:none}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid var(--hairline-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.6 var(--f-mono);letter-spacing:.04em;color:var(--text-3)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* --------------------------------------------------- inner page heroes */
.page-hero{position:relative;z-index:1;padding:calc(var(--nav-h) + clamp(48px,8vh,96px)) 0 clamp(36px,6vh,72px)}
.page-hero .crumbs{display:flex;gap:10px;font:400 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:26px}
.page-hero .crumbs a:hover{color:var(--text)}
.page-hero h1{font-size:clamp(2.5rem,1.5rem + 4.6vw,5.6rem);max-width:16ch;margin-bottom:22px;line-height:1}
.page-hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}

.page-hero h1.in .w{opacity:1;transform:none}
.page-hero .lede{max-width:52ch}

/* ------------------------------------------------------- split layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center}
.split .media{position:relative;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:var(--panel-2)}
.split .media img{width:100%;height:112%;object-fit:cover;object-position:78% 50%;transform:translateY(calc(var(--py,0)*-12%));will-change:transform}
.split .media.wide{aspect-ratio:16/11}
.split p+p{margin-top:16px}
.split .body p{color:var(--text-2)}
.split .body h2{margin:18px 0 22px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split .media{aspect-ratio:16/10}}

/* the numbered facts row (about) */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.facts > div{padding:30px clamp(14px,2vw,28px);border-left:1px solid var(--hairline)}
.facts > div:first-child{border-left:0}
.facts b{display:block;font:700 clamp(2rem,1.4rem + 2vw,3.2rem)/1 var(--f-disp);letter-spacing:-.03em;margin-bottom:10px}
.facts span{color:var(--text-2);font-size:.95rem}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts > div:nth-child(3){border-left:0}.facts > div:nth-child(n+3){border-top:1px solid var(--hairline)}}

/* ------------------------------------------------------- services list */
.svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:baseline;padding:34px 0;border-top:1px solid var(--hairline);transition:padding-left .5s var(--e-out)}
.svc:last-child{border-bottom:1px solid var(--hairline)}
.svc:hover{padding-left:10px}
.svc h3{margin-bottom:10px}
.svc p{color:var(--text-2);max-width:60ch}
.svc .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.svc .tags span{font:400 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--hairline);padding:7px 10px;border-radius:2px}
.svc .go{width:40px;height:40px;border:1px solid var(--border-int);border-radius:50%;display:grid;place-items:center;transition:border-color .3s,background .3s,transform .5s var(--e-out)}
.svc:hover .go{border-color:var(--accent);background:rgba(190,157,99,.08);transform:rotate(45deg)}
.svc .go svg{width:14px;height:14px}
@media (max-width:640px){.svc{grid-template-columns:auto 1fr}.svc .go{display:none}}

/* ------------------------------------------------------------- work grid */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.filters button{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--hairline);padding:11px 14px;border-radius:2px;transition:color .3s,border-color .3s,background .3s}
.filters button:hover,.filters button[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.wgrid .card{flex:none}
.wgrid .card .meta{grid-template-columns:auto 1fr}
.wgrid .card .built{grid-column:1/-1;color:var(--text);font-size:.98rem}
.wgrid .card .wlinks{grid-column:1/-1;display:flex;gap:18px;margin-top:8px}
.wgrid .card .concept{font:400 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:760px){.wgrid{grid-template-columns:1fr}}
.also{margin-top:clamp(48px,7vh,90px);border-top:1px solid var(--hairline);padding-top:36px}
.also ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px;margin-top:20px}
.also li{display:flex;gap:14px;align-items:baseline;color:var(--text-2);padding:8px 0;border-bottom:1px solid var(--hairline-2)}
@media (max-width:760px){.also ul{grid-template-columns:1fr}}

/* --------------------------------------------------------------- forms */
.form-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:start}
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field label{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.field input,.field textarea,.field select{width:100%;background:var(--panel-2);border:1px solid var(--border-int);border-radius:2px;padding:14px 16px;color:var(--text);transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(190,157,99,.14)}
.field textarea{min-height:150px;resize:vertical}
.field ::placeholder{color:var(--text-3)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{font-size:.95rem;color:var(--text-2);min-height:1.4em}
.form-status.ok{color:var(--champagne)}
.form-status.err{color:#E0A08A}
.side{display:grid;gap:26px}
.side .item{padding:22px 0;border-top:1px solid var(--hairline)}
.side .item:last-child{border-bottom:1px solid var(--hairline)}
.side .item h4{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.side .item a{font-size:1.15rem;display:inline-block;}
.side .item a.wa{display:inline-flex;align-items:center;border-bottom:1px solid var(--hairline);transition:border-color .3s}
.side .item a:hover{border-color:var(--accent)}
.side .item p{color:var(--text-2);margin-top:6px;font-size:.95rem}
.wa{display:inline-flex;align-items:center;gap:10px}
.wa svg{width:18px;height:18px;flex:none}
@media (max-width:860px){.form-grid{grid-template-columns:1fr}.form .row{grid-template-columns:1fr}}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .rv,.stag > *,.menu a.big{opacity:1;transform:none}
  .ledger .glow{transform:scaleX(1)}
  .tl .line i{--d:1}
  .tl li{opacity:1;transform:none}
  .reveal-copy .steps li{opacity:1;color:var(--text)}
  .reveal .over{clip-path:none}
  .reveal .handle{display:none}
  .reveal .done-tag{opacity:1;transform:none}
  .u::after{transform:scaleX(1);--uk:1}
  .page-hero h1 .w{opacity:1;transform:none}
  .split .media img{transform:none}
  .dust{display:none}
}


/* ============================================================ MORE MOTION */
/* reading progress: one gold hair at the very top of the page */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:101;pointer-events:none;background:var(--rule);transform:scaleX(var(--sp,0));transform-origin:left;will-change:transform;opacity:.9}
/* chapter marker, desktop only, hidden while the hero owns the screen */
.chapter{position:fixed;left:var(--gut);bottom:30px;z-index:60;display:flex;align-items:center;gap:14px;font:500 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-2);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.chapter::before{content:"";width:34px;height:1px;background:var(--rule)}
.chapter b{font-weight:500;color:var(--accent);min-width:2.4ch}
.chapter.show{opacity:1;transform:none}
@media (max-width:900px),(max-height:560px){.chapter{display:none}}
/* kicker rules draw in with their section */
.rv .kicker::before,.stag .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e-out) .15s}
.rv.in .kicker::before,.stag.in .kicker::before{transform:scaleX(1)}
/* the rail slides in from the right */
.rail-track.stag > *{transform:translateX(44px)}
.rail-track.stag.in > *{transform:none}
.card .pill{position:absolute;right:14px;top:14px;padding:9px 12px;border-radius:2px;background:rgba(10,10,11,.72);border:1px solid var(--accent-muted);color:var(--champagne);font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--e-out),transform .4s var(--e-out);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card:hover .pill,.card:focus-visible .pill{opacity:1;transform:none}
/* the ledger numbers arrive before their lines */
.ledger > div .num{opacity:0;transform:translateX(-10px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.ledger.in > div .num{opacity:1;transform:none}
.ledger.in > :nth-child(2) .num{transition-delay:.15s}.ledger.in > :nth-child(3) .num{transition-delay:.3s}
/* prices rise out of a mask, the lists follow */
.plan .price{overflow:hidden;padding-bottom:.08em}
.plan .price b{display:inline-block;transform:translateY(112%);transition:transform 1s var(--e-out) .25s}
.stag.in .plan .price b{transform:none}
.plan li{opacity:0;transform:translateX(-8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.stag.in .plan li{opacity:1;transform:none}
.stag.in .plan li:nth-child(1){transition-delay:.45s}.stag.in .plan li:nth-child(2){transition-delay:.52s}.stag.in .plan li:nth-child(3){transition-delay:.59s}.stag.in .plan li:nth-child(4){transition-delay:.66s}.stag.in .plan li:nth-child(5){transition-delay:.73s}.stag.in .plan li:nth-child(6){transition-delay:.8s}
/* questions arrive one by one */
.faq details{opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.faq.in details{opacity:1;transform:none}
.faq.in details:nth-child(2){transition-delay:.08s}.faq.in details:nth-child(3){transition-delay:.16s}.faq.in details:nth-child(4){transition-delay:.24s}.faq.in details:nth-child(5){transition-delay:.32s}
.faq .a{overflow:hidden}
.faq details[open] .a{animation:faqOpen .55s var(--e-out)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* photos uncover from the bottom */
.split .media.rv{clip-path:inset(14% 0 0 0);transition:opacity .9s var(--e-out),transform .9s var(--e-out),clip-path 1.3s var(--e-out)}
.split .media.rv.in{clip-path:inset(0 0 0 0)}
/* the facts count up in the JS; the numbers also rise */
.facts.rv b{transform:translateY(.35em);opacity:0;transition:transform .9s var(--e-out),opacity .9s var(--e-out)}
.facts.rv.in b{transform:none;opacity:1}
.facts.rv.in > :nth-child(2) b{transition-delay:.1s}.facts.rv.in > :nth-child(3) b{transition-delay:.2s}.facts.rv.in > :nth-child(4) b{transition-delay:.3s}
/* a single gold sweep when the reveal completes */
.reveal .over::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(232,205,142,.35) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.reveal.complete .over::after{animation:sweep 1.4s var(--e-out) .1s 1 forwards}
@keyframes sweep{to{transform:translateX(120%)}}
/* nav links settle in on load */
.nav-links a{opacity:0;transform:translateY(-6px);transition:opacity .6s var(--e-out),transform .6s var(--e-out),color .3s var(--e-out)}
body.ready .nav-links a{opacity:1;transform:none}
body.ready .nav-links a:nth-child(2){transition-delay:.06s}body.ready .nav-links a:nth-child(3){transition-delay:.12s}body.ready .nav-links a:nth-child(4){transition-delay:.18s}body.ready .nav-links a:nth-child(5){transition-delay:.24s}
/* leaving a page fades it out */
body.leaving{opacity:0;transition:opacity .28s var(--e-soft)}
/* the closing panel's kicker breathes with the glow */
.cta .kicker{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .progress{transform:scaleX(var(--sp,0))}
  .chapter{display:none}
  .rv .kicker::before,.stag .kicker::before,.rail-track.stag > *,.ledger > div .num,.plan .price b,.plan li,.faq details,.facts.rv b,.nav-links a{opacity:1;transform:none}
  .split .media.rv{clip-path:none}
  .reveal .over::after{display:none}
  body.leaving{opacity:1}
}

/* ============================================================ PRELOADER
   The first thing anyone sees. It counts real loading progress, not a fake
   timer: fonts, the page itself, and on the home page the coarse pass of the
   film. It lifts away like the page rising over the hero. */
.preload{
  position:fixed;inset:0;z-index:2147483600;background:var(--canvas);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(0);will-change:transform;
}
.preload.gone{transform:translateY(-100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.preload-mark{opacity:0;transform:translateY(10px);animation:plIn .9s var(--e-out) .1s forwards}
.preload-mark img{width:clamp(66px,9vw,96px);height:auto}
@keyframes plIn{to{opacity:1;transform:none}}
.preload-rule{width:min(260px,56vw);height:1px;background:rgba(190,157,99,.18);position:relative;overflow:hidden}
.preload-rule i{position:absolute;inset:0;background:var(--rule);transform:scaleX(var(--p,0));transform-origin:left}
.preload-num{font:400 13px/1 var(--f-mono);letter-spacing:.34em;color:var(--text-3);padding-left:.34em}
.preload-num b{font-weight:400;color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .preload-mark{opacity:1;transform:none;animation:none}
  .preload.gone{transition:none;display:none}
}

/* ======================================================= PRIVACY NOTICE
   This site sets no cookies of its own. The only thing that reaches a third
   party is the anonymous visit count, so that is the only thing this asks
   about, and refusing genuinely stops it loading. */
.pn{
  position:fixed;left:var(--gut);right:var(--gut);bottom:20px;z-index:2147483500;
  max-width:560px;padding:22px 24px 20px;border:1px solid var(--hairline);border-radius:4px;
  background:rgba(13,13,15,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(calc(100% + 30px));opacity:0;visibility:hidden;
  transition:transform .7s var(--e-out),opacity .5s var(--e-out),visibility 0s .7s;
}
.pn.show{transform:none;opacity:1;visibility:visible;transition:transform .7s var(--e-out),opacity .5s var(--e-out),visibility 0s}
.pn h2{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.pn p{font-size:.94rem;line-height:1.55;color:var(--text-2);margin-bottom:18px}
.pn p a{color:var(--text);border-bottom:1px solid var(--hairline)}
.pn p a:hover{border-color:var(--accent)}
.pn .row{display:flex;gap:10px;flex-wrap:wrap}
.pn .row .btn{padding:12px 20px;font-size:11.5px}
@media (max-width:620px){
  .pn{left:12px;right:12px;bottom:12px;padding:20px 18px 18px}
  .pn .row .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.pn{transition:none}}

/* ============================================================ LEGAL PAGES */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);margin:clamp(40px,6vh,64px) 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);margin:28px 0 10px;color:var(--text)}
.prose p{color:var(--text-2);margin-bottom:16px}
.prose p strong{color:var(--text)}
.prose ul{margin:0 0 18px;display:grid;gap:9px}
.prose li{display:flex;gap:13px;align-items:baseline;color:var(--text-2)}
.prose li::before{content:"";flex:none;width:13px;height:1px;background:var(--rule);transform:translateY(-.35em)}
.prose a{color:var(--text);border-bottom:1px solid var(--hairline);transition:border-color .3s}
.prose a:hover{border-color:var(--accent)}
.prose .updated{font:400 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;display:block}
.prose .note{border-left:1px solid var(--accent-muted);padding:2px 0 2px 20px;margin:24px 0}
.prose .note p{color:var(--text-3);font-size:.92rem;margin:0}
.legal-nav{display:flex;gap:22px;flex-wrap:wrap;margin-top:clamp(40px,6vh,64px);padding-top:26px;border-top:1px solid var(--hairline)}
.fbot-links{display:flex;gap:20px;flex-wrap:wrap}
.fbot-links a{color:var(--text-3);transition:color .3s}
.fbot-links a:hover{color:var(--text)}
.page-hero.compact{padding-bottom:0}
.sec.legal{padding:clamp(26px,4vh,44px) 0 clamp(60px,9vh,110px)}