/* chez v17 — let the visuals speak. Loaded last.
   One line of words per chapter; everything else is light, space, colour and motion.
   Supporting copy stays in the page for screen readers, visually hidden. */

/* ---------- Words, pared back (kept for assistive tech) ---------- */
.hero-copy .eyebrow,.hero-copy .hero-subtitle,.hero-copy .hero-description,
.story-copy #chapter-text,
.story-sticky .phase-tool:not(.shopping-tools):not(.space-tools)>.mono,.auto-prompt>span,
.design-copy p,.possibility-statement>.eyebrow,.possibility-statement>p:not(.eyebrow),
.closing .eyebrow,.closing-note,.share-artifact ul,.share-artifact small,.render-footer,
.chapter-selector:not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}
.growing-words,.editor-view-label,.editor-selection,.scroll-grow,.design-topline,.prompt-line,.design-index,.closing-coordinate,.cx-giant-side small,.guide-tag,.photo-label,.header nav{display:none!important}

/* ---------- Four acts, four kinds of light ---------- */
.cx-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cx-atmos>i{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--cx-ease-io)}
html[data-cx-act="0"] .cx-atmos-0,html[data-cx-act="1"] .cx-atmos-1,html[data-cx-act="3"] .cx-atmos-3{opacity:1}
/* Your room: a drafting table. The grid drifts as you scroll. */
/* The grid sits on its own layer and drifts by transform, so scrolling never repaints it. */
.cx-atmos-0{background:#f6f5f2}
.cx-atmos-0:before{content:'';position:absolute;inset:-320px -120px;will-change:transform;transform:translate3d(calc(var(--journey-progress,0)*-96px),calc(var(--journey-progress,0)*-288px),0);
 background:linear-gradient(#302e2b12 1px,transparent 1px) 0 0/96px 96px,linear-gradient(90deg,#302e2b12 1px,transparent 1px) 0 0/96px 96px,linear-gradient(#302e2b07 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#302e2b07 1px,transparent 1px) 0 0/24px 24px}
.cx-atmos-0:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 62% 64% at 56% 52%,#f6f5f200 30%,#f6f5f2 88%)}
/* Your design: golden hour. */
.cx-atmos-1{background:radial-gradient(ellipse 44% 52% at 60% 56%,#f2cf96 0%,#f4dfbd 26%,#f6ece0 55%,#f4f0ea 100%)}
.cx-atmos-1:before{content:'';position:absolute;inset:-30%;background:repeating-linear-gradient(112deg,transparent 0 140px,#fff4df66 140px 230px,transparent 230px 300px);filter:blur(36px);-webkit-mask-image:radial-gradient(ellipse 50% 60% at 30% 20%,#000,transparent 70%);mask-image:radial-gradient(ellipse 50% 60% at 30% 20%,#000,transparent 70%);animation:cx-drift 18s ease-in-out infinite alternate}
/* Bring it home: daylight through tall windows. */
.cx-atmos-3{background:linear-gradient(180deg,#fcfbf8,#f2eee7)}
.cx-atmos-3:before{content:'';position:absolute;inset:-25%;background:repeating-linear-gradient(118deg,transparent 0 160px,#ffffff 160px 250px,transparent 250px 290px,#ffffff 290px 320px,transparent 320px 420px);filter:blur(28px);opacity:.9;-webkit-mask-image:radial-gradient(ellipse 55% 65% at 78% 22%,#000,transparent 72%);mask-image:radial-gradient(ellipse 55% 65% at 78% 22%,#000,transparent 72%);animation:cx-drift 22s ease-in-out infinite alternate}
.cx-atmos-3:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 40% 30% at 58% 78%,#302e2b14,transparent 70%)}
@keyframes cx-drift{to{transform:translate3d(-4%,2%,0)}}

/* ---------- Act cards: a title card each time an act begins ---------- */
.cx-actcard{position:absolute;inset:0;z-index:40;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.cx-actcard.is-on{visibility:visible;animation:cx-card-veil 1.7s var(--cx-ease-io) both}
.cx-actcard div{display:grid;justify-items:center;gap:1.2vh;overflow:hidden;padding:.1em 4vw .3em}
.cx-actcard small{font:500 11px var(--sans);letter-spacing:.3em;color:var(--cx-brass)}
.cx-actcard b{display:block;font:italic 400 clamp(72px,13vw,240px)/.86 var(--serif);letter-spacing:-.06em;color:var(--cx-ink);white-space:nowrap}
html[data-cx-act="2"] .cx-actcard b{color:#f6f5f2}
.cx-actcard.is-on small,.cx-actcard.is-on b{animation:cx-card-type 1.7s var(--cx-ease-io) both}
.cx-actcard.is-on b{animation-delay:.04s}
@keyframes cx-card-veil{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:#f6f5f200}30%,62%{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f6f5f259}100%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:#f6f5f200}}
html[data-cx-act="2"] .cx-actcard.is-on{animation-name:cx-card-veil-night}
@keyframes cx-card-veil-night{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:#1d1c1a00}30%,62%{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#1d1c1a66}100%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:#1d1c1a00}}
@keyframes cx-card-type{0%{transform:translateY(110%);opacity:0}28%,64%{transform:none;opacity:1}100%{transform:translateY(-110%);opacity:0}}

/* ---------- Chapter: a numeral and one line ---------- */
.cx-bignum{-webkit-text-stroke-width:1.3px}
.story-copy .chapter-action{display:inline-flex!important;align-items:center;gap:10px;height:38px;padding:0 16px!important;border:1px solid #302e2b26!important;border-radius:999px!important;font-size:13px!important;text-decoration:none!important;background:#ffffff8c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-cx-act="2"] .story-copy .chapter-action{background:#ffffff12}
.story-copy .chapter-action:after{display:none!important}

/* Acts at the top: numbers, and the current act's name. */
.flow-route button span{display:inline-block;max-width:0;overflow:hidden;vertical-align:bottom;white-space:nowrap;opacity:0;transition:max-width .7s var(--cx-ease),opacity .4s}
.flow-route button[aria-current=step] span{max-width:150px;opacity:1}
.flow-route button{min-width:0!important}

/* Bottom: icons only. */
.story-bottom .explore-button{width:44px!important;height:44px!important;padding:0!important;justify-content:center;font-size:0!important;gap:0!important;border-radius:50%!important}
.story-bottom .explore-button svg{width:18px;height:18px}
#chapter-count{display:none!important}
.scene-footnote{font-size:9px!important;opacity:.5!important}

/* ---------- The dock: swatches and symbols; names on hover ---------- */
.story-sticky .phase-tool.active:not(.shopping-tools){padding:8px!important;gap:8px!important;border-radius:999px!important}
.story-sticky .mini-directions button,.story-sticky .colour-options button,.story-sticky .floor-options button,.story-sticky .chair-options button,.story-sticky .tool-row button,.story-sticky .auto-prompt button{
 position:relative;width:52px!important;min-width:0!important;height:52px!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center;border:1px solid #302e2b14!important;background:#fff!important;box-shadow:none!important}
.story-sticky .phase-tool button small{display:none!important}
.story-sticky .mini-directions button:before{content:'';width:30px;height:30px;border-radius:50%;background:var(--cx-dot,#c0a889);box-shadow:inset 0 0 0 1px #0000001a}
.story-sticky [data-stage-palette=natural]{--cx-dot:conic-gradient(#e8dcc8 0 33%,#c0a889 0 66%,#8f7a5f 0)}
.story-sticky [data-stage-palette=expressive]{--cx-dot:conic-gradient(#c6977c 0 33%,#a15d40 0 66%,#6f7350 0)}
.story-sticky [data-stage-palette=serene]{--cx-dot:conic-gradient(#d9ddd0 0 33%,#a7af98 0 66%,#7d8a72 0)}
.story-sticky .colour-options i,.story-sticky .floor-options i{width:34px!important;height:34px!important;margin:0!important;border-radius:50%!important}
.story-sticky .chair-options .chair-silhouette{transform:scale(.8);margin:0!important}
.story-sticky .phase-tool button.active,.story-sticky .phase-tool button[aria-pressed=true]{box-shadow:0 0 0 2px var(--cx-brass)!important;border-color:transparent!important;background:#fff!important}
html[data-cx-act="2"] .story-sticky .phase-tool button.active,html[data-cx-act="2"] .story-sticky .phase-tool button[aria-pressed=true]{background:#ffffff1f!important;box-shadow:0 0 0 2px #d4b27a!important}
.story-sticky .cx-glyph{font:400 20px/1 var(--sans);color:inherit}
.story-sticky .auto-prompt{display:flex!important;max-width:none!important}
.story-sticky .adjust-tools .tool-row.secondary{border-left:0!important;padding-left:0!important}
.story-sticky .adjust-tools .tool-row.secondary:before{content:'';width:1px;align-self:stretch;margin:8px 4px;background:#302e2b1f}
.cx-tip{position:fixed;left:0;top:0;z-index:95;padding:7px 11px;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;font:500 11px/1 var(--sans);letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-6px);transition:opacity .2s,transform .3s var(--cx-ease)}
.cx-tip.is-on{opacity:1;transform:translate(-50%,-14px)}
html[data-cx-act="2"] .cx-tip{background:#f6f5f2;color:var(--cx-ink)}
.space-tools .space-metrics small{font-size:9px!important;opacity:.7}

/* ---------- Share: the card says one thing ---------- */
.story-sticky .share-artifact h3{margin:14px 0 22px!important}

/* ===================================================================================== */
/* Desktop hero: "Your room." above, the room in the middle, "Reimagined in 3D." below    */
/* ===================================================================================== */
@media(min-width:1000px) and (min-height:600px){
 .hero-copy{top:94px!important;left:3.5%!important;right:3.5%!important;width:auto!important;max-width:none!important}
 .hero-copy h1{position:static;font-size:clamp(96px,11vw,210px)!important;line-height:.86!important}
 .hero-copy h1 br{display:none}
 .hero-copy h1 em{position:absolute!important;right:0;top:calc(100svh - 94px - 1.05em - 30px);font-size:.86em!important;white-space:nowrap}
 .cx-hero-lower{top:calc(100svh - 94px - 78px)!important;width:auto!important}
 .cx-hero-lower .hero-actions{margin:0!important}
 .hero-watch{width:46px;padding:0!important;justify-content:center;font-size:0!important}
 .hero-watch .play-symbol{font-size:15px}
 .room-stage{translate:calc(var(--intro-visibility,0)*var(--cx-tx,0px)) calc(var(--intro-visibility,0)*var(--cx-ty,0px))!important;scale:calc(1 + var(--intro-visibility,0)*(var(--cx-s,1) - 1))!important}
 .photo-origin{right:5%!important;top:14vh!important}
 .story-sticky[data-phase=intro] .story-bottom{opacity:0;pointer-events:none}

 /* Chapters: numeral and title overlap, top left. */
 .story-sticky .story-copy,.story-sticky[data-phase] .story-copy{top:calc(13vh + clamp(70px,10vh,120px))!important;width:30%!important;max-width:520px!important}
 .story-sticky .story-copy h2,.story-sticky[data-phase=details] .story-copy h2{font-size:clamp(46px,4.6vw,86px)!important;line-height:.94!important}
 .cx-bignum{font-size:clamp(130px,21vh,240px)!important;top:7vh!important;left:2.6%!important}
 .story-sticky .inline-editor,.story-sticky[data-phase] .inline-editor{left:22%!important;right:2%!important;top:7%!important;bottom:11%!important}
 .story-sticky[data-phase=details] .inline-editor{left:20%!important;right:33%!important}
}

/* The room leans toward you, in three dimensions. */
.cx-js .model-float{transform:perspective(1600px) rotateX(var(--cx-rx,0deg)) rotateY(var(--cx-ry,0deg)) translateY(var(--lift,0px))!important;transform-style:preserve-3d}

/* ===================================================================================== */
/* After the story: images first                                                          */
/* ===================================================================================== */
/* Design lab: one line, three swatches. */
.design-copy h2{font-size:clamp(64px,8vw,150px)!important;line-height:.88!important}
.design-console{background:#ffffffd9!important;border-radius:999px!important;padding:6px!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #302e2b26!important;border:0!important}
.design-switches{gap:4px!important;border:0!important;padding:0!important}
.design-switches button{border-radius:999px!important;height:44px;padding:0 16px!important}

/* Try freely: three photographs you can step into. */
.possibility-statement{padding:150px 3.5% 140px!important;row-gap:56px!important}
.possibility-statement h2{grid-row:1!important}
.possibility-statement .experiment-rail{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px!important;border:0!important}
.experiment-rail button,.experiment-rail button:hover{position:relative;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;aspect-ratio:4/5;padding:28px!important;border:0!important;border-radius:28px!important;background:#e9e5de!important;color:#fff!important;text-align:left;
 font:italic 400 clamp(28px,2.6vw,44px)/1 var(--serif)!important;letter-spacing:-.04em!important}
.experiment-rail button:before{content:'';position:absolute;inset:0;z-index:-2;background:var(--cx-card) center/cover;transition:transform 1.4s var(--cx-ease)}
.experiment-rail button:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1d1c1a00 45%,#1d1c1aa6 100%)}
.experiment-rail button:hover:before{transform:scale(1.07)}
.experiment-rail [data-experiment=palette]{--cx-card:url(./assets/design-expressive.jpg)}
.experiment-rail [data-experiment=layout]{--cx-card:url(./assets/room-floorplan.svg) #f4f1ea}
.experiment-rail [data-experiment=layout]:before{background-size:118%;background-position:50% 40%}
.experiment-rail [data-experiment=furniture]{--cx-card:url(./assets/products/chair.webp) #efe9e1}
.experiment-rail button svg,.experiment-rail button .mini-palette{display:none!important}
.experiment-rail button>span:last-child{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#ffffffd9;color:var(--cx-ink)!important;font:400 18px var(--sans);font-style:normal;transition:transform .5s var(--cx-ease)}
.experiment-rail button:hover>span:last-child{transform:rotate(45deg)}

/* Closing: the finished room, full bleed. */
.closing{min-height:86svh!important;background:#1d1c1a!important}
.closing-vision{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:-1!important}
.closing-vision img{width:100%!important;height:100%!important;object-fit:cover!important;-webkit-mask-image:none!important;mask-image:none!important}
.closing-vision-shade{position:absolute;inset:0;background:linear-gradient(90deg,#1d1c1ae0 0%,#1d1c1a8c 38%,#1d1c1a00 72%)!important;opacity:1!important}
.closing h2{color:#f6f5f2!important}
.closing h2 em{color:#d4b27a!important}
.closing .primary-button{background:#f6f5f2!important;color:var(--cx-ink)!important}

/* ---------- Small screens ---------- */
@media(max-width:999px),(max-height:599px){
 .possibility-statement .experiment-rail{grid-template-columns:1fr;gap:12px!important}
 .experiment-rail button,.experiment-rail button:hover{aspect-ratio:16/10}
 .cx-actcard b{font-size:clamp(56px,16vw,110px)}
 .story-sticky .phase-tool.active:not(.shopping-tools){display:flex!important;flex-wrap:nowrap;align-items:center;justify-content:center;border-radius:999px!important}
 .story-sticky .mini-directions,.story-sticky .chair-options,.story-sticky .colour-options,.story-sticky .floor-options,.story-sticky .tool-row{display:flex!important;gap:6px!important}
 .story-sticky .mini-directions button,.story-sticky .colour-options button,.story-sticky .floor-options button,.story-sticky .chair-options button,.story-sticky .tool-row button,.story-sticky .auto-prompt button{width:46px!important;height:46px!important}
}

@media(prefers-reduced-motion:reduce){
 .cx-actcard{display:none}
 .cx-atmos-1:before,.cx-atmos-3:before{animation:none}
}

/* ===================================================================================== */
/* v18 finesse                                                                            */
/* ===================================================================================== */
/* Type: a lighter display cut, calmer tracking, real kerning. Same families. */
.hero-copy h1,.story-copy h2,.design-copy h2,.possibility-statement h2,.closing h2,.cx-actcard b,.cx-giant b{font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hero-copy h1,.design-copy h2,.possibility-statement h2,.closing h2{font-weight:300!important;letter-spacing:-.048em!important}
.story-sticky .story-copy h2,.story-sticky[data-phase=details] .story-copy h2{font-weight:300!important;letter-spacing:-.042em!important}
.hero-copy h1 em,.story-sticky .story-copy h2 em,.design-copy h2 em,.possibility-statement h2 em,.closing h2 em{font-weight:400;letter-spacing:-.028em!important}
.cx-reveal .cx-w{margin:0 -.02em -.14em;padding:0 .02em .14em}

/* One "Bring your room" at a time: on the hero it lives in the hero. */
.header .nav-cta{transition:opacity .5s var(--cx-ease),transform .6s var(--cx-ease),visibility 0s,background .8s,color .8s}
html[data-cx-phase=intro] .header .nav-cta{opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .4s,visibility 0s .4s}
.story-sticky[data-phase=intro] .scene-footnote{opacity:0!important}

/* Two photos, two prints. */
.photo-origin .origin-photo{position:relative}
.photo-origin .cx-photo-2{position:absolute;left:-58%;top:48%;z-index:-1;transform:rotate(14deg)}

/* The measurement pill breathes. */
.story-sticky .phase-tool.space-tools.active:not(.shopping-tools){padding:16px 34px!important;border-radius:30px!important;gap:0!important}
.story-sticky .space-metrics{gap:40px!important;padding:0!important}
.story-sticky .auto-prompt>svg{display:none!important}

/* Room details: always exploded, a calmer specification. */
.detail-view-controls,.detail-rail-heading,.detail-table-heading,.detail-rail-foot,.detail-row-target{display:none!important}
.story-sticky .detail-rail{padding:10px!important;border:0!important;border-radius:28px!important;background:#ffffffd1!important;-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 30px 80px #302e2b14,0 0 0 1px #302e2b0d!important}
.detail-filters{display:flex!important;gap:2px!important;margin:0 0 6px!important;padding:4px!important;border-radius:999px!important;background:#302e2b0a!important;border:0!important}
.detail-filters button{flex:1;height:34px;border-radius:999px!important;font-size:12px!important;border:0!important}
.detail-filters button span{display:none}
.detail-callout{grid-template-columns:26px minmax(0,1fr) auto!important;gap:12px!important;min-height:46px!important;max-height:none!important;padding:8px 14px 8px 8px!important;border:0!important;border-radius:16px!important;position:relative}
.detail-callout:hover{background:#302e2b08!important}
.detail-callout.is-selected{background:#302e2b0d!important}
.detail-callout.is-selected:before{left:0!important;top:12px!important;bottom:12px!important;border-radius:2px}
.detail-number{font:500 10px var(--sans)!important;letter-spacing:.08em;color:#b8b3ab!important}
.detail-name{font:400 14px/1.2 var(--sans)!important;letter-spacing:-.02em!important}
.detail-finish{max-height:0;overflow:hidden;margin-top:0!important;opacity:0;font-size:11px!important;transition:max-height .4s var(--cx-ease),opacity .3s,margin .4s var(--cx-ease)}
.detail-callout.is-selected .detail-finish{max-height:20px;opacity:1;margin-top:4px!important}
.detail-dimensions{font:400 12px/1.3 var(--sans)!important;color:#8b857c!important;max-width:130px!important}
.detail-leader:not(.is-selected){opacity:0!important}
.detail-leader.is-selected{stroke-width:1.2!important}

/* ===================================================================================== */
/* v19 — scroll makes the choices; one pill system                                        */
/* ===================================================================================== */
/* No act counter, no option docks, no "try another" prompts, no beacon: scrolling changes the room. */
.flow-route,.guide-beacon,.cx-actcard small{display:none!important}
.story-sticky .stage-tools .phase-tool:is(.auto-tools,.adjust-tools,.furniture-tools,.colour-tools,.floor-tools){display:none!important}
.story-sticky:is([data-phase=auto],[data-phase=adjust],[data-phase=furniture],[data-phase=colour],[data-phase=materials],[data-phase=render]) .story-copy .chapter-action{display:none!important}

/* One pill: 44px tall, 20px sides, 10px between label and arrow, the same type everywhere. */
.primary-button,.hero-actions .primary-button,.closing .primary-button,.share-artifact .primary-button,.product-info .primary-button,.share-dialog .primary-button,
.nav-cta,.story-copy .chapter-action,.design-switches button,.cx-pill{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;height:44px!important;min-height:0!important;padding:0 20px!important;
 border-radius:999px!important;font:400 14px/1 var(--sans)!important;letter-spacing:-.01em!important;white-space:nowrap!important;box-sizing:border-box!important;text-decoration:none!important;vertical-align:middle}
.primary-button>span,.nav-cta>span,.story-copy .chapter-action>span{display:inline-grid!important;place-items:center;width:14px;height:14px;margin:0!important;font-size:15px!important;line-height:1!important;transform:none!important}
.nav-cta{height:42px!important}
/* Secondary pills: glass with a hairline. */
.story-copy .chapter-action{border:1px solid #302e2b1f!important;background:#ffffffb8!important;color:var(--cx-ink)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.story-copy .chapter-action:hover{background:#fff!important}
html[data-cx-act="2"] .story-copy .chapter-action{border-color:#ffffff29!important;background:#ffffff12!important;color:#f6f5f2!important}
/* Round buttons: 44px, glyph dead centre. */
.hero-watch,.story-bottom .explore-button,.chapter-navigation button{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:0!important;padding:0!important;border-radius:50%!important;border:1px solid #302e2b1f!important;background:#ffffffb8!important;color:var(--cx-ink)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none!important}
.hero-watch:hover,.story-bottom .explore-button:hover,.chapter-navigation button:hover:not(:disabled){background:#fff!important;border-color:#302e2b33!important}
.hero-watch .play-symbol{display:block;font-size:13px!important;line-height:1;transform:translateX(1px)}
.story-bottom .explore-button svg{display:block;width:18px!important;height:18px!important;margin:0!important}
.chapter-navigation{display:flex!important;gap:8px!important}
.chapter-navigation button{font-size:16px!important;line-height:1!important}
.chapter-navigation button:disabled{opacity:.35}
.story-bottom{align-items:center!important;gap:8px!important}
.story-bottom>*{margin:0!important}
.hero-actions{display:flex!important;align-items:center!important;gap:10px!important}
html[data-cx-act="2"] .story-bottom .explore-button,html[data-cx-act="2"] .chapter-navigation button{border-color:#ffffff29!important;background:#ffffff12!important;color:#f6f5f2!important}
/* Design lab console: equal tabs, swatch and label on one centre line. */
.design-console{display:flex!important;align-items:center;padding:6px!important;gap:0!important}
.design-switches{display:flex!important;align-items:center;gap:4px!important}
.design-switches button{gap:8px!important;padding:0 18px!important;border:0!important;background:transparent!important;color:var(--cx-ink)!important}
.design-switches button i{display:block;width:12px!important;height:12px!important;margin:0!important;border-radius:50%;background:var(--swatch)!important;flex:none}
.design-switches button.active,.design-switches button[aria-pressed=true]{background:var(--cx-ink)!important;color:#f6f5f2!important}
#save-design{border-left:1px solid #302e2b14!important;border-radius:999px!important}

/* The measurement pill: labels on one line, values on the next, every column aligned. */
.story-sticky .phase-tool.space-tools.active:not(.shopping-tools){padding:18px 36px!important;border-radius:28px!important}
.story-sticky .space-metrics{display:grid!important;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:44px!important;row-gap:8px;align-items:baseline}
.story-sticky .space-metrics>span{display:contents!important}
.story-sticky .space-metrics small{font:500 10px/1 var(--sans)!important;letter-spacing:.16em!important;color:#8b857c!important;opacity:1!important;white-space:nowrap}
.story-sticky .space-metrics b{font:300 26px/1 var(--sans)!important;letter-spacing:-.035em!important;white-space:nowrap}
.story-sticky .space-metrics b em{font:400 13px var(--sans)!important;font-style:normal!important;letter-spacing:0!important;color:#8b857c;margin-left:2px}
.story-sticky .space-metrics small,.story-sticky .space-metrics b{display:block!important;margin:0!important;padding:0!important}
.story-sticky .space-metrics{row-gap:10px!important;align-items:end!important}
.story-bottom{justify-content:flex-end!important}

/* Design lab: pinned for three directions; the console is a quiet indicator. */
.cx-lab-track{position:relative;height:280svh}
.cx-lab-track .design-lab{position:sticky;top:9svh}
.design-console{pointer-events:none;padding:12px 16px!important;background:#ffffffb8!important;box-shadow:0 10px 30px #302e2b1a!important}
.design-console .design-switches{gap:12px!important}
.design-console .design-switches button{display:block!important;width:12px!important;height:12px!important;padding:0!important;font-size:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.design-console .design-switches button i{width:12px!important;height:12px!important;opacity:.4;transition:opacity .5s,transform .6s var(--cx-ease),box-shadow .5s}
.design-console .design-switches button.active i{opacity:1;transform:scale(1.25);box-shadow:0 0 0 3px #fff,0 0 0 4px #302e2b33}
#save-design,.design-console #next-design{display:none!important}
.design-console{width:auto!important;min-width:0!important;max-width:none!important;border-radius:999px!important}
.design-console .design-switches{width:auto!important;margin:0!important;border:0!important}
footer>.mono{display:none!important}

/* ===================================================================================== */
/* v20 — touch the room                                                                   */
/* ===================================================================================== */
/* Paint, a chair, a floor: a ripple from your touch in the new colour, and its name. */
.cx-ripple{position:absolute;z-index:8;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 28%,transparent);animation:cx-ripple 1.2s var(--cx-ease) forwards}
@keyframes cx-ripple{0%{transform:scale(.2);opacity:1}100%{transform:scale(26);opacity:0;border-width:.5px}}
.cx-tag{position:absolute;z-index:9;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:#ffffffe6;color:var(--cx-ink);font:400 13px/1 var(--sans);white-space:nowrap;pointer-events:none;box-shadow:0 12px 30px #302e2b26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translate(-50%,-160%);animation:cx-tag 1.5s var(--cx-ease) forwards}
.cx-tag:before{content:'';width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0000001f}
html[data-cx-act="2"] .cx-tag{background:#1d1c1ae6;color:#f6f5f2}
@keyframes cx-tag{0%{opacity:0;transform:translate(-50%,-120%) scale(.9)}15%,70%{opacity:1;transform:translate(-50%,-160%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%)}}

/* The hint: a breathing dot and a few words. */
.cx-hint{position:absolute;z-index:12;display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 12px;border-radius:999px;background:#ffffffd9;color:var(--cx-ink);font:400 13px/1 var(--sans);white-space:nowrap;pointer-events:none;box-shadow:0 10px 30px #302e2b1f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 transform:translate(-50%,8px);opacity:0;transition:opacity .45s,transform .6s var(--cx-ease)}
.cx-hint.is-on{opacity:1;transform:translate(-50%,0)}
.cx-hint i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cx-brass)}
.cx-hint i:after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--cx-brass);animation:cx-breathe 1.8s ease-out infinite}
@keyframes cx-breathe{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
html[data-cx-act="2"] .cx-hint{background:#1d1c1ad9;color:#f6f5f2;box-shadow:0 10px 30px #0006}

/* The hero photos are touchable. */
.story-sticky[data-phase=intro] .photo-origin .origin-photo{pointer-events:auto;cursor:pointer;transition:transform .5s var(--cx-ease),box-shadow .5s}
.story-sticky[data-phase=intro] .photo-origin .origin-photo:hover{transform:translateY(-6px) rotate(-2deg) scale(1.04);box-shadow:0 30px 60px #3533303d}
.story-sticky[data-phase=intro] .photo-origin .cx-photo-2:hover{transform:rotate(10deg) translateY(-6px) scale(1.04)}

/* Photo cards lean toward the pointer, with a soft glare. */
.experiment-rail button{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--cx-ease)!important}
.experiment-rail button.is-tilting{transition:transform .12s linear!important}
.experiment-rail button:after{background:radial-gradient(circle at var(--gx,50%) var(--gy,-20%),#ffffff33,transparent 42%),linear-gradient(180deg,#1d1c1a00 45%,#1d1c1aa6 100%)!important}

/* The closing room drifts with the pointer. */
.closing .closing-vision img{translate:calc(var(--px,0)*-22px) calc(var(--py,0)*-14px);scale:1.06;transition:translate 1.2s var(--cx-ease),transform 1.6s var(--cx-ease)!important}

/* The wordmark's letters lift as you pass. */
.cx-giant.cx-in b span{transition:transform .6s var(--cx-ease),translate .9s var(--cx-ease),color .4s}
.cx-giant.cx-in b span:hover{transform:translateY(-7%)}

/* The design lab image is touchable. */
.design-lab .design-images{cursor:pointer}

/* ===================================================================================== */
/* v21 — controls you can see, on the things they change                                  */
/* ===================================================================================== */
.cx-hint{display:none!important}
.cx-spot{position:absolute;z-index:14;left:0;top:0;width:0;height:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.cx-spot.is-on{opacity:1;visibility:visible;transition:opacity .5s}
.cx-spot-dot{position:absolute;left:-22px;top:-22px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--cx-brass),0 10px 26px #302e2b40;cursor:pointer;display:grid;place-items:center;transition:transform .4s var(--cx-ease)}
.cx-spot-dot i{width:14px;height:14px;border-radius:50%;background:var(--cx-brass);transition:transform .4s var(--cx-ease)}
.cx-spot-dot:before,.cx-spot-dot:after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--cx-brass);animation:cx-spot-pulse 2s ease-out infinite;pointer-events:none}
.cx-spot-dot:after{animation-delay:1s}
@keyframes cx-spot-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.1);opacity:0}}
.cx-spot-dot:hover{transform:scale(1.1)}
.cx-spot.is-open .cx-spot-dot i,.cx-spot.is-peek .cx-spot-dot i,.cx-spot:hover .cx-spot-dot i{transform:scale(.6)}
.cx-spot-label{position:absolute;left:30px;top:-17px;height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;font:500 13px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px #302e2b33;transition:opacity .3s,transform .4s var(--cx-ease)}
html[data-cx-act="2"] .cx-spot-label{background:#f6f5f2;color:var(--cx-ink)}
html[data-cx-act="2"] .cx-spot-dot{box-shadow:0 0 0 2px #d4b27a,0 10px 26px #0008}
/* The choices open above the marker, right on the object. */
.cx-spot-choices{position:absolute;left:50%;bottom:34px;display:flex;gap:6px;padding:6px;border-radius:999px;background:#ffffffeb;box-shadow:0 20px 50px #302e2b33;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 transform:translate(-50%,10px) scale(.92);transform-origin:50% 100%;opacity:0;visibility:hidden;transition:opacity .3s,transform .45s var(--cx-ease),visibility 0s .45s}
.cx-spot:hover .cx-spot-choices,.cx-spot.is-open .cx-spot-choices,.cx-spot.is-peek .cx-spot-choices{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .3s,transform .45s var(--cx-ease)}
.cx-spot:hover .cx-spot-label,.cx-spot.is-open .cx-spot-label,.cx-spot.is-peek .cx-spot-label{opacity:0;transform:translateX(-6px)}
.cx-spot.is-drag .cx-spot-choices{display:none}
.cx-spot.is-drag .cx-spot-label{opacity:1!important;transform:none!important}
/* A bridge so the pointer can travel from marker to choices without closing them. */
.cx-spot-choices:after{content:'';position:absolute;left:0;right:0;top:100%;height:20px}
.cx-choice{position:relative;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px #0000001f;transition:transform .3s var(--cx-ease),box-shadow .3s;overflow:visible}
.cx-choice:hover{transform:translateY(-3px)}
.cx-choice.is-active{box-shadow:inset 0 0 0 1px #0000001f,0 0 0 3px #fff,0 0 0 5px var(--cx-brass)}
.cx-choice .cx-choice-sample{position:absolute;inset:0;width:auto!important;height:auto!important;margin:0!important;border-radius:50%!important}
.cx-choice span{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;font:500 11px/1 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.cx-choice:hover span,.cx-choice:focus-visible span{opacity:1}
html[data-cx-act="2"] .cx-spot-choices{background:#1d1c1aeb;box-shadow:0 20px 50px #0009}

/* Hero: rebuild, said plainly. */
.cx-rebuild{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%) rotate(8deg);display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 10px 24px #302e2b33;transition:background .25s}
.cx-rebuild span{color:var(--cx-brass-2);font-size:15px;transition:transform .6s var(--cx-ease)}
.cx-rebuild:hover span{transform:rotate(180deg)}
.story-sticky:not([data-phase=intro]) .cx-rebuild{pointer-events:none}

/* Design lab: the three directions as pills you can press; scroll still steps through them. */
.design-console{pointer-events:auto!important;padding:6px!important}
.design-console .design-switches{gap:4px!important}
.design-console .design-switches button{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important;height:40px!important;padding:0 16px!important;font:400 13px/1 var(--sans)!important;border-radius:999px!important;cursor:pointer;color:var(--cx-ink)!important}
.design-console .design-switches button i{width:12px!important;height:12px!important;opacity:1;transform:none!important;box-shadow:none!important}
.design-console .design-switches button.active{background:var(--cx-ink)!important;color:#f6f5f2!important}
.design-console .design-switches button:not(.active):hover{background:#302e2b0d!important}

/* ===================================================================================== */
/* v22                                                                                    */
/* ===================================================================================== */
/* Loader leaves quickly. */
.cx-loader{transition:clip-path .75s var(--cx-ease-io),visibility 0s .8s!important}
.cx-loader>*{transition:opacity .3s,transform .6s var(--cx-ease-io)!important}

/* Hero: one action. Story: no arrow buttons. */
.hero-watch,.chapter-navigation{display:none!important}

/* After the story, the closing follows directly. */
.design-lab,.possibility-statement,.cx-rule,.cx-ribbon{display:none!important}
.closing{margin-top:22px!important}

/* Section 5: the control is a feeling. A prompt bar sits on the room; tapping it types a new one. */
.cx-spot.is-prompt .cx-spot-dot,.cx-spot.is-prompt .cx-spot-label,.cx-spot.is-prompt .cx-spot-choices{display:none!important}
.cx-prompt{display:none}
.cx-spot.is-prompt .cx-prompt{position:absolute;left:0;top:-70px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 18px;border:0;border-radius:999px;background:#ffffffeb;color:var(--cx-ink);
 box-shadow:0 20px 50px #302e2b2e,0 0 0 1px #a7804633;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);cursor:pointer;white-space:nowrap;transition:transform .4s var(--cx-ease),box-shadow .4s}
.cx-spot.is-prompt .cx-prompt:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 26px 60px #302e2b38,0 0 0 1px #a7804680}
.cx-prompt-spark{color:var(--cx-brass);font-size:16px;animation:cx-spark 2.4s ease-in-out infinite}
@keyframes cx-spark{50%{transform:scale(1.25) rotate(20deg);opacity:.7}}
.cx-prompt-text{font:italic 400 19px/1 var(--serif);letter-spacing:-.02em;min-width:16ch}
.cx-prompt.is-typing .cx-prompt-text:after{content:'';display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cx-brass);animation:cx-caret .6s steps(1) infinite}
@keyframes cx-caret{50%{opacity:0}}
.cx-prompt-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cx-ink);color:#f6f5f2;font-size:17px;transition:transform .6s var(--cx-ease)}
.cx-prompt:hover .cx-prompt-go{transform:rotate(180deg)}
.cx-prompt:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:46px;background:linear-gradient(#a78046,#a7804600)}
.cx-prompt:before{content:'';position:absolute;left:calc(50% - 4px);top:calc(100% + 42px);width:8px;height:8px;border-radius:50%;background:var(--cx-brass);box-shadow:0 0 0 5px #a7804633}
/* The room regenerates. */
.story-sticky.cx-generating #editor-canvas canvas{animation:cx-generate 1.15s var(--cx-ease-io)}
@keyframes cx-generate{0%{filter:none}35%{filter:blur(3px) brightness(1.18) saturate(.55)}100%{filter:none}}

/* Section 8: the chairs themselves. */
.cx-choice.has-photo{width:68px;height:68px;background:#fff!important;overflow:visible}
.cx-choice.has-photo img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;border-radius:50%}
.cx-choice.has-photo span{overflow:visible}
.cx-spot-choices:has(.has-photo){gap:8px;padding:8px}

/* ===================================================================================== */
/* v23 — the finale: the room through the wordmark                                       */
/* ===================================================================================== */
.cx-finale{position:relative;height:320svh;margin:0}
.cx-finale-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#1d1c1a;isolation:isolate}
.cx-finale-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;scale:var(--cx-photo,1.14);translate:calc(var(--px,0)*-18px) calc(var(--py,0)*-12px);transition:translate 1.2s var(--cx-ease)}
.cx-finale-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--cx-shade,0);background:linear-gradient(90deg,#1d1c1ae6 0%,#1d1c1a99 36%,#1d1c1a1a 70%),linear-gradient(0deg,#1d1c1ae6 0%,#1d1c1a80 14%,#1d1c1a00 34%)}
.cx-finale-veil{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.cx-veil-paper{fill:#f6f5f2}
.cx-veil-outline{stroke:#302e2b;stroke-width:1.2;opacity:var(--cx-outline,1);vector-effect:non-scaling-stroke}
.cx-veil-z{stroke:#a78046;stroke-width:2.2}
/* The finale's words. */
.cx-finale-copy{position:absolute;z-index:3;left:6vw;top:50%;transform:translateY(-50%);max-width:min(900px,80vw);pointer-events:none}
.cx-finale-copy h2{margin:0 0 34px;color:#f6f5f2;font-size:clamp(56px,7vw,128px)!important;line-height:.92!important;font-weight:300!important;letter-spacing:-.048em!important}
.cx-finale-copy h2 em{color:#d4b27a;font-weight:400;letter-spacing:-.028em}
.cx-finale-copy .primary-button{background:#f6f5f2!important;color:var(--cx-ink)!important;opacity:0;transform:translateY(18px);transition:opacity .6s .35s,transform .9s var(--cx-ease) .35s,background .25s!important}
.cx-finale.is-arrived .cx-finale-copy{pointer-events:auto}
.cx-finale.is-arrived .cx-finale-copy .primary-button{opacity:1;transform:none}
/* Footer: on paper below the wordmark, then on the photograph. */
.cx-finale-foot{position:absolute;z-index:4;left:3.5%;right:3.5%;bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0;margin:0;border:0;color:var(--cx-ink);transition:color .6s}
.cx-finale-tag{font:italic 400 clamp(18px,1.6vw,24px)/1.1 var(--serif);letter-spacing:-.02em}
.cx-finale-foot nav{display:flex;gap:24px}
.cx-finale-foot nav a{font:400 13px var(--sans);color:inherit;opacity:.75;text-decoration:none;transition:opacity .2s}
.cx-finale-foot nav a:hover{opacity:1}
.cx-finale.is-dark .cx-finale-foot{color:#f6f5f2}
/* The header follows the finale: light on the photograph, one call to action. */
html.cx-finale-dark .header .brand-mark b{color:#f6f5f2}
html.cx-finale-dark .header .brand-mark small{color:#d9d4cc}
html.cx-finale-cta .header .nav-cta{opacity:0;visibility:hidden;transform:translateY(-10px)}
/* Reduced motion: arrive directly. */
.cx-finale.is-static{height:auto}
.cx-finale.is-static .cx-finale-stage{position:relative;min-height:100svh}
.cx-finale.is-static .cx-finale-veil{display:none}
.cx-finale.is-static{--cx-shade:1;--cx-photo:1}
.cx-finale.is-static .cx-finale-copy{pointer-events:auto}
.cx-finale.is-static .cx-finale-copy .primary-button{opacity:1;transform:none}
.cx-finale.is-static .cx-finale-foot{color:#f6f5f2}
@media(max-width:700px){
 .cx-finale{height:260svh}
 .cx-finale-copy{left:20px;right:20px}
 .cx-finale-foot{flex-direction:column;align-items:flex-start;gap:10px;bottom:20px}
}

/* ===================================================================================== */
/* v24 — pace and the next step                                                           */
/* ===================================================================================== */
.spatial-story{height:1200svh!important}
/* After a choice, the way on. */
.cx-next{position:absolute;z-index:16;left:calc(27% + 36%);bottom:96px;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 10px 0 22px;border:0;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;cursor:pointer;white-space:nowrap;
 box-shadow:0 18px 44px #302e2b47;transform:translate(-50%,24px);opacity:0;visibility:hidden;transition:opacity .4s,transform .6s var(--cx-ease),visibility 0s .6s}
.cx-next.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .4s .25s,transform .7s var(--cx-ease) .25s}
.cx-next small{font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#d4b27a}
.cx-next span{font:400 15px/1 var(--sans);letter-spacing:-.01em}
.cx-next i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f6f5f2;color:var(--cx-ink);font-style:normal;font-size:16px;animation:cx-nudge 1.6s ease-in-out infinite}
@keyframes cx-nudge{50%{transform:translateY(4px)}}
.cx-next:hover i{animation-duration:.8s}
html[data-cx-act="2"] .cx-next{background:#f6f5f2;color:var(--cx-ink);box-shadow:0 18px 44px #0009}
html[data-cx-act="2"] .cx-next small{color:#9c7b4c}
html[data-cx-act="2"] .cx-next i{background:var(--cx-ink);color:#f6f5f2}
@media(max-width:999px),(max-height:599px){.cx-next{left:50%;bottom:110px}}
@media(prefers-reduced-motion:reduce){.cx-next i{animation:none}}
/* The stage can never be scrolled sideways by focus or find-in-page. */
.story-sticky,.cx-finale-stage{overflow:clip!important}
/* The finale is night from the first frame: the room glows through black letters' windows. */
.cx-veil-paper{fill:#1d1c1a}
.cx-veil-outline{stroke:#f6f5f2;stroke-opacity:.35}
.cx-veil-z{stroke:#d4b27a;stroke-opacity:1}
.cx-finale-foot{color:#f6f5f2}
.cx-finale-foot nav a{opacity:.7}
html.cx-finale-dark .header .nav-cta{background:#f6f5f2!important;color:var(--cx-ink)!important}

/* ===================================================================================== */
/* v25 — the CTA lives top right; the hero says what this is                              */
/* ===================================================================================== */
html[data-cx-phase=intro] .header .nav-cta{opacity:1!important;visibility:visible!important;transform:none!important}
.hero-copy .hero-actions{display:none!important}
/* One line of deck under "Your room." */
.hero-copy .cx-hero-lower .hero-subtitle{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;margin:0!important;
 max-width:400px;font:400 17px/1.5 var(--sans)!important;letter-spacing:-.01em!important;color:#716c65!important;text-wrap:pretty}
@media(min-width:1000px) and (min-height:600px){
 .cx-hero-lower{top:calc(100% + 26px)!important;width:min(29vw,400px)!important}
 .hero-copy h1 em{font-size:.66em!important}
}
@media(max-width:999px){
 .photo-origin .cx-photo-2{left:62%;top:30%;transform:rotate(10deg)}
 .cx-rebuild{left:80%;top:calc(100% + 26px);transform:translateX(-50%) rotate(6deg)}
}

/* ===================================================================================== */
/* v26 — a magazine-cover hero, a confident nav, and section 6 answering section 5       */
/* ===================================================================================== */
/* Hero: set entirely in the wordmark's serif. */
.hero-copy h1{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.045em!important;color:var(--cx-ink)!important}
.hero-copy h1 em{font-family:var(--serif)!important;font-style:italic;color:var(--brass-ink,#9c7b4c)!important;letter-spacing:-.04em!important}
@media(min-width:1000px) and (min-height:600px){
 .hero-copy{top:118px!important}
 .hero-copy h1{font-size:clamp(78px,8.4vw,168px)!important;line-height:.9!important}
 .hero-copy h1 em{font-size:1em!important;top:calc(100svh - 118px - 1.02em - 34px)!important}
 .cx-hero-lower{top:calc(100% + 30px)!important;width:min(30vw,420px)!important}
}
.hero-copy .cx-hero-lower .hero-subtitle{font:400 18px/1.5 var(--sans)!important;color:#5f5a53!important;max-width:420px}

/* Nav: a logo and a button you can't miss. */
.header{padding:26px 3.5%!important;align-items:center!important}
.header .brand-mark{gap:6px}
.header .brand-mark b{font-size:38px!important;line-height:.8!important;letter-spacing:-.04em!important}
.header .brand-mark small{font-size:12px!important;letter-spacing:.07em!important}
.header .nav-cta{height:52px!important;padding:0 10px 0 26px!important;gap:14px!important;font:500 15px/1 var(--sans)!important;box-shadow:0 10px 30px #302e2b2e!important}
.header .nav-cta>span{width:34px!important;height:34px!important;border-radius:50%;background:var(--cx-brass);color:#fff!important;font-size:16px!important}
html.cx-finale-dark .header .nav-cta>span,html[data-cx-act="2"] .header .nav-cta>span{background:var(--cx-ink);color:#f6f5f2!important}
@media(max-width:700px){
 .header{padding:16px 18px!important}
 .header .brand-mark b{font-size:30px!important}
 .header .brand-mark small{font-size:10px!important}
 .header .nav-cta{height:44px!important;padding:0 6px 0 16px!important;font-size:14px!important}
 .header .nav-cta>span{width:30px!important;height:30px!important}
}

/* Section 6 opens with the brief from section 5. */
.cx-brief{display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:14px 16px;border-radius:20px;background:var(--cx-ink);color:#f6f5f2}
.cx-brief-spark{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#ffffff14;color:#d4b27a;font-size:15px}
.cx-brief-copy{display:grid;gap:4px;min-width:0}
.cx-brief-copy small{font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#b8b3ab}
.cx-brief-copy em{font:italic 400 18px/1.15 var(--serif);letter-spacing:-.02em;color:#f6f5f2}
.detail-filters button{font-size:12px!important;white-space:nowrap}
@media(min-width:1000px) and (min-height:600px){.cx-hero-lower{width:min(24vw,340px)!important}.hero-copy .cx-hero-lower .hero-subtitle{font-size:17px!important}}
@media(max-width:999px){.hero-copy .cx-hero-lower .hero-subtitle{margin-top:14px!important;font-size:16px!important;max-width:340px;margin-left:auto!important;margin-right:auto!important}}

/* ===================================================================================== */
/* v27 — the hero, played: one object, a scan lens, HUD-quiet words                       */
/* ===================================================================================== */
/* Words step back into a small manifesto, top right. */
@media(min-width:1000px) and (min-height:600px){
 .hero-copy{top:128px!important;left:auto!important;right:3.5%!important;width:300px!important;text-align:right!important}
 .hero-copy h1{font:400 30px/1.08 var(--serif)!important;letter-spacing:-.025em!important}
 .hero-copy h1 br{display:inline!important}
 .hero-copy h1 em{position:static!important;display:inline!important;font-size:1em!important;top:auto!important;white-space:normal!important}
 .hero-copy h1:before{content:none}
 .cx-hero-lower{position:static!important;width:auto!important;margin-top:14px}
 .hero-copy .cx-hero-lower .hero-subtitle{font:400 13px/1.55 var(--sans)!important;color:#716c65!important;max-width:280px!important;margin-left:auto!important}
 /* The photos sit at the left, feeding the room. */
 .photo-origin{left:4.5%!important;right:auto!important;top:36vh!important}
 .photo-origin .cx-photo-2{left:58%!important;top:44%!important;transform:rotate(12deg)!important}
 .cx-rebuild{left:70%!important;top:calc(100% + 64px)!important}
 .cx-hero-hud{display:flex}
}
/* Dust over the drafting table, only in the hero. */
.cx-hero-dust{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:var(--intro-visibility,1)}
/* HUD corners. */
.cx-hero-hud{position:absolute;z-index:12;left:3.5%;right:3.5%;bottom:30px;display:none;justify-content:space-between;align-items:center;pointer-events:none;opacity:var(--intro-visibility,1);font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8b857c}
.cx-hud-scroll{display:inline-flex;align-items:center;gap:12px;color:var(--cx-ink)}
.cx-hud-scroll i{position:relative;width:1px;height:28px;background:#302e2b26;overflow:hidden}
.cx-hud-scroll i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--cx-brass);animation:cx-drip 1.8s var(--cx-ease-io) infinite}
@keyframes cx-drip{to{top:100%}}
.cx-hud-vitals b{font-weight:400;color:var(--cx-brass);margin:0 .5em}
@media(max-width:999px),(max-height:599px){
 .hero-copy h1{font-size:34px!important}
 .hero-copy h1 em{font-size:1em!important}
}
@media(prefers-reduced-motion:reduce){.cx-hud-scroll i:after{animation:none}}
.model-float>.cutaway{position:relative;z-index:1}
.model-float>.empty-cutaway{z-index:0}
@media(min-width:1000px) and (min-height:600px){.photo-origin{top:17vh!important}}
@media(min-width:1000px) and (min-height:600px){.cx-hero-hud{display:flex}}

/* ===================================================================================== */
/* v30 — through the wordmark into the room; the room first, then the words              */
/* ===================================================================================== */
/* The hero gets its own runway before chapter one (journey.js sets --hero-lead). */
.spatial-story{height:calc(1200svh + var(--hero-lead,0px))!important}
/* The real headline stays for readers and search; the display type is drawn so it can sit behind and in front of the room. */
.hero-copy{position:absolute!important;top:0!important;left:0!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}


/* The room. */
.cx-hero-3d{position:absolute;z-index:3;inset:0;opacity:var(--intro-visibility,1);cursor:grab;translate:calc(var(--rewind,0) * 9vw) calc(var(--hero-t,0) * 2.5% + var(--rewind,0) * 4vh)}
.cx-hero-3d:active{cursor:grabbing}
.cx-hero-3d canvas{position:relative;z-index:1}
html:not(.cx-hero-live) .cx-hero-3d{opacity:0;pointer-events:none}
.story-sticky:not([data-phase=intro]) .cx-hero-3d{pointer-events:none}
@media(hover:none),(pointer:coarse){.cx-hero-3d{pointer-events:none}}
html.cx-hero-live .story-sticky .room-stage{opacity:0!important;visibility:hidden}

/* Display type: letters rise out of a baseline with scroll. */
.cx-type{position:absolute;pointer-events:none;white-space:nowrap;overflow:clip;padding:.06em .1em .18em;opacity:calc(var(--intro-visibility,1) * (1 - var(--rewind,0)))}
.cx-type i{display:inline-block;font-style:inherit;--p:clamp(0,calc(var(--t) * 1.7 - var(--k) * .05),1);transform:translateY(calc((1 - var(--p)) * 115%));opacity:calc(var(--p) * 1.6)}
.cx-type .cx-sp{width:.24em}
.cx-type-a{--t:var(--type-a,0);z-index:2;left:2.6%;top:15%;font:500 clamp(72px,9.6vw,200px)/.9 var(--sans);letter-spacing:-.068em;color:var(--cx-ink)}
.cx-type-b{--t:var(--type-b,0);z-index:6;right:2.6%;bottom:3%;font:italic 400 clamp(64px,9vw,186px)/.9 var(--serif);letter-spacing:-.045em;color:var(--brass-ink,#9c7b4c)}
@media(max-width:999px),(max-height:599px){
 .cx-type-a{left:14px;top:96px;font-size:clamp(54px,16vw,120px)}
 .cx-type-b{left:12px;right:auto;bottom:132px;font-size:clamp(34px,9.6vw,92px)}
}
@media(max-width:700px){
 .cx-notes3d .is-cx-pin,.cx-pin{display:none!important}
 .photo-origin{left:auto!important;right:16px!important;top:184px!important}
 .photo-origin .origin-photo{width:92px!important}
 .photo-origin .cx-photo-2{left:-58%!important;top:30%!important;transform:rotate(-7deg)!important}
 .cx-rebuild{left:auto!important;right:0!important;top:calc(100% + 18px)!important;transform:none!important;height:32px!important;font-size:12px!important}
}

/* Notes on the model. */
.cx-notes3d{position:absolute;inset:0;z-index:2;pointer-events:none}
.cx-notes3d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-notes3d path{fill:none;stroke:var(--cx-ink);stroke-opacity:.5;stroke-width:1}
.cx-notes3d g.is-cx-pin path{stroke-dasharray:1}
.cx-notes3d circle{fill:#fff;stroke:var(--cx-brass);stroke-width:1.5}
.cx-notes3d g.is-cx-lift circle{r:3;fill:var(--cx-brass);stroke:#fff}
.cx-pin{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font:500 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--cx-ink)}
.cx-pin span{padding:9px 13px;border-radius:999px;background:#fffffff5;box-shadow:0 8px 22px #302e2b14,0 0 0 1px #302e2b10}
.cx-pin b{font-weight:500;letter-spacing:.14em;color:var(--cx-brass)}
.cx-lift{position:absolute;left:0;top:0;padding:6px 10px;border-radius:999px;background:#1f1e1ce6;white-space:nowrap;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#f6f5f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cx-lift b{margin-left:.6em;font-weight:600;color:#e3c48f}
@media(max-width:999px){.cx-pin{font-size:9px;letter-spacing:.12em}.cx-pin span{padding:7px 10px}}

/* The prints, top right, arrive with the notes. */
@media(min-width:1000px) and (min-height:600px){
 .photo-origin{left:auto!important;right:3.5%!important;top:15vh!important}
 .photo-origin .cx-photo-2{left:-46%!important;top:34%!important;transform:rotate(-7deg)!important}
 .cx-rebuild{left:auto!important;right:-2%!important;top:calc(100% + 26px)!important;transform:none!important}
}
html.cx-hero-live:not(.cx-hero-open) .photo-origin,html.cx-hero-live:not(.cx-hero-open) .photo-origin *{pointer-events:none!important}
html.cx-hero-live .photo-origin>*{opacity:calc(var(--prints,0) * (1 - var(--rewind,0)));translate:0 calc((1 - var(--prints,0)) * 24px);transition:none}
.photo-origin .photo-label,.photo-origin svg{display:none!important}


/* ===================================================================================== */
/* v31 — a drawing, a scan, a room                                                        */
/* ===================================================================================== */
/* The preloader is one hairline and a line of status, centred; the scene itself does the rest. */

/* While the room is being drawn, the page holds its breath. */
html.cx-opening .header,html.cx-opening .cx-discover{opacity:0!important;pointer-events:none}
.header{transition:opacity .9s var(--cx-ease)}

/* One cue for the whole story: scroll to discover, until the closing. */
.cx-discover{position:fixed;left:3.5%;bottom:26px;z-index:55;display:flex;align-items:center;gap:12px;pointer-events:none;font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cx-ink);transition:opacity .6s var(--cx-ease),transform .6s var(--cx-ease)}
.cx-discover i{position:relative;width:1px;height:28px;background:#302e2b26;overflow:hidden}
.cx-discover i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--cx-brass);animation:cx-drip 1.8s var(--cx-ease-io) infinite}
.cx-discover.is-off{opacity:0;transform:translateY(10px)}
html[data-cx-act="2"] .cx-discover{color:#f6f5f2}
html[data-cx-act="2"] .cx-discover i{background:#f6f5f233}
@media(max-width:700px){.cx-discover{left:14px;bottom:14px;padding:7px 12px 7px 10px;border-radius:999px;background:#f6f5f2e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:9px}.cx-discover i{height:18px}html[data-cx-act="2"] .cx-discover{background:#1d1c1ae6}}
@media(prefers-reduced-motion:reduce){.cx-discover i:after{animation:none}}

/* Section 5 → 6: the prompt travels and becomes the brief. */
.cx-handoff{--k:0;position:fixed;left:0;top:0;z-index:58;display:flex;align-items:center;gap:12px;box-sizing:border-box;padding:0 16px 0 calc(18px - var(--k) * 2px);overflow:hidden;white-space:nowrap;pointer-events:none;opacity:0;
 border-radius:calc(26px - var(--k) * 6px);background:color-mix(in srgb,var(--cx-ink) calc(var(--k) * 100%),#fffffff0);color:color-mix(in srgb,#f6f5f2 calc(var(--k) * 100%),var(--cx-ink));
 box-shadow:0 calc(20px + var(--k) * 10px) calc(50px + var(--k) * 20px) #302e2b38,0 0 0 1px color-mix(in srgb,transparent calc(var(--k) * 100%),#a7804633);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cx-handoff.is-on{opacity:1}
.cx-handoff-spark{display:grid;place-items:center;flex:none;width:calc(16px + var(--k) * 18px);height:calc(16px + var(--k) * 18px);border-radius:50%;background:color-mix(in srgb,#ffffff14 calc(var(--k) * 100%),transparent);color:color-mix(in srgb,#d4b27a calc(var(--k) * 100%),var(--cx-brass));font-size:15px}
.cx-handoff-copy{display:grid;min-width:0}
.cx-handoff small{max-height:calc(var(--k) * 14px);margin-bottom:calc(var(--k) * 4px);overflow:hidden;opacity:var(--k);font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#b8b3ab}
.cx-handoff em{overflow:hidden;text-overflow:ellipsis;font:italic 400 calc(19px - var(--k) * 1px)/1.15 var(--serif);letter-spacing:-.02em}
html.cx-handing .cx-spot.is-prompt .cx-prompt,html.cx-handing .cx-brief{visibility:hidden}

/* ===================================================================================== */
/* v33 — your starting point, before you begin, the preview pass: in the house style       */
/* ===================================================================================== */
.cx-kicker{display:flex;align-items:center;gap:12px;margin:0 0 24px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cx-brass)}
.cx-kicker:before{content:'';width:22px;height:1px;background:currentColor}
.cx-start h2,.cx-faq h2,.cx-guide h2{margin:0;font:500 clamp(44px,5.2vw,90px)/.95 var(--sans);letter-spacing:-.055em;color:var(--cx-ink)}
.cx-start h2 em,.cx-faq h2 em,.cx-guide h2 em{font:italic 400 1.04em/.95 var(--serif);letter-spacing:-.04em;color:var(--brass-ink,#9c7b4c)}
/* The drafting paper the story is drawn on carries on underneath. */
.cx-start,.cx-faq{position:relative;z-index:2;background:radial-gradient(#6d686138 .7px,transparent .9px) 0 0/24px 24px,var(--cx-paper,#f6f5f2)}
.cx-faq{background:radial-gradient(#6d686133 .7px,transparent .9px) 0 0/24px 24px,#f1efea}
/* Shared pill: the header's call to action, in miniature. */
.cx-guide-open{display:inline-flex;align-items:center;gap:16px;height:52px;padding:0 9px 0 24px;border:0;border-radius:999px;background:var(--cx-ink);color:#f6f5f2;font:500 15px/1 var(--sans);cursor:pointer;box-shadow:0 12px 30px #302e2b2e;transition:transform .35s var(--cx-ease),box-shadow .35s}
.cx-guide-open span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cx-brass);color:#fff;font-size:15px;transition:transform .35s var(--cx-ease)}
.cx-guide-open:hover{transform:translateY(-2px);box-shadow:0 18px 40px #302e2b38}
.cx-guide-open:hover span{transform:rotate(45deg)}
.cx-guide-open:focus-visible{outline:2px solid var(--cx-brass);outline-offset:4px}

.cx-start{overflow-x:clip;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:4vw;row-gap:84px;align-items:center;padding:150px 3.5% 120px}
.cx-start h2{font-size:clamp(44px,4.5vw,80px)}
.cx-start-lede{max-width:390px;margin:28px 0 36px;font:400 17px/1.55 var(--sans);color:#6f6a63}
/* Three steps on one line, like a route. */
.cx-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.cx-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:22px 0 0;border-top:1px solid #302e2b24;font:500 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--cx-ink)}
.cx-steps li:before{content:'';position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--cx-brass);box-shadow:0 0 0 4px #a780461f}
.cx-steps small{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #a7804680;border-radius:50%;font:600 10px/1 var(--sans);letter-spacing:.06em;color:var(--cx-brass)}

/* Before you begin: the same panel as the room's specification. */
.cx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:6vw;padding:130px 3.5% 170px}
.cx-faq-head{position:sticky;top:130px;align-self:start}
.cx-faq-lede{max-width:340px;margin:26px 0 30px;font:400 16px/1.55 var(--sans);color:#6f6a63}
.cx-faq-brief{display:inline-flex;max-width:380px;margin:0}
.cx-faq-list{padding:8px;border:1px solid #302e2b14;border-radius:24px;background:#fffffff2;box-shadow:0 30px 80px #302e2b14,0 2px 8px #302e2b0a}
.cx-faq details{position:relative;border-radius:16px;transition:background .3s}
.cx-faq details+details{margin-top:2px}
.cx-faq details+details:before{content:'';position:absolute;left:16px;right:16px;top:-1px;height:1px;background:#302e2b12}
.cx-faq details[open]{background:#f6f5f2}
.cx-faq details[open]:before,.cx-faq details[open]+details:before{opacity:0}
.cx-faq details[open]:after{content:'';position:absolute;left:0;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--cx-brass)}
.cx-faq summary{display:grid;grid-template-columns:44px 1fr 32px;align-items:center;padding:20px 16px;border-radius:16px;list-style:none;cursor:pointer;font:500 17px/1.35 var(--sans);letter-spacing:-.01em;color:var(--cx-ink);transition:background .25s}
.cx-faq summary::-webkit-details-marker{display:none}
.cx-faq details:not([open]) summary:hover{background:#f6f5f2b3}
.cx-faq summary small{font:500 10px/1 var(--sans);letter-spacing:.12em;color:#aaa49b;transition:color .3s}
.cx-faq details[open] summary small{color:var(--cx-brass)}
.cx-faq summary:focus-visible{outline:2px solid var(--cx-brass);outline-offset:2px}
.cx-faq summary i{position:relative;justify-self:end;width:30px;height:30px;border:1px solid #302e2b24;border-radius:50%;transition:transform .45s var(--cx-ease),background .3s,border-color .3s,color .3s}
.cx-faq summary i:before,.cx-faq summary i:after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:currentColor}
.cx-faq summary i:after{transform:rotate(90deg)}
.cx-faq details[open] summary i{transform:rotate(45deg);border-color:var(--cx-ink);background:var(--cx-ink);color:#f6f5f2}
.cx-faq-answer{overflow:hidden}
.cx-faq-answer p{max-width:600px;margin:0;padding:0 56px 24px 60px;font:400 15.5px/1.62 var(--sans);color:#6f6a63}

/* The photo guide: the photo annotated like the hero, the tips like the specification. */
.cx-guide{width:min(680px,calc(100vw - 32px));max-height:calc(100svh - 48px);padding:44px 44px 38px;border:0;border-radius:28px;background:radial-gradient(#6d68612e .7px,transparent .9px) 0 0/24px 24px,#f6f5f2;color:var(--cx-ink);box-shadow:0 40px 120px #0000004d;overflow:auto}
.cx-guide::backdrop{background:#1d1c1a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cx-guide[open]{animation:cx-guide-in .55s var(--cx-ease)}
@keyframes cx-guide-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
.cx-guide h2{font-size:clamp(34px,4vw,52px)}
.cx-guide-photo{position:relative;margin:28px 0 22px;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px #302e2b1f}
.cx-guide-photo img{display:block;width:100%;height:auto;aspect-ratio:2.1/1;object-fit:cover}
.cx-guide-level{position:absolute;left:0;right:0;top:47%;border-top:1px dashed #ffffffd9}
.cx-guide-level b{position:absolute;right:12px;top:0;transform:translateY(-50%);padding:5px 9px;border-radius:999px;background:var(--cx-ink);font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#f6f5f2}
.cx-guide-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(10px,-50%);padding:6px 10px;border-radius:999px;background:#fffffff2;box-shadow:0 6px 16px #302e2b26;white-space:nowrap;font:600 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cx-ink)}
.cx-guide-pin:before{content:'';position:absolute;left:-10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--cx-brass);box-shadow:0 0 0 3px #fff}
.cx-guide ol{margin:0 0 14px;padding:4px;border:1px solid #302e2b14;border-radius:18px;background:#fffffff2;list-style:none}
.cx-guide li{display:grid;grid-template-columns:36px 1fr;align-items:center;padding:13px 12px;font:400 15px/1.45 var(--sans)}
.cx-guide li+li{border-top:1px solid #302e2b12}
.cx-guide li small{font:600 10px/1 var(--sans);letter-spacing:.12em;color:var(--cx-brass)}
.cx-guide-note{margin:0 0 24px;padding-left:4px;font:400 13px/1.5 var(--sans);color:#8b857c}
.cx-guide .primary-button{display:inline-flex}
.cx-guide-close{position:absolute;right:20px;top:18px;width:40px;height:40px;border:0;border-radius:50%;background:#302e2b0f;color:var(--cx-ink);font:300 24px/1 var(--sans);cursor:pointer;transition:background .2s,transform .35s var(--cx-ease)}
.cx-guide-close:hover{background:#302e2b1f;transform:rotate(90deg)}

/* The finale lands on an invitation and a preview pass. */
.cx-finale-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#d9d4cc;opacity:0;transform:translateY(10px);transition:opacity .6s .1s,transform .9s var(--cx-ease) .1s}
.cx-finale-eyebrow:before{content:'';width:22px;height:1px;background:#d4b27a}
.cx-finale.is-arrived .cx-finale-eyebrow,.cx-finale.is-static .cx-finale-eyebrow{opacity:1;transform:none}
.cx-finale-copy h2{margin-bottom:0!important}
.cx-offer{--tear:180px;position:absolute;z-index:3;right:6vw;top:50%;width:min(360px,30vw);padding:26px 28px 24px;border-radius:24px;background:#1d1c1af0;color:#f6f5f2;box-shadow:0 40px 100px #00000059,inset 0 0 0 1px #f6f5f21a;
 -webkit-mask:radial-gradient(circle 11px at 0 var(--tear),#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--tear),#0000 98%,#000) 100% 0/51% 100% no-repeat;
 mask:radial-gradient(circle 11px at 0 var(--tear),#0000 98%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--tear),#0000 98%,#000) 100% 0/51% 100% no-repeat;
 opacity:0;pointer-events:none;transform:translateY(-44%);transition:opacity .7s .45s,transform 1s var(--cx-ease) .45s}
.cx-finale.is-arrived .cx-offer,.cx-finale.is-static .cx-offer{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.cx-offer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cx-offer-label,.cx-offer-live{margin:0;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.cx-offer-label{color:#d4b27a}
.cx-offer-live{display:flex;align-items:center;gap:8px;color:#bdb7ae}
.cx-offer-live i{width:7px;height:7px;border-radius:50%;background:#d4b27a;animation:cx-live 2s ease-in-out infinite}
@keyframes cx-live{0%,100%{box-shadow:0 0 0 0 #d4b27a66}50%{box-shadow:0 0 0 6px #d4b27a00}}
.cx-offer-price{display:flex;align-items:flex-end;gap:16px;margin:0 0 16px}
.cx-offer-price strong{font:400 100px/.78 var(--serif);letter-spacing:-.05em;color:#f6f5f2}
.cx-offer-price span{padding-bottom:4px;font:400 14px/1.4 var(--sans);color:#d9d4cc}
.cx-offer-note{margin:0;font:400 13px/1.55 var(--sans);color:#bdb7ae}
.cx-offer-tear{margin:20px -28px 18px;border-top:1.5px dashed #f6f5f22e}
.cx-offer-next{display:grid;gap:6px;margin:0 0 20px}
.cx-offer-next small{font:600 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8f897f}
.cx-offer-next span{font:400 15px/1.35 var(--sans);color:#f6f5f2}
.cx-offer-next b{font:italic 400 22px/1 var(--serif);letter-spacing:-.02em;color:#d4b27a}
.cx-offer-cta{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 9px 0 22px;border-radius:999px;background:#f6f5f2;color:var(--cx-ink);font:500 15px/1 var(--sans);text-decoration:none;transition:transform .3s var(--cx-ease),background .25s}
.cx-offer-cta span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cx-brass);color:#fff;font-size:15px;transition:transform .35s var(--cx-ease)}
.cx-offer-cta:hover{background:#fff;transform:translateY(-2px)}
.cx-offer-cta:hover span{transform:rotate(45deg)}

@media(max-width:900px){
 .cx-start{grid-template-columns:1fr;row-gap:56px;padding:110px 20px 90px}
 .cx-steps{grid-template-columns:1fr;gap:0}
 .cx-steps li{padding:18px 0}
 .cx-faq{grid-template-columns:1fr;row-gap:40px;padding:100px 20px 120px}
 .cx-faq-head{position:static}
 .cx-faq summary{grid-template-columns:34px 1fr 30px;padding:18px 12px;font-size:15.5px}
 .cx-faq-answer p{padding:0 14px 22px 46px;font-size:15px}
 .cx-guide{padding:40px 20px 26px}
 .cx-guide-pin{font-size:8px;padding:5px 8px}
}
@media(max-width:700px){
 .cx-finale-copy{top:15%!important;transform:none!important}
 .cx-finale-copy h2{font-size:clamp(40px,12vw,64px)!important}
 /* Closing card on phones: compact, resting just above the footer line, so it never covers the title.
    The lead gap is tight, the in-card footnote is dropped, and the card only holds what it needs. */
 .cx-offer{left:20px;right:20px;top:auto;bottom:62px;width:auto;padding:14px 18px 16px;transform:translateY(16px)}
 .cx-finale.is-arrived .cx-offer,.cx-finale.is-static .cx-offer{transform:none}
 .cx-offer-top{margin-bottom:8px!important}
 .cx-offer-price{margin:0 0 10px!important}
 .cx-offer-price strong{font-size:60px}
 .cx-offer-note{display:none}
 .cx-offer-tear{margin:12px -18px 10px}
 .cx-offer-next{margin:0 0 12px!important}
 .cx-offer-start{display:none!important}
}
/* Smaller landscape desktops (≈1010px): shrink the closing preview-pricing card and rein in the
   headline width so the card no longer sits on top of the title. */
@media(min-width:701px) and (max-width:1200px){
 .cx-finale-copy{max-width:min(560px,52vw)!important}
 .cx-offer{width:min(300px,30vw)!important;padding:20px 20px 18px!important}
 .cx-offer-price strong{font-size:64px!important}
 .cx-offer-tear{margin:16px -20px 14px!important}
}

/* ===================================================================================== */
/* v34 — fixes: act titles, a quiet section 6, a hands-off 7–10, the explore button        */
/* ===================================================================================== */
/* Act titles: room for the italic ascenders and descenders inside the reveal mask. */
.cx-actcard div{padding:0 4vw!important}
.cx-actcard b{line-height:1!important;padding:.16em .1em .3em}
/* Section 6 is to be read, not handled: the wheel always scrolls the page. */
#room-details,#room-details *{pointer-events:none!important}
/* Sections 7–10: watched, not handled. Scroll makes the changes; nothing here takes a click. */
.story-sticky:is([data-phase=adjust],[data-phase=furniture],[data-phase=colour],[data-phase=materials]) :is(.inline-editor,.inline-editor *,.stage-tools,.stage-tools *,.cx-spot,.cx-spot *,.cx-next){pointer-events:none!important;cursor:default!important}
.cx-spot.is-passive .cx-spot-choices{display:none!important}
.cx-spot.is-passive .cx-spot-dot{animation:cx-live 2.2s ease-in-out infinite}
.cx-spot.is-passive .cx-spot-label{display:inline-flex!important;align-items:center;gap:10px;max-width:none!important;padding:8px 14px 8px 9px!important;border-radius:999px!important;background:#fffffff5!important;box-shadow:0 12px 30px #0000002e,0 0 0 1px #302e2b10!important;font:500 13px/1 var(--sans)!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--cx-ink)!important;white-space:nowrap;opacity:1!important;visibility:visible!important}
.cx-spot.is-passive .cx-spot-label small{margin-left:2px;font:600 10px/1 var(--sans);letter-spacing:.12em;color:#8b857c}
.cx-swatch{flex:none;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0000001f,0 0 0 3px #fff}
.cx-spot-label.is-new{animation:cx-label-in .7s var(--cx-ease)}
@keyframes cx-label-in{from{opacity:0;transform:translateY(8px);filter:blur(5px)}}
/* A soft sweep of light over the room with every change. */
.story-sticky .inline-editor:after{content:'';position:absolute;inset:-4%;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 38%,#fff8ec66 50%,transparent 62%);transform:translateX(-70%);-webkit-mask:radial-gradient(ellipse 58% 52% at 52% 54%,#000 35%,transparent 78%);mask:radial-gradient(ellipse 58% 52% at 52% 54%,#000 35%,transparent 78%)}
.story-sticky.cx-sheen .inline-editor:after{animation:cx-sheen 1.15s var(--cx-ease-io)}
@keyframes cx-sheen{0%{opacity:0;transform:translateX(-70%)}18%{opacity:1}100%{opacity:0;transform:translateX(70%)}}

/* The explore button: the header's pill, light, with the cube in a brass disc. */
.story-bottom .explore-button{display:inline-flex!important;align-items:center!important;gap:12px!important;width:auto!important;height:50px!important;padding:0 8px 0 20px!important;border-radius:999px!important;border:1px solid #302e2b1a!important;background:#fffffff2!important;color:var(--cx-ink)!important;font:500 14px/1 var(--sans)!important;letter-spacing:-.005em!important;box-shadow:0 12px 30px #302e2b1f!important;transition:transform .3s var(--cx-ease),box-shadow .3s!important}
.story-bottom .explore-button svg{order:2;box-sizing:content-box;width:16px!important;height:16px!important;padding:9px!important;border-radius:50%;background:var(--cx-brass);color:#fff;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .45s var(--cx-ease)}
.story-bottom .explore-button>span{display:none!important}
.story-bottom .explore-button:hover{transform:translateY(-2px);box-shadow:0 18px 40px #302e2b2e!important}
.story-bottom .explore-button:hover svg{transform:rotate(-18deg) scale(1.06)}
html[data-cx-act="2"] .story-bottom .explore-button{background:#1d1c1ae6!important;color:#f6f5f2!important;border-color:#f6f5f224!important}
@media(max-width:700px){.story-bottom .explore-button{width:50px!important;padding:0!important;justify-content:center!important;font-size:0!important;gap:0!important}}

/* ===================================================================================== */
/* v35 — section 6 clears the header, the starting point's photo deck, breaks between sections */
/* ===================================================================================== */
/* Section 6: the specification starts below the header's button, never under it. */
@media(min-width:701px){.story-sticky[data-phase] .detail-rail{top:max(100px,11%)!important}}
.detail-filters{display:none!important}

/* Your starting point: three prints of one room, dealt like a deck. The front one holds a beat, then the next lands on top. */
.cx-deck{position:relative;display:grid;justify-items:center;gap:34px}
.cx-deck-stage{position:relative;width:100%;aspect-ratio:1.5}
.cx-print{--x:0%;--y:0%;--r:0deg;--s:1;position:absolute;left:50%;top:50%;z-index:1;width:62%;margin:0;padding:10px 10px 44px;background:#fff;border-radius:4px;box-shadow:0 26px 54px #302e2b1f,0 3px 10px #302e2b12;cursor:pointer;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));transition:transform 1.15s var(--cx-ease),opacity .9s var(--cx-ease),box-shadow .6s,filter .9s}
.cx-print[data-pos=front]{z-index:3;--r:-1.5deg;cursor:default;box-shadow:0 44px 90px #302e2b2e,0 4px 14px #302e2b17}
.cx-print[data-pos=next]{z-index:2;--x:36%;--y:-10%;--r:6deg;--s:.78;filter:saturate(.8) brightness(.97)}
.cx-print[data-pos=back]{z-index:1;--x:-36%;--y:8%;--r:-7deg;--s:.74;filter:saturate(.75) brightness(.95)}
.cx-print[data-pos=next]:hover{--y:-13%;--r:4deg}
.cx-print[data-pos=back]:hover{--y:5%;--r:-5deg}
.cx-print-photo{display:block;overflow:hidden;border-radius:2px;background:#ece9e3}
.cx-print img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transform:scale(1);transition:transform 1s var(--cx-ease)}
/* A slow push-in on the print in front, for as long as it holds. */
.cx-print[data-pos=front] img{transform:scale(1.07);transition:transform calc(var(--hold,4200ms) + 1s) linear}
.cx-deck.is-paused .cx-print[data-pos=front] img{transform:scale(1.03);transition-duration:1.2s}
.cx-print figcaption{position:absolute;left:14px;right:14px;bottom:16px;display:flex;gap:10px;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6f6a63;transition:opacity .6s}
.cx-print figcaption b{font-weight:600;color:var(--cx-brass)}
.cx-print:not([data-pos=front]) figcaption{opacity:.45}
/* Before it arrives the deck sits squared up; then it is dealt. */
.cx-start:not(.is-in) .cx-print{opacity:0;--x:0%;--y:10%;--r:0deg;--s:.9}
.cx-start.is-in .cx-print{transition-delay:0s}
/* One bar per print; the front one's fills as its beat runs. */
.cx-deck-nav{display:flex;gap:6px}
.cx-deck-nav button{position:relative;width:48px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.cx-deck-nav i{position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#302e2b1f;overflow:hidden;transition:background .3s}
.cx-deck-nav i:after{content:'';position:absolute;inset:0;background:var(--cx-brass);transform:scaleX(0);transform-origin:left}
.cx-deck-nav button.is-on i:after{animation:cx-deck-fill var(--hold,4200ms) linear forwards}
.cx-deck.is-paused .cx-deck-nav button.is-on i:after{animation:none;transform:scaleX(1)}
.cx-deck-nav button:hover i{background:#302e2b40}
.cx-deck-nav button:focus-visible{outline:2px solid var(--cx-brass);outline-offset:2px;border-radius:4px}
@keyframes cx-deck-fill{to{transform:scaleX(1)}}
@media(max-width:900px){
 .cx-deck-stage{aspect-ratio:1.42}
 .cx-print{width:72%;padding:6px 6px 32px}
 .cx-print[data-pos=next]{--x:24%;--y:-12%}
 .cx-print[data-pos=back]{--x:-24%;--y:9%}
 .cx-print figcaption{left:9px;bottom:11px;font-size:8px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){.cx-print,.cx-print img{transition:none!important}.cx-print[data-pos=front] img{transform:none}}

/* Between sections: a soft veil draws in from above and below to a brass line, names what comes next, and lifts.
   It never hides the room completely; the scene stays faintly there underneath. Scroll drives it. */
.cx-break{--c:0;--m:0;position:fixed;inset:0;z-index:50;pointer-events:none;visibility:hidden}
.cx-break-veil{position:absolute;inset:0;opacity:.8}
.cx-break-panel{position:absolute;left:0;right:0;height:calc(50% + 90px);background:var(--cx-paper,#f6f5f2);transition:background-color .7s var(--cx-ease-io)}
.cx-break-panel.is-top{top:0;-webkit-mask-image:linear-gradient(#000 calc(100% - 90px),transparent);mask-image:linear-gradient(#000 calc(100% - 90px),transparent);transform:translateY(calc((var(--c) - 1) * 100%))}
.cx-break-panel.is-bottom{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000 90px);mask-image:linear-gradient(transparent,#000 90px);transform:translateY(calc((1 - var(--c)) * 100%))}
.cx-break-mark{position:absolute;left:0;right:0;top:50%;height:0;opacity:var(--m)}
.cx-break-mark b{position:absolute;left:0;right:0;bottom:16px;padding:0 4vw .12em;text-align:center;white-space:nowrap;font:italic 400 clamp(26px,2.4vw,36px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--cx-ink);transform:translateY(calc((1 - var(--m)) * 14px));transition:color .7s var(--cx-ease-io)}
.cx-break.is-act .cx-break-mark b{bottom:8px;font-size:clamp(44px,5.4vw,92px);line-height:1.08;letter-spacing:-.05em}
.cx-break-line{position:absolute;left:50%;top:0;width:min(360px,56vw);height:1px;background:var(--cx-brass);transform:translateX(-50%) scaleX(var(--m))}
.cx-break-mark small{position:absolute;left:0;right:0;top:16px;text-align:center;font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cx-brass);transform:translateY(calc((var(--m) - 1) * 10px))}
html[data-cx-act="2"] .cx-break-panel{background:#1d1c1a}
html[data-cx-act="2"] .cx-break-mark b{color:#f6f5f2}
/* The breaks take over from the act cards and the chapter sweep. */
html.cx-breaks .cx-actcard,html.cx-breaks .cx-sweep{display:none!important}

/* The intro price rides beside the header's call to action. */
.header .nav-cta{position:relative;overflow:visible!important}
.cx-cta-price{position:absolute;right:calc(100% + 18px);top:50%;display:flex;align-items:center;gap:9px;transform:translateY(-50%);font-style:normal;white-space:nowrap;pointer-events:none;color:var(--cx-ink);transition:color .8s}
.cx-cta-price b{font:italic 400 30px/1 var(--serif);letter-spacing:-.03em}
.cx-cta-price i{display:grid;gap:4px;font:500 12px/1 var(--sans);font-style:normal;letter-spacing:-.005em}
.cx-cta-price small{font:600 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cx-brass)}
html[data-cx-act="2"] .cx-cta-price,html.cx-finale-dark .cx-cta-price{color:#f6f5f2}
/* On a phone there is no room beside it: the price becomes a small tab on the button's top edge. */
@media(max-width:700px){
 .cx-cta-price{right:auto;left:14px;top:0;gap:5px;height:18px;padding:0 9px 0 8px;border-radius:999px;background:var(--cx-brass);color:#fff!important;transform:translateY(-58%);box-shadow:0 4px 10px #a780463d}
 .cx-cta-price b{font-size:13px;line-height:1}
 .cx-cta-price i{display:flex;align-items:center;gap:5px;font-size:10px;line-height:1}
 .cx-cta-price small{font-size:7.5px;letter-spacing:.14em;color:#fff;opacity:.85}
}

/* ===================================================================================== */
/* v36 — phones (700px and below): fixes from a full pass; the desktop layout is untouched */
/* ===================================================================================== */
@media(max-width:700px){
 /* Hero: the photo prints and the rebuild pill sit above the room, clear of its walls. */
 .photo-origin{top:164px!important}
 .photo-origin .origin-photo{width:80px!important}
 /* Sections 2–4: the room's measurements as a 2 × 2 grid that fits the screen. */
 .story-sticky .space-metrics{grid-auto-flow:row!important;grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;column-gap:20px!important;row-gap:14px!important;align-items:start!important}
 .story-sticky .space-metrics>span{display:grid!important;gap:6px}
 .story-sticky .space-metrics b{font-size:22px!important}
 .space-tools .rail-note{display:none!important}
 /* Section 5: the prompt is centred on the screen and never touches its edges. */
 .cx-spot.is-prompt .cx-prompt{left:calc(50vw - var(--sx,0px));max-width:calc(100vw - 32px);height:46px;gap:9px;padding:0 6px 0 14px}
 .cx-spot.is-prompt .cx-prompt:hover{transform:translateX(-50%)}
 .cx-prompt-text{min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px!important}
 /* Section 6: a row grows to fit a two-line name and its finish. */
 .detail-callout{flex:0 0 auto!important;max-height:none!important}
 /* The small print wraps beside the explore button instead of running off the screen. */
 .scene-footnote{left:20px!important;right:96px!important;bottom:56px!important;width:auto!important;transform:none!important;white-space:normal!important;text-align:left;line-height:1.5}
 /* Section 11: a comparison wide enough for both labels. */
 .story-sticky .render-stage,.story-sticky .render-stage.active{width:calc(100vw - 40px)!important;max-width:none!important}
 /* Section 13: the share card sits under the room, not across it. */
 .story-sticky .share-artifact,.story-sticky .share-artifact.active{top:auto!important;bottom:136px!important;left:20px!important;right:20px!important;width:auto!important;padding:18px 18px 16px!important}
 .story-sticky .share-artifact h3{font-size:24px!important;margin:8px 0 14px!important}
 .story-sticky .share-artifact .share-avatar-row{display:none!important}
 /* Closing: the eyebrow and title start just under the bar, clear of the Preview pricing card below. */
 .cx-finale-copy{top:20px!important}
 /* Closing: shade from the top, where the words sit on a phone. */
 .cx-finale-shade{background:linear-gradient(180deg,#1d1c1af2 0%,#1d1c1aa6 34%,#1d1c1a33 58%,#1d1c1acc 100%)}
}

/* Tablets in portrait (701–999px): the hero's photo prints move to the free corner beside the headline. */
@media(min-width:701px) and (max-width:999px){
 .photo-origin{left:auto!important;right:28px!important;top:118px!important}
 .photo-origin .origin-photo{width:118px!important}
 .photo-origin .cx-photo-2{left:-52%!important;top:34%!important;transform:rotate(-7deg)!important}
 .cx-rebuild{left:auto!important;right:0!important;top:calc(100% + 30px)!important;transform:none!important}
}
@media(min-width:701px) and (max-width:1050px){
 /* Sections 2–4: the measurements as a 2 × 2 grid inside their card, with tighter padding so the
    figures never run past the card edge on tablets. */
 .story-sticky .phase-tool.space-tools.active:not(.shopping-tools){padding:16px 18px!important}
 .story-sticky .space-metrics{grid-auto-flow:row!important;grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;column-gap:18px!important;row-gap:16px!important;align-items:start!important}
 .story-sticky .space-metrics>span{display:grid!important;gap:6px;min-width:0!important}
 .story-sticky .space-metrics small{white-space:normal!important}
 .story-sticky .space-metrics b{font-size:21px!important;white-space:normal!important}
 .space-tools .rail-note{display:none!important}
 /* Photo & render: hide the 3D and let the comparison take the right side — right-aligned like the
    desktop layout, dropped below the title and height-capped so it never covers the section heading. */
 .story-sticky[data-phase=render] .inline-editor{opacity:0!important;visibility:hidden!important}
 .story-sticky .render-stage,.story-sticky .render-stage.active{left:auto!important;right:3.5%!important;top:34%!important;transform:none!important;width:min(calc(60vw),600px)!important;max-width:none!important}
 .story-sticky .render-comparison{aspect-ratio:1.6!important;max-height:48svh!important;margin:0 0 0 auto!important}
 /* Shopping: the product labels wrap inside their tag card instead of running past its edge. */
 .room-pins .product-pin span{white-space:normal!important;width:max-content!important;max-width:150px!important;height:auto!important;overflow-wrap:break-word!important;word-break:break-word}
}
/* Phones and true tablets only (≤999px): the change chapters centre the 3D across the full width.
   Small desktops (1000–1050px) keep the proper right-aligned desktop layout. */
@media(min-width:701px) and (max-width:999px){
 .story-sticky[data-phase=adjust] .inline-editor,.story-sticky[data-phase=furniture] .inline-editor,.story-sticky[data-phase=colour] .inline-editor,.story-sticky[data-phase=materials] .inline-editor{left:0!important;right:0!important;top:16%!important;bottom:14%!important;transform-origin:50% 50%!important}
 /* Photo & render on true tablets: centre the comparison in the viewport instead of stranding it in
    the bottom-right corner (small desktops 1000–1050px keep their right-aligned layout). */
 .story-sticky[data-phase=render] .render-stage,.story-sticky[data-phase=render] .render-stage.active{left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important}
 .story-sticky[data-phase=render] .render-comparison{margin:0 auto!important}
}
/* Small landscape desktops (1000–1050px): nudge the 3D up a little in Empty 3D / Floor plan /
   Elevations so it sits better under the title. */
@media(min-width:1000px) and (max-width:1050px){
 .story-sticky[data-phase=empty] .inline-editor,.story-sticky[data-phase=floorplan] .inline-editor,.story-sticky[data-phase=elevations] .inline-editor{top:8%!important;bottom:28%!important}
 /* Photo & render at ~1024px: lift the comparison up to sit level with the headline and pull it left
    off the right edge, so it's no longer stranded low in the bottom-right corner. */
 .story-sticky[data-phase=render] .render-stage,.story-sticky[data-phase=render] .render-stage.active{right:6%!important;top:22%!important}
}
/* Desktop shopping pins: wrap long product names between words (never mid-word) inside a capped
   card width, and drop the price onto its own line below the name. */
@media(min-width:1051px){
 .room-pins .product-pin span{white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;max-width:180px!important;line-height:1.3!important}
 .room-pins .product-pin b{display:block!important;margin-top:4px}
}
/* Narrow desktops (1051–1160px): the single-row dimensions card runs tight — pull in the column gaps,
   trim the figures and padding so the right-hand "Doors & windows" column stays inside the card. */
@media(min-width:1051px) and (max-width:1160px){
 .story-sticky .phase-tool.space-tools.active:not(.shopping-tools){padding:16px 24px!important}
 .story-sticky .space-metrics{column-gap:26px!important}
 .story-sticky .space-metrics b{font-size:22px!important}
 .story-sticky .space-metrics small{font-size:9px!important;letter-spacing:.12em!important}
}
/* Tablets in portrait: section 6 stacks like a phone, the room above and the specification full width below it. */
@media(min-width:701px) and (max-width:999px) and (orientation:portrait){
 .story-sticky[data-phase=details] .inline-editor{left:0!important;right:0!important;top:15%!important;bottom:48%!important}
 .story-sticky[data-phase] .detail-rail{top:52%!important;bottom:14.5%!important;left:28px!important;right:28px!important;width:auto!important}
 .story-sticky[data-phase=details] .detail-readout{display:none!important}
 .detail-callout{flex:0 0 auto!important;max-height:none!important}
}
/* Tablets in portrait: the closing words above, the preview pass below them, never on top of each other. */
@media(min-width:701px) and (max-width:999px) and (orientation:portrait){
 .cx-finale-copy{top:16%!important;transform:none!important}
 .cx-offer{left:6vw;right:auto;top:auto;bottom:110px;width:min(420px,88vw);transform:translateY(16px)}
 .cx-finale.is-arrived .cx-offer,.cx-finale.is-static .cx-offer{transform:none}
 .cx-finale-shade{background:linear-gradient(180deg,#1d1c1af2 0%,#1d1c1aa6 34%,#1d1c1a40 56%,#1d1c1acc 100%)}
}

/* ===================================================================================== */
/* v38 — the loader holds the page until the room is in: "chez" fills with ink as it loads  */
/* ===================================================================================== */
.cx-loader{--p:0;background:radial-gradient(#6d686130 .7px,transparent .9px) 0 0/24px 24px,var(--cx-paper,#f6f5f2)}
.cx-loader.is-live{animation:none!important}
.cx-loader-top .cx-hud:last-child{text-align:right}
.cx-loader-center{align-self:center;justify-self:center;display:grid;justify-items:center;gap:6px}
/* The word: a faint outline, filled with ink from the bottom as the room arrives, a brass line riding the fill. */
.cx-loader-word{position:relative;font:italic 400 clamp(150px,25vw,380px)/1 var(--serif);letter-spacing:-.05em;padding:0 .14em .05em .06em}
.cx-lw-ghost{display:block;color:transparent;-webkit-text-stroke:1px #302e2b38}
.cx-lw-fill{position:absolute;inset:0;padding:inherit;color:var(--cx-ink);clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0)}
.cx-loader-word:after{content:'';position:absolute;left:4%;right:4%;top:calc((1 - var(--p)) * 100%);height:1px;background:var(--cx-brass);opacity:calc(1 - var(--p) * var(--p))}
.cx-loader-by{font:500 13px/1 var(--sans);letter-spacing:.06em;color:#8b857c;margin-top:-.4em}
.cx-loader-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.cx-loader-status{min-width:0!important;white-space:nowrap;font-size:10px!important;letter-spacing:.2em!important;color:#8b857c!important}
.cx-loader-status:before{display:none!important}
.cx-loader-pct{font:italic 400 34px/1 var(--serif);letter-spacing:-.03em;color:var(--cx-ink);font-variant-numeric:tabular-nums}
.cx-loader-pct sup{font:500 11px var(--sans);color:var(--cx-brass);margin-left:3px;vertical-align:top}
.cx-loader-bar{margin-top:16px!important;background:#302e2b1a!important}
/* Away like a curtain, once everything is in. */
.cx-loader{transition:clip-path 1s var(--cx-ease-io),visibility 0s 1.05s!important}
.cx-loader.is-done{clip-path:inset(0 0 100% 0 round 0 0 48px 48px)!important;opacity:1!important}
@media(max-width:700px){
 .cx-loader-top .cx-hud:last-child{display:none}
 .cx-loader-word{font-size:36vw}
 .cx-loader-pct{font-size:28px}
}


/* Touch phones and tablets: the story runs five times as long, so each swipe moves it a fifth as far (journey.js matches the hero runway). */
@media(max-width:700px),(hover:none) and (pointer:coarse){
 .spatial-story{height:calc(6000svh + var(--hero-lead,0px))!important}
}

/* The legal strip: one quiet line under the closing. */
.cx-legal{position:relative;z-index:5;box-sizing:border-box;width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding:20px 3.5% 22px;background:#151413;border-top:1px solid #f6f5f214;color:#8f897f;font:400 12px/1.4 var(--sans);letter-spacing:.01em}
.cx-legal nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.cx-legal a{color:#d8d3cb;text-decoration:none;transition:color .2s}
.cx-legal a:hover{color:#d4b27a}
.cx-legal a:focus-visible{outline:2px solid var(--cx-brass);outline-offset:3px;border-radius:2px}
@media(max-width:700px){.cx-legal{flex-direction:column;align-items:flex-start;padding:18px 20px 26px}.cx-legal nav{gap:8px 20px}}

/* While the photo becomes the room, nothing else is on it: the words, notes and prints wait for the 3D. */
html.cx-opening .cx-type,html.cx-opening .cx-notes3d,html.cx-opening .photo-origin{opacity:0!important;visibility:hidden}
@keyframes cx-kick-in{from{opacity:0;transform:translateY(6px)}}
#chapter-kicker.cx-kick{animation:cx-kick-in .5s var(--cx-ease) both}

/* ===================================================================================== */
/* v39 — the final copy: the opening line, labels in the house caps, the preview pass     */
/* ===================================================================================== */
/* Opening: the eyebrow sits over the headline; the one-line explanation and the demo label sit low left. Both arrive with the words. */
.cx-hero-kicker,.cx-hero-intro{position:absolute;z-index:6;pointer-events:none;opacity:calc(var(--type-b,0) * var(--intro-visibility,1) * (1 - var(--rewind,0)));translate:0 calc((1 - var(--type-b,0)) * 12px)}
.cx-hero-kicker{left:calc(2.6% + .1em);top:calc(15% - 22px);margin:0;display:flex;align-items:center;gap:12px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cx-brass)}
.cx-hero-kicker:before{content:'';width:22px;height:1px;background:currentColor}
.cx-hero-intro{left:3.5%;bottom:86px;max-width:min(340px,calc(23.5vw - 24px))}
@media(max-width:1200px){.cx-hero-intro p{font-size:13.5px}}
.cx-hero-intro p{margin:0 0 12px;font:400 15px/1.55 var(--sans);color:#57534d}
.cx-hero-intro small{font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8b857c}
html.cx-opening .cx-hero-kicker,html.cx-opening .cx-hero-intro{opacity:0!important;visibility:hidden}
@media(max-width:999px),(max-height:599px){
 .cx-hero-kicker{left:16px;top:76px}
 .cx-hero-intro{left:14px;right:84px;bottom:58px;max-width:none}
 .cx-hero-intro p{font-size:13px;line-height:1.5;margin-bottom:8px}
}
@media(min-width:701px) and (max-width:999px){.cx-hero-kicker{top:calc(96px - 24px)}}
.story-sticky:not([data-phase=intro]) :is(.cx-hero-kicker,.cx-hero-intro){visibility:hidden}

/* Labels that live in the house caps, whatever case the copy is written in. */
.phase-tool>.mono,.story-sticky .space-metrics small,.render-comparison .compare-label,.share-artifact>.mono,.detail-rail-foot,.live-room-note,.detail-rail-heading{text-transform:uppercase}

/* Your starting point: the photo requirement, plainly beside the explanation. */
.cx-start-need{display:flex;align-items:center;gap:10px;max-width:420px;margin:-18px 0 30px;font:500 13.5px/1.45 var(--sans);color:var(--cx-ink)}
.cx-start-need:before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--cx-brass);box-shadow:0 0 0 4px #a780461f}

/* The preview pass: price, what it covers, the date, what comes next, the call, the first step. */
.cx-offer-price strong{letter-spacing:-.04em}
.cx-offer-price strong:first-letter{font-size:1em}
.cx-offer-note{display:block!important;margin:14px 0 0!important;font:400 13px/1.5 var(--sans)!important;color:#d8d3cb!important}
.cx-offer-next{display:grid!important;gap:6px}
.cx-offer-next span{font:500 13.5px/1.35 var(--sans);color:#f6f5f2}
.cx-offer-next small{font:400 12.5px/1.35 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:#b8b3ab!important}
.cx-offer-start{margin:12px 0 0;font:400 12px/1.4 var(--sans);color:#b8b3ab;text-align:center}
@media(max-width:700px){
 .cx-offer-price strong{font-size:48px!important}
 .cx-offer{padding-top:16px!important}
 .cx-offer-note{font-size:12px!important;margin-top:8px!important}
 .cx-offer-tear{margin:12px -20px 10px!important}
 .cx-offer-start{margin-top:8px}
}

/* Each chapter's eyebrow is visible: it carries the feature status (COMING SOON · …) with the demonstration. */
.story-sticky .story-copy #chapter-kicker{display:block!important;margin:0 0 14px!important}
.story-sticky[data-phase=intro] .story-copy #chapter-kicker{visibility:hidden}
/* The caption line (estimated dimensions, examples, illustrative, coming soon) is readable, not a whisper. */
.scene-footnote{font:500 11px/1.4 var(--sans)!important;letter-spacing:.06em!important;opacity:.85!important;color:#6f6a63!important;text-transform:none!important}
html[data-cx-act="2"] .scene-footnote{color:#c9c3ba!important}
/* Room dimensions: the panel's heading, small, to the left of the figures. */
.story-sticky .space-tools>.mono{display:block!important}
@media(max-width:999px){.story-sticky .space-tools>.mono{margin:0 0 10px!important;max-width:none!important}}
/* Phones: the opening line sits under "Reimagined in 3D.", never across it; the dimensions heading sits above its figures. */
@media(max-width:700px){
 .cx-type-b{bottom:206px!important}
 .story-sticky .phase-tool.space-tools.active{flex-direction:column!important;align-items:flex-start!important}
 .story-sticky .space-tools>.mono{margin:0 0 10px!important;max-width:none!important}
}
@media(min-width:701px) and (max-width:999px){
 .story-sticky .phase-tool.space-tools.active{flex-direction:column!important;align-items:flex-start!important}
}

/* ===================================================================================== */
/* v40 — one type system: eyebrow, display, body, caption, price                          */
/* ===================================================================================== */
:root{--cx-body:#5c5750;--cx-caption:#77716a}
/* Display: balanced lines, true italics, no orphans. */
.cx-type,.story-copy h2,.cx-start h2,.cx-faq h2,.cx-guide h2,.cx-finale-copy h2,.share-dialog h2,.live-room-caption h2,.product-info h2,.bundle-head,.share-artifact h3{text-wrap:balance;font-kerning:normal;font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
.story-copy h2 em,.cx-start h2 em,.cx-faq h2 em,.cx-guide h2 em,.cx-finale-copy h2 em{font-feature-settings:"kern","liga","dlig"}
/* Body: comfortable measure, warm ink, no widows. */
.story-copy p,.cx-start-lede,.cx-faq-lede,.cx-faq-answer p,.cx-hero-intro p,.cx-offer-note,.share-dialog p,.product-info p,.bundle-note,.cx-guide li{text-wrap:pretty}
.cx-start-lede,.cx-faq-lede{color:var(--cx-body)!important;font-size:16.5px!important;line-height:1.6!important;letter-spacing:-.005em}
.cx-faq-answer p{color:var(--cx-body)!important;line-height:1.65!important}

/* Eyebrows: one voice everywhere. A short brass rule, then the words. */
.story-sticky .story-copy #chapter-kicker,.cx-hero-kicker,.cx-kicker,.cx-finale-eyebrow,.share-dialog .eyebrow,.product-info .eyebrow,#product-content>.eyebrow,.live-room-caption .eyebrow{display:flex!important;align-items:center;gap:12px;font:600 10.5px/1.2 var(--sans)!important;letter-spacing:.22em!important;text-transform:uppercase}
.story-sticky .story-copy #chapter-kicker:before,.share-dialog .eyebrow:before,.product-info .eyebrow:before,#product-content>.eyebrow:before{content:'';flex:none;width:22px;height:1px;background:currentColor;opacity:.9}
.story-sticky .story-copy #chapter-kicker{margin:0 0 18px!important;color:var(--brass-ink,#9c7b4c)!important}
html[data-cx-act="2"] .story-sticky .story-copy #chapter-kicker{color:#d4b27a!important}

/* Chapters: the numeral sits above its eyebrow instead of under it; the headline's one line of explanation follows on large screens. */
@media(min-width:1000px) and (min-height:600px){
 .cx-bignum{font-size:clamp(96px,calc(16.25vh - 12.5px),200px)!important;top:7vh!important}
 .story-sticky .story-copy #chapter-text{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;margin:20px 0 0!important;max-width:300px!important;font:400 15px/1.6 var(--sans)!important;letter-spacing:-.005em!important;color:var(--cx-body)!important}
 html[data-cx-act="2"] .story-sticky .story-copy #chapter-text{color:#bdb7ae!important}
 .story-sticky .story-copy #chapter-action{margin-top:24px!important}
 .story-sticky[data-phase=intro] .story-copy #chapter-text{visibility:hidden}
}
@keyframes cx-follow{from{opacity:0;transform:translateY(10px)}}
#chapter-text.cx-follow{animation:cx-follow .8s var(--cx-ease) .32s both}

/* Captions: sentence case, a brass point, readable. */
.scene-footnote{display:inline-flex!important;align-items:flex-start;gap:9px;font:500 12px/1.45 var(--sans)!important;letter-spacing:0!important;color:var(--cx-caption)!important;opacity:1!important}
.scene-footnote:before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--cx-brass);margin-top:7px}
.scene-footnote:empty{display:none!important}
html[data-cx-act="2"] .scene-footnote{color:#c9c3ba!important}
@media(max-width:700px){.scene-footnote{align-items:flex-start;font-size:11.5px!important}.scene-footnote:before{margin-top:6px}}

/* Prices: the currency small and raised, the figure in Georgia. */
.cx-cur{display:inline-block;margin-right:.08em;font:600 .34em/1 var(--sans);font-style:normal;letter-spacing:.06em;vertical-align:.95em;color:inherit;opacity:.72}
.cx-cta-price b .cx-cur{font-size:.42em;vertical-align:.8em}
.cx-offer-price strong .cx-cur{font-size:.26em;vertical-align:1.6em;margin-right:.12em;color:#d4b27a;opacity:1}
.shopping-rail-total strong .cx-cur,.bundle-total .cx-cur,.product-footer .cx-cur{font-size:.42em;vertical-align:.7em}
.product-price .cx-cur,.bundle-item .cx-cur{font-size:.62em;vertical-align:.18em}
.shopping-rail-total strong,.cx-offer-price strong,.product-price{font-variant-numeric:lining-nums proportional-nums}

/* The opening: the eyebrow and the line underneath share the headline's left edge and rhythm. */
.cx-hero-intro p{color:var(--cx-body)!important;letter-spacing:-.005em;text-wrap:pretty}
.cx-hero-intro small{display:inline-flex;align-items:center;gap:9px}
.cx-hero-intro small:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cx-brass)}

/* The closing pass: headline breathes; price reads as the hero of the card. */
.cx-finale-copy h2{text-wrap:balance}
.cx-offer-label{letter-spacing:.22em!important}
/* The header's price: the currency sits small and tight against the figure (not the label style of "Preview price"). */
.cx-cta-price b small.cx-cur{font:600 10.5px/1 var(--sans)!important;letter-spacing:.02em!important;text-transform:none!important;color:inherit!important;opacity:.7;vertical-align:14px;margin-right:2px}
@media(max-width:700px){.cx-cta-price b small.cx-cur{font-size:8px!important;vertical-align:5px;opacity:.85;color:#fff!important}}
/* Currency, final: a smaller Georgia italic on the baseline, so "US$1" reads as one word with a quieter prefix. */
.cx-cur,.cx-cta-price b small.cx-cur{display:inline!important;margin:0 .04em 0 0!important;font:italic 400 .56em/1 var(--serif)!important;letter-spacing:0!important;text-transform:none!important;vertical-align:baseline!important;opacity:.72!important}
.cx-offer-price strong .cx-cur{font-size:.42em!important;color:#d4b27a!important;opacity:1!important}
.product-price .cx-cur,.bundle-item .cx-cur,.product-footer .cx-cur{font:inherit!important;opacity:1!important;margin:0!important}
@media(max-width:700px){.cx-cta-price b small.cx-cur{font-size:.7em!important;color:#fff!important;opacity:.85!important}}
@media(max-width:700px){.cx-offer-price strong{font-size:64px!important}.cx-offer-price strong .cx-cur{font-size:.38em!important}}

/* ===================================================================================== */
/* v41 — coming soon you can't miss; numerals with room to breathe                        */
/* ===================================================================================== */
/* The badge: solid brass, white caps, a live dot. Used in the eyebrow, the caption and the section break. */
.cx-soon{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 13px 0 11px;border-radius:999px;background:var(--cx-brass);color:#fff!important;font:600 10.5px/1 var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 22px #a780463d,inset 0 0 0 1px #ffffff26;vertical-align:middle}
.cx-soon i{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:#fff}
.cx-soon i:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #ffffffb3;animation:cx-soon-ping 1.8s var(--cx-ease) infinite}
@keyframes cx-soon-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.cx-soon.is-small{height:22px;padding:0 10px;font-size:9.5px!important;letter-spacing:.14em!important;box-shadow:none}
/* In the eyebrow: the badge leads, the feature name follows; no rule. */
.story-sticky .story-copy #chapter-kicker.has-soon{gap:12px!important;margin-bottom:22px!important}
.story-sticky .story-copy #chapter-kicker.has-soon:before{display:none}
.cx-soon-what{letter-spacing:.22em}
html[data-cx-act="2"] .cx-soon{background:#d4b27a;color:#1d1c1a!important}
html[data-cx-act="2"] .cx-soon i{background:#1d1c1a}
html[data-cx-act="2"] .cx-soon i:after{border-color:#1d1c1ab3}
/* In the caption: the badge sits after the words, and the brass point steps aside. */
.scene-footnote.has-soon{gap:10px}
.scene-footnote.has-soon:before{display:none}
/* In the section break: beside the name. */
.cx-break-mark b .cx-soon{margin-left:14px;vertical-align:.35em;font-style:normal}
@media(prefers-reduced-motion:reduce){.cx-soon i:after{animation:none;opacity:0}}

/* The chapter numeral: room for the italic overhang on the right and the descending stroke below. */
.cx-bignum{height:.96em!important;line-height:.96!important;padding:0 .2em 0 .02em;overflow:hidden}
.cx-bignum span{line-height:.96}
/* Desktop: the numeral sits fully above the eyebrow, whatever the window height. */
@media(min-width:1000px) and (min-height:600px){
 .cx-bignum{font-size:clamp(84px,calc(14vh - 10px),180px)!important;top:7vh!important}
 .story-sticky .story-copy,.story-sticky[data-phase] .story-copy{top:calc(10vh + clamp(84px,calc(14vh - 10px),180px) * .96 + 18px)!important}
}

/* ===================================================================================== */
/* v42 — chapter numerals: one spot, wiped in, never clipped or shifted                   */
/* ===================================================================================== */
/* Old and new share a single grid cell, so the number never jumps sideways when the old one leaves. */
.cx-bignum{display:grid!important;justify-items:start;height:auto!important;overflow:visible!important;padding:0!important;line-height:1!important}
.cx-bignum span{grid-area:1/1;position:static!important;inset:auto!important;line-height:1;padding:0 .14em .16em .02em;animation:cx-num-wipe .95s var(--cx-ease) both!important}
.cx-bignum span.is-leaving{animation:cx-num-fade .4s var(--cx-ease-io) both!important}
/* The wipe reaches past the glyph box, so the italic overhang and the oldstyle descenders (3, 4, 5, 7, 9) stay whole. */
@keyframes cx-num-wipe{from{clip-path:inset(-30% 104% -30% -10%);opacity:.35}to{clip-path:inset(-30% -30% -30% -10%);opacity:1}}
@keyframes cx-num-fade{to{opacity:0;filter:blur(2px)}}
/* "01" belongs to the opening, where the numeral is hidden; it never flashes on the way into section 02. */
.cx-bignum[data-num="01"]{opacity:0!important}
@media(prefers-reduced-motion:reduce){.cx-bignum span,.cx-bignum span.is-leaving{animation:none!important}}
/* Desktop: the eyebrow starts below the full numeral, descenders included. */
@media(min-width:1000px) and (min-height:600px){
 .story-sticky .story-copy,.story-sticky[data-phase] .story-copy{top:calc(10vh + clamp(84px,calc(14vh - 10px),180px) * 1.16 + 8px)!important}
}

/* ===================================================================================== */
/* v43 — the loader fills on the compositor, so it never stalls while the room loads      */
/* ===================================================================================== */
/* Word: an ink layer slides up behind a mask (two opposite transforms), a brass line on its edge.
   The curve rises fast, then slows toward 92 %; the script finishes it the moment the room is ready. */
.cx-loader-word:after{display:none!important}
.cx-lw-fill{position:absolute!important;inset:0!important;padding:0!important;overflow:hidden;clip-path:none!important;animation:cx-lw-wrap 12s linear both;will-change:transform}
.cx-lw-fill>span{position:absolute;inset:0;padding:0 .14em .05em .06em;color:var(--cx-ink);animation:cx-lw-inner 12s linear both;will-change:transform}
.cx-lw-fill:before{content:'';position:absolute;left:4%;right:4%;top:0;z-index:1;height:1px;background:var(--cx-brass)}
.cx-loader-bar i{transform-origin:0 50%;animation:cx-lw-bar 12s linear both;will-change:transform}
@keyframes cx-lw-wrap{0.00%{transform:translateY(100.00%)}1.67%{transform:translateY(84.22%)}3.33%{transform:translateY(70.93%)}5.00%{transform:translateY(60.05%)}6.67%{transform:translateY(51.49%)}8.33%{transform:translateY(45.17%)}10.00%{transform:translateY(40.94%)}11.67%{transform:translateY(38.64%)}13.33%{transform:translateY(38.00%)}16.67%{transform:translateY(34.47%)}20.83%{transform:translateY(30.65%)}25.00%{transform:translateY(27.37%)}33.33%{transform:translateY(22.17%)}41.67%{transform:translateY(18.37%)}54.17%{transform:translateY(14.49%)}66.67%{transform:translateY(12.06%)}83.33%{transform:translateY(10.17%)}100.00%{transform:translateY(9.16%)}}
@keyframes cx-lw-inner{0.00%{transform:translateY(-100.00%)}1.67%{transform:translateY(-84.22%)}3.33%{transform:translateY(-70.93%)}5.00%{transform:translateY(-60.05%)}6.67%{transform:translateY(-51.49%)}8.33%{transform:translateY(-45.17%)}10.00%{transform:translateY(-40.94%)}11.67%{transform:translateY(-38.64%)}13.33%{transform:translateY(-38.00%)}16.67%{transform:translateY(-34.47%)}20.83%{transform:translateY(-30.65%)}25.00%{transform:translateY(-27.37%)}33.33%{transform:translateY(-22.17%)}41.67%{transform:translateY(-18.37%)}54.17%{transform:translateY(-14.49%)}66.67%{transform:translateY(-12.06%)}83.33%{transform:translateY(-10.17%)}100.00%{transform:translateY(-9.16%)}}
@keyframes cx-lw-bar{0.00%{transform:scaleX(0.0000)}1.67%{transform:scaleX(0.1578)}3.33%{transform:scaleX(0.2907)}5.00%{transform:scaleX(0.3995)}6.67%{transform:scaleX(0.4851)}8.33%{transform:scaleX(0.5483)}10.00%{transform:scaleX(0.5906)}11.67%{transform:scaleX(0.6136)}13.33%{transform:scaleX(0.6200)}16.67%{transform:scaleX(0.6553)}20.83%{transform:scaleX(0.6935)}25.00%{transform:scaleX(0.7263)}33.33%{transform:scaleX(0.7783)}41.67%{transform:scaleX(0.8163)}54.17%{transform:scaleX(0.8551)}66.67%{transform:scaleX(0.8794)}83.33%{transform:scaleX(0.8983)}100.00%{transform:scaleX(0.9084)}}
/* Away: the whole sheet lifts in one move (a transform, also on the compositor). Nothing fades first. */
.cx-loader{clip-path:none!important;transition:transform .9s cubic-bezier(.7,0,.2,1),border-radius .9s,visibility 0s .95s!important;will-change:transform}
.cx-loader.is-done{clip-path:none!important;transform:translateY(-100%);border-radius:0 0 48px 48px;visibility:hidden}
.cx-loader.is-done>*{opacity:1!important;transform:none!important}