/* Tanel Website Studio V3: M1 Forest And Gold */
@font-face{font-family:"Satoshi";src:url(assets/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(assets/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(assets/fonts/satoshi-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
:root{
  --ink:#0E1612;
  --forest:#1C2F22;
  --forest-deep:#172E24;
  --gold:#C79A3A;
  --ivory:#EDE8DC;
  --fg:#E6E2D4;
  --mute:#D6D6C8;
  --rl:rgba(199,154,58,.65);
  --gold-s:#D2A560;
  --rimg:linear-gradient(90deg,#5E4A25 0,#B8944F 10%,#E9D193 22%,#9C7A3A 36%,#D8BB78 50%,#F3DFA8 60%,#8E6E33 76%,#CFAE68 90%,#5E4A25 100%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='2.1 0 0 0 -.82 0 1.95 0 0 -.82 0 0 1.7 0 -.8 0 0 0 .075 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --tex:var(--grain);
  --gut:clamp(16px,4vw,56px);
  --pad:clamp(86px,13.2vw,192px);
  --s:clamp(64px,10vw,150px);
  --ov:clamp(72px,14vw,220px);
  --disp:clamp(2.7rem,8.4vw,6rem);
  --navh:84px;
  --k:.83;
  --kc:.9;
  --fd:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--gold) var(--ink);accent-color:var(--gold);background:var(--ink)}
body{font-family:var(--fd);font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--fg);background:var(--ink);overflow-x:clip;caret-color:var(--gold);position:relative}
::selection{background:var(--gold);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ivory);outline-offset:3px;border-radius:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
section[id]{scroll-margin-top:12px}

/* grounds: green black and deep forest, smooth with fine grain */
.a,.b{position:relative;color:var(--fg);background-image:var(--tex)}
.a{background-color:var(--ink)}
.b{background-color:var(--forest)}
main>section:not(.hero),footer.foot{border-top:2px solid #8E6E33;border-image:var(--rimg) 1}
/* brushed brass sheen over each divider */
main>section:not(.hero)::before,footer.foot::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.2))}

/* type */
.display{font-family:var(--fd);font-weight:900;font-size:calc(var(--disp)*var(--k));line-height:1;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word;color:var(--ivory)}
.d2{--disp:clamp(2.3rem,5.8vw,4.6rem)}
.d3{--disp:clamp(2.2rem,4.8vw,3.9rem)}
.body{font-size:1.0625rem;line-height:1.65;max-width:62ch;color:var(--fg)}
.body p+p{margin-top:1.1em}
.num{font-family:var(--fd);font-weight:900;font-variant-numeric:lining-nums;line-height:.98;letter-spacing:-.03em}
.cond{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:1.02;color:var(--ivory)}
.col-r{grid-column:6/13}
.col-r2{grid-column:7/13}
.act{margin-top:clamp(28px,3.5vw,44px)}
.sec-h{grid-column:1/11}

/* buttons: gold fill with green black text; secondary is an ivory outline */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:.75em 1.5em;border-radius:2px;font:700 1.2rem/1.1 var(--fd);text-decoration:none;border:2px solid var(--gold);background:var(--gold);color:var(--ink);cursor:pointer}
.btn.ghost{justify-content:center;text-align:center;background:transparent;color:var(--ivory);border-color:var(--ivory)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#DDB359;border-color:#DDB359}
  .btn.ghost:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
  .nav ul a:hover,.foot a:hover,.link:hover,.direct a:hover,.meta a:hover,.faq .a a:hover{text-decoration-color:var(--gold)}
  .faq summary:hover{color:var(--gold)}
  .hero .btn.ghost:hover{background:var(--ivory);color:var(--ink)}
}

/* header sits over the hero */
header.site{position:absolute;top:0;left:0;right:0;z-index:5;height:var(--navh);display:flex;align-items:center}
header.site .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:900 1.2rem/1 var(--fd);letter-spacing:-.03em;color:var(--ivory)}
.brand img{width:40px;height:40px;border-radius:8px}
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.nav ul{display:flex;gap:clamp(18px,3vw,36px);list-style:none}
.nav ul a{font-weight:700;font-size:1.0625rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:2px;color:var(--ivory)}
.nav .btn{min-height:46px;font-size:1.05rem;padding:.6em 1.2em}
@media (max-width:760px){.nav ul{display:none}.brand{font-size:1.05rem}.brand img{width:34px;height:34px}.nav .btn{white-space:nowrap;font-size:.95rem;padding:.6em .9em}}

/* 1 hero: one reading order. H1, subheadline, buttons on the left; founder video on the right */
.hero{--hF:clamp(2rem,min(calc((100vw - 2*clamp(16px,4vw,56px))/8.8),6.4svh),3.4rem);overflow:hidden;padding-top:calc(var(--navh) + 8px);padding-bottom:0}
.atmo{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:#14261d;background-repeat:no-repeat;background-position:0 0,0 0,0 0,center top,0 0;background-size:100% 100%,100% 100%,100% 100%,auto 140%,100% 100%;
  --scrim:linear-gradient(180deg,rgba(10,18,13,.72) 0,rgba(10,18,13,0) 120px),radial-gradient(ellipse 70% 85% at 26% 48%,rgba(10,18,13,.64) 0,rgba(10,18,13,.36) 60%,rgba(10,18,13,.14) 100%),linear-gradient(180deg,rgba(10,18,13,.1) 0,rgba(10,18,13,.1) 60%,rgba(10,18,13,.35) 100%);
  background-image:var(--scrim),url(assets/luxe/luxe-marble.webp),linear-gradient(135deg,#183326,#10201a 55%,#1b3a2c)}
@media (max-width:999px){.atmo{background-position:0 0,0 0,center top,0 0;background-size:100% 100%,100% 100%,auto 140%,100% 100%;--scrim:linear-gradient(180deg,rgba(10,18,13,.7) 0,rgba(10,18,13,0) 110px),linear-gradient(180deg,rgba(10,18,13,.72) 0,rgba(10,18,13,.7) 48%,rgba(10,18,13,.4) 78%,rgba(10,18,13,.3) 100%);background-image:var(--scrim),url(assets/luxe/luxe-marble-phone.webp),linear-gradient(135deg,#183326,#10201a 55%,#1b3a2c)}}
.hgrid{display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:var(--hF);line-height:1.05;max-width:none}
.hero .sub{font-size:1.25rem;line-height:1.35;font-weight:700;max-width:none;color:#E0B672}
.copy{display:flex;flex-direction:column;align-items:stretch}
.hero .btns{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.hero .btn{justify-content:center;text-align:center}
.btn.ghost,.hero .btn.ghost{background:rgba(14,22,18,.35);border:1px solid rgba(199,154,58,.7);color:var(--gold-s)}
.video{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#1B1813;box-shadow:0 0 0 1px var(--gold),0 24px 60px -28px rgba(0,0,0,.75)}
.video img{width:100%;height:100%;object-fit:cover;object-position:30% 28%}
.play{position:absolute;left:50%;top:50%;--pw:clamp(64px,8vw,96px);width:var(--pw);height:var(--pw);margin:calc(var(--pw)/-2) 0 0 calc(var(--pw)/-2);border-radius:50%;background:var(--ivory);display:grid;place-items:center}
.play svg{width:38%;height:38%;margin-left:6%}
.vlabel{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--ivory);font-size:.9rem;line-height:1.2;padding:.5em .8em;border-radius:2px;border:1px solid var(--gold)}
@media (max-width:999px){.hero .copy{display:contents}.hero .sub{order:1}.hero .video{order:2}.hero .btns{order:3}.hgrid>*{min-width:0}}
/* hero always fills the first screen: its bottom sits on the fold, section 2 starts just below */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start}
.hero>.wrap{width:100%;margin-block:auto}
@media (min-width:1000px){
  .hero{--hF:clamp(2.6rem,min(calc((min(100vw,1440px) - 2*clamp(16px,4vw,56px) - clamp(32px,4vw,56px))*.55/8.8),8.4svh),5rem);padding-top:calc(var(--navh) + clamp(8px,2.5svh,24px))}
  .hgrid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:clamp(32px,4vw,56px);align-items:center}
  .hero .copy{align-items:flex-start}
  .hero h1{margin-bottom:20px}
  .hero .btns{margin-top:26px;align-items:stretch;width:max-content;max-width:100%}
  .hero .video{margin-top:0}
}

/* 2 credibility */
.cred{padding-top:var(--pad);padding-bottom:var(--pad)}
.cred h2{grid-column:1/10}
.figs{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,88px) clamp(12px,2vw,28px);margin-top:clamp(56px,8vw,120px)}
.fig .num{display:block;font-size:clamp(2.4rem,7.4vw,4.4rem);max-width:100%;color:var(--gold);overflow-wrap:break-word}
.fig p{margin-top:.6em;max-width:30ch;color:var(--mute)}
.cred .closing{grid-column:1/-1;margin-top:clamp(48px,7vw,96px);max-width:22ch;font-weight:900;letter-spacing:-.03em;font-size:calc(clamp(1.8rem,4vw,3.4rem)*var(--kc));line-height:1.05;text-wrap:balance;color:var(--ivory)}
@media (max-width:900px){.cred h2{grid-column:1/-1}}
@media (max-width:560px){.figs{grid-template-columns:1fr}}
.fig-note{grid-column:1/-1;margin-top:clamp(28px,4vw,48px);font-size:.9rem;color:var(--mute)}


/* 3 who */
.who{padding-top:var(--pad);padding-bottom:var(--pad)}
/* 4 problems */
.problems{padding-top:var(--pad);padding-bottom:var(--pad)}
.plist{grid-column:1/-1;list-style:none;margin-top:clamp(48px,7vw,104px);border-top:1px solid;border-image:var(--rimg) 1}
.plist li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid;border-image:var(--rimg) 1;align-items:baseline}
.plist h3{grid-column:1/6;font-size:calc(clamp(1.7rem,3.2vw,2.7rem)*var(--kc));text-wrap:balance}
.plist p{grid-column:7/13;color:var(--mute)}
.plist .solo h3{grid-column:1/-1}
@media (max-width:900px){.plist h3,.plist p{grid-column:1/-1}.plist p{margin-top:10px}}

/* 5 life */
/* 5 life: same layout, type and spacing as section 3 (Ryan, 2026-10-15); background unchanged */
.life{padding-top:calc(var(--pad)*1.5);padding-bottom:calc(var(--pad)*1.5)}

/* 6 numbers */
.numbers{padding-top:var(--pad);padding-bottom:var(--pad)}
.numbers .left{grid-column:1/8}
.numbers .left .body{margin-top:clamp(28px,4vw,56px)}
.arrows{grid-column:8/13;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);align-items:start}
.arrow{position:relative;z-index:3}
.arrow svg{width:62%;height:auto}
.arrow .num{display:block;margin-top:20px;font-size:calc(clamp(1.5rem,2.8vw,2.4rem)*var(--kc));line-height:.98;color:var(--ivory)}
.arrow.up{margin-top:calc(var(--pad)*-1 - var(--s)*.75)}
.arrow.up .num{color:var(--gold)}
.arrow.dn{margin-top:clamp(0px,3vw,48px)}
@media (max-width:900px){
  .numbers{padding-top:calc(var(--pad) + 24px)}
  .numbers .left,.arrows{grid-column:1/-1}
  .arrows{margin-top:48px;max-width:420px}
  .arrow.up{margin-top:0}
}

/* 7 founder */
.founder{padding-top:calc(var(--pad)*1.5);padding-bottom:var(--fpb)}
:root{--fpb:clamp(48px,5vw,80px)}
.frow{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);margin-top:clamp(32px,4vw,56px);align-items:start}
.frow .text{grid-column:6/13}
/* the photo sits beside the lower part of the copy and hangs about 10% of its height into the next section (Ryan, 2026-10-15) */
.photo{grid-column:1/5;grid-row:1;align-self:end;margin-bottom:calc(var(--fpb)*-1 - 10%);position:relative;z-index:3;border-radius:4px;overflow:hidden;background:#222;aspect-ratio:1/1;box-shadow:0 0 0 1px var(--gold),0 30px 70px -28px rgba(0,0,0,.75)}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
@media (max-width:900px){
  .frow .text{grid-column:1/-1;padding-bottom:40px}
  .photo{grid-column:1/-1;grid-row:2;max-width:380px}
}

/* 8 edge */
.edge{padding-top:calc(var(--pad)*1.5);padding-bottom:var(--pad)}
.edge .body{margin-top:clamp(32px,4vw,56px)}

/* 9 leaks: V2 layout, M1 colors */
.leaks{padding-top:var(--pad);padding-bottom:var(--pad)}
.leaks .intro{margin-top:clamp(28px,4vw,48px)}
.leak{grid-column:1/-1;list-style:none;margin-top:clamp(48px,7vw,96px)}
.stage{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px}
.track{grid-column:1;grid-row:1/span 3;display:flex;flex-direction:column;align-items:center}
.ic{position:relative;flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--ivory);display:grid;place-items:center}
.ic svg{width:26px;height:26px;fill:none;stroke:var(--ivory);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.win{background:var(--gold);border-color:var(--gold)}
.ic.win svg{stroke:var(--ink)}
.ln{position:relative;flex:1;width:2px;min-height:28px;margin:8px 0;background:var(--gold)}
.ln::after{content:"";position:absolute;left:50%;bottom:-1px;width:9px;height:9px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translateX(-50%) rotate(135deg)}
.stage h3{grid-column:2;font-size:1.35rem;padding-top:14px}
.stage p{grid-column:2;font-size:.95rem;line-height:1.5;margin-top:6px;max-width:46ch;color:var(--fg)}
.stage .lost{display:flex;gap:8px;align-items:flex-start;color:var(--ivory);margin-top:10px;padding-bottom:26px}
.stage:last-child .lost,.stage:last-child p:last-child{padding-bottom:0}
.alert{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--gold);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.stage .lost span{font-size:.92rem}
.stage .lost b{font-weight:700;color:var(--gold-s)}
.stage.noleak p:not(.lost){padding-bottom:26px}
.stage:last-child.noleak p:not(.lost){padding-bottom:0}
.leaks .closing{margin-top:clamp(48px,7vw,96px);max-width:28ch;font-weight:900;letter-spacing:-.03em;font-size:calc(clamp(1.7rem,3.6vw,3rem)*var(--kc));line-height:1.08;text-wrap:balance;color:var(--ivory)}
@media (min-width:1200px){
  .leak{display:grid;grid-template-columns:repeat(9,minmax(0,1fr))}
  .stage{display:block;padding-right:10px}
  .track{flex-direction:row;align-items:center}
  .ln{flex:1;width:auto;min-width:12px;min-height:0;height:2px;margin:0 8px}
  .ln::after{left:auto;right:-1px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg)}
  .stage h3{font-size:1.12rem;line-height:1.1;padding-top:18px}
  .stage p{font-size:.86rem;margin-top:8px}
  .stage .lost{padding-bottom:0;margin-top:14px}
  .stage .lost span{font-size:.84rem}
  .stage.noleak p:not(.lost){padding-bottom:0}
  .alert{width:16px;height:16px}
}

/* 10 work */
.work{padding-top:var(--pad);padding-bottom:var(--pad)}
.work h2{grid-column:1/10;margin-bottom:clamp(48px,7vw,104px)}
.proj{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-items:start}
.proj+.proj{margin-top:clamp(56px,8vw,120px)}
.panel{position:relative;aspect-ratio:16/10;border-radius:6px;container-type:inline-size;background:var(--c);overflow:hidden;box-shadow:0 0 0 1px var(--gold),0 30px 70px -28px rgba(0,0,0,.75)}
.proj .panel{grid-column:1/9}
.proj .meta{grid-column:9/13;padding-top:6px}
.proj.flip .panel{grid-column:5/13;grid-row:1}
.proj.flip .meta{grid-column:1/5;grid-row:1}
.meta h3{font-weight:900;font-size:calc(clamp(2.4rem,4.6vw,4rem)*var(--kc)*.95);line-height:.94;letter-spacing:-.035em;text-wrap:balance;color:var(--ivory)}
.meta .desc{margin-top:16px;color:var(--mute)}
.meta .desc a{color:var(--gold-s);font-weight:700;text-decoration-thickness:1px;text-underline-offset:.2em}
.meta .res{margin-top:12px;font-weight:700;max-width:none;color:#E0B672}
.laptop{position:absolute;left:7%;top:11%;width:72%}
.lscreen{background:#0A0A09;border-radius:1.6cqw 1.6cqw 0 0;padding:1.5cqw 1.5cqw 1.2cqw;box-shadow:0 3cqw 6cqw -1.5cqw rgba(0,0,0,.5)}
.lscreen img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:.4cqw;background:#222}
.lbase{position:relative;width:112%;margin-left:-6%;height:2.1cqw;background:#B9B9B4;border-radius:0 0 2cqw 2cqw;box-shadow:0 2cqw 3cqw -1cqw rgba(0,0,0,.45)}
.lbase::after{content:"";position:absolute;left:50%;top:0;width:14%;height:.7cqw;margin-left:-7%;background:#8D8D88;border-radius:0 0 1cqw 1cqw}
.phone{position:absolute;left:71.5%;bottom:6.5%;width:19%;background:#0A0A09;border-radius:2.6cqw;padding:.7cqw;box-shadow:0 3cqw 5cqw -1.5cqw rgba(0,0,0,.55)}
.pscreen{width:100%;aspect-ratio:1170/2532;border-radius:2cqw;overflow:hidden;background:#222}
.pscreen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.glow .lscreen{box-shadow:0 4cqw 12cqw rgba(247,176,86,.34),0 3cqw 6cqw -1.5cqw rgba(0,0,0,.5)}
.work .act{grid-column:1/-1;margin-top:clamp(56px,8vw,112px)}
@media (max-width:900px){
  .proj{display:block}
  .proj .meta,.proj.flip .meta{margin-top:20px;padding:0}
  .work h2{grid-column:1/-1}
  .phone{width:23%;left:70%;border-radius:3.4cqw;padding:1cqw}
  .pscreen{border-radius:2.6cqw}
}

/* 11 channels */
.channels{padding-top:var(--pad);padding-bottom:var(--pad)}
.chlist{grid-column:1/-1;list-style:none;margin-top:clamp(48px,7vw,104px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(16px,3vw,48px)}
.chlist li,.whylist li{border-top:1px solid;border-image:var(--rimg) 1;padding-top:18px}
.chlist h3{font-size:calc(clamp(1.7rem,2.8vw,2.4rem)*var(--kc));margin-bottom:10px}
.chlist p{max-width:34ch;color:var(--fg)}
@media (max-width:900px){.chlist{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.chlist{grid-template-columns:1fr}}

/* 12 timeline */
.timeline{padding-top:var(--pad);padding-bottom:var(--pad)}
.tl{grid-column:1/-1;list-style:none;margin-top:clamp(48px,7vw,104px);--w:clamp(96px,20vw,300px)}
.tl li{position:relative;display:grid;grid-template-columns:var(--w) 30px minmax(0,1fr);column-gap:clamp(8px,2vw,28px);padding-bottom:clamp(28px,3.4vw,44px);align-items:start}
.tl .when{font-size:calc(clamp(1.5rem,3.6vw,3rem)*var(--kc));color:var(--gold);text-wrap:balance}
.tl .dot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--gold);justify-self:center;margin-top:.5em}
.tl li::after{content:"";position:absolute;top:calc(.5em + 16px);bottom:-.5em;left:calc(var(--w) + clamp(8px,2vw,28px) + 14px);width:1px;background:linear-gradient(180deg,#D9C7A1,#6F5E3A)}
.tl li:last-child::after{display:none}
.tl p{color:var(--mute);max-width:56ch;padding-top:.2em}
@media (max-width:560px){.tl li{grid-template-columns:var(--w) 22px minmax(0,1fr)}.tl li::after{left:calc(var(--w) + clamp(8px,2vw,28px) + 10px)}.tl .dot{width:14px;height:14px}.tl .when{font-size:1.4rem}}

/* 13 why */
.why{padding-top:var(--pad);padding-bottom:var(--pad)}
.why .sec-h{grid-column:1/-1}
.whylist{grid-column:1/-1;list-style:none;margin-top:clamp(48px,7vw,104px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(16px,3vw,48px)}
.whylist h3{font-size:calc(clamp(1.7rem,2.8vw,2.4rem)*var(--kc));margin-bottom:10px}
.whylist p{max-width:36ch;color:var(--fg)}
@media (max-width:900px){.whylist{grid-template-columns:1fr}}

/* 14 guarantee */
.guar{padding-top:var(--pad);padding-bottom:var(--pad)}
.gpanel,.cform form{padding:clamp(22px,3.2vw,44px);border-radius:4px;background:linear-gradient(rgba(10,18,13,.84),rgba(10,18,13,.84)),url(assets/scenes/r5-speckle.webp) center/cover no-repeat #1C2F22;box-shadow:0 0 0 1px rgba(199,154,58,.6)}
.ph{background:var(--ivory);color:var(--ink);padding:.05em .4em;border-radius:2px}

/* 15 how */
.how{padding-top:var(--pad);padding-bottom:var(--pad)}
.how .pull{margin-top:clamp(28px,4vw,48px);font-weight:900;letter-spacing:-.03em;font-size:calc(clamp(1.6rem,3vw,2.5rem)*var(--kc));line-height:1.1;max-width:24ch;text-wrap:balance;color:var(--ivory)}

/* 16 reviews and faq */
.qa{padding-top:var(--pad);padding-bottom:var(--pad)}
.qa .ph-block,.audit .ph-block{border:1px dashed var(--gold);border-radius:4px;padding:clamp(24px,4vw,48px);color:var(--fg);max-width:62ch}
.qa .ph-block{grid-column:1/-1;margin-top:clamp(32px,4vw,56px);max-width:none}
.qa h2.q{margin-top:clamp(72px,10vw,150px)}
.faq{grid-column:1/-1;margin-top:clamp(40px,6vw,80px);border-top:1px solid;border-image:var(--rimg) 1}
.faq .a{background-image:none}
.faq details{border-bottom:1px solid;border-image:var(--rimg) 1}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.4vw,28px) 0;font-weight:900;letter-spacing:-.03em;font-size:calc(clamp(1.4rem,2.6vw,2.1rem)*var(--kc));line-height:1.1;min-height:52px;color:var(--ivory)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;color:var(--gold);background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
.faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.faq .a{padding:0 0 clamp(20px,2.6vw,32px);max-width:62ch;color:var(--mute)}
.faq .a a{color:var(--gold-s);font-weight:700;text-underline-offset:.25em}
.qa .act{grid-column:1/-1}

/* 17 audit + contact */
.contact{padding-top:var(--pad);padding-bottom:var(--pad)}
.audit{grid-column:1/-1;background-color:var(--forest);background-image:var(--tex);color:var(--fg);border-radius:4px;box-shadow:0 0 0 1px var(--gold);padding:clamp(28px,5vw,72px);margin-bottom:var(--pad)}
.audit h2{--disp:clamp(2.2rem,5.4vw,4.4rem);max-width:16ch}
.audit [hidden]{display:none!important}
.audit form{display:block;margin-top:clamp(24px,3vw,40px)}
.audit .au-mail{margin-top:clamp(24px,3vw,36px)}
.audit .au-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.audit .au-row.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.audit .au-row .btn{min-height:52px;white-space:nowrap}
.audit .au-ts{margin-top:14px;min-height:0}
.audit .au-ts:empty{display:none}
.audit .au-err{margin-top:14px;font-weight:700;color:#F0B9A0;max-width:62ch}
.audit .au-wait{margin-top:clamp(24px,3vw,40px);display:flex;align-items:center;gap:16px;font-weight:700;color:var(--ivory)}
.audit .au-spin{flex:none;width:28px;height:28px;border-radius:50%;border:3px solid rgba(199,154,58,.3);border-top-color:var(--gold)}
@media (prefers-reduced-motion:no-preference){.audit .au-spin{animation:au-turn 1s linear infinite}}
@keyframes au-turn{to{transform:rotate(360deg)}}
.audit .au-res{margin-top:clamp(28px,3.4vw,44px)}
.audit .au-site{font-weight:700;color:var(--gold-s);font-size:1.0625rem}
.audit .au-note{margin-top:8px;color:var(--mute);font-size:.95rem;max-width:62ch}
.audit .au-scores{margin-top:18px;display:grid;gap:16px}
.audit .au-health{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.audit .au-hn{font:900 clamp(4rem,9vw,6.5rem)/1 var(--fd);letter-spacing:-.04em;color:var(--gold);font-variant-numeric:tabular-nums}
.audit .au-hl{font-weight:700;color:var(--ivory);font-size:1.15rem}
.audit .au-cats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.audit .au-cats li{padding:14px 16px;border-radius:3px;background:rgba(8,16,11,.55);box-shadow:0 0 0 1px rgba(199,154,58,.4)}
.audit .au-cats b{display:block;font:900 clamp(1.6rem,3vw,2.2rem)/1.1 var(--fd);color:var(--ivory);font-variant-numeric:tabular-nums}
.audit .au-cats b.nm{font-size:1.05rem;color:var(--mute);padding:.35em 0}
.audit .au-cats span{display:block;font-weight:700;color:var(--gold-s);font-size:.95rem}
.audit .au-cats i{display:block;font-style:normal;font-size:.85rem;color:var(--mute)}
@media (max-width:760px){.audit .au-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.audit .au-tag{flex:none;align-self:center;margin-left:auto;padding:0;background:none;color:#8FC59F;font:700 1.35rem/1 var(--fd);letter-spacing:0;white-space:nowrap}
.audit .au-list li{flex-wrap:wrap}
.audit .au-list li .tt{flex:1 1 12ch;min-width:0}
.audit .au-list li .au-data{flex:1 0 100%;padding-left:2.3em;margin-top:-.15em;font:400 .98rem/1.45 var(--fd);letter-spacing:0;color:var(--mute)}
.audit .au-sentnote{margin-top:6px;color:var(--fg);max-width:62ch}
.audit .au-card{margin-top:14px;position:relative;overflow:hidden;padding:clamp(16px,2.4vw,32px);border-radius:3px;background:rgba(8,16,11,.55);box-shadow:0 0 0 1px rgba(199,154,58,.5)}
.audit ol{list-style:none;counter-reset:au}
.audit .au-list li,.audit .au-blur li{counter-increment:au;display:flex;gap:.7em;align-items:baseline;font:900 clamp(1.1rem,1.7vw,1.4rem)/1.3 var(--fd);letter-spacing:-.01em;color:var(--ivory);padding:.55em 0;overflow-wrap:anywhere}
.audit .au-list li::before,.audit .au-blur li::before{content:counter(au) ".";flex:none;min-width:1.6em;color:var(--gold-s)}
.audit .au-blur{filter:blur(5px);user-select:none;-webkit-user-select:none;pointer-events:none;max-height:clamp(190px,22vw,300px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 10%,transparent 95%);mask-image:linear-gradient(#000 10%,transparent 95%)}
.audit .au-blur li{font-weight:700;color:var(--fg)}
.audit .au-more{margin-top:clamp(20px,2.4vw,32px);font-weight:700;color:var(--gold-s)}
.audit .au-more+.au-mail,.audit .au-more+.au-mail .au-ask{margin-top:6px}
.audit .au-ask{font:900 clamp(1.35rem,2.4vw,1.9rem)/1.2 var(--fd);letter-spacing:-.01em;color:var(--ivory);margin-bottom:18px}
.audit .au-mail .f{max-width:520px}
.audit .au-mail .btn,.audit .au-follow .btn{margin-top:18px}
.audit .au-row.three{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.audit .au-acts{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.audit .au-sent{margin-top:clamp(20px,2.4vw,32px);font:900 clamp(1.4rem,2.6vw,2rem)/1.2 var(--fd);color:var(--ivory)}
.audit .au-follow{margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:760px){.audit .au-row.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.audit .au-row,.audit .au-row.two{grid-template-columns:minmax(0,1fr)}.audit .au-row .btn{width:100%;justify-content:center}}
.contact .cform{grid-column:1/-1;max-width:920px}
.contact .cform h2{--disp:clamp(2.3rem,5.8vw,4.6rem)}
form{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
label{font-weight:700;font-size:1rem;color:var(--ivory)}
input,textarea{font:inherit;font-size:1.0625rem;color:var(--ivory);background:#08100B;border:2px solid #B3893A;border-radius:2px;padding:.8em .9em;width:100%;min-height:52px;caret-color:var(--gold)}
textarea{min-height:150px;resize:vertical}
input::placeholder,textarea::placeholder{color:#B9B4A5;opacity:1}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--ivory);outline-offset:2px;border-color:var(--ivory);background:#0C1A12}
.note{margin-top:14px;font-weight:700;color:var(--gold-s)}
/* contact details in the form-label style (Satoshi 700, normal tracking), not the tight 900 display cut (Ryan, 2026-10-15) */
.direct{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 36px;font:700 clamp(1.25rem,2vw,1.6rem)/1.3 var(--fd);letter-spacing:0}
.direct a{color:var(--ivory);text-decoration-thickness:2px;text-underline-offset:.25em;text-decoration-color:var(--gold)}
.priceline{margin-top:20px}
.link{font-weight:700;color:var(--gold-s);text-decoration-thickness:2px;text-underline-offset:.25em}
@media (max-width:560px){form{grid-template-columns:1fr}.direct{font-size:1.3rem}}

/* footer */
.foot{padding:56px 0 48px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.foot .brand{font-size:1.25rem}
.foot ul{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none}
.foot a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:2px}
.foot .c{color:var(--mute);font-size:.9rem;width:100%}

/* motion: one slow fade, once; content is visible at rest */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0}
  .js .rv.seen{opacity:1;transition:opacity .9s ease-out;transition-delay:calc(var(--i,0)*100ms)}
}
@media (max-width:560px){:root{--k:.82}.leaks h2{letter-spacing:-.05em}.tl{--w:112px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:900px){.col-r,.col-r2{grid-column:1/-1}}

/* hero headline: four justified lines, tracked by script.js */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hl{display:block;white-space:nowrap}
.ht{display:inline-block}
@media (max-width:420px){.nav .btn{display:none}}

/* hero logo marquee */
.mq{position:relative;z-index:1;margin-top:clamp(10px,2svh,22px);padding-bottom:clamp(12px,2svh,24px)}
.mq-band{height:7px;margin-bottom:clamp(14px,2.2svh,20px);position:relative;
  background:
    repeating-linear-gradient(180deg,rgba(255,244,214,.07) 0 1px,transparent 1px 2px),
    linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 14%,rgba(255,240,200,.2) 34%,rgba(0,0,0,0) 54%,rgba(255,240,200,.15) 77%,rgba(0,0,0,.28) 100%),
    linear-gradient(180deg,#4A3818 0,#F3DFA8 16%,#D2A560 32%,#C79A3A 58%,#A67F2E 82%,#54401C 100%);
  box-shadow:inset 0 1px 0 rgba(30,20,6,.7),inset 0 -1px 0 rgba(30,20,6,.75),0 3px 9px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5)}
.mq-t{text-align:center;font-size:.875rem;line-height:1.2;letter-spacing:.03em;color:#D8D4C6;margin-bottom:clamp(18px,3svh,28px)}
.mq-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.mq-track{--ms:1.08;list-style:none;display:flex;width:max-content;flex-wrap:nowrap}
.mq-track li{flex:none;display:flex;align-items:center;height:clamp(56px,8.6svh,88px);padding:0 clamp(36px,5.8vw,83px);border-left:1px solid rgba(237,232,220,.22)}
.mq-track img{height:calc(var(--h)*var(--ms));max-height:100%;width:auto;max-width:none;filter:grayscale(1) invert(1) brightness(1.6) contrast(.7);opacity:.85}
@media (max-height:820px){.mq-track{--ms:.92}}
@media (max-height:740px){.mq-track{--ms:.78}}
@media (max-width:560px){.mq{padding-bottom:12px}.mq-band{height:5px;margin-bottom:12px}.mq-t{margin-bottom:14px}.mq-track{--ms:.7}.mq-track li{height:54px;padding:0 36px}}
@media (max-width:560px) and (max-height:740px){.mq-track{--ms:.6}.mq-track li{height:46px}}
@media (prefers-reduced-motion:no-preference){
  .mq-track{animation:mq 50s linear infinite}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .mq-view{-webkit-mask-image:none;mask-image:none}
  .mq-track{width:auto;flex-wrap:wrap;justify-content:center;row-gap:8px}
  .mq-track li[aria-hidden]{display:none}
}

/* sections 1 to 3: one fixed marble lobby behind all three; scroll pans the camera right (lobby.js) */
main>section{z-index:1}
.lobby{position:fixed;top:0;left:0;width:100%;height:100lvh;z-index:0;pointer-events:none;background:#10201a;visibility:hidden}
.lobby.on{visibility:visible}
.lobby canvas{display:block;width:100%;height:100%}
.lobby-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 75% 90% at 30% 50%,rgba(10,18,13,.7) 0,rgba(10,18,13,.55) 60%,rgba(10,18,13,.46) 100%),linear-gradient(180deg,rgba(10,18,13,.28),rgba(10,18,13,.28))}
@media (max-width:760px){.lobby-scrim{background:linear-gradient(180deg,rgba(10,18,13,.66),rgba(10,18,13,.66))}}
html.js .pan{background-color:transparent}
/* hero keeps only its nav fade; the lobby replaces its marble photo */
.atmo{background-color:transparent;background-image:linear-gradient(180deg,rgba(10,18,13,.6) 0,rgba(10,18,13,0) 120px);background-size:100% 100%}
/* no brass dividers inside the lobby run */
main>section.pan{border-top:0}
main>section.pan::before{display:none}
/* no gold line above the logo strip inside the lobby run */
.hero .mq-band{display:none}

/* VISUAL RULEBOOK (approved 2026-10-14): three grounds, brass at every change.
   g-moment  golden-hour lobby photograph, short text only (hero, portfolio, guarantee)
   g-speckle speckled emerald marble, held still while text scrolls (desktop only)
   g-wall    calm lobby wall with floor, where the gyroscope stands
   g-solid   plain forest with fine grain
   chg       the ground changes here, so a thick brass band marks the top */
:root{--ov-moment:linear-gradient(180deg,rgba(10,18,13,.5) 0,rgba(10,18,13,0) 140px),linear-gradient(90deg,rgba(10,18,13,.6) 0,rgba(10,18,13,.36) 55%,rgba(10,18,13,.14) 100%)}
main>section{background-repeat:no-repeat}
main>section.g-solid{background-color:var(--forest);background-image:var(--tex);background-repeat:repeat}
main>section.g-speckle{background-color:var(--forest);background-image:linear-gradient(rgba(10,18,13,.06),rgba(10,18,13,.06)),url(assets/scenes/r5-speckle.webp);background-size:cover;background-position:center;background-attachment:fixed}
main>section.g-moment{background-color:#152820;background-image:var(--ov-moment),url(assets/scenes/r18-guar-lobby-4k.webp);background-size:100% 100%,100% 100%,cover;background-position:0 0,0 0,center}
main>section.g-wall{background-color:#152820;background-image:linear-gradient(90deg,rgba(10,18,13,.45) 0,rgba(10,18,13,.28) 40%,rgba(10,18,13,.5) 60%,rgba(10,18,13,.42) 100%),url(assets/scenes/r4-who-plate.webp);background-size:100% 100%,cover;background-position:0 0,center bottom}
/* sections with the gyroscope: floor.js sizes and slides the photo so its floor meets the plinth */
main>section.has-floor.g-wall{background-size:100% 100%,auto var(--plate-h,1500px);background-position:0 0,center var(--plate-y,bottom)}
main>section.has-floor.g-moment{background-size:100% 100%,100% 100%,auto var(--plate-h,1500px);background-position:0 0,0 0,center var(--plate-y,bottom)}
/* room to breathe: image moments and the gyroscope sections get extra height */
main>section.g-moment:not(.hero),main>section.g-wall{padding-top:calc(var(--pad)*1.5);padding-bottom:calc(var(--pad)*1.5)}
/* brass: thick band only where the ground changes, nothing where it continues */
main>section:not(.hero),footer.foot{border-top:0}
main>section:not(.hero)::before,footer.foot::before{display:none}
main>section.chg::before{display:block;content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,200,.35) 0,rgba(255,240,200,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.35) 100%),var(--rimg);
  box-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(0,0,0,.35)}
footer.foot{background-color:var(--forest)}
/* the gyroscope: in the open cell under the headline, left of the copy column */
.has-floor .gyro{grid-column:1/6;grid-row:2;align-self:center;justify-self:center;width:clamp(96px,8vw,150px);height:auto;margin-top:clamp(32px,4vw,56px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));-webkit-box-reflect:below -2px linear-gradient(transparent 62%,rgba(255,255,255,.22))}
/* phones: no held-still backgrounds (iPhones ignore them), objects hide */
@media (max-width:900px),(hover:none){main>section.g-speckle{background-attachment:scroll}}
@media (max-width:900px){.has-floor .gyro{display:none}}
@media (max-width:900px){main>section.has-floor.g-wall{background-size:100% 100%,cover;background-position:0 0,center bottom}main>section.has-floor.g-moment{background-size:100% 100%,100% 100%,cover;background-position:0 0,0 0,center}}
/* the Two Numbers arrows rise through the brass band, so they sit in front of it */
.numbers .wrap{z-index:3}
/* the founder photo hangs down past its section, so the whole founder section sits above the next one and its brass band */
main>section.founder{z-index:2}
/* portfolio: the lobby held still behind the scrolling work, sized to the screen (not stretched over the whole tall section),
   and the device mockups float on it with no coloured card behind them */
main>section.work.g-moment{background-image:var(--ov-moment),url(assets/scenes/r5-lobby-hq.webp);background-attachment:fixed;background-size:100% 100%,100% 100%,cover;background-position:0 0,0 0,center}
.work .panel{background:none;box-shadow:none}
@media (max-width:900px),(hover:none){main>section.work.g-moment{background-attachment:scroll}}
/* guarantee gyroscope 35% larger than the standard size, same centre */
.guar .gyro{width:clamp(130px,10.8vw,203px)}
/* hero client strip: a medium brass divider on top, then frosted dark glass down to the bottom of the hero.
   Same blur across the strip; the darkening ramps from almost none on the left to darkest on the bright right side. */
.hero .mq{padding-top:clamp(16px,2.4svh,24px);
  background:linear-gradient(90deg,rgba(10,18,13,.06) 0,rgba(10,18,13,.22) 35%,rgba(10,18,13,.5) 70%,rgba(10,18,13,.72) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(.9);backdrop-filter:blur(12px) saturate(.9)}
.hero .mq::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,200,.35) 0,rgba(255,240,200,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.35) 100%),var(--rimg);
  box-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(0,0,0,.35)}
/* client strip, softer (2026-10-15): hairline brass, lighter blur and darkening so the lobby still reads through */
.hero .mq{background:linear-gradient(90deg,rgba(10,18,13,0) 0,rgba(10,18,13,.1) 35%,rgba(10,18,13,.28) 70%,rgba(10,18,13,.42) 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero .mq::before{height:1px;background:var(--rimg);box-shadow:none;opacity:.9}
/* hero background (chosen 2026-10-15): Wide Slab, upscaled to 4K and softened */
main>section.hero{background-image:var(--ov-moment),url(assets/scenes/r9-hero-slab-4k.webp)}
/* hero video (2026-10-15): framed in brass with a dark mat, deep shadow, and a spotlight that dims the room around it.
   The frame is stacked rings (mat, then a bevelled brass edge) so it needs no wrapper; spot.js keeps the light centred on the video. */
.hero .video{box-shadow:0 0 0 clamp(6px,.7vw,11px) #0F1A14,
  0 0 0 calc(clamp(6px,.7vw,11px) + 1px) #5E4A25,0 0 0 calc(clamp(6px,.7vw,11px) + 3px) #D8BB78,
  0 0 0 calc(clamp(6px,.7vw,11px) + 5px) #B8944F,0 0 0 calc(clamp(6px,.7vw,11px) + 6px) #6E5428,
  0 30px 60px -12px rgba(0,0,0,.85),0 60px 120px -24px rgba(0,0,0,.6)}
main>section.hero{background-image:radial-gradient(ellipse min(46vw,760px) min(48vh,520px) at var(--spot-x,72%) var(--spot-y,48%),rgba(10,18,13,0) 0,rgba(10,18,13,.28) 55%,rgba(10,18,13,.62) 100%),var(--ov-moment),url(assets/scenes/r9-hero-slab-4k.webp);
  background-size:100% 100%,100% 100%,100% 100%,cover;background-position:0 0,0 0,0 0,center}
@media (max-width:999px){main>section.hero{background-image:var(--ov-moment),url(assets/scenes/r9-hero-slab-4k.webp);background-size:100% 100%,100% 100%,cover;background-position:0 0,0 0,center}}
/* video frame, refined: square corners to match the near-square buttons, and the dark mat cut to a 2px sliver */
.hero .video{border-radius:0;box-shadow:0 0 0 2px #0F1A14,0 0 0 3px #5E4A25,0 0 0 5px #D8BB78,0 0 0 7px #B8944F,0 0 0 8px #6E5428,
  0 30px 60px -12px rgba(0,0,0,.85),0 60px 120px -24px rgba(0,0,0,.6)}
/* hero, brighter (2026-10-15): the 4K slab without the softening pass, and a gentler spotlight (edges ~30% instead of 62%) */
main>section.hero{background-image:radial-gradient(ellipse min(46vw,760px) min(48vh,520px) at var(--spot-x,72%) var(--spot-y,48%),rgba(10,18,13,0) 0,rgba(10,18,13,.12) 55%,rgba(10,18,13,.3) 100%),var(--ov-moment),url(assets/scenes/r9-hero-slab-4k.webp)}
@media (max-width:999px){main>section.hero{background-image:var(--ov-moment),url(assets/scenes/r9-hero-slab-4k.webp)}}
/* hero balance (2026-10-15): even out the overlay. Lighter on the left (was .6), a little heavier on the bright right edge (was .14) */
main>section.hero{--ov-moment:linear-gradient(180deg,rgba(10,18,13,.5) 0,rgba(10,18,13,0) 140px),linear-gradient(90deg,rgba(10,18,13,.38) 0,rgba(10,18,13,.26) 50%,rgba(10,18,13,.26) 75%,rgba(10,18,13,.42) 100%)}
/* section 2, tighter band (2026-10-15): shorter headline, four figures in one staggered row clustered left,
   labels 2px larger, closing line on one line on desktop */
main>section.cred{padding-top:calc(var(--pad)*.6);padding-bottom:calc(var(--pad)*.6)}
.cred .figs{grid-template-columns:repeat(4,max-content);justify-content:start;column-gap:clamp(40px,5vw,88px);row-gap:28px;margin-top:clamp(36px,4.5vw,64px);align-items:start}
.cred .fig:nth-child(even){margin-top:clamp(28px,3vw,48px)}
.cred .fig p{font-size:calc(1.0625rem + 2px);max-width:17ch}
.cred .fig-note{margin-top:clamp(20px,2.5vw,36px)}
.cred .closing{max-width:none;white-space:nowrap;font-size:min(calc(clamp(1.8rem,4vw,3.4rem)*var(--kc)),2.4vw,34px);margin-top:clamp(36px,4.5vw,64px)}
@media (max-width:1260px){.cred .figs{grid-template-columns:repeat(2,max-content)}}@media (max-width:1000px){.cred .fig:nth-child(even){margin-top:24px}.cred .closing{white-space:normal;font-size:calc(clamp(1.8rem,4vw,3.4rem)*var(--kc))}}
@media (max-width:560px){.cred .figs{grid-template-columns:1fr}.cred .fig:nth-child(even){margin-top:0}}
/* section 2 polish: footnote centred, closing line in muted gold */
.cred .fig-note{text-align:center;max-width:none}
.cred .closing{color:var(--gold-s)}
/* footnote moved up: left aligned directly under the section heading, part of the heading block */
.cred .fig-note{text-align:left;margin-top:clamp(10px,1.2vw,16px)}
/* section 2 figures: flat horizontal row, no stagger (Ryan 2026-10-15) */
.cred .fig:nth-child(even){margin-top:0}
@media (max-width:1000px){.cred .fig:nth-child(even){margin-top:0}}
/* closing line: ivory, with the payoff phrase in the figure gold (option 4) */
.cred .closing{color:var(--ivory)}
.cred .closing em{font-style:normal;color:var(--gold)}
/* section 2 brass bands, much thinner: top of section 2 and top of section 3 (the bottom of section 2) */
main>section.cred.chg::before,main>section.who.chg::before{height:3px;box-shadow:0 1px 0 rgba(0,0,0,.35)}
/* hero room held still while the page scrolls over it (desktop). Only the photo is fixed; the spotlight and overlays move with the content so the light stays on the video. */
main>section.hero{background-attachment:scroll,scroll,scroll,fixed}
@media (max-width:999px),(hover:none){main>section.hero{background-attachment:scroll}}
/* section 2 texture scrolls with the page (Ryan 2026-10-15); other speckle sections unchanged */
main>section.cred.g-speckle{background-attachment:scroll}

/* section 3 (round six, option 1 "Blank Room", relit in round seven, 2026-10-15): warm light enters high from the top-right corner (the copy's side)
   and falls diagonally to a glow behind the gyroscope, which is dimmed about 20 percent so the copy leads, its shadow falling left. a near-blank room so the copy reads, and one large gyroscope
   in the lower-left corner, bleeding off the bottom and left edges, in the open space under the headline.
   floor.js scales and slides the plate so its floor line sits well below the button at every width. */
main>section.who{overflow:hidden;background-image:linear-gradient(90deg,rgba(10,18,13,0) 0,rgba(10,18,13,.18) 45%,rgba(10,18,13,.3) 100%),url(assets/scenes/r12-who-room-4k.webp);
  background-size:100% 100%,auto var(--room-h,100%);background-position:0 0,var(--room-x,0) var(--room-y,100%);background-attachment:scroll;padding-bottom:var(--room-pb,calc(var(--pad)*1.5))}
.who .wrap{z-index:2}
.who .gyro-lg{position:absolute;z-index:1;pointer-events:none;object-fit:contain;background:transparent;left:var(--gx,-7vw);bottom:var(--gy,-6vw);width:var(--gw,44vw);height:auto;
  filter:drop-shadow(-30px 18px 36px rgba(0,0,0,.6))}
@media (max-width:900px){.who .gyro-lg{display:none}}
/* desktop: the room fills at least one full screen, copy centred in it; floor.js fits the gyroscope into the open space under the headline */
@media (min-width:901px){main>section.who,main>section.life{min-height:100svh;display:flex;flex-direction:column;justify-content:center}}
/* section 3 headline (Ryan, 2026-10-15): about 8% larger, slightly looser tracking, 15% more space between lines */
.who h2.display,.life h2.display,.numbers h2.display,.founder h2.display{font-size:calc(var(--disp)*var(--k)*1.08);letter-spacing:-.02em;line-height:1.15}
/* section 3 body copy 2px larger (Ryan, 2026-10-15) */
.who .body,.life .body,.numbers .body,.founder .body{font-size:calc(1.0625rem + 2px)}
/* phones: the plate's top-right corner light lands behind the headline, so a top-down darkening keeps it readable */
@media (max-width:900px){main>section.who{background-image:linear-gradient(180deg,rgba(10,18,13,.62) 0,rgba(10,18,13,.45) 40%,rgba(10,18,13,.15) 70%,rgba(10,18,13,0) 85%),linear-gradient(90deg,rgba(10,18,13,0) 0,rgba(10,18,13,.18) 45%,rgba(10,18,13,.3) 100%),url(assets/scenes/r12-who-room-4k.webp);
  background-size:100% 100%,100% 100%,auto var(--room-h,100%);background-position:0 0,0 0,var(--room-x,0) var(--room-y,100%)}}
/* gold words inside body copy (section 6, Ryan 2026-10-15) */
.gold-in{color:var(--gold)}
/* every section below Your Week uses Your Week's type and spacing (Ryan, 2026-10-15): headline 8% larger than d2 with
   looser tracking and 1.15 line height, 19px body, 1.5x section padding, the same 32 to 56px gap under the headline */
main>section.numbers h2.display,main>section.founder h2.display,main>section.edge h2.display,main>section.leaks h2.display,main>section.work h2.display,main>section.channels h2.display,main>section.timeline h2.display,main>section.why h2.display,main>section.guar h2.display,main>section.how h2.display,main>section.qa h2.display,main>section.contact h2.display{font-size:calc(clamp(2.3rem,5.8vw,4.6rem)*var(--k)*1.08);letter-spacing:-.02em;line-height:1.15}
main>section.numbers .body,main>section.founder .body,main>section.edge .body,main>section.leaks .body,main>section.work .body,main>section.channels .body,main>section.timeline .body,main>section.why .body,main>section.guar .body,main>section.how .body,main>section.qa .body,main>section.contact .body{font-size:calc(1.0625rem + 2px)}
main>section.numbers,main>section.edge,main>section.leaks,main>section.work,main>section.channels,main>section.timeline,main>section.why,main>section.guar,main>section.how,main>section.qa,main>section.contact{padding-top:calc(var(--pad)*1.5);padding-bottom:calc(var(--pad)*1.5)}
main>section.leaks .intro{margin-top:clamp(32px,4vw,56px)}

/* 10 portfolio: cover flow (Ryan, 2026-10-15). The centre site faces the viewer; neighbours turn inward, sit back and dim,
   with a soft reflection on the lobby floor. It loops both ways. script.js sets each item's offset (--o) from the centre. */
.cflow{grid-column:1/-1;position:relative;--cw:min(44vw,700px)}
.cf-stage{position:relative;height:calc(var(--cw)*.625);perspective:calc(var(--cw)*1.25);perspective-origin:50% 45%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cf-item{position:absolute;left:50%;top:0;width:var(--cw);margin-left:calc(var(--cw)/-2);transform-style:preserve-3d;cursor:pointer;
  transition:transform .75s cubic-bezier(.2,.75,.2,1),opacity .75s,filter .75s;
  transform:translateX(calc(var(--x,0)*var(--cw))) translateZ(calc(var(--z,0)*var(--cw))) rotateY(var(--ry,0deg))}
.cf-item.is-c{cursor:default}
.cf-item .panel{display:block;color:inherit}
.cf-item a.panel:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.cf-item:not(.is-c){filter:brightness(.55) saturate(.85)}
@media (hover:hover) and (pointer:fine){.cf-item:not(.is-c):hover{filter:brightness(.8) saturate(.95)}}
.cf-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);margin-top:clamp(28px,3.5vw,52px)}
/* the caption is an engraved plaque: polished dark stone, a thin brass border and inner rule, gold title cut into the face */
.cf-metas{flex:0 1 720px;width:720px;min-width:0;display:grid}
/* every caption sits in the same cell, so the plaque is always as tall as the longest one and the arrows never move */
.cf-meta{grid-area:1/1;visibility:hidden}
.cf-meta.is-on{visibility:visible}
.cf-plaque{position:relative;padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,44px);border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 18%,rgba(0,0,0,.25)),linear-gradient(rgba(8,12,10,.86),rgba(8,12,10,.86)),url(assets/scenes/r5-speckle.webp) center/cover;
  box-shadow:0 0 0 1px #8E6E33,inset 0 0 0 7px rgba(8,12,10,.0),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 6px rgba(0,0,0,.6),0 26px 50px -24px rgba(0,0,0,.85)}
.cf-plaque::before{content:"";position:absolute;inset:8px;border:1px solid rgba(199,154,58,.55);border-radius:2px;pointer-events:none}
.cf-meta h3{text-align:center;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:900;letter-spacing:.01em;line-height:1.15;
  background:linear-gradient(180deg,#F3DFA8 0,#D8BB78 40%,#B8944F 62%,#8E6E33 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.85)) drop-shadow(0 1px 0 rgba(255,236,190,.22))}
.cf-meta .desc,.cf-meta .res{margin-top:12px;text-align:left;font-size:calc(1.0625rem + 2px);font-weight:400;line-height:1.6;color:#E6E2D4;
  text-shadow:0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,236,190,.12)}
.cf-meta .desc{margin-top:16px}
.cf-meta a{color:#D2A560;text-decoration:underline;text-underline-offset:3px}
.cf-btn{flex:none;width:52px;height:52px;border-radius:2px;border:1px solid var(--gold);background:rgba(10,18,13,.55);color:var(--gold);display:grid;place-items:center;cursor:pointer}
.cf-btn svg{width:22px;height:22px}
.cf-btn:focus-visible{outline:2px solid var(--ivory);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.cf-btn:hover{background:var(--gold);color:#0E1612}}
.work .act{text-align:center}
@media (max-width:900px){.cflow{--cw:70vw}.cf-btn{width:44px;height:44px}.cf-nav{flex-wrap:wrap}.cf-metas{flex-basis:100%;order:-1}}
@media (prefers-reduced-motion:reduce){.cf-item{transition:none}}
main>section.work{overflow-x:clip}
/* portfolio stage (round twelve): the sites float just above a marble stage; script.js lines the stage top up under the
   centre site. Scrolls with the page (not held still). */
main>section.work.g-moment{background-color:#0F1712;background-image:var(--ov-moment),linear-gradient(180deg,rgba(15,23,18,0) 0,rgba(15,23,18,.55) 45%,#0F1712 100%),var(--stage-img);background-attachment:scroll;
  background-size:100% 100%,100% 100%,100% var(--fd-h,0px),auto var(--st-h,100%);background-position:0 0,0 0,0 var(--fd-y,100%),center var(--st-y,100%)}
/* guarantee: the same Blender armillary as section 3 (Ryan, 2026-10-15), medium size, resting on the polished floor a little left
   of the headline and a little below the text card, with a contact shadow and reflection; floor.js lines the room's floor up with the shadow (the wrapper's bottom) */
.guar .gyro.garm{width:clamp(220px,24vw,420px);justify-self:start;align-self:end;margin-left:calc(clamp(16px,3vw,48px)*-1);margin-bottom:calc(clamp(56px,8vw,140px)*-1);margin-top:0;position:relative;padding-bottom:1%;filter:none}
.garm img{display:block;width:100%;height:auto;filter:drop-shadow(-18px 14px 26px rgba(0,0,0,.5))}
.garm .gshadow{position:absolute;left:24%;right:24%;bottom:0;height:6%;border-radius:50%;transform:translateY(50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 72%)}

/* Section compositions (Ryan, 2026-10-15). One type system, a few layouts, so the page has rhythm instead of one repeated stagger.
   A stagger (headline left, copy right, an object filling the corner): sections 3, 7, 14.
   B even split: headline in the left half, copy in the right half, both starting on the same line (Your Week, Your Edge).
   C centred statement: everything on the centre line (I'll Tell You What's Working).
   D full width: headline and copy both start at the left margin (Lost Leads). */
@media (min-width:901px){
  .lay-b .grid{align-items:start}
  .lay-b h2.display{grid-column:1/7;grid-row:1}
  .lay-b .col-r{grid-column:7/13;grid-row:1;margin-top:0!important;padding-top:.6rem}
  .lay-b .col-r .body{margin-top:0}
}
.lay-d h2.display{grid-column:1/-1}
.lay-d .intro{grid-column:1/-1}
.lay-c h2.display{grid-column:1/-1;text-align:center;max-width:22ch;margin-inline:auto}
.lay-c .col-r{grid-column:1/-1;text-align:center}
.lay-c .body{margin-inline:auto}
.lay-c .pull{margin-inline:auto}
.lay-c .act{justify-content:center;display:flex}
main>section.work h2.display{grid-column:1/-1;text-align:center}

/* Progress Gets Measured flows straight into the founder story on the same solid ground, so the space between them is
   half the usual (Ryan, 2026-10-15) */
main>section.numbers{padding-bottom:calc(var(--pad)*.75)}
main>section.founder{padding-top:calc(var(--pad)*.75)}

/* Lost Leads closing line: same letter spacing and line height as the headings (Ryan, 2026-10-15) */
.leaks .closing{letter-spacing:-.02em;line-height:1.15}

/* Timeline on the centre line (Ryan, 2026-10-15): the dots and line sit in the middle of the screen, the step names on the left
   are right-aligned to the line and never wrap, the descriptions on the right stay left-aligned. Phones: line at the left, step
   name above its description. */
.tl li{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
.tl .when{text-align:right;white-space:nowrap;text-wrap:nowrap}
.tl li::after{left:calc(50% - .5px)}
@media (max-width:700px){
  .tl li{grid-template-columns:22px minmax(0,1fr);row-gap:6px}
  .tl .dot{grid-column:1;grid-row:1;width:14px;height:14px;margin-top:.45em}
  .tl .when{grid-column:2;grid-row:1;text-align:left;font-size:1.4rem}
  .tl p{grid-column:2;grid-row:2}
  .tl li::after{left:10.5px}
}
/* Timeline heading centred over the centred timeline (Ryan, 2026-10-15) */
main>section.timeline h2.display{grid-column:1/-1;text-align:center}
/* timeline balance (Ryan, 2026-10-15): step names get the headings' letter spacing; descriptions are capped to about the width
   of the longest step name, so the two sides of the centre line carry similar weight */
.tl .when{letter-spacing:-.02em;line-height:1.15}
@media (min-width:701px){.tl p{max-width:min(100%,30ch)}}
/* timeline button centred under the centred timeline (Ryan, 2026-10-15) */
main>section.timeline .act{display:flex;justify-content:center}
/* step names back to their size and centred in the left column, so they balance the descriptions (Ryan, 2026-10-15) */
/* the step names sit in a box as wide as the description column, against the line, so the two sides mirror each other */
@media (min-width:701px){.tl{--tlw:min(100%,22rem)}.tl p{max-width:var(--tlw)}.tl .when{text-align:center;justify-self:end;width:var(--tlw)}}
/* timeline steps centred vertically on their dot (Ryan, 2026-10-15): step name, dot and description share one centre line per
   step. The connecting line is drawn per step from top to bottom of the step, starting at the first dot and ending at the last. */
@media (min-width:701px){
  .tl{--pb:clamp(28px,3.4vw,44px)}
  .tl li{align-items:center;padding-bottom:var(--pb)}
  .tl .dot{margin-top:0;align-self:center}
  .tl p{padding-top:0}
  .tl li::after{display:block;top:0;bottom:0}
  .tl li:first-child::after{top:calc(50% - var(--pb)/2)}
  .tl li:last-child::after{display:block;bottom:calc(50% + var(--pb)/2)}
  .tl li:only-child::after{display:none}
}
/* one continuous line with a single gradient, first dot to last dot (each step drawing its own segment restarted the gradient
   at every step); script.js measures the first and last dot */
@media (min-width:701px){
  .tl{position:relative}
  .tl li::after,.tl li:first-child::after,.tl li:last-child::after{display:none}
  .tl::before{content:"";position:absolute;left:calc(50% - .5px);width:1px;top:var(--l-top,0);height:var(--l-h,0);background:linear-gradient(180deg,#D9C7A1,#6F5E3A);z-index:0}
}

.faq .a{background-color:transparent;max-width:min(66%,900px);font-size:1.2rem;line-height:1.65;color:var(--fg)}
.faq .a ul.own{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.faq .a ul.own li{position:relative;padding-left:26px}
.faq .a ul.own li::before{content:"";position:absolute;left:3px;top:.5em;width:12px;height:6px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}
@media (max-width:760px){.faq .a{max-width:none;font-size:1.1rem}}

/* Guarantee footnotes (2026-10-23): asterisk and small print, Core and Full only */
.ast{font-size:.5em;vertical-align:super;line-height:0;margin-left:.04em}
.fine{font-size:.85rem;line-height:1.45;color:var(--mute);margin-top:14px;max-width:52ch}
@media (max-width:999px){.hero .fine{order:4}}