/* === Block 3 (originally inline in index.html) === */
.clients{position:relative;padding-block:clamp(5rem,12vh,9rem);background:var(--bg-alt);border-block:1px solid var(--line);overflow:hidden}.clients__glow{position:absolute;inset:auto -10% -30% auto;width:min(46vw,520px);height:min(46vw,520px);background:radial-gradient(circle,rgba(165,50,15,.18),transparent 70%);filter:blur(30px);pointer-events:none}.clients .wrap{position:relative}.clients__head{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(2.5rem,6vw,4rem)}.clients__head h2{max-width:18ch;margin-top:1rem}.clients__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem)}@media (max-width:860px){.clients__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:520px){.clients__grid{grid-template-columns:1fr}}.cl-card{position:relative;border:1px solid var(--line-2);border-radius:16px;background:var(--bg);padding:1.5rem 1.5rem 1.4rem;overflow:hidden;transition:border-color .4s var(--ease),transform .4s var(--ease)}.cl-card:hover{border-color:rgba(201,162,75,.42);transform:translateY(-3px)}.cl-card__tag{position:absolute;top:1.05rem;right:1.15rem;font-family:var(--f-body);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:.45rem}.cl-card__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--saffron-lit);box-shadow:0 0 8px var(--saffron-lit)}.cl-card__plate{height:82px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:1.35rem;border-radius:10px}.cl-mark{display:flex;align-items:center;gap:.65rem;filter:blur(3px);opacity:.5;user-select:none;transition:filter .5s var(--ease),opacity .5s var(--ease)}.cl-card:hover .cl-mark{filter:blur(2px);opacity:.62}.cl-mono{width:30px;height:30px;border-radius:50%;border:2px solid var(--gold);flex:none}.cl-mono--sq{border-radius:7px}.cl-bar{display:inline-block;height:15px;border-radius:3px;background:linear-gradient(90deg,var(--muted),var(--faint))}.cl-card__sector{font-family:var(--f-body);font-size:var(--step-0);color:var(--text);line-height:1.4}.cl-card__meta{display:block;margin-top:.45rem;font-family:var(--f-body);font-size:.72rem;letter-spacing:.04em;color:var(--faint)}.clients__foot{margin-top:clamp(2.2rem,5vw,3.2rem);max-width:64ch;font-family:var(--f-body);font-size:var(--step--1);color:var(--muted);line-height:1.7}.clients__foot a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.3);transition:border-color .3s var(--ease)}.clients__foot a:hover{border-color:var(--gold)}@media (prefers-reduced-motion:reduce){.cl-card,.cl-mark{transition:none}}
/* === Block 4 (originally inline in index.html) === */
.xshow{position:relative;overflow:hidden;padding-block:clamp(4rem,9vw,8rem)}.xshow__glow{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 60% at 82% 30%,rgba(232,132,42,.14),transparent 60%),radial-gradient(50% 50% at 12% 80%,rgba(201,162,75,.08),transparent 60%)}.xshow__glow::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,rgba(232,132,42,.05),transparent 60%);animation:xshowBreathe 6s ease-in-out infinite}@keyframes xshowBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.xshow__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4rem);align-items:center}.xshow__copy .eyebrow{margin-bottom:clamp(1rem,2vw,1.5rem);display:inline-flex;align-items:center;gap:.5rem}.xshow__copy .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--saffron-lit);box-shadow:0 0 8px var(--saffron-lit);animation:xshowPulseDot 1.6s ease-in-out infinite}@keyframes xshowPulseDot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}.xshow__copy h2{margin:0 0 clamp(1rem,2vw,1.5rem)}.xshow__copy h2 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.xshow__copy .lede{max-width:52ch;margin-bottom:clamp(1.2rem,2.4vw,1.6rem)}.xshow__stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.4rem);margin-bottom:clamp(1.6rem,3vw,2.2rem);padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.xshow__stat{display:flex;flex-direction:column;gap:.15rem}.xshow__stat b{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:600;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}.xshow__stat b em{font-style:normal;color:var(--saffron-lit)}.xshow__stat span{font-family:var(--f-body);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.xshow__stat-live{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--saffron-lit);box-shadow:0 0 6px var(--saffron-lit);margin-left:.4rem;vertical-align:middle;animation:xshowPulseDot 1.6s ease-in-out infinite}.xshow__points{list-style:none;margin:0 0 clamp(1.6rem,3vw,2.2rem);padding:0;display:flex;flex-direction:column;gap:.7rem;max-width:52ch}.xshow__points li{position:relative;padding-left:1.7rem;font-family:var(--f-body);font-size:var(--step-0);line-height:1.5;color:var(--faint)}.xshow__points li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:1px;background:var(--grad)}.xshow__points em{font-style:italic;color:var(--muted)}.xshow__form{display:flex;gap:.6rem;max-width:38rem}.xshow__input{flex:1;min-width:0;font-family:var(--f-body);font-size:var(--step-0);color:var(--text);background:var(--bg-alt);border:1px solid var(--line-2);border-radius:100px;padding:1.05rem 1.5rem;outline:0;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}.xshow__input::placeholder{color:var(--muted)}.xshow__input:focus{border-color:var(--saffron-lit);background:var(--bg-raise);box-shadow:0 0 0 4px rgba(232,132,42,.14)}.xshow__run{flex:none;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-family:var(--f-body);font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--grad-lit);border:1px solid transparent;border-radius:100px;padding:1.05rem 1.7rem;white-space:nowrap;transition:transform .35s var(--ease),filter .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 8px 30px -12px rgba(232,132,42,.6);position:relative;overflow:hidden}.xshow__run::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}.xshow__run:hover::after{transform:translateX(120%)}.xshow__run:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(232,132,42,.75)}.xshow__run:active{transform:translateY(0)}.xshow__run .arrow{transition:transform .35s var(--ease)}.xshow__run:hover .arrow{transform:translate(3px,-3px)}.xshow__ex{margin-top:1rem;font-family:var(--f-body);font-size:var(--step--1);color:var(--faint)}.xshow__ex a{color:var(--saffron-lit);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}.xshow__ex a:hover{border-bottom-color:var(--saffron-lit)}.xshow__bridge{margin-top:.85rem;display:flex;align-items:center;gap:.55rem;font-family:var(--f-body);font-size:var(--step--1);color:var(--faint)}.xshow__bridge a{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(201,162,75,.4);transition:border-color .3s var(--ease),color .3s var(--ease)}.xshow__bridge a:hover{color:var(--saffron-lit);border-color:var(--saffron-lit)}.xshow__preview-wrap{perspective:1400px}.xshow__preview{display:block;text-decoration:none;color:inherit;transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform}.xshow__preview:focus-visible{outline:2px solid var(--saffron-lit);outline-offset:6px;border-radius:20px}.xrp{position:relative;display:block;overflow:hidden;border:1px solid var(--line-2);border-radius:18px;background:radial-gradient(120% 90% at 0 0,rgba(232,132,42,.07),transparent 55%),var(--bg-alt);padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:0 40px 90px -50px rgba(0,0,0,.85);display:flex;flex-direction:column;gap:1rem;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}.xshow__preview:hover .xrp{border-color:rgba(201,162,75,.55);box-shadow:0 50px 110px -50px rgba(232,132,42,.35),0 40px 90px -50px rgba(0,0,0,.85)}.xrp::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(242,191,99,.16) 50%,transparent 60%);transform:translateX(-150%);transition:transform .9s var(--ease)}.xshow__preview:hover .xrp::before{transform:translateX(150%)}.xrp__bar{display:flex;align-items:center;gap:.45rem}.xrp__dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}.xrp__dot:first-child{background:rgba(229,72,77,.6)}.xrp__dot:nth-child(2){background:rgba(232,132,42,.6)}.xrp__dot:nth-child(3){background:rgba(201,162,75,.6)}.xrp__host{margin-left:.6rem;font-family:var(--f-body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.xrp__live{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-body);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-lit)}.xrp__live i{width:5px;height:5px;border-radius:50%;background:var(--saffron-lit);box-shadow:0 0 6px var(--saffron-lit);animation:xshowPulseDot 1.4s ease-in-out infinite}.xrp__scan{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(to bottom,transparent 47%,rgba(232,132,42,.06) 49%,rgba(242,191,99,.38) 50%,rgba(232,132,42,.06) 51%,transparent 53%);background-size:100% 240%;background-repeat:no-repeat;opacity:.5;animation:xrpscan 4s linear infinite}@keyframes xrpscan{0%{background-position:0 -55%}100%{background-position:0 165%}}.xrp__top{display:flex;align-items:center;gap:clamp(1rem,3vw,1.6rem)}.xrp__grade{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(58px,9vw,74px);aspect-ratio:1;border-radius:14px;border:1px solid rgba(232,132,42,.45);background:var(--bg);box-shadow:0 0 34px -16px rgba(232,132,42,.7) inset;font-family:var(--f-display);font-weight:600;font-size:clamp(1.7rem,4vw,2.2rem);line-height:.9;color:var(--saffron-lit);transition:box-shadow .4s var(--ease)}.xshow__preview:hover .xrp__grade{box-shadow:0 0 48px -12px rgba(232,132,42,.9) inset}.xrp__grade sup{font-size:.5em}.xrp__grade i{font-family:var(--f-body);font-style:normal;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}.xrp__gauges{display:flex;gap:clamp(.9rem,2.5vw,1.5rem)}.xrp__g{display:flex;flex-direction:column;align-items:center;gap:.4rem}.xrp__ring{position:relative;width:clamp(46px,7vw,56px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -90deg,var(--c) calc(var(--v) * 1%),var(--line) 0);transition:filter .3s}.xrp__ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg-alt)}.xrp__ring b{position:relative;font-family:var(--f-display);font-size:clamp(1rem,2.4vw,1.25rem);font-weight:600;color:var(--text)}.xshow__preview:hover .xrp__ring{filter:drop-shadow(0 0 10px rgba(232,132,42,.5))}.xrp__g i{font-family:var(--f-body);font-style:normal;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.xrp__film{display:flex;gap:5px;margin-bottom:1rem}.xrp__film i{position:relative;flex:1;height:clamp(34px,6vw,46px);border-radius:5px;border:1px solid var(--line)}.xrp__film i:first-child,.xrp__film i:nth-child(2){background:var(--bg)}.xrp__film i:nth-child(3){background:linear-gradient(160deg,var(--bg-raise),var(--bg))}.xrp__film i:nth-child(4){background:linear-gradient(160deg,rgba(232,132,42,.1),var(--bg-raise))}.xrp__film i:nth-child(5){background:linear-gradient(160deg,rgba(232,132,42,.16),var(--bg-raise))}.xrp__film i::after{content:var(--t);position:absolute;left:0;right:0;bottom:-14px;text-align:center;font-family:var(--f-body);font-size:.5rem;color:var(--faint)}.xrp__fix{display:flex;flex-direction:column;gap:.55rem;padding-top:.2rem}.xrp__fixh{font-family:var(--f-body);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}.xrp__row{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.7rem}.xrp__bar2{height:5px;border-radius:100px;background:var(--line);overflow:hidden}.xrp__bar2 span{display:block;height:100%;border-radius:100px;background:var(--grad);width:0;transition:width 1.2s var(--ease)}.xshow__preview.is-inview .xrp__bar2 span{width:var(--w)}.xrp__row em{font-family:var(--f-body);font-style:normal;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xrp__row b{font-family:var(--f-body);font-size:.7rem;letter-spacing:.02em;color:var(--saffron-lit);font-variant-numeric:tabular-nums}.xrp__weight{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}.xrp__weight i{height:100%}.xrp__upsell{margin-top:.2rem;padding-top:.85rem;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:.8rem}.xrp__upsell-text{display:flex;flex-direction:column;gap:.1rem}.xrp__upsell-text b{font-family:var(--f-body);font-size:.68rem;letter-spacing:.02em;color:var(--text)}.xrp__upsell-text span{font-family:var(--f-body);font-size:.58rem;color:var(--faint)}.xrp__upsell-arrow{flex:none;font-size:.7rem;color:var(--gold);transition:transform .3s var(--ease)}.xshow__preview:hover .xrp__upsell-arrow{transform:translateX(3px)}.xshow__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-family:var(--f-body);font-size:var(--step--1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}.xshow__cta .arrow{color:var(--saffron-lit);transition:transform .35s var(--ease)}.xshow__preview:hover .xshow__cta .arrow{transform:translate(3px,-3px)}@media (min-width:940px){.xshow__grid{grid-template-columns:1.02fr 0.98fr}}@media (max-width:560px){.xshow__form{flex-direction:column}.xshow__run{justify-content:center}}@media (prefers-reduced-motion:reduce){.xrp__scan{animation:none;opacity:.35}.xshow__cta .arrow,.xshow__preview,.xshow__run{transition:none}}
/* === Block 5 (originally inline in index.html) === */
.soulshow{position:relative;z-index:1;width:min(440px,100%);margin:clamp(1.75rem,4vw,2.75rem) auto .5rem;text-align:left}.soulshow__frame{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:0 34px 90px -50px rgba(0,0,0,.8)}.soulshow__bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:rgba(247,242,233,.02)}.soulshow__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}.soulshow__bar b{margin-left:auto;font-family:var(--f-body);font-weight:400;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.soulshow__bar b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--saffron-lit);margin-right:.5rem;vertical-align:middle;animation:ssLive 1.8s ease-in-out infinite}.soulshow__stage{position:relative;display:grid;place-items:center;height:clamp(348px,46vw,410px);padding:clamp(1.3rem,4vw,1.9rem);background:var(--c-bg,#0b0807);transition:background .7s var(--ease);overflow:hidden;perspective:1150px}.xb{position:relative;width:min(340px,100%);border-radius:15px;padding:clamp(1.2rem,3.4vw,1.6rem);display:flex;flex-direction:column;gap:clamp(.7rem,1.9vw,1rem);background:var(--c-primary,#1c1512);color:var(--c-text,#f7f2e9);border:1px solid color-mix(in srgb,var(--c-text,#f7f2e9) 12%,transparent);box-shadow:0 26px 58px -34px rgba(0,0,0,.66);transition:background .7s var(--ease),color .7s var(--ease),border-color .7s var(--ease)}.xb__mast{display:flex;align-items:center;gap:.7rem;min-width:0}.xb__mark{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-display);font-size:1.15rem;font-weight:600;background:var(--c-secondary,#c9a24b);color:var(--c-onsec,#0b0807);transition:background .7s var(--ease),color .7s var(--ease)}.xb__word{font-size:1.5rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-display)}.xb__hero{font-family:var(--f-display);font-size:clamp(1.5rem,4vw,1.9rem);line-height:1.05;letter-spacing:-.01em;min-height:2.1em}.xb__spec{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-block:1px solid color-mix(in srgb,var(--c-text,#F7F2E9) 12%,transparent)}.xb__aa{flex:none;font-family:var(--f-display);font-size:2.4rem;line-height:.82}.xb__spect{display:flex;flex-direction:column;gap:.26rem;min-width:0}.xb__speck{font-family:var(--f-body);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.64}.xb__specl{font-family:var(--f-body);font-size:.74rem;line-height:1.5;opacity:.8}.xb__act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.xb__btn{font-family:var(--f-body);font-size:.72rem;font-weight:500;padding:.52rem 1.1rem;border-radius:100px;background:var(--c-accent,#e8842a);color:var(--c-onacc,#0b0807);transition:background .7s var(--ease),color .7s var(--ease)}.xb__btn2{font-family:var(--f-body);font-size:.72rem;padding:.52rem 1.05rem;border-radius:100px;background:0 0;color:var(--c-text,#f7f2e9);border:1px solid color-mix(in srgb,var(--c-text,#f7f2e9) 32%,transparent)}.xb__pal{display:flex;gap:.4rem}.xb__pal i{flex:1;height:19px;border-radius:5px;border:1px solid color-mix(in srgb,var(--c-text,#f7f2e9) 16%,transparent);transition:background .7s var(--ease)}.xb__voice{font-family:var(--f-body);font-size:.72rem;letter-spacing:.04em;line-height:1.5;opacity:.72}.xb[data-disp=serif] .xb__aa,.xb[data-disp=serif] .xb__word{font-family:var(--f-display);font-style:normal}.xb[data-disp=italic] .xb__aa,.xb[data-disp=italic] .xb__word{font-family:var(--f-display);font-style:italic}.xb[data-disp=caps] .xb__word{font-family:var(--f-body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:1.15rem}.xb[data-disp=caps] .xb__aa{font-family:var(--f-body);font-weight:500}.xb[data-disp=sans] .xb__word{font-family:var(--f-body);font-weight:500;letter-spacing:-.005em}.xb[data-disp=sans] .xb__aa{font-family:var(--f-body);font-weight:500}.xb.is-reform::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.18) 50%,transparent 68%);background-size:250% 100%;animation:ssSheen 1s var(--ease-2)}.xb.is-reform .xb__mark{animation:ssMarkPop .72s var(--ease-2)}@keyframes ssSheen{from{background-position:130% 0}to{background-position:-130% 0}}@keyframes ssMarkPop{0%{transform:scale(.6) rotate(-12deg);opacity:.2}60%{transform:scale(1.12) rotate(4deg);opacity:1}to{transform:none;opacity:1}}@keyframes ssLive{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.soulshow__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:0 .25rem}.soulshow__dots{display:flex;gap:.5rem}.soulshow__dots button{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}.soulshow__dots button:hover{background:var(--faint)}.soulshow__dots button[aria-selected=true]{background:var(--gold);transform:scale(1.25)}.soulshow__cap{font-family:var(--f-body);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}.soulshow__cap b{color:var(--faint);font-weight:400}@media (prefers-reduced-motion:reduce){.soulshow__bar b::before,.xb.is-reform .xb__mark,.xb.is-reform::after{animation:none}}
/* === Block 6 (originally inline in index.html) === */
.omnishow{position:relative;padding:clamp(4rem,10vh,7rem) 0;overflow:hidden;border-top:1px solid var(--line)}.omnishow__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(44% 54% at 24% 40%,rgba(232,132,42,.1),transparent 70%)}.omnishow__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}@media (max-width:940px){.omnishow__grid{grid-template-columns:1fr;gap:2.5rem}}.omnishow__copy h2 em{color:var(--saffron-lit)}.omnishow__copy .lede{color:var(--faint);max-width:50ch;margin-top:1rem}.omnishow__points{list-style:none;margin:1.5rem 0 2rem;padding:0;display:grid;gap:.7rem}.omnishow__points li{position:relative;padding-left:1.5rem;font-family:var(--f-body);font-size:.92rem;line-height:1.5;color:var(--muted)}.omnishow__points li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold)}.omnishow__points em{color:var(--text);font-style:normal}.omnishow__viz{display:block}.oh-scope{display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:0 34px 90px -50px rgba(0,0,0,.8);transition:border-color .4s var(--ease),transform .4s var(--ease)}.omnishow__viz:hover .oh-scope{border-color:var(--gold);transform:translateY(-3px)}.oh-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:rgba(247,242,233,.02)}.oh-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}.oh-bar b{margin-left:auto;font-family:var(--f-body);font-weight:400;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.oh-stage{position:relative;container-type:size;aspect-ratio:1.15;width:100%;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 50% 50%,rgba(232,132,42,.05),transparent 62%),var(--bg)}.oh-rings{position:absolute;inset:0;pointer-events:none}.oh-rings i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%}.oh-rings i:first-child{width:46cqmin;height:46cqmin}.oh-rings i:nth-child(2){width:84cqmin;height:84cqmin;border-color:var(--line-2)}.oh-sweep{position:absolute;top:50%;left:50%;width:84cqmin;height:84cqmin;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,rgba(232,132,42,0) 0deg,rgba(232,132,42,0) 280deg,rgba(232,132,42,.1) 328deg,rgba(232,132,42,.34) 356deg,rgba(255,255,255,.1) 359deg,rgba(232,132,42,0) 360deg);animation:ohSpin 7s linear infinite}.oh-core{position:relative;z-index:2;display:grid;place-items:center;border-radius:50%;width:30cqmin;height:30cqmin;background:conic-gradient(from -90deg,var(--saffron-lit) 90%,rgba(247,242,233,.12) 0)}.oh-core::before{content:"";position:absolute;inset:15%;border-radius:50%;background:var(--bg);border:1px solid var(--line)}.oh-core b{position:relative;z-index:1;font-family:var(--f-display);font-weight:500;font-size:11cqmin;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}.oh-core em{position:relative;z-index:1;font-family:var(--f-body);font-style:normal;font-size:2.9cqmin;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-lit);margin-top:.2cqmin}.oh-nodes{position:absolute;inset:0;pointer-events:none}.oh-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--a)) translateX(calc(var(--r) * 1cqmin)) rotate(calc(-1 * var(--a)));display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;font-family:var(--f-body);font-size:clamp(.5rem,2.5cqmin,.64rem);letter-spacing:.03em;color:var(--text);padding:.24rem .5rem;border:1px solid var(--line);border-radius:100px;background:rgba(11,8,7,.72);backdrop-filter:blur(3px)}.oh-node i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);animation:ohPing 2.8s ease-in-out infinite}.oh-node:nth-child(2) i{animation-delay:.45s}.oh-node:nth-child(3) i{animation-delay:.9s}.oh-node:nth-child(4) i{animation-delay:1.35s}.oh-node:nth-child(5) i{animation-delay:1.8s}.oh-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-top:1px solid var(--line);background:rgba(247,242,233,.02);font-family:var(--f-body);font-size:.68rem;letter-spacing:.04em;color:var(--muted)}.oh-foot b{color:var(--gold)}.oh-cta{color:var(--gold);letter-spacing:.06em}@keyframes ohSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes ohPing{0%,100%{opacity:.55}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.oh-sweep{animation:none;background:conic-gradient(from 0deg,rgba(232,132,42,.14) 0deg,rgba(232,132,42,0) 90deg)}.oh-node i{animation:none}}.approach,.clients,.contact,.hero,.manifesto,.omnishow,.proof,.receipts,.startsoul,.work,.xshow{content-visibility:auto}.proof{contain-intrinsic-size:auto 1800px}.receipts{contain-intrinsic-size:auto 1520px}.xshow{contain-intrinsic-size:auto 1300px}.omnishow{contain-intrinsic-size:auto 1190px}.work{contain-intrinsic-size:auto 3055px}.clients{contain-intrinsic-size:auto 1990px}.startsoul{contain-intrinsic-size:auto 1140px}.approach{contain-intrinsic-size:auto 1100px}.contact{contain-intrinsic-size:auto 820px}
/* === Block 7 (originally inline in index.html) === */
.loader{display:none!important}[data-reveal],[data-split] .char{opacity:1!important;transform:none!important}.cursor,.cursor-dot,.sound{display:none!important}
/* FIX 2026-08-10: .menu-btn used to be in the kill-list above. That rule is
unscoped and !important, so it beat `@media (max-width:900px){.menu-btn
{display:block}}` in Block 8 below. Result: the hamburger never rendered,
and because .nav is display:none under 900px, the homepage had NO
navigation at all on phones. Never put .menu-btn in a blanket
display:none rule. */
.menu-btn{display:none}
@media (max-width:900px){.menu-btn{display:block}}
/* === Block 8 (originally inline in index.html) === */
/* ============================================================
SFX EXPERIENCE LAYER v1 — mobile + desktop upgrade, 2026-08-02.
Additive only: every rule either introduces a new behaviour or
repairs a measured defect. Applied to built pages via styles.css
and injected verbatim into the standalone pages by tools/inject-layer.mjs.
============================================================ */
/* 1 · Header scrim — the fixed chrome floated bare over content on scroll;
on phones (full-width text) the wordmark collided with headings. A masked
gradient + blur veil fades in after 24px of scroll (html.sfx-scrolled,
toggled by the layer JS). Composited opacity only — zero CLS. */
body > header::before { content:""; position:absolute; inset:0 0 -18px; z-index:-1; pointer-events:none; opacity:0;
background:linear-gradient(to bottom, rgba(11,8,7,0.94), rgba(11,8,7,0.68) 58%, rgba(11,8,7,0) 96%);
-webkit-backdrop-filter:blur(10px) saturate(1.05); backdrop-filter:blur(10px) saturate(1.05);
-webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent); mask-image:linear-gradient(to bottom, #000 62%, transparent);
transition:opacity .38s var(--ease, ease); }
html.sfx-scrolled body > header::before { opacity:1; }
/* 2 · Tablets get the fullscreen menu, not a 7-item nav crammed into ~830px.
(Restores the ≤900px decision from the Ascension build.) */
@media (max-width:900px) { .nav { display:none; } .menu-btn { display:block; } }
/* 3 · Fullscreen menu polish: items 5–7 join the stagger (they previously all
arrived at 0s, before items 1–4); scroll containment; notch safe-areas. */
body.menu-open .menu__item:nth-child(5) .menu__link { transition-delay:.50s; }
body.menu-open .menu__item:nth-child(6) .menu__link { transition-delay:.58s; }
body.menu-open .menu__item:nth-child(7) .menu__link { transition-delay:.66s; }
.menu { overscroll-behavior:contain;
padding-left:max(var(--pad-x), env(safe-area-inset-left));
padding-right:max(var(--pad-x), env(safe-area-inset-right));
padding-bottom:max(var(--pad-x), env(safe-area-inset-bottom)); }
/* 4 · Safe-area insets for the fixed chrome (viewport-fit=cover companions). */
body > header { padding-left:max(var(--pad-x), env(safe-area-inset-left));
padding-right:max(var(--pad-x), env(safe-area-inset-right)); }
.sound { right:max(clamp(1rem,3vw,2rem), env(safe-area-inset-right));
bottom:max(clamp(1rem,3vw,2rem), calc(env(safe-area-inset-bottom) + 0.35rem)); }
.hero__scrollcue { bottom:max(clamp(1.5rem,4vh,2.5rem), calc(env(safe-area-inset-bottom) + 1rem)); }
body.lock { height:100dvh; }
/* 5 · Touch feedback — hover states don't exist under a thumb. Give coarse
pointers an immediate, restrained response instead. */
@media (hover:none), (pointer:coarse) {
a, button { -webkit-tap-highlight-color:transparent; }
.btn:active { transform:scale(0.97); }
.proj-tab:active, .bench__chip:active, .xchip:active, .nf__route:active { background:rgba(232,132,42,0.08); }
.nav-link:active, .menu__link:active, .footer__nav a:active, .contact__meta a:active { opacity:.68; }
.sound:active { transform:scale(0.94); }
}
/* 6 · Tap-target repairs (all measured under 24px):
bench chips rendered 19px tall on the home build; the soul-board dots were
8×8; the NDA-ledger's "request references" was a bare 19px inline link. */
.bench__chip { min-height:var(--tap, 44px); }
.clients__foot a { display:inline-block; padding-block:.55rem; margin-block:-.55rem;
color:var(--gold); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:.22em; }
.clients__foot a:hover { text-decoration-color:var(--gold); }
.soulshow__dots { gap:.3rem; }
.soulshow__dots button { position:relative; width:44px; height:44px; background:transparent !important; transform:none !important; touch-action:manipulation; }
.soulshow__dots button::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
border-radius:50%; background:var(--line-2); transition:background .3s var(--ease, ease), transform .3s var(--ease, ease); }
.soulshow__dots button:hover::before { background:var(--faint); }
.soulshow__dots button[aria-selected="true"]::before { background:var(--gold); transform:scale(1.3); }
input[type="range"] { min-height:30px; }
p > a:not([class]) { display:inline-block; padding-block:.5rem; margin-block:-.5rem; }
.gallery-link { padding-block:1rem; margin-block:-1rem; }
/* 7 · Typography finish: balanced headings, no orphan last lines. */
h2:not([data-split]), h3, .cs__title, .nf h1 { text-wrap:balance; }
p { text-wrap:pretty; }
/* 8 · Reading-progress hairline — pure CSS scroll-driven, receipts energy.
Element is injected by the layer JS; invisible where unsupported. */
.sfx-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:320; pointer-events:none;
transform:scaleX(0); transform-origin:0 50%;
background:var(--grad, linear-gradient(90deg,#A5320F,#E8842A,#F2BF63)); }
/* REMOVED animation-timeline: scroll(root) — conflicted with scroll JS */
/* 9 · Cross-document View Transitions (restored). The JS fade fallback is
bypassed by the layer JS where these are native. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:sfx-vt-out .30s cubic-bezier(0.76,0,0.24,1) both; }
::view-transition-new(root) { animation:sfx-vt-in .42s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes sfx-vt-out { to { opacity:0; transform:translateY(-10px); } }
@keyframes sfx-vt-in { from { opacity:0; transform:translateY(12px); } }
/* 10 · Word-level headline reveal on touch devices (chars stay desktop-only;
words are cheap enough for a phone and the hero deserves an entrance). */
@media (hover:none), (pointer:coarse) {
[data-split] .sfx-w { display:inline-block; transform:translateY(112%); transition:transform .72s var(--ease, ease); transition-delay:calc(var(--i) * 45ms); }
[data-split].in .sfx-w { transform:translateY(0); }
}
/* 11 · Current-page marker in every nav (set by layer JS). */
.nav-link[aria-current="page"] .num { color:var(--gold); }
.nav-link[aria-current="page"]::after { content:""; position:absolute; left:.5rem; right:.5rem; bottom:9px; height:1px;
background:var(--grad, #E8842A); }
.nav-link:focus-visible::after { content:""; position:absolute; left:.5rem; right:.5rem; bottom:9px; height:1px;
background:var(--grad, #E8842A); }
.menu__link[aria-current="page"] { color:var(--gold); }
.menu__link:hover, .menu__link:focus-visible { color:var(--gold); font-style:italic; }
.menu__link:hover::after, .menu__link:focus-visible::after { transform:scaleX(1); }
.footer__nav a[aria-current="page"] { color:var(--text); }
.footer__nav a:focus-visible { color:var(--gold); }
/* 12 · Motion discipline: everything above obeys reduced motion. */
/* 12b · Mobile brightness — the warm-dark #0B0807 reads darker on small screens
at arm's length than on a desktop monitor. Lift the base values a few ticks
on phone-width viewports only, keeping the saffron-spice aesthetic intact. */
@media (max-width: 760px) {
:root {
--bg: #110D0B;
--bg-alt: #221612;
--bg-raise: #2A1D17;
}
body { background:
radial-gradient(ellipse at 50% 0%, rgba(232, 132, 42, 0.05) 0%, transparent 50%),
var(--bg);
}
body > header { background: rgba(17, 13, 11, 0.92); }
.menu { background: var(--bg-alt); }
}
/* ═══════════════════════════════════════════════════════════════
SFX LAYER v2 — PREMIUM MOBILE EFFECTS (2026-08-04)
World-class signals: tactile depth, kinetic typography,
scroll cinema, magnetic interactions, ambient shimmer.
All transform/opacity-only. All reduced-motion safe.
═══════════════════════════════════════════════════════════════ */
/* 13 · Kinetic hero text — split h1 into per-word mask reveals on load.
CSS-only: words are already wrapped in spans by the split JS.
On mobile, add a subtle stagger so the hero "types in" luxuriously. */
@media (max-width: 760px) {
.hero h1 [data-split] .word {
display: inline-block;
overflow: hidden;
}
.hero h1 [data-split] .word .char {
display: inline-block;
transform: translateY(110%);
opacity: 0;
animation: sfx-char-rise 0.8s var(--ease) forwards;
}
.hero h1 [data-split] .word:nth-child(1) .char { animation-delay: 0.15s; }
.hero h1 [data-split] .word:nth-child(2) .char { animation-delay: 0.22s; }
.hero h1 [data-split] .word:nth-child(3) .char { animation-delay: 0.29s; }
.hero h1 [data-split] .word:nth-child(4) .char { animation-delay: 0.36s; }
.hero h1 [data-split] .word:nth-child(5) .char { animation-delay: 0.43s; }
.hero h1 [data-split] .word:nth-child(6) .char { animation-delay: 0.50s; }
.hero h1 [data-split] .word:nth-child(7) .char { animation-delay: 0.57s; }
.hero h1 [data-split] .word:nth-child(8) .char { animation-delay: 0.64s; }
@keyframes sfx-char-rise {
0% { transform: translateY(110%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
}
/* 14 · REMOVED scroll-driven section reveals — conflicted with existing
scroll JS and Lenis smooth scroll. The existing IntersectionObserver
reveal system already handles this. */
/* 15 · Magnetic CTA buttons — on touch, buttons "press" inward with a
subtle scale + inner glow. Signals tactile, premium, expensive. */
@media (hover: none), (pointer: coarse) {
.btn--primary:active,
.btn--solid:active,
.xshow__run:active {
transform: scale(0.96) !important;
box-shadow: 0 0 0 4px rgba(232, 132, 42, 0.15), 0 8px 30px -8px rgba(232, 132, 42, 0.4) !important;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out !important;
}
.btn--line:active {
transform: scale(0.97) !important;
border-color: var(--gold) !important;
color: var(--gold) !important;
}
}
/* 16 · Ambient shimmer on gold accents — a slow, lazy light sweep across
gold text/borders that catches the eye without being garish. */
.eyebrow,
.footer__mail,
.menu__link:hover {
background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
background-size: 200% 100%;
background-position: 200% 0;
animation: sfx-shimmer 6s ease-in-out infinite;
}
@keyframes sfx-shimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
/* 17 · Premium card lift — on touch, cards "press" toward the viewer
with a depth shadow + border glow. Signals physicality and craft. */
@media (hover: none), (pointer: coarse) {
.cl-card:active,
.xrp:active,
.oh-scope:active {
transform: scale(0.98) translateY(2px) !important;
box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 75, 0.3) !important;
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
}
}
/* 18 · REMOVED vignette pulse — fixed overlay interfered with stacking
context and pointer events. The existing gl-veil already provides
edge darkening. */
/* 19 · Menu link gold underline trace — when the fullscreen menu opens,
each link gets a gold underline that draws from left to right.
Signals intentionality and craft. */
.menu__link::after {
content: '';
position: absolute;
left: 0;
bottom: 0.1em;
width: 100%;
height: 1px;
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
}
.menu__link:hover::after {
transform: scaleX(1);
}
body.menu-open .menu__item:nth-child(1) .menu__link::after { transition-delay: 0.3s; }
body.menu-open .menu__item:nth-child(2) .menu__link::after { transition-delay: 0.38s; }
body.menu-open .menu__item:nth-child(3) .menu__link::after { transition-delay: 0.46s; }
body.menu-open .menu__item:nth-child(4) .menu__link::after { transition-delay: 0.54s; }
body.menu-open .menu__item:nth-child(5) .menu__link::after { transition-delay: 0.62s; }
body.menu-open .menu__item:nth-child(6) .menu__link::after { transition-delay: 0.70s; }
body.menu-open .menu__item:nth-child(7) .menu__link::after { transition-delay: 0.78s; }
/* 20 · Footer gold divider shimmer — a gold line that slowly shimmers
above the footer, signaling premium quality at the page bottom. */
.footer__nav-wrap {
position: relative;
}
.footer__nav-wrap::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
background-size: 200% 100%;
animation: sfx-footer-shimmer 5s ease-in-out infinite;
}
@keyframes sfx-footer-shimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
/* 21 · Touch ripple — on coarse pointers, a subtle saffron ripple
emanates from the tap point on buttons. Signals responsiveness. */
@media (hover: none), (pointer: coarse) {
.btn--primary,
.btn--solid,
.xshow__run,
.btn--line {
position: relative;
overflow: hidden;
}
.btn--primary::after,
.btn--solid::after,
.xshow__run::after,
.btn--line::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
transform: translate(-50%, -50%);
opacity: 0;
transition: width 0.5s ease-out, height 0.5s ease-out, opacity 0.5s ease-out;
pointer-events: none;
}
.btn--primary:active::after,
.btn--solid:active::after,
.xshow__run:active::after,
.btn--line:active::after {
width: 300px;
height: 300px;
opacity: 1;
transition: width 0.5s ease-out, height 0.5s ease-out, opacity 0.5s ease-out;
}
}
/* 22 · (removed scroll-snap — proximity snap can fight with Lenis/smooth scroll
on content-heavy pages. The reveal animations already provide pacing.) */
/* 23 · Brand mark glow pulse — the logo dot pulses with a warm saffron
glow, signaling "alive" and premium. */
.brand-mark, .deck-brand-mark {
animation: sfx-mark-glow 3s ease-in-out infinite;
}
@keyframes sfx-mark-glow {
0%, 100% { box-shadow: 0 0 8px rgba(232, 132, 42, 0.4); }
50% { box-shadow: 0 0 16px rgba(232, 132, 42, 0.7); }
}
/* 24 · Loading bar gold gradient — the page-top progress bar gets
a richer gold gradient with a moving highlight. */
.sfx-progress {
background: linear-gradient(90deg, #A5320F, #E8842A 50%, #F2BF63, #E8842A);
background-size: 200% 100%;
animation: sfx-progress-flow 2s linear infinite;
}
@keyframes sfx-progress-flow {
0% { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion:reduce) {
.sfx-progress { display:none; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; }
[data-split] .sfx-w { transform:none !important; transition:none !important; }
body > header::before { transition:none; }
/* v2: kill all premium effects under reduced motion */
.hero h1 [data-split] .word .char { animation: none !important; transform: none !important; opacity: 1 !important; }
.eyebrow, .footer__mail, .menu__link:hover { animation: none !important; background-image: none !important; }
.footer__nav-wrap::before { animation: none !important; }
.brand-mark, .deck-brand-mark { animation: none !important; }
.sfx-progress { animation: none !important; }
}
/* === Block 9 (originally inline in index.html) === */
.btn, .bench__run, .xshow__run, .bench__chip, .proj-tab, .nav-link,
.footer__nav a, .footer__mail, .footer__top, .sound, .menu-btn,
.contact__meta a, .arrowlink a, a[data-cursor] {
min-height: 44px;
min-width: 44px;
}
input, textarea, select, button {
font-size: 16px !important;
}
@media (max-width: 600px) {
.btn, .bench__run, .xshow__run, .bench__chip, .proj-tab {
min-height: 48px;
padding-block: 0.7rem;
}
}
/* === Block 10 (originally inline in index.html) === */
@media (max-width: 600px) {
.btn, .bench__run, .xshow__run, .bench__chip, .proj-tab {
min-height: 48px;
padding-block: 0.7rem;
}
}
/* === Block 11 (originally inline in index.html) === */
/* ═══════════════════════════════════════════
critical.css — Above-fold styles (inlined in )
═══════════════════════════════════════════ */
/* ─── Design Tokens ─── */
:root {
--color-bg: #0d0d0d;
--color-surface: #141414;
--color-surface-hover: #1f1f1d;
/* Critical-path text — must pass WCAG AA 4.5:1 against #0d0d0d bg.
Main.css loads later and overrides --color-text-muted to #a0988a (6.0:1),
so these critical-path values are CONSERVATIVE floor values. */
--color-text: #e8e6e3; /* 11.6:1 AAA */
--color-text-secondary: #b8b6b3; /* 8.3:1 AAA — was #a8a6a3 (6.6:1 still passes AA, but #b8b6b3 keeps cite element safe) */
--color-text-muted: #b8b6b3; /* 8.3:1 AAA — was #6b6a68 (3.5:1 FAIL on cite/figcaption) */
--color-text-inverse: #0d0d0d;
/* Saffron accent system — replaces tech-blue (#3399ff/#5aa8ff) per user directive (2026-07-20).
Real saffron tone (warm amber-orange), not tech-blue substitute. Both pass WCAG AAA against #0d0d0d. */
--color-accent: #E08A2B; /* saffron-deep-orange 7.26:1 AAA */
--color-accent-hover: #F0992E; /* saffron-bright 8.61:1 AAA (hover lighter) */
--color-accent-subtle: rgba(224, 138, 43, 0.10);
--color-gold: #C9A96E; /* saffron-gold 8.68:1 AAA (secondary accent) */
--color-gold-soft: #D4A05C; /* saffron-warm-gold 8.31:1 AAA (tertiary) */
--color-border: rgba(232, 230, 227, 0.08);
--color-border-hover: rgba(232, 230, 227, 0.16);
/* Atmosphere meta — set by JS at runtime */
--atmos-accent-hue: 30;
--atmos-warmth: 0%;
--atmos-bg-shift: 0%;
--atmos-mood: "intentional calm";
--atmos-emphasis: "brand";
--atmos-tod: "day";
--atmos-season: "summer";
--atmos-ref: "direct";
/* ═══ Transitions for Adaptive Atmosphere ═══
Smooth animated shifts when atmosphere JS overrides
CSS custom properties via inline style. */
transition:
color 2s ease-out,
background-color 2s ease-out,
border-color 1.5s ease-out,
box-shadow 1.5s ease-out,
outline-color 1.5s ease-out;
--font-display: var(--f-display, 'Cormorant Garamond', Georgia, Times New Roman, serif);
--font-sans: 'Space Grotesk', 'Space Grotesk-fallback', -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif;
--font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--text-8xl: 5.625rem;
--text-9xl: 7rem;
--leading-none: 0.95;
--leading-tight: 1.05;
--leading-snug: 1.15;
--leading-base: 1.3;
--leading-relaxed: 1.5;
--tracking-tight: -0.025em;
--tracking-base: 0em;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-widest: 0.15em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px;
--radius-sm: 4px;
--radius-md: 12px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-gentle: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 200ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--duration-xl: 1200ms;
--atmos-accent-hue: 30;
--atmos-warmth: 0%;
--atmos-bg-shift: 0%;
--atmos-mood: "intentional calm";
--atmos-emphasis: "brand";
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
--shadow-glow: 0 0 30px rgba(212, 135, 58, 0.12);
--z-grain: 1;
--z-base: 2;
--z-sticky: 100;
--z-nav: 200;
--z-overlay: 300;
--z-modal: 400;
--z-entry: 500;
--z-cursor: 600;
--container-max: 1280px;
--container-narrow: 860px;
}
/* ─── @font-face (self-hosted variable fonts) ─── */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Fraunces-fallback';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: local('Georgia'), local('Times New Roman');
ascent-override: 100%;
descent-override: 35%;
line-gap-override: 0%;
size-adjust: 98%;
}
@font-face {
font-family: 'Space Grotesk-fallback';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: local('Segoe UI'), local('Arial');
ascent-override: 92%;
descent-override: 28%;
line-gap-override: 0%;
size-adjust: 102%;
}
/* ─── Base Reset & Body ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--color-bg); color-scheme: dark; }
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--color-text);
background: var(--color-bg);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-8xl); line-height: var(--leading-none); }
h2 { font-size: var(--text-6xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
strong, .strong { font-weight: 700; }
p { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.label {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-4);
}
.section-title { font-size: var(--text-6xl); margin-bottom: var(--space-6); }
/* ─── Container ─── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-8); }
/* ─── Film Grain ─── */
.grain {
position: fixed; inset: 0; z-index: var(--z-grain);
pointer-events: none; opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
@keyframes grainShift {
0% { transform: translate(0, 0); }
33% { transform: translate(-2px, 1px); }
66% { transform: translate(1px, -1px); }
100% { transform: translate(-1px, 2px); }
}
/* ─── Entry Gate ─── */
.entry-gate {
position: fixed; inset: 0; z-index: var(--z-entry);
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--color-bg);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), backdrop-filter 0.8s;
}
.entry-gate.hidden { opacity: 0; pointer-events: none; backdrop-filter: blur(0px); }
.entry-gate-inner { text-align: center; }
.entry-symbol {
font-family: var(--font-display); font-size: var(--text-9xl); font-weight: 400;
color: var(--color-accent); line-height: 1; margin-bottom: var(--space-6);
letter-spacing: -0.04em;
}
.entry-label {
font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500;
letter-spacing: var(--tracking-widest); text-transform: uppercase;
color: var(--color-text-secondary); margin-bottom: var(--space-12);
}
.entry-cta {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-10);
border: 1px solid var(--color-border); border-radius: 100px;
font-size: var(--text-sm); font-weight: 500;
letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: var(--color-text); cursor: pointer;
transition: border-color var(--duration-base) var(--ease-out),
background var(--duration-base) var(--ease-out);
}
.entry-cta:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.entry-cta .arrow { transition: transform var(--duration-base) var(--ease-out); }
.entry-cta:hover .arrow { transform: translateX(4px); }
.entry-progress {
position: absolute; bottom: var(--space-12); left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.entry-progress-bar { width: 120px; height: 1px; background: var(--color-border); position: relative; overflow: hidden; }
.entry-progress-bar-fill {
position: absolute; inset: 0; background: var(--color-accent);
transform: scaleX(0); transform-origin: left center;
}
.entry-progress-label {
font-size: var(--text-xs); color: var(--color-text-muted);
letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
@keyframes entryFadeIn { to { opacity: 1; transform: translateY(0); } }
/* ─── Navigation ─── */
/* .nav position:fixed removed — conflicts with canonical header flex layout */
.nav-scrolled {
background: rgba(13, 13, 13, 0.85);
backdrop-filter: blur(20px) saturate(1.2);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border);
}
.nav-hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo {
font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
letter-spacing: var(--tracking-tight); color: var(--color-text);
display: flex; align-items: center; gap: var(--space-3);
}
.nav-logo-mark { width: 32px; height: 32px; flex: 0 0 auto; transition: transform var(--duration-base) var(--ease-out); }
.nav-logo:hover .nav-logo-mark { transform: rotate(-4deg) scale(1.05); }
.nav-logo-wordmark { display: inline-flex; align-items: baseline; gap: 0.18em; }
.nav-logo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); display: inline-block; align-self: center; }
.footer-logo { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-logo-mark { width: 64px; height: 64px; }
.nav-links { display: flex; align-items: center; gap: var(--space-8); }
.nav-link {
font-size: var(--text-sm); font-weight: 500;
color: var(--color-text-secondary); position: relative;
padding: var(--space-2) 0; cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
}
.nav-link::after {
content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
background: var(--color-accent); transition: width var(--duration-base) var(--ease-out);
}
.nav-link:hover { color: var(--color-text); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--color-text); }
.nav-link.active::after { width: 100%; }
.nav-cta {
font-size: var(--text-sm); font-weight: 500;
padding: var(--space-3) var(--space-6);
border: 1px solid var(--color-accent); color: var(--color-accent);
border-radius: 100px;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.nav-cta:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); z-index: calc(var(--z-nav) + 1); cursor: pointer; }
.nav-mobile-toggle span { display: block; width: 24px; height: 1.5px; background: var(--color-text); transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
/* ─── Buttons ─── */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm); font-weight: 500;
padding: var(--space-3) var(--space-6); border-radius: 100px;
letter-spacing: var(--tracking-base); cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.btn .arrow-icon { display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .arrow-icon { transform: translateX(4px) rotate(0deg); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); border: 1px solid var(--color-accent); }
.btn-outline { border: 1.5px solid var(--color-accent); color: var(--color-text); background: rgba(212,163,71,0.06); } .btn-outline:hover { background: rgba(212,163,71,0.14); }
.btn-ghost { color: var(--color-text-secondary); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
/* ─── Hero ─── */
.hero {
position: relative; min-height: 100vh;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; aspect-ratio: 16/9; min-height: 100vh; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.25) saturate(1.1); opacity: 0.4; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-overlay {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
#hero-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.82) 28%, rgba(8,8,8,0.35) 52%, rgba(8,8,8,0) 72%); }
.hero-content { position: relative; z-index: 3; text-align: center; max-width: 900px; padding: 0 var(--space-8); width: 100%; }
.hero-label {
font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
letter-spacing: var(--tracking-widest); text-transform: uppercase;
color: var(--color-accent); margin-bottom: var(--space-6);
}
.hero-title { font-family: var(--font-display); font-size: clamp(var(--text-5xl), 8vw, var(--text-9xl)); font-weight: 400; line-height: var(--leading-none); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-8); }
.hero-title .line { display: block; overflow: hidden; font-size: 0; }
.hero-title .char, .hero-title .word { display: inline-block; font-size: var(--text-8xl); } .hero-title .word { margin-right: 0.22em; }
.hero-subtitle {
font-size: var(--text-lg); color: var(--color-text-secondary);
max-width: 560px; margin: 0 auto var(--space-10);
line-height: var(--leading-relaxed);
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.hero-scroll {
position: absolute; bottom: var(--space-10); left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.scroll-mouse { width: 24px; height: 38px; border: 2px solid var(--color-text-muted); border-radius: 12px; position: relative; }
.scroll-dot { width: 4px; height: 8px; background: var(--color-accent); border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
.scroll-label { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); }
/* ─── Sound Toggle ─── */
.sound-toggle {
position: fixed; bottom: var(--space-8); right: var(--space-8);
z-index: var(--z-modal); width: 44px; height: 44px;
border-radius: 50%; border: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
color: var(--color-text-muted); font-size: var(--text-lg);
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.sound-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
/* ─── Skip-to-content ─── */
a.sr-only:focus { transform: translateY(0) !important; }
/* ─── Reduced Motion ─── */
/* ─── Accessibility Utility ─── */
/* WCAG-compliant visually-hidden helper. Element is invisible but
announced by screen readers. Use for off-screen labels. */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
.grain { display: none !important; }
.hero-title .line span { opacity: 1 !important; transform: none !important; }
.hero-title .char { opacity: 1 !important; transform: none !important; }
.hero-label, .hero-subtitle, .hero-actions, .hero-scroll { opacity: 1 !important; transform: none !important; }
.entry-gate-inner { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ─── Mobile Hero/Nav Overrides ─── */
@media (max-width: 768px) {
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
.section-title { font-size: var(--text-4xl); }
.hero-title { font-size: var(--text-5xl); }
.nav-links {
position: fixed; top: 0; right: 0; bottom: 0; width: 100%;
background: rgba(13, 13, 13, 0.97); backdrop-filter: blur(30px);
flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-10); transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-out); z-index: var(--z-nav);
}
.nav-links.open { transform: translateX(0); }
.nav-mobile-toggle { display: flex; }
.nav-link { font-size: var(--text-3xl); font-family: var(--font-display); font-weight: 400; }
.nav-link::after { display: none; }
.nav-cta { font-size: var(--text-base); padding: var(--space-4) var(--space-10); margin-top: var(--space-4); }
.entry-symbol { font-size: var(--text-7xl); }
.entry-cta { padding: var(--space-3) var(--space-8); }
.hero-actions { flex-direction: column; }
.hero-subtitle { font-size: var(--text-base); }
.nav-logo { font-size: var(--text-base); gap: var(--space-2); }
.nav-logo-mark { width: 26px; height: 26px; }
}
/* ─── Tablet (1024px) ─── */
@media (max-width: 1024px) {
.hero-title { font-size: var(--text-7xl); }
.hero-subtitle { max-width: 480px; }
}
@media (hover: none) {
html { cursor: auto; }
button { cursor: auto; }
}
/* Auto-heal: hide debug overlay in production */
#saffron-diag, .saffron-diag, [id*="saffron-diag"] { display: none !important; }
body[data-debug] #saffron-diag, [data-debug] #saffron-diag { display: block !important; }
/* ── Live Benchmark Table ────────────────────────────────────── */
.bench{display:grid;gap:var(--space-md)}@media(min-width:640px){.bench{gap:var(--space-lg)}}
.bench__h{font-family:var(--f-body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:var(--space-sm)}
.bench__stamp{font-size:.72rem;letter-spacing:.06em;text-transform:none;color:var(--saffron-lit);font-weight:400}
.bench__table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--f-body);font-size:var(--step--1)}
.bench__table th{text-align:left;padding:.6rem .8rem .4rem .8rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);font-weight:500}
.bench__table td{padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.bench__table tr:last-child td{border-bottom:none}
.bench__table .btd--name{font-weight:500;color:var(--text)}
.bench__table .btd--name em{font-style:italic;color:var(--muted);font-weight:400;font-size:.82em;display:block}
.bench__table .btd--score{font-weight:500;font-variant-numeric:tabular-nums;text-align:center}
.bench__table .btd--score.btd--us{background:var(--gold);color:var(--ink);border-radius:3px;padding:.15rem .55rem;font-weight:600}
.btd--score.is-1{color:var(--saffron-lit)}.btd--score.is-2{color:var(--gold)}.btd--score.is-3{color:var(--saffron)}.btd--score.is-4{color:#e5484d}
.bench__table .btd--note{font-size:.72rem;color:var(--muted);font-style:italic;text-align:right;max-width:12ch;overflow:hidden;text-overflow:ellipsis}
.bench__loading{text-align:center;padding:2rem;color:var(--muted);font-size:var(--step--1)}
.bench__loading .spinner{display:inline-block;width:1rem;height:1rem;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;margin-right:.5rem;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.bench__foot{font-size:.72rem;color:var(--faint);text-align:center;margin-top:var(--space-sm)}
.bench__foot a{color:var(--gold);text-decoration:underline}
/* ── Site Health Badge (footer) ──────────────────────────────── */
.shi-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .85rem;border:1px solid var(--line-2);border-radius:100px;font-family:var(--f-body);font-size:.65rem;letter-spacing:.04em;color:var(--muted);transition:border-color .3s var(--ease),background .3s var(--ease);line-height:1.3}
.shi-badge:hover{border-color:var(--line);background:var(--bg-raise)}
.shi-badge__num{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.shi-badge__label{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-lit)}
.shi-badge__stamp{display:none}@media(min-width:540px){.shi-badge__stamp{display:inline;font-size:.6rem;color:var(--faint)}}
.shi-badge--ok{border-color:rgba(201,162,75,.25)}
.xb-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border:1px solid rgba(201,162,75,.25);border-radius:100px;font-family:var(--f-body);font-size:.65rem;letter-spacing:.04em;color:var(--muted);transition:border-color .3s var(--ease),background .3s var(--ease);line-height:1.3;cursor:default}
.xb-badge:hover{border-color:var(--line);background:var(--bg-raise)}
.xb-badge__text{font-weight:600;color:var(--text);letter-spacing:.06em;text-transform:uppercase;font-size:.6rem}
.xb-badge__engines{font-size:.58rem;color:var(--saffron-lit);letter-spacing:.06em}
.footer__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--line)}
/* ── Brand Moodboard Tool ────────────────────────────────────── */
.brand-tool{margin-top:var(--space-lg);padding:var(--space-md);background:var(--bg-alt);border:1px solid var(--line);border-radius:12px}
.brand-tool__h{font-family:var(--f-body);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-lit);margin-bottom:var(--space-sm)}
.brand-tool__p{font-size:var(--step--1);color:var(--faint);margin-bottom:var(--space-md);max-width:40ch}
.brand-tool__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}@media(max-width:540px){.brand-tool__grid{grid-template-columns:1fr}}
.brand-tool__picker{display:grid;gap:.6rem}
.brand-tool__label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brand-tool__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.brand-tool__chip{padding:.35rem .8rem;border:1px solid var(--line-2);border-radius:100px;font-size:.72rem;font-family:var(--f-body);background:0 0;color:var(--text);cursor:pointer;transition:all .3s var(--ease)}
.brand-tool__chip:hover{border-color:var(--gold);color:var(--gold)}
.brand-tool__chip.is-sel{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.brand-tool__preview{min-height:180px;border-radius:8px;background:var(--bg);padding:var(--space-md);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:all .6s var(--ease);position:relative}
.brand-tool__preview .btp-name{font-family:var(--f-display);font-size:var(--step-2);font-weight:500;line-height:1.1;margin-bottom:.3rem}
.brand-tool__preview .btp-tagline{font-size:var(--step--1);color:var(--muted);max-width:20ch;margin-bottom:.6rem}
.brand-tool__preview .btp-swatch{display:flex;gap:.4rem;margin-top:.3rem;flex-wrap:wrap;justify-content:center}
.brand-tool__preview .btp-swatch i{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--line-2)}
/* ============================================================
MOBILE POLISH — 2026-08-10
Measured on iPhone 13 (390 x 664 CSS px) against the live build.
Every rule repairs a defect that was observed, not assumed.
Appended last so it wins the cascade without needing !important.
============================================================ */
/* ---- 1 · Live competitor benchmark table -----------------------
9 columns render 623px wide inside a 390px viewport with no scroll
container, so columns 4-9 (SEO, LCP, TBT, CLS, Details) were simply
unreachable on a phone. The .bench__scrollwrap / .bench__scroll
elements are created at runtime by saffron-mobile-polish.js. */
.bench__scrollwrap { position: relative; }
.bench__scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.bench__scroll::-webkit-scrollbar { height: 4px; }
.bench__scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 100px; }
.bench__scroll > table { min-width: 620px; }
/* fade the right edge while more columns remain off-screen */
.bench__scrollwrap::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0;
width: clamp(28px, 9vw, 52px); pointer-events: none; z-index: 2;
background: linear-gradient(to right, rgba(11,8,7,0), var(--bg) 88%);
opacity: 0; transition: opacity .3s var(--ease);
}
.bench__scrollwrap[data-overflowing="true"]::after { opacity: 1; }
.bench__scrollwrap[data-at-end="true"]::after { opacity: 0; }
.bench__hint {
display: none; align-items: center; gap: .4rem;
margin: .55rem 0 0;
font-family: var(--f-body); font-size: 12.5px; letter-spacing: .04em;
color: var(--faint);
}
.bench__scrollwrap[data-overflowing="true"] .bench__hint { display: flex; }
.bench__hint span { animation: benchNudge 2.4s var(--ease) infinite; }
@keyframes benchNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (max-width: 760px) {
/* keep the studio name anchored while the scores scroll under it */
.bench__scroll thead th:first-child,
.bench__scroll tbody tr > :first-child {
position: sticky; left: 0; z-index: 2;
background: var(--bg); box-shadow: 1px 0 0 var(--line);
}
.bench__scroll thead th:first-child { z-index: 3; }
}
/* ---- 2 · Tap targets -------------------------------------------
The Brand Soul palette/voice chips measured 41x21 and 29x21 CSS px.
WCAG 2.5.8 asks 24px minimum; 44px is the platform convention and
what the rest of this site already uses via --tap. */
.brand-tool__chips { flex-wrap: wrap; row-gap: .5rem; }
.brand-tool__chip {
min-height: var(--tap, 44px);
display: inline-flex; align-items: center; justify-content: center;
padding-inline: .95rem;
border-radius: 100px;
-webkit-tap-highlight-color: transparent;
}
@media (hover: none), (pointer: coarse) {
.brand-tool__chip:active { transform: scale(.96); }
}
/* ---- 3 · Type floor on phones ----------------------------------
A long tail of 0.5-0.62rem labels renders at 8.8-10.9px on a 390px
viewport — below what most people can read at arm's length. Desktop
sizing is deliberately fine-grained, so these floors are scoped to
phones and lift only the offenders that were actually measured. */
@media (max-width: 600px) {
/* running prose */
.step__desc,
.receipts__note,
.clients__foot,
.omnishow__points li,
.xshow__points li { font-size: 15px; line-height: 1.6; }
/* secondary meta */
.cl-card__meta,
.bench__stamp,
.btd--note,
.versus__meta,
.step__gate,
.xrp__row em,
.oh-cta,
.xrp__upsell-text b { font-size: 12.5px; }
.footer__legal,
.eyebrow { font-size: 13px; }
/* micro uppercase labels — 11.5px floor, tracking trimmed a touch so
the wider glyphs still fit their containers at the larger size */
.cl-card__tag,
.case-badge,
.cv-sub,
.xrp__host,
.xrp__live,
.xrp__fixh,
.xrp__grade i,
.xrp__g i,
.xrp__upsell-text span,
.oh-bar b,
.oh-node,
.soulshow__bar b,
.soulshow__cap,
.xb__speck,
.xshow__stat span { font-size: 11.5px; letter-spacing: .09em; }
.xrp__film i::after { font-size: 10px; }
}
/* ---- 1b · Constrain the benchmark scroller ---------------------
The table's 623px min-content width was blowing out its parent
track (a flex/grid item defaults to min-width:auto, which refuses
to shrink below its content). That stretched the wrapper AND the
sibling heading to 643px, so the scroller had nothing to scroll
and the extra columns stayed clipped and unreachable. min-width:0
lets the track collapse back to the viewport; the overflow then
lands inside .bench__scroll where it belongs. */
.bench__scrollwrap { min-width: 0; max-width: 100%; width: 100%; }
.bench__scroll { min-width: 0; max-width: 100%; width: 100%; }
.bench__h { min-width: 0; max-width: 100%; }
/* Short chip labels ("Bold", "Sage") still measured 29-37px wide after the
height fix. Give them a width floor too so every chip is a full target. */
.brand-tool__chip { min-width: var(--tap, 44px); }
/* ---- 4 · Landscape phones --------------------------------------
The floors in section 3 key off max-width:600px, so a phone held
sideways (844x390) fell through them entirely — the audit counted
38 sub-11.4px nodes on the homepage in landscape vs 8 upright.
Re-apply on any short, touch-driven viewport regardless of width. */
@media (max-height: 500px) and (pointer: coarse) {
.step__desc, .receipts__note, .clients__foot,
.omnishow__points li, .xshow__points li { font-size: 15px; line-height: 1.6; }
.cl-card__meta, .bench__stamp, .btd--note, .versus__meta,
.step__gate, .xrp__row em, .oh-cta,
.xrp__upsell-text b { font-size: 12.5px; }
.footer__legal, .eyebrow { font-size: 13px; }
.cl-card__tag, .case-badge, .cv-sub, .xrp__host, .xrp__live, .xrp__fixh,
.xrp__grade i, .xrp__g i, .xrp__upsell-text span, .oh-bar b, .oh-node,
.soulshow__bar b, .soulshow__cap, .xb__speck,
.xshow__stat span { font-size: 11.5px; letter-spacing: .09em; }
}
/* ---- 5 · Touch hit areas ---------------------------------------
Footer and nav text links measured 16-18px tall. Expanding them
with a centred pseudo-element gives the finger a 44px box while
the link itself renders exactly as before — no reflow. */
@media (pointer: coarse) {
.footer__nav a, .footer__legal a, .footer__mail,
.contact__meta a, .arrowlink a { position: relative; }
.footer__nav a::after, .footer__legal a::after, .footer__mail::after,
.contact__meta a::after, .arrowlink a::after {
content: ""; position: absolute;
left: 0; right: 0; top: 50%;
height: 44px; min-width: 44px;
transform: translateY(-50%);
}
}
/* ---- 6 · Decorative bleed --------------------------------------
.clients__glow / .contact__glow / .cv-sweep are absolutely-positioned
radial washes sized in vw. They spill past the right edge on phones.
Nothing scrolls today because an ancestor happens to clip them, but
that is incidental — pin the containment to the sections that own
them so a future layout change cannot turn it into a scrollbar. */
.clients, .contact, .startsoul { overflow-x: clip; }
/* ---- 7 · Round 2: measured stragglers on the homepage ----------
Exact nodes still under 11.4px after re-auditing staging. Raised
with !important because page rules out-specify a bare class and a
legibility floor should not lose a specificity race.
`.btd--name` carries an that inherits its 10.3px, so lifting
the cell lifts the emphasis with it. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
.btd--name,
.btd--name em { font-size: 12.5px !important; }
.cv-sub { font-size: 11.5px !important; letter-spacing: .08em; }
.xb-badge__text { font-size: 11.5px !important; }
.xb-badge__engines { font-size: 11px !important; }
}
/* ---- 8 · Round 2: touch targets with the real selectors --------
Vertical-only expansion (left/right pinned to the link's own box)
so no link widens into its neighbour. */
@media (pointer: coarse) {
.topbar__nav a, .topbar__home,
.page-foot a, .cw-foot a, .ch-card a { position: relative; }
.topbar__nav a::after, .topbar__home::after,
.page-foot a::after, .cw-foot a::after, .ch-card a::after {
content: ""; position: absolute;
left: 0; right: 0; top: 50%;
height: 44px; transform: translateY(-50%);
}
}
/* ---- Round 3: touch targets that the ::after could not reach -------
Measured reach after round 2: .topbar__nav a = 45px (works), but
.page-foot a = 1px and .ch-card a = 32px — their pseudo-element is
clipped by an ancestor, and clipped pixels take no taps. Real padding
cancelled by an equal negative margin gives a genuine 44px box with
net-zero layout change, and cannot be clipped away. */
@media (pointer: coarse) {
/* No negative margin: cancelling the padding made adjacent stacked links
overlap, so a tap near the boundary landed on the wrong link — worse
than a small target. Let the rows grow instead; a footer ~20px taller
on a phone is a fair trade for targets a thumb can actually hit. */
.page-foot a, .ch-card a, .cw-foot a, .topbar__home, .contact__meta a {
display: inline-block;
padding-block: 12px;
}
.page-foot, .ch-card, .contact__meta { row-gap: .35rem; }
.page-foot a::after, .ch-card a::after,
.cw-foot a::after, .topbar__home::after { content: none; }
}
/* === Primary nav: hand off to the fullscreen menu at 1250px, 2026-08-17 ===
.nav-stack is overflow:hidden and .nav-link may shrink, so a nav that runs
out of room does not wrap or scroll — it slices the labels. Measured per
label on the real page with the real webfonts:
width 9 items (before Rates) 10 items (with Rates)
1000px 8 cut, worst 10px 9 cut, worst 9px
1100px 2 cut, worst 3px 9 cut, worst 9px
1150px clean 9 cut, worst 8px
1200px clean 8 cut, worst 4px
1250px clean clean
Adding Rates pushed the sliced band from ~1150px to ~1250px. But the left
column is the real story: this nav has been serving 'Studi', 'Contac' and
'Omnispher' to every visitor between 900px and 1150px since these rules
were written. Handing off at 1250px fixes both, old and new.
Additive: the existing 900px rules are untouched and still apply. */
@media (min-width:901px) and (max-width:1249px){
nav.nav[aria-label="Primary"]{display:none}
.menu-btn{display:block}
}