/* chez v15 — the cinema layer. Loaded last. Same paper, charcoal and brass; same Georgia and sans; same wordmark.
   New: a measuring preloader, point-cloud hero, drafting annotations, a brass cursor, chapter numerals,
   an index, a brass ribbon, an opening design lab and a full-scale footer wordmark. */
:root{--cx-ease:cubic-bezier(.16,1,.3,1);--cx-ease-io:cubic-bezier(.76,0,.24,1);--cx-brass:#a78046;--cx-brass-2:#c9a46a;--cx-ink:#302e2b;--cx-paper:#f6f5f2}

/* HUD type: the existing sans, set small, spaced and tabular, like a drafting legend. */
.cx-hud{font:500 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--ui-ink-3,#8b857c)}
.cx-hud i{font-style:normal;color:var(--cx-brass);margin:0 .35em}

/* ---------- Preloader ---------- */
.cx-loader{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr auto;padding:22px 3.5% 28px;background:var(--cx-paper);color:var(--cx-ink);
 clip-path:inset(0 0 0 0 round 0);transition:clip-path 1.1s var(--cx-ease-io),visibility 0s 1.2s;animation:cx-failsafe .5s 12s forwards}
.cx-loader.is-done{clip-path:inset(0 0 100% 0 round 0 0 48px 48px);visibility:hidden}
@keyframes cx-failsafe{to{opacity:0;visibility:hidden}}
.cx-loader-top{display:flex;justify-content:space-between;align-items:center}
.cx-loader-top .cx-hud{text-align:right}
.cx-loader-status{align-self:center;justify-self:center;min-width:24ch;text-align:center;color:var(--cx-ink)}
.cx-loader-status:before{content:'';display:block;width:7px;height:7px;margin:0 auto 18px;border-radius:50%;background:var(--cx-brass);box-shadow:0 0 0 6px #a780461f;animation:cx-pulse 1.6s ease-in-out infinite}
@keyframes cx-pulse{50%{box-shadow:0 0 0 12px #a7804600}}
.cx-loader-count{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.cx-loader-count b{font:italic 400 clamp(110px,19vw,300px)/.78 var(--serif);letter-spacing:-.06em;color:var(--cx-ink);font-variant-numeric:tabular-nums}
.cx-loader-count b sup{font-size:.18em;vertical-align:top;margin-left:.1em;color:var(--cx-brass);font-style:normal;letter-spacing:0}
.cx-loader-count .cx-hud{max-width:240px;text-align:right;line-height:1.7;padding-bottom:10px}
.cx-loader-bar{height:1px;margin-top:22px;background:#302e2b1a;overflow:hidden}
.cx-loader-bar i{display:block;height:100%;background:var(--cx-brass);transform-origin:0 50%;transform:scaleX(0)}
.cx-loader>*{transition:opacity .5s,transform .9s var(--cx-ease-io)}
.cx-loader.is-done>*{opacity:0;transform:translateY(-40px)}

/* ---------- Header: fixed, glass pills; the nav folds away once you are in the room ---------- */
.header{position:fixed;inset:0 0 auto;z-index:60;pointer-events:none}
.header>*{pointer-events:auto}
.header nav{padding:5px 6px;border-radius:999px;background:#ffffffb8;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 0 0 1px #302e2b10;gap:2px!important;transition:opacity .45s var(--cx-ease),transform .6s var(--cx-ease),visibility 0s}
.header nav a{padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}
.header nav a:hover{background:#302e2b0d;color:var(--cx-ink)}
.cx-scrolled .header nav{opacity:0;transform:translateY(-14px) scale(.96);visibility:hidden;transition:opacity .35s,transform .5s var(--cx-ease),visibility 0s .5s}
.header .brand{transition:opacity .3s}

/* ---------- Hero ---------- */
.cx-reveal .cx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.cx-reveal .cx-w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1.25s var(--cx-ease);transition-delay:calc(var(--i)*80ms + 60ms)}
.cx-reveal.cx-in .cx-w>span{transform:none}
.hero-copy h1 em{display:inline-block}
.hero-copy h1{text-wrap:initial}

/* The cutaway waits for its point cloud, then resolves. */
.cx-js:not(.cx-built) .story-sticky[data-phase=intro] .model-float>.cutaway,.model-float.cx-building>.cutaway{filter:opacity(0)}
.cx-js .model-float>.cutaway{transition:filter 1.1s var(--cx-ease)}
.cx-cloud{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.cx-cloud-settled{z-index:1;transition:opacity 1s var(--cx-ease)}
.cx-cloud-settled.is-fading{opacity:0}

/* Drafting annotations: a dot, a leader and a scrambled label. */
.cx-notes{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s}
.cx-notes.is-on{opacity:1}
.story-sticky:not([data-phase=intro]) .cx-notes{opacity:0;transition-duration:.2s}
.cx-note{position:absolute;top:var(--y);display:flex;align-items:center;gap:0;white-space:nowrap;transform:translateY(-50%)}
.cx-note{scale:var(--cx-inv,1)}
.cx-note.is-right{left:var(--x);margin-left:-4px;transform-origin:0 50%}
.cx-note.is-left{right:calc(100% - var(--x));margin-right:-4px;flex-direction:row-reverse;transform-origin:100% 50%}
.cx-note i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--cx-brass),0 0 0 6px #a7804624;flex:none}
.cx-note s{display:block;width:clamp(28px,4vw,64px);height:1px;background:linear-gradient(90deg,var(--cx-brass),#a7804640);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--cx-ease) .1s}
.cx-note.is-left s{transform-origin:100% 50%;background:linear-gradient(270deg,var(--cx-brass),#a7804640)}
.cx-notes.is-on s{transform:scaleX(1)}
.cx-note b,.cx-note em{font:500 10px/1 var(--sans);letter-spacing:.16em;font-style:normal;font-variant-numeric:tabular-nums}
.cx-note b{margin:0 8px;color:var(--cx-brass)}
.cx-note em{padding:6px 9px;border-radius:999px;background:#ffffffd9;box-shadow:0 0 0 1px #302e2b12;color:var(--cx-ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- Chapters: an outlined numeral behind the room, word rise, and a drafting sweep ---------- */
.cx-bignum{position:absolute;right:2.5%;bottom:13%;z-index:0;height:.8em;overflow:hidden;font:italic 400 clamp(180px,30vh,340px)/.8 var(--serif);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px #a7804652;pointer-events:none;user-select:none;opacity:0;transition:opacity .6s;font-variant-numeric:tabular-nums}
.cx-bignum span{display:block;animation:cx-num-in 1s var(--cx-ease) both}
.cx-bignum span+span{position:absolute;inset:0 0 auto auto}
.cx-bignum span.is-leaving{animation:cx-num-out .8s var(--cx-ease-io) both}
@keyframes cx-num-in{from{transform:translateY(100%)}}
@keyframes cx-num-out{to{transform:translateY(-100%)}}
.story-sticky:not([data-phase=intro]) .cx-bignum{opacity:1}
.story-sticky[data-phase=render] .cx-bignum,.story-sticky[data-phase=share] .cx-bignum{opacity:.55}
#chapter-title.cx-rise .cx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
#chapter-title.cx-rise .cx-w>span{display:inline-block;animation:cx-rise .95s var(--cx-ease) both;animation-delay:calc(var(--i)*55ms)}
@keyframes cx-rise{from{transform:translateY(105%)}}
.cx-sweep{position:absolute;top:16%;bottom:18%;left:2%;width:1px;z-index:9;pointer-events:none;opacity:0;background:var(--cx-brass);box-shadow:-40px 0 60px 10px #a780461a}
.cx-sweep.is-on{animation:cx-sweep .95s var(--cx-ease-io) both}
@keyframes cx-sweep{0%{opacity:0;transform:translateX(0)}15%{opacity:.9}85%{opacity:.9}100%{opacity:0;transform:translateX(62vw)}}
#chapter-kicker,#chapter-count{font-variant-numeric:tabular-nums}

/* Chapter rail: Lusion grid crosses at each act boundary. */
.flow-route button{position:relative}
.flow-route button:not(:first-child):before{content:'+'!important;position:absolute;left:-14px;top:-4px;width:auto!important;height:auto!important;background:none!important;font:300 12px/1 var(--sans);color:#302e2b59}

/* ---------- Magnetic pills ---------- */
.cx-magnet{transition:translate .5s var(--cx-ease),background .2s,border-color .2s,color .2s!important}

/* ---------- Grid marks ---------- */
.cx-rule{display:flex;justify-content:space-between;margin:0 3.5%;height:36px;align-items:center;pointer-events:none}
.cx-rule i{font:300 14px/1 var(--sans);font-style:normal;color:#302e2b59}
.cx-rule i:before{content:'+'}

/* ---------- Design lab: the card opens to full bleed; directions wipe in ---------- */
.design-lab{position:relative;z-index:2;clip-path:inset(0 var(--cx-inset,0%) round var(--cx-radius,24px));will-change:clip-path}
.design-images{scale:var(--cx-zoom,1);transform-origin:50% 60%}
.design-lab .design-photo{opacity:1!important;z-index:0;clip-path:circle(0% at var(--cx-x,50%) var(--cx-y,50%));transition:clip-path 0s linear 1.3s!important}
.design-lab .design-photo.active{z-index:1;clip-path:circle(150% at var(--cx-x,50%) var(--cx-y,50%));transition:clip-path 1.3s var(--cx-ease-io)!important}
.design-copy h2{font-size:clamp(56px,6.4vw,104px)!important;line-height:.96!important;letter-spacing:-.06em!important}

/* ---------- Possibility: editorial scale, rows that preview on hover ---------- */
.possibility-statement{position:relative;z-index:2;display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:5vw;row-gap:28px;align-items:end;padding:150px 3.5% 170px!important;max-width:none!important;margin:0!important}
.possibility-statement>.eyebrow{grid-column:1/-1}
.possibility-statement h2{grid-column:1/-1;max-width:none!important;font-size:clamp(64px,8.6vw,156px)!important;line-height:.9!important;letter-spacing:-.065em!important;margin:0!important}
@media(min-width:900px){.possibility-statement h2 em{white-space:nowrap}}
.possibility-statement h2 br{display:block}
.possibility-statement>p:not(.eyebrow){grid-column:2;grid-row:3;max-width:360px;font-size:17px!important;line-height:1.55!important;color:var(--ui-ink-2,#716c65)}
.possibility-statement .experiment-rail{grid-column:2;grid-row:4;width:100%!important;margin:0!important}
.experiment-rail button{transition:padding .5s var(--cx-ease),background .3s,color .3s!important}
.experiment-rail button:hover{padding-left:18px!important;padding-right:18px!important;background:var(--cx-ink)!important;color:#fff!important;border-radius:14px}
.experiment-rail button:hover svg,.experiment-rail button:hover>span{color:var(--cx-brass-2)!important}
.cx-float{position:fixed;left:0;top:0;z-index:940;width:260px;aspect-ratio:4/3;margin:-210px 0 0 30px;border-radius:16px;overflow:hidden;pointer-events:none;background:#efede9;box-shadow:0 30px 70px #302e2b33;opacity:0;scale:.6;transition:opacity .35s,scale .5s var(--cx-ease)}
.cx-float.is-on{opacity:1;scale:1}
.cx-float img{width:100%;height:100%;object-fit:cover}
.cx-fade{opacity:0;transform:translateY(28px);transition:opacity 1s var(--cx-ease),transform 1.2s var(--cx-ease)}
.cx-fade.cx-in{opacity:1;transform:none}
.cx-reveal.cx-fade{opacity:1;transform:none}

/* ---------- The ribbon ---------- */
#main{position:relative}
.cx-ribbon{position:absolute;left:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.cx-ribbon path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cx-ribbon-body{stroke:url(#cx-brass);stroke-width:30}
.cx-ribbon-shine{stroke:#f3dfb6;stroke-width:3;opacity:.7;transform:translate(-3px,-7px)}

/* ---------- Closing ---------- */
.closing{position:relative;z-index:2}
.closing h2{font-size:clamp(56px,6.6vw,110px)!important;line-height:.95!important}
.closing-vision img{transition:transform 1.6s var(--cx-ease)}
.closing:hover .closing-vision img{transform:scale(1.03)}

/* ---------- Footer: the wordmark at full scale ---------- */
footer{flex-wrap:wrap;row-gap:0}
.cx-giant{order:-1;flex:1 0 100%;display:flex;align-items:flex-end;justify-content:space-between;gap:3vw;padding:9vh 0 3vh;margin-bottom:22px;border-bottom:1px solid #302e2b14;overflow:hidden;user-select:none}
.cx-giant b{display:flex;font:italic 400 clamp(130px,30vw,520px)/.74 var(--serif);letter-spacing:-.075em;color:var(--cx-ink);padding:0 .06em .08em 0}
.cx-giant b span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--cx-ease) calc(var(--i)*90ms),translate .9s var(--cx-ease)}
.cx-giant.cx-in b span{transform:none}
.cx-giant b span:nth-child(odd){translate:calc(var(--mx,0)*-26px) calc(var(--my,0)*-18px)}
.cx-giant b span:nth-child(even){translate:calc(var(--mx,0)*18px) calc(var(--my,0)*14px)}
.cx-giant b span:last-child{color:var(--cx-brass)}
.cx-giant-side{display:grid;gap:14px;justify-items:end;text-align:right;padding-bottom:2.2vw}
.cx-giant-side small{font:500 10px/1.7 var(--sans);letter-spacing:.16em;color:var(--ui-ink-3,#8b857c)}
.cx-giant-side small i{font-style:normal;font-weight:300}
.cx-giant-side span{font:italic 400 clamp(20px,2vw,30px)/1.1 var(--serif);letter-spacing:-.03em;color:var(--cx-ink);max-width:14ch}

/* ---------- Small screens ---------- */
@media(max-width:700px){
 .cx-loader{padding:18px 20px 22px}
 .cx-loader-count{flex-direction:column;align-items:flex-start}
 .cx-loader-count .cx-hud{text-align:left;padding:0}
 .header nav{display:none}
 .header{gap:8px!important}
 .header .brand{margin-right:auto}
 .nav-cta{white-space:nowrap;padding:0 12px!important;font-size:12px!important}
  .cx-notes{display:none}
 .cx-bignum{font-size:120px;bottom:22%;right:4%}
 .cx-rule{margin:0 20px}
 .possibility-statement{grid-template-columns:1fr;padding:96px 20px 110px!important}
 .possibility-statement>p:not(.eyebrow),.possibility-statement .experiment-rail{grid-column:1;grid-row:auto}
 .possibility-statement h2{font-size:clamp(52px,15vw,84px)!important}
 .cx-ribbon-body{stroke-width:16}
 .cx-giant{flex-direction:column;align-items:flex-start;padding-top:6vh}
 .cx-giant-side{justify-items:start;text-align:left;padding:0}
}

/* ---------- Reduced motion: everything arrives still ---------- */
@media(prefers-reduced-motion:reduce){
 .cx-loader{display:none}
 .cx-reveal .cx-w>span,.cx-giant b span{transform:none!important;transition:none!important}
 .cx-fade{opacity:1;transform:none;transition:none}
 #chapter-title.cx-rise .cx-w>span,.cx-bignum span{animation:none!important}
 .design-lab .design-photo,.design-lab .design-photo.active{transition:none!important}
}
.cx-cloud-live{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}