/* ============ Intro experience + home ============ */
.bars{position:fixed;top:36px;left:50%;transform:translateX(-50%);z-index:61;display:flex;gap:6px;width:min(420px,40vw);transition:opacity .5s}
.bars span{flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ui) 25%,transparent);overflow:hidden}
.bars i{display:block;height:100%;background:var(--ui);transform:scaleX(0);transform-origin:left}
body:not(.exp) .bars{opacity:0;pointer-events:none}
.hint{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:61;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--uib);transition:color .5s;white-space:nowrap;pointer-events:none}
body:not(.exp) .hint,body:not(.exp) #skip{visibility:hidden;opacity:0}
/* once the intro is over the skip holder must not sit on top of the header's Menu button */
body:not(.exp) .float-l{display:none}
.float-l{pointer-events:none}.float-l>*{pointer-events:auto}

#exp{position:fixed;inset:0;z-index:40;background:var(--night)}
.scene{position:absolute;inset:0;display:none;overflow:hidden}
.sc-in{position:relative;width:100%;min-height:100%;display:flex}

/* loader */
#s-load{background:var(--night);color:var(--gold)}
#s-load .sc-in{align-items:center;justify-content:center}
#s-load svg{width:min(280px,60vw);overflow:visible}
#s-load .lbl{position:absolute;bottom:56px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);opacity:.55}

/* hero */
#s-hero{background:var(--kumkum);color:var(--ivory)}
#s-hero .sc-in{flex-direction:column;justify-content:center;padding:120px var(--gutter) 110px}
#s-hero .burst.a{left:-110px;top:64%;width:190px;color:var(--saffron)}
#s-hero .burst.b{right:-90px;bottom:4%;width:250px;color:var(--saffron)}
#s-hero .top{display:flex;gap:18px;align-items:center;margin-bottom:26px;position:relative;z-index:2}
#s-hero .top .deva{font-size:22px;color:#F1C27D}
#s-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(48px,min(9.4vw,13.5vh),168px);line-height:.9;letter-spacing:-.035em;max-width:12ch;position:relative;z-index:2}
#s-hero h1 em{font-style:italic;color:#F1C27D}
#s-hero .foot{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:48px;position:relative;z-index:2;flex-wrap:wrap}
#s-hero .sub{max-width:420px;font-size:17px;line-height:1.55}

/* sky */
#s-sky{background:var(--kumkum);color:var(--ivory);cursor:pointer}
#s-sky .sc-in{align-items:center;justify-content:center}
#s-sky .cons{position:absolute;width:min(880px,94vw);top:50%;left:50%;transform:translate(-50%,-64%)}
#s-sky .cons line{stroke:var(--gold);stroke-width:1.2}
#s-sky .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,90vw);text-align:center;font-family:var(--serif);font-size:clamp(34px,5.2vw,86px);line-height:1.02;letter-spacing:-.025em}
#s-sky .t2{color:var(--ivory);top:76%}
#s-sky .t2 .lbl{display:block;font-size:.34em;color:var(--gold);margin-bottom:14px;letter-spacing:0}
#s-sky .t2 em{color:var(--gold)}

/* question shared */
.qhead{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.qnum{font-family:var(--serif);font-size:20px;font-style:italic;white-space:nowrap}
.qtitle{font-family:var(--serif);font-weight:500;font-size:clamp(40px,min(5.4vw,9vh),90px);line-height:.96;letter-spacing:-.03em}
.qsub{font-size:16px;line-height:1.55;opacity:.75;max-width:480px;margin-top:16px}

/* Q1 */
#s-q1{background:var(--peacock);color:var(--ivory)}
#s-q1 .sc-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:110px 6vw 100px}
.wheel-wrap{position:relative;aspect-ratio:1;width:min(600px,100%,74vh);justify-self:center}
.wheel{width:100%;height:100%;color:var(--gold);overflow:visible}
.wheel text{fill:var(--gold);font-family:var(--deva)}
.wheel .seg{fill:var(--gold);opacity:0}
#s-q1 .qnum,#s-q1 .eyebrow{color:var(--gold)}
.bform{margin-top:clamp(18px,3vh,34px);display:grid;gap:clamp(18px,3vh,30px);max-width:520px}
.blabel{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.segs{display:flex;align-items:flex-end;gap:12px}
.segs .sep{font-family:var(--serif);font-size:38px;opacity:.35;line-height:1;padding-bottom:10px}
.seg-in{background:transparent;border:0;border-bottom:1px solid rgba(184,146,90,.45);color:var(--ivory);font-family:var(--serif);font-size:clamp(34px,3.4vw,48px);line-height:1;padding:4px 0 10px;text-align:center;outline:none;border-radius:0;transition:border-color .3s,opacity .3s;-moz-appearance:textfield}
.seg-in::placeholder{color:rgba(247,241,230,.24);font-size:.62em;letter-spacing:.06em;font-family:var(--sans)}
.seg-in:focus{border-bottom-color:var(--saffron)}
.seg-in.w2{width:2.7ch}.seg-in.w4{width:4.3ch}
.ampm{display:flex;border:1px solid rgba(184,146,90,.45);border-radius:99px;padding:3px;margin-left:10px;margin-bottom:10px}
.ampm button{padding:8px 14px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(247,241,230,.6);transition:all .3s}
.ampm button.on{background:var(--gold);color:var(--peacock)}
.tg{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.04em;text-transform:none;color:rgba(247,241,230,.75);cursor:pointer}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg .sw{width:34px;height:20px;border-radius:99px;border:1px solid rgba(184,146,90,.6);position:relative;transition:background .3s}
.tg .sw::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--gold);transition:transform .35s var(--ease)}
.tg input:checked+.sw{background:rgba(184,146,90,.25)}
.tg input:checked+.sw::after{transform:translateX(14px)}
.tg input:focus-visible+.sw{outline:2px solid var(--saffron);outline-offset:2px}
.segs{flex-wrap:wrap}
.segs .tg{margin:0 0 14px 16px}
.time-off .seg-in,.time-off .sep,.time-off .ampm{opacity:.25;pointer-events:none;transition:opacity .4s}
.hero-acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-site{font-size:14px;font-weight:700;color:var(--ivory);opacity:.8;padding:6px 0;border-bottom:1px solid rgba(247,240,228,.45);transition:opacity .3s,border-color .3s}
.hero-site:hover{opacity:1;border-color:var(--ivory)}
.place{position:relative}
.place input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(184,146,90,.45);color:var(--ivory);font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);padding:4px 0 10px;outline:none;border-radius:0}
.place input::placeholder{color:rgba(247,241,230,.25)}
.place input:focus{border-bottom-color:var(--saffron)}
.place .ok{position:absolute;right:0;bottom:16px;color:var(--gold);opacity:0;transition:opacity .3s}
.place.picked .ok{opacity:1}
.sugg{position:absolute;left:0;right:0;top:100%;margin-top:8px;background:var(--night-2);border:1px solid var(--gold-soft);border-radius:16px;padding:6px;z-index:5;display:none;max-height:min(290px,40vh);overflow:auto;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.sugg.up{top:auto;bottom:100%;margin:0 0 8px}
.sugg.on{display:block;animation:sugIn .3s var(--ease)}
@keyframes sugIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sugg button{width:100%;text-align:left;padding:11px 12px;border-radius:10px;display:flex;flex-direction:column;gap:2px;touch-action:manipulation}
.sugg .nm{font-size:15px;color:var(--ivory)}
.sugg .rg{font-size:12px;opacity:.55}
.sugg .none{padding:12px;font-size:13px;opacity:.7;line-height:1.5}
.sugg button:hover,.sugg button.act{background:rgba(184,146,90,.16)}
.place.busy .ok{opacity:1;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ferr{font-size:13px;color:var(--saffron);min-height:18px;margin-top:-14px}
.mini{display:none;margin-top:26px}
.mini .strike{font-family:var(--serif);font-size:24px;font-style:italic;opacity:.55;position:relative;display:inline-block}
.mini .strike::after{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:1.5px;background:currentColor;transform:scaleX(var(--k,0));transform-origin:left}
.mini .big{font-family:var(--deva);font-size:clamp(64px,min(8vw,13vh),120px);color:var(--gold);line-height:1.25;margin-top:8px}
.mini .en{font-family:var(--serif);font-size:30px;font-style:italic}
.mini p{max-width:440px;font-size:15px;line-height:1.65;opacity:.8;margin:14px 0 26px}

/* Q2 */
#s-q2{background:var(--parchment)}
#s-q2 .sc-in{flex-direction:column;padding:110px var(--gutter) 100px}
#s-q2 .qnum{color:var(--kumkum)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;flex:1}
.tile{position:relative;min-height:140px;border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden;border:1px solid rgba(32,24,18,.16);background:rgba(255,255,255,.28);isolation:isolate;transition:border-color .9s ease,transform 1s cubic-bezier(.2,.8,.2,1),box-shadow 1s ease}
/* a slow warm wash spreading from the cursor, instead of a hard black fill */
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#E9D3B4 0%,var(--sand) 55%,#EADFCB 100%);clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path 1.6s cubic-bezier(.22,.7,.2,1)}
.tile:hover{border-color:var(--kumkum);transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(169,51,30,.45)}
.tile:hover::before{clip-path:circle(160% at var(--mx,50%) var(--my,50%))}
.tile .ic{width:44px;height:44px;color:var(--kumkum);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.tile:hover .ic{transform:rotate(-10deg) scale(1.08)}
.tile .nm{font-family:var(--serif);font-size:clamp(23px,2.1vw,32px);font-weight:500;line-height:1;display:block}
.tile .ds{display:block;font-size:13px;opacity:.65;margin-top:6px}
.tile .dv{position:absolute;right:22px;top:20px;font-family:var(--deva);font-size:18px;color:var(--kumkum)}

/* Q3 */
#s-q3{background:var(--kumkum);color:var(--ivory)}
#s-q3 .sc-in{flex-direction:column;justify-content:center;padding:110px var(--gutter) 100px}
#s-q3 .qnum{color:var(--saffron)}
.els{gap:14px;margin-top:28px;padding-top:12px}
.els-nav{margin-top:20px}
.elc{position:relative;width:calc((100% - 56px)/5);aspect-ratio:.7;color:var(--ivory);text-align:center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.elc:hover{transform:translateY(-10px)}
.elc .face{background:rgba(255,255,255,.04);transition:background 1.1s ease}
.elc:hover .face{background:var(--parchment)}
.elc .frame{color:rgba(247,241,230,.55);transition:color .5s}
.elc:hover .frame{color:var(--ink)}
.elc .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26% 14px 18px;transition:color .5s}
.elc:hover .in{color:var(--ink)}
.elc .sym{width:44%;aspect-ratio:1;margin-bottom:16px;color:var(--saffron);transition:transform .9s cubic-bezier(.2,.8,.2,1),color .5s}
.elc:hover .sym{transform:scale(1.08) rotate(-6deg);color:var(--kumkum)}
.elc .dv{font-family:var(--deva);font-size:clamp(22px,2.2vw,32px);line-height:1.2}
.elc .nm{font-family:var(--serif);font-size:clamp(18px,1.6vw,24px);font-style:italic;margin-top:2px}
.elc .ds{font-size:12.5px;line-height:1.45;opacity:.7;margin-top:10px;max-width:16ch}

/* casting / loading */
#s-cast{background:var(--night);color:var(--ivory)}
#s-cast .sc-in{flex-direction:column;align-items:center;justify-content:center;padding:100px var(--gutter);text-align:center}
#s-cast .yantra{width:min(300px,44vh);color:var(--gold);overflow:visible}
#s-cast h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,50px);margin-top:36px;letter-spacing:-.02em}
.steps-l{list-style:none;margin-top:22px;display:grid;gap:10px;font-size:14px}
.steps-l li{display:flex;align-items:center;justify-content:center;gap:10px;opacity:.25;transition:opacity .6s}
.steps-l li.on{opacity:.9}
.steps-l li svg{width:11px;height:11px;color:var(--gold);transform:scale(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.steps-l li.done svg{transform:scale(1)}
#castPct{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--gold);margin-top:22px}

/* chart */
#s-chart{background:var(--night);color:var(--ivory);overflow-y:auto;overscroll-behavior:contain}
#s-chart canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#s-chart .sc-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,5vw,90px);align-items:start;padding:110px clamp(24px,5vw,90px) 150px}
/* booking is always one tap away on the chart screen, no scrolling needed */
.ch-dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;display:flex;gap:10px;padding:8px;border-radius:99px;background:rgba(27,21,17,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--gold-soft);box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.ch-dock .btn{padding:15px 26px}
.ch-dock .sm{display:none}
.chart-box{position:sticky;top:max(100px,calc(50vh - min(38vh,23vw)));z-index:2;width:min(76vh,46vw);aspect-ratio:1}
.chart{width:100%;height:100%;overflow:visible;color:var(--ivory)}
.chart .gl{stroke:rgba(247,241,230,.92);stroke-width:1.1;fill:none;stroke-linecap:square}
.chart .sn{fill:rgba(247,241,230,.32);font-family:var(--deva)}
.chart .snn{fill:rgba(247,241,230,.32);font-family:var(--sans);font-weight:500}
.chart .pl{fill:var(--ivory);font-family:var(--sans);font-weight:700}
.chart .pl tspan.dg{font-weight:400;opacity:.55}
.chart .pl.as{fill:var(--gold)}
.chart .ctr1{fill:var(--gold);font-family:var(--deva)}
.chart .ctr2{fill:var(--ivory);font-family:var(--serif);font-style:italic}
.chart .ctr3{fill:rgba(247,241,230,.55);font-family:var(--sans);letter-spacing:.14em}
.chart .lag{stroke:var(--gold);stroke-width:1}
.ch-text{position:relative;z-index:2;max-width:600px}
.ch-text h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,min(4.4vw,7.5vh),74px);line-height:.98;letter-spacing:-.025em;margin:14px 0 26px}
.ch-text h2 em{color:var(--gold)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(184,146,90,.3)}
.facts div{padding:16px 14px 16px 0;border-bottom:1px solid rgba(184,146,90,.3)}
.facts span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.facts b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1;margin-top:6px}
.facts i{display:block;font-family:var(--deva);font-style:normal;font-size:14px;color:var(--gold);margin-top:3px}
.reading{margin-top:26px;font-size:15.5px;line-height:1.7;opacity:.86}
.reading p+p{margin-top:12px}
.reading .src{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:10px;display:block}
.ch-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ch-note{font-size:12px;line-height:1.6;opacity:.45;margin-top:22px;max-width:520px}

/* =============== HOME =============== */
#home{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px var(--gutter) 110px}
#home .burst{right:-130px;top:12%;width:440px;color:var(--kumkum)}
#home h1{position:relative;max-width:14ch}
#home h1 em{color:var(--kumkum)}
#home .row{position:relative;display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:46px}
#home .acts{display:flex;gap:12px;flex-wrap:wrap}
.mychart{position:relative;display:inline-flex;align-items:center;gap:12px;margin-bottom:28px;padding:9px 16px 9px 10px;border-radius:99px;background:rgba(26,18,11,.08);font-size:13px;font-weight:500;width:max-content;transition:background .3s}
.mychart:hover{background:rgba(26,18,11,.14)}
.mychart b{font-family:var(--deva);font-weight:400;font-size:16px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--saffron);display:grid;place-items:center}
.feats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:70px;padding-top:26px;border-top:1px solid rgba(26,18,11,.25)}
.feats div{font-size:14px;line-height:1.45}
.feats b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;line-height:1;margin-bottom:8px}

#about-t{display:grid;grid-template-columns:auto 1fr;gap:7vw;align-items:center}
.portrait{width:380px;height:540px;color:var(--gold)}
.portrait .face{background:radial-gradient(90% 70% at 50% 45%,#F4EBDB,#E2D3B6);display:grid;place-items:center}
.portrait .emblem{width:62%;aspect-ratio:1;color:#B3201C;margin-top:14%}
.portrait .frame{inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px)}

#services-t{padding:130px 0 120px}
#services-t .hd{padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:20px;flex-wrap:wrap}
.svc-track{gap:18px;padding:14px var(--gutter) 6px;scroll-padding:0 var(--gutter)}
.svc{position:relative;width:280px;height:400px;flex:none;color:var(--gold);text-decoration:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.svc:hover{transform:translateY(-12px)}
.svc .face{background:rgba(255,255,255,.035);transition:background .5s}
.svc:hover .face{background:rgba(184,146,90,.13)}
.svc .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 26px 30px}
.svc .num{font-family:var(--serif);font-style:italic;font-size:16px;opacity:.8}
.svc .dv{font-family:var(--deva);font-size:40px;margin:10px 0 8px}
.svc .nm{font-family:var(--serif);font-size:25px;color:var(--ivory);line-height:1.05}
.svc .ds{font-size:13px;line-height:1.5;color:var(--ivory);opacity:.65;margin-top:10px}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid rgba(247,241,230,.35)}
.step{padding:34px 34px 10px 0}
.step+.step{padding-left:34px;border-left:1px solid rgba(247,241,230,.35)}
.step .n{font-family:var(--serif);font-size:90px;line-height:1;font-style:italic;color:#F1C27D}
.step h3{font-family:var(--serif);font-weight:500;font-size:32px;margin:18px 0 10px;line-height:1}
.step p{font-size:15px;line-height:1.65;opacity:.85;max-width:330px}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}
.quote{border:1px solid rgba(184,146,90,.32);border-radius:26px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:300px;transition:background .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.quote:hover{background:rgba(184,146,90,.07);transform:translateY(-6px)}
.quote q{font-family:var(--serif);font-size:24px;line-height:1.28;quotes:"\201C" "\201D"}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:13px}
.quote .who i{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;font-style:normal;font-weight:700;font-family:var(--serif);font-size:18px}
.quote .who span{opacity:.6;display:block}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:60px}
.lcard{border-radius:30px;padding:44px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;text-decoration:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lcard:hover{transform:translateY(-6px)}
.lcard h3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.4vw,54px);line-height:.98;letter-spacing:-.02em;margin-top:14px}
.lcard p{font-size:15px;line-height:1.65;opacity:.8;max-width:420px;margin:16px 0 28px}
.lcard .dv{position:absolute;right:36px;top:30px;font-family:var(--deva);font-size:34px;color:var(--gold)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.post{display:flex;flex-direction:column;text-decoration:none;border-top:1px solid currentColor;padding-top:22px;transition:opacity .3s}
.post .meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.post h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.05;margin:16px 0 12px;transition:color .3s}
.post:hover h3{color:var(--kumkum)}
.post p{font-size:15px;line-height:1.6;opacity:.75}
.post .dv{font-family:var(--deva);font-size:56px;color:var(--kumkum);opacity:.85;margin-top:24px}

#final{padding:150px var(--gutter) 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#final .burst{width:min(1000px,150vw);left:50%;top:50%;translate:-50% -50%;color:var(--gold);opacity:.45}
#final h2{position:relative;max-width:12ch}
#final h2 em{color:var(--gold)}
#final p{position:relative;font-size:17px;opacity:.75;margin-top:22px;max-width:460px;line-height:1.6}
#final .acts{position:relative;display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;justify-content:center}

@media (max-width:1100px){
  .elc{width:calc((100% - 28px)/3)}
  #s-chart .sc-in{grid-template-columns:1fr;justify-items:center}
  .chart-box{width:min(92vw,620px);position:relative;top:auto}
}
@media (max-width:900px){
  .bars{top:66px;width:calc(100% - 36px)}
  .hint{display:none}
  .scene{overflow-y:auto}
  /* skip moves to the top right so it never covers fields or buttons */
  .float-l{left:auto;right:12px;top:12px;bottom:auto}
  .float-l .pill{height:38px;font-size:11px;padding:0 14px 0 11px;background:color-mix(in srgb,var(--uib) 10%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  /* content scrolling under the logo fades out instead of colliding with it */
  #s-q1,#s-chart,#s-cast{--sbg:var(--night)} #s-q2{--sbg:var(--parchment)} #s-q3{--sbg:var(--kumkum)}
  #s-q1::before,#s-q2::before,#s-q3::before,#s-chart::before{content:"";position:sticky;top:0;display:block;height:96px;margin-bottom:-96px;background:linear-gradient(var(--sbg) 58%,transparent);z-index:6;pointer-events:none}
  #s-q1 .sc-in{grid-template-columns:1fr;padding:104px 18px 60px;gap:18px}
  .wheel-wrap{width:min(170px,46vw)}
  #s-hero .sc-in{padding-bottom:70px}
  .hero-acts{gap:18px}
  .hero-acts .btn{width:100%;justify-content:center}
  .hero-site{margin:0 auto}
  .seg-in{font-size:34px}.segs{gap:8px}.segs .sep{font-size:28px}
  .ampm button{padding:7px 11px}
  #home .burst{width:230px;right:-120px;top:96px;opacity:.45}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{min-height:130px;padding:16px;border-radius:16px}.tile .ic{width:34px;height:34px}.tile .ds{display:none}
  .els{gap:12px;margin:22px -18px 0;padding:12px 18px 0;scroll-padding:0 18px}
  .elc{width:64vw;max-width:300px}
  #s-q3 .sc-in{padding-bottom:40px}
  #s-chart .sc-in{padding:110px 16px 120px}
  .ch-dock{left:12px;right:12px;bottom:12px;transform:none;border-radius:999px}
  .ch-dock .btn{padding:14px 18px;font-size:13px}
  .ch-dock .btn.goldfill{flex:1;justify-content:center}
  .ch-dock .lg{display:none}.ch-dock .sm{display:inline}
  .facts{grid-template-columns:1fr 1fr}
  .feats,.steps3,.quotes,.two,.posts{grid-template-columns:1fr}
  .feats{gap:20px}
  .step+.step{padding-left:0;border-left:0;border-top:1px solid rgba(247,241,230,.35)}
  #about-t{grid-template-columns:1fr;gap:48px}.portrait{width:220px;height:310px;justify-self:center}
  #services-t{padding:90px 0}
  .svc{width:76vw;max-width:300px;height:400px}
}