/* =========================================================
   NOY v3.1 — cinematic flow layer (loaded after system.css)
   Uses only system tokens: 2 families, ×1.333 scale, 8-pt spacing, one accent.
   ========================================================= */
/* ---- placeholders: small muted badges, never read as final copy ---- */
.chip{display:inline-block;font:400 10px/1.6 var(--sans);letter-spacing:.02em;color:var(--muted);background:rgba(122,127,128,.09);border:1px solid rgba(122,127,128,.28);border-radius:3px;padding:0 6px;vertical-align:middle;white-space:normal;text-transform:none}
.dark .chip,[data-theme=dark] .chip,.caption .chip,footer .chip,.hero .chip,#wa-float .chip,#lightbox .chip{color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
h1 .chip,h2 .chip,h3 .chip,blockquote .chip{font-size:10px;font-family:var(--sans);font-weight:400;letter-spacing:.02em;line-height:1.6}
/* ---- continuous background ---- */
html,body{background:transparent}
html{background:#fff}
#bg-layer{position:fixed;inset:0;z-index:-1;background:#fff;pointer-events:none}
.flow [data-view=home]>section[data-bg]:not(.hero){background:transparent!important}
.flow .founder,.flow .cta-band.dark,.flow .hospitality{background:transparent}
.hospitality[data-theme=dark]{background:var(--night);color:#f3f4f4}
[data-theme=dark] p,[data-theme=dark] .muted{color:#c3c7c6}
[data-theme=dark] .text-link,[data-theme=dark] h2,[data-theme=dark] h3{color:#fff}
.hospitality .section-band{padding-block:var(--s7) var(--s8)}
#scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;pointer-events:none}
#scroll-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;will-change:transform}
/* ---- word reveal ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;will-change:transform}
/* ---- subtle cursor ---- */
#cursor-dot{width:6px;height:6px;background:#fff;mix-blend-mode:difference}
#cursor-ring{width:34px;height:34px;border:1px solid rgba(122,127,128,.45);transition:width .35s,height .35s,background .35s,border-color .35s}
#cursor-ring.hover{width:52px;height:52px;border-color:var(--accent)}
#cursor-ring.expanded{width:76px;height:76px;background:rgba(255,255,255,.75);border-color:transparent;font:500 10px var(--sans);letter-spacing:.06em;color:var(--ink)}
.magnetic,.btn.accent{will-change:transform}
/* ---- hero: split → full bleed → mask ---- */
.hero-content .micro{text-align:left}
.scroll-cue{display:block;width:1px;height:48px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-cue i{position:absolute;inset:0;background:#fff;transform-origin:top;animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(min-width:769px){.flow .hero-content{position:absolute;top:0;right:0;bottom:0;width:44%;z-index:3;background:var(--band)}.flow .hero-media{position:relative;z-index:1;will-change:width,clip-path}}
/* ---- intro + gateways: generous air ---- */
.intro{padding-block:var(--s7) var(--s4)}
.intro h2{font-size:var(--fs-d2);line-height:1.18;max-width:1000px;margin-bottom:var(--s5)}
.gateways{gap:var(--s6);align-items:start;margin-bottom:var(--s8)}
.gateways .caption{position:static;max-width:520px;margin-top:var(--s3);color:var(--ink)}
.gateways .caption p{font-size:var(--fs-t);line-height:1.7;color:var(--muted);margin:0 0 var(--s2)}
.gateways .text-link{font-size:var(--fs-ui)}
@media(min-width:769px){.gw-offset{margin-top:var(--s8)}}
.wide-zoom{margin-block:var(--s7);overflow:hidden}
/* ---- collections band ---- */
.collections-band{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:var(--s7) 0 var(--s5)}
.band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);margin-bottom:var(--s3)}
.band-head h2{font-size:var(--fs-d2);margin:0 0 var(--s2)}
.band-list{font:400 var(--fs-ui)/1.6 var(--sans);letter-spacing:.04em;margin:0 0 4px}
.band-head .muted{margin:0;font-size:var(--fs-t)}
.band-meta{text-align:left;display:flex;flex-direction:column;gap:var(--s1);align-items:flex-end}
.band-meta .hint{margin:0;font-size:var(--fs-ui)}
#band-counter{font:300 var(--fs-ui)/1 var(--sans);letter-spacing:.12em;color:var(--muted)}
.band-track{display:flex;direction:rtl;width:max-content;padding-inline:var(--s6);will-change:transform}
.band-panel{width:min(48vw,720px);flex-shrink:0;position:relative;padding:var(--s3) var(--s4);display:flex;flex-direction:column;align-items:center}
.band-link{display:block;width:100%;position:relative;z-index:1}
.band-panel .slot{width:100%;background:transparent!important;will-change:transform}
.band-panel .slot.empty{background:rgba(255,255,255,.55)!important}
.band-num{position:absolute;top:-8px;inset-inline-start:var(--s4);font:300 clamp(89px,11vw,160px)/1 var(--serif);color:rgba(60,60,59,.07);z-index:0;pointer-events:none}
.band-panel h3{margin:var(--s2) 0 0;font:500 var(--fs-t)/1.4 var(--sans)}
.band-panel>.heart{top:var(--s3);left:var(--s4)}
.band-progress{height:1px;margin-top:var(--s4)}.band-progress:before{content:"";display:block;height:1px;background:var(--line)}
.band-progress i,.swap-progress i{display:block;height:1px;margin-top:-1px;background:var(--ink);transform:scaleX(0);transform-origin:right}
.swap-progress{height:1px;margin-top:var(--s5)}.swap-progress:before{content:"";display:block;height:1px;background:rgba(60,60,59,.15)}
/* ---- made to measure ---- */
.measure-intro{padding-block:var(--s8) var(--s5)}
.measure-intro h2{font-size:var(--fs-d2);max-width:1000px;margin-bottom:var(--s5)}
.measure-copy{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s6);max-width:1120px}
.measure-copy .lead-p{grid-column:1/-1;margin:0 0 var(--s2)}.measure-copy p{margin:0}
.steps-pin{min-height:100vh;display:flex;align-items:center;padding-block:var(--s6)}
.steps-grid{display:grid;grid-template-columns:minmax(320px,.75fr) 1.5fr;gap:var(--s7);align-items:center;width:100%}
.steps-side{position:relative;padding-inline-start:var(--s4)}
.steps-progress{position:absolute;top:0;bottom:0;inset-inline-start:0;width:1px;background:var(--line)}
.steps-progress i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top}
.steps-pin .steps{border:0}
.steps-pin .steps li{border:0;padding:var(--s2) 0;opacity:.3;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.steps-pin .steps li.done{opacity:.55}
.steps-pin .steps li.on{opacity:1;transform:translateX(-8px)}
.steps-pin .steps li.on b{color:var(--accent)}
.steps-pin .ba{margin-top:0}
/* ---- cta band ---- */
.cta-band h2{font-size:var(--fs-d3);line-height:1.2;max-width:760px}
.cta-band.dark{padding-block:var(--s8)}
/* ---- materials ---- */
.materials .lead-p{max-width:820px}
.perf-note{margin:var(--s6) 0 0;font-size:var(--fs-ui);color:var(--muted)}
.perf{grid-template-columns:repeat(6,1fr);margin-top:var(--s3);padding-top:var(--s4)}
/* ---- fabric swap ---- */
.fabric-swap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s7);position:relative}
.swap-grid{display:grid;grid-template-columns:.75fr 1.5fr;gap:var(--s7);align-items:center}
.swap-text h2{font-size:var(--fs-d2)}
.swap-name{font:300 var(--fs-h)/1.4 var(--serif);min-height:2.8em;margin:var(--s4) 0 var(--s3)}
.swap-stage{position:relative}
.swap-sofa{background:transparent!important;aspect-ratio:3/2}
.swap-sofa>img{object-fit:contain;padding:2%}
.swap-swatches{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.swap-sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted)}
.swap-sw i{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.swap-sw img{width:100%;height:100%;object-fit:cover;display:block}
.swap-sw small{font:400 10px/1 var(--sans);letter-spacing:.08em}
.swap-sw.on i{transform:scale(1.14);box-shadow:0 0 0 4px #e4e4e0,0 0 0 5px var(--ink)}
.swap-sw.on small{color:var(--ink)}
.swap-sw .sub-badge{top:-10px;right:-12px}
/* ---- founder / workshop / hospitality / quiz / contact ---- */
.founder blockquote{font-family:var(--serif)}
.workshop .section-head p{max-width:820px}
.ws-row{margin-top:var(--s4)}
@media(min-width:769px){.ws-lift{margin-top:var(--s6)}}
.hosp-copy{max-width:880px;margin-bottom:var(--s6)}
.hosp-label{font:500 var(--fs-ui)/1.5 var(--sans);letter-spacing:.04em;margin-bottom:var(--s3)}
.hosp-cta{margin-top:var(--s6);align-items:center;gap:var(--s4)}
.quiz-steps span{min-width:32px;text-align:center}
.quiz-result .lead-host{margin-top:var(--s3)}
.contact h2{font-size:var(--fs-d2)}
.address .btn{margin-top:var(--s3)}
/* ---- product / shop ---- */
.price-note{font:300 var(--fs-t)/1.7 var(--sans);margin:var(--s2) 0 var(--s3)}
.fav-line{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s3);font:400 var(--fs-ui)/1.4 var(--sans);color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.fav-line.on svg{fill:var(--accent);stroke:var(--accent)}
.shop-banner{background:var(--panel);padding-block:var(--s5)}
.shop-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.shop-banner p{font:300 var(--fs-h)/1.4 var(--serif);margin:0}
.collections.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
footer .footer-bottom button{font:400 var(--fs-micro)/1.5 var(--sans);letter-spacing:.06em}
/* ---- mobile ---- */
@media(max-width:1000px){.collections.grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.perf{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
 .intro h2,.band-head h2,.measure-intro h2,.swap-text h2,.contact h2{font-size:var(--fs-d3)}
 .collections-band{height:auto;min-height:0;padding:var(--s7) 0 var(--s5)}
 .band-head{flex-direction:column;align-items:flex-start}.band-meta{align-items:flex-start}
 .band-viewport{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
 .band-track{padding-inline:var(--s3)}.band-panel{width:80vw;scroll-snap-align:center;padding:var(--s2)}
 .measure-copy{grid-template-columns:1fr}
 .steps-pin{min-height:0}.steps-grid{grid-template-columns:1fr;gap:var(--s5)}
 .steps-pin .steps li{opacity:.45}.steps-pin .steps li.on{transform:none}
 .fabric-swap{min-height:0}.swap-grid{grid-template-columns:1fr;gap:var(--s4)}
 .swap-sw i{width:44px;height:44px}
 .perf{grid-template-columns:repeat(2,1fr)}
 .cta-band.dark{padding-block:var(--s7)}
}
@media(prefers-reduced-motion:reduce){.scroll-cue i{animation:none}.steps-pin .steps li{opacity:1;transform:none}}
/* fixes */
html,body{overflow-x:clip}
.fabric-swap,.collections-band{overflow:hidden}
.gateways .image-link{overflow:visible}.gateways .image-link:after,.wide-zoom:after{display:none}
.gateways .caption{position:static;right:auto;bottom:auto;max-width:520px;padding:0}
.gateways .caption h2{color:var(--ink);margin:0 0 var(--s2)}
.gateways .image-link .slot{overflow:hidden}
#product-bottom:not(.visible){visibility:hidden;transition:transform .5s,visibility 0s .5s}
@media(prefers-reduced-motion:reduce) and (min-width:769px){.collections-band{height:auto;min-height:0}.band-track{flex-wrap:wrap;width:auto;justify-content:center;row-gap:var(--s4)}.band-panel{width:calc((100% - 2 * var(--s6)) / 3)}}
@media(max-width:768px){.gateways{grid-template-columns:1fr;gap:var(--s5)}.hero-content .micro{font-size:10px;letter-spacing:.14em}}