/* Loaded only by the commercial landing pages (scripts/build-commercial-pages.mjs).
   One Magrade universe, three registers:
   night (supplier marmer) — a gallery after hours, raking light on polished marble;
   stone (gudang)          — industrial daylight, concrete, safety yellow from the real crane;
   ink   (supplier granit) — obsidian and mineral glints.
   Stages (.st) are sticky viewports the WebGL renderer draws into when html.cx-3d is set.
   Without it every stage collapses into a normal, photographic, fully readable section. */
.cx{
  --bg:#0d0c0a;--surface:#161411;--surface-2:#1e1b17;--ink:#f2ece2;--text:#d9d2c6;--muted:rgba(242,236,226,.7);--faint:rgba(242,236,226,.58);
  --line:rgba(242,236,226,.12);--line-2:rgba(242,236,226,.24);--accent:#c9a467;--band:#14120f;--band-text:#ece5d9;
  --wa:#2c7a57;--wa-hover:#246a4b;--paper:#f3eee6;--paper-ink:#1b1814;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;--label:Cinzel,Georgia,serif;--sans:Manrope,"Segoe UI",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,5vw,72px);--wide:1320px;--ease:cubic-bezier(.22,1,.36,1);--heavy:cubic-bezier(.65,0,.35,1);
  margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;
}
.cx--stone{
  --bg:#e6e3dd;--surface:#f3f1ed;--surface-2:#dcd8d0;--ink:#151412;--text:#2b2925;--muted:#55514a;--faint:#625d55;
  --line:rgba(21,20,18,.14);--line-2:rgba(21,20,18,.28);--accent:#7a5200;--band:#151412;--band-text:#ebe8e2;--wa:#1d5c43;--wa-hover:#154632;
}
.cx--ink{
  --bg:#070707;--surface:#111111;--surface-2:#191919;--ink:#efeeec;--text:#d6d4d0;--muted:rgba(239,238,236,.7);--faint:rgba(239,238,236,.58);
  --line:rgba(239,238,236,.11);--line-2:rgba(239,238,236,.22);--accent:#aebfc4;--band:#0e0e0e;--band-text:#ecebe8;
}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx img{display:block;max-width:100%;height:auto}
:where(.cx) a{color:inherit}
.cx h1,.cx h2,.cx h3,.cx p,.cx figure,.cx ol,.cx ul,.cx dl,.cx dd{margin:0}
.cx ol,.cx ul{padding:0;list-style:none}
.cx address{font-style:normal}
.cx :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cx main{display:block}
.cx main>section:not(.st),.cx main>aside,.cx main>nav{width:min(100% - 2*var(--gutter),var(--wide));margin-inline:auto}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-skip{position:absolute;left:16px;top:8px;z-index:100;padding:10px 16px;background:var(--ink);color:var(--bg);transform:translateY(-200%);text-decoration:none}
.cx-skip:focus{transform:none}

/* Type */
.cx h1{font:500 clamp(40px,5vw,80px)/.98 var(--display);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.cx h2{font:500 clamp(32px,4.2vw,60px)/1.03 var(--display);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.cx h2 em,.cx h1 em{font-style:italic;color:var(--accent)}
.cx h3{font:600 17px/1.35 var(--sans);color:var(--ink)}
.cx-eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px!important}
.cx-lede{max-width:54ch;font-size:clamp(16px,1.3vw,18px);color:var(--muted);margin-top:24px!important}
.cx-fineprint{font-size:12.5px;line-height:1.6;color:var(--faint);max-width:70ch}

/* Header + footer (shared editorial markup), overlaid on the opening stage */
.cx .editorial-header{position:absolute;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;padding:0 var(--gutter)}
.cx .editorial-brand{display:inline-flex;align-items:center;min-height:44px}
.cx .editorial-brand img{width:118px;height:28px;object-fit:contain}
.cx .editorial-header .global-nav a,.cx .editorial-header .insights-nav summary{color:#f4f1ec;text-decoration:none;font-family:var(--sans);font-size:13px;letter-spacing:.04em}
.cx .editorial-header .global-nav a:hover{border-bottom-color:currentColor}
.cx--stone .editorial-brand img{filter:invert(1) brightness(1.7)}
.cx .editorial-mobile{display:none;position:relative}
.cx .editorial-mobile>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(244,241,236,.35);border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f4f1ec;background:rgba(10,10,10,.35);backdrop-filter:blur(10px)}
.cx .editorial-mobile>summary::-webkit-details-marker{display:none}
.cx .editorial-mobile>nav{position:absolute;right:0;top:calc(100% + 8px);width:min(280px,calc(100vw - 32px));display:flex;flex-direction:column;padding:10px;background:#171e1a;color:#e7e9e0;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.cx .editorial-mobile>nav>a{min-height:46px;display:flex;align-items:center;padding:0 12px;border-radius:8px;text-decoration:none;font-size:15px}
.cx .editorial-mobile .insights-nav{display:block}
.cx .editorial-mobile .insights-nav summary{justify-content:flex-start;padding:0 12px;color:#e7e9e0}
.cx .editorial-mobile .insights-nav__panel{position:static;transform:none;width:100%;box-shadow:none;margin:4px 0 8px}
.cx .editorial-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px var(--gutter) 32px;border-top:1px solid var(--line);color:var(--faint);margin-top:clamp(72px,9vw,130px)}
.cx .editorial-footer nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.cx .editorial-footer a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:13.5px;color:var(--muted)}
.cx .editorial-footer a:hover{color:var(--ink)}
.cx .editorial-footer>a:first-child{font:600 13px/1 var(--label);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}

/* Buttons and links */
.cx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;font:600 15px/1.2 var(--sans);text-decoration:none;transition:background-color .25s,transform .4s var(--ease)}
.cx-btn--wa{background:var(--wa);color:#fff}
.cx-btn--wa:hover{background:var(--wa-hover)}
.cx-btn:active{transform:scale(.97)}
.cx-wa-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.cx-arrow{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.cx-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 15px/1.3 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.cx-link:hover .cx-arrow,.cx-related a:hover .cx-arrow{transform:translateX(4px)}
.cx-crumbs{display:flex;flex-wrap:wrap;gap:8px;font:400 12px/1.4 var(--mono);letter-spacing:.04em;color:rgba(244,241,236,.74)}
.cx-crumbs a{text-decoration:none;color:rgba(244,241,236,.8)}

/* Section rhythm */
.cx main>*+*{margin-top:clamp(96px,11vw,170px)}
.cx main>.st+*,.cx main>*+.st{margin-top:0}
.cx main>.st+section:not(.st){padding-top:clamp(96px,11vw,170px)}
.cx-head{margin-bottom:clamp(32px,4vw,56px);max-width:880px}
.cx-head--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 64px;align-items:end;max-width:none}
.cx-head--split>p{color:var(--muted);max-width:52ch}

/* ============ STAGES ============ */
.st{position:relative;isolation:isolate;color:#f4f1ec}
.st__sticky{position:relative;min-height:100svh;overflow:hidden}
.st__canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.cx-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.st__ui{position:relative;z-index:2;min-height:100svh;padding:120px var(--gutter) clamp(28px,4vw,48px)}
.st .cx-crumbs{position:absolute;top:96px;left:var(--gutter)}
.st h1,.st h2{color:#fbf8f2}
.st .cx-lede{color:rgba(244,241,236,.78)}
.st .cx-link{color:#fff;border-color:rgba(255,255,255,.35)}
.st__hint{font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.66)}
.st__note{position:absolute;right:var(--gutter);bottom:18px;z-index:3;display:flex;gap:8px;max-width:44ch;font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;color:rgba(244,241,236,.62);text-align:right}
.cx-3d .st__sticky{position:sticky;top:0;height:100svh;min-height:0}
.cx-3d .st__ui{position:absolute;inset:0;min-height:0}
.cx-3d .st[data-pinned]{height:var(--len,500vh)}
.cx-3d .st__poster{opacity:0;transition:opacity .6s}
.cx-3d .st.is-3d-failed .st__poster{opacity:1}

/* ---- Bookmatch hero (night) ---- */
.st--bookmatch .st__sticky{background:radial-gradient(120% 90% at 70% 40%,#1b1712 0%,#0d0c0a 62%)}
.st__poster--book{position:absolute;inset:12% 6% 14% 44%;display:grid;grid-template-columns:1fr 1fr;gap:2px;z-index:0;filter:brightness(.82)}
.st__poster--book img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.st__poster--book .is-mirror{transform:scaleX(-1)}
.st--bookmatch .st__sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,10,.92) 0%,rgba(13,12,10,.55) 34%,rgba(13,12,10,0) 58%),linear-gradient(0deg,rgba(13,12,10,.75),rgba(13,12,10,0) 30%)}
.st__ui--hero{display:flex;flex-direction:column;justify-content:flex-end}
.st__copy{max-width:640px}
.st__caption{position:absolute;right:var(--gutter);bottom:clamp(64px,10vh,110px);display:grid;gap:4px;text-align:right;font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:rgba(244,241,236,.6)}
.st__caption b{font:italic 500 clamp(24px,2.4vw,34px)/1 var(--display);letter-spacing:0;color:#fbf8f2}
.st__caption .st__hint{margin-top:10px}

/* ---- Manifest (night) ---- */
.cx-manifest h2{font-size:clamp(36px,5.4vw,82px);line-height:1;max-width:16ch}
.cx-manifest__cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,72px);align-items:end}
.cx-manifest__cols>p{color:var(--muted);font-size:17px;max-width:56ch}
.cx-manifest__cols b{color:var(--ink);font-weight:600}
.cx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--line-2);padding-top:22px}
.cx-facts dt{font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cx-facts dd{margin-top:8px;font:500 21px/1.2 var(--display);color:var(--ink)}

/* ---- Slab book (night, pinned) ---- */
.st--book{--len:calc(var(--pages,14) * 52vh + 100vh)}
.st--book .st__sticky{background:radial-gradient(110% 80% at 55% 45%,#1a1612 0%,#0d0c0a 65%)}
.st__ui--book{display:grid;grid-template-columns:minmax(0,420px) 1fr;grid-template-rows:auto 1fr;gap:24px}
.st__bookhead{grid-column:1/-1;max-width:640px}
.st__bookhead h2{font-size:clamp(30px,3.4vw,50px)}
.st__bookhead .st__hint{margin-top:14px}
.st__pages{display:grid;gap:28px}
.st__pages li{display:grid;gap:6px;border-top:1px solid var(--line-2);padding-top:16px}
.st__page-no{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent)}
.st__page-no i{font-style:normal;color:rgba(244,241,236,.58)}
.st__page-tone{font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.68)}
.st__pages h3{font:500 clamp(30px,3.2vw,46px)/1.05 var(--display)}
.st__pages h3 a{text-decoration:none}
.st__pages h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.st__pages p{color:rgba(244,241,236,.7);font-size:15px;max-width:40ch}
.st__page-thumb{width:100%;max-width:420px;aspect-ratio:2/1;object-fit:cover;border-radius:2px;margin-top:8px}
.cx-3d .st__pages{position:relative;align-self:end}
.cx-3d .st__pages li{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(-10px);transition:opacity .18s linear,transform .3s var(--ease);pointer-events:none}
.cx-3d .st__pages li.is-active{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s .16s var(--ease),transform .8s .16s var(--ease)}
.cx-3d .st__page-thumb{display:none}
.cx-3d .st--book .st__sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,10,.85) 0%,rgba(13,12,10,.35) 30%,rgba(13,12,10,0) 48%)}
html:not(.cx-3d) .st__pages{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-column:1/-1}

/* ---- Index (night) ---- */
.cx-index__list{columns:2;column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--line-2)}
.cx-index__list li{break-inside:avoid;border-bottom:1px solid var(--line)}
.cx-index__list a{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:12px;padding:15px 0;text-decoration:none}
.cx-index__no{font:400 12px/1 var(--mono);color:var(--faint)}
.cx-index__list b{font:500 clamp(21px,1.8vw,26px)/1.1 var(--display);color:var(--ink);transition:transform .45s var(--ease),color .3s}
.cx-index__meta{font:400 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint);text-align:right}
.cx-index__list img{position:absolute;right:30%;top:50%;width:150px;height:200px;object-fit:cover;border-radius:2px;opacity:0;transform:translate(0,-50%) rotate(-4deg) scale(.92);transition:opacity .3s,transform .5s var(--ease);pointer-events:none;z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.cx-index__list a:hover b,.cx-index__list a:focus-visible b{transform:translateX(10px);color:var(--accent)}
.cx-index__list a:hover img,.cx-index__list a:focus-visible img{opacity:1;transform:translate(0,-50%) rotate(-2deg) scale(1)}
.cx-index__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:28px}
.cx-index__foot .cx-fineprint{flex:1 1 360px}
.cx-also{flex:1 1 100%;order:-1;font-size:14.5px;color:var(--muted)}
.cx-also a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--line-2)}

/* ---- Aisle (stone, pinned) ---- */
.st--aisle{--len:560vh}
.st--aisle .st__sticky{background:#dcd8cf}
.st__photo{position:absolute;inset:0;z-index:1}
.st__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.st__photo figcaption{position:absolute;right:var(--gutter);top:100px;font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.st__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.55) 0%,rgba(14,13,11,.05) 30%,rgba(14,13,11,.3) 55%,rgba(14,13,11,.88) 100%)}
.cx-3d .st--aisle .st__photo{opacity:calc(1 - var(--p,0) * 11);transform:scale(calc(1 + var(--p,0) * .6));transform-origin:50% 52%}
.st__ui--aisle{display:flex;flex-direction:column;justify-content:flex-end}
.st__copy--aisle{max-width:760px}
.cx-3d .st__copy--aisle{opacity:calc(1 - var(--p,0) * 9);transform:translateY(calc(var(--p,0) * -260px))}
.st__hint--scroll{margin-top:28px}
.st__stops{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:48px}
.st__stops{--accent:#f2b705}
.st__stops li{background:rgba(21,20,18,.78);backdrop-filter:blur(14px);border-top:3px solid var(--accent);padding:22px 24px;color:#ebe8e2}
.st__stops h2{font:500 clamp(26px,2.6vw,38px)/1.05 var(--display);color:#fff;margin:10px 0 8px}
.st__stops p{font-size:14.5px;color:rgba(235,232,226,.78)}
.st__stop-no{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent)}
.st__stop-no i{font-style:normal;color:rgba(235,232,226,.45);margin-left:4px}
.st__stop--end .cx-actions{margin-top:20px}
.cx-3d .st__stops{position:absolute;right:var(--gutter);bottom:clamp(48px,8vh,96px);width:min(420px,calc(100% - 2*var(--gutter)));display:block;margin:0}
.cx-3d .st__stops li{position:absolute;right:0;bottom:0;width:100%;opacity:0;transform:translateY(-10px);transition:opacity .18s linear,transform .3s var(--ease);pointer-events:none}
.cx-3d .st__stops li.is-active{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s .16s var(--ease),transform .8s .16s var(--ease)}
.cx-3d .st__stop--end{width:min(560px,100%)!important;background:rgba(21,20,18,.86)!important}
.cx-3d .st--aisle .st__note,.cx-3d .st--worktop .st__note{left:var(--gutter);right:auto;text-align:left}
.cx-3d .st--aisle .st__note{color:rgba(21,20,18,.78);opacity:clamp(0,calc((var(--p,0) - .07) * 14),1)}
.cx-3d .st--worktop .st__note{left:auto;right:var(--gutter);text-align:right}
/* The walk ends by stepping out into daylight; a soft vignette keeps the render photographic. */
.cx-3d .st--aisle .st__canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 46%,rgba(0,0,0,0) 55%,rgba(20,18,15,.38) 100%),radial-gradient(60% 55% at 50% 42%,rgba(250,248,242,calc((var(--p,0) - .86) * 6)) 0%,rgba(250,248,242,0) 100%)}

/* ---- Worktop (ink, pinned) ---- */
.st--worktop{--len:540vh}
.st--worktop .st__sticky{background:radial-gradient(90% 70% at 60% 50%,#121212 0%,#070707 70%)}
.st__poster--slab{position:absolute;inset:22% 6% 22% 46%;z-index:0}
.st__poster--slab img{width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 50px 90px rgba(0,0,0,.6)}
.st__ui--worktop{display:flex;flex-direction:column;justify-content:flex-end;gap:40px}
.st__chapter{max-width:560px}
.st__chapter--hero{max-width:640px}
.st__chapter-no{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent)}
.st__chapter-no i{font-style:normal;color:rgba(239,238,236,.58)}
.st__chapter h2{margin:14px 0 14px}
.st__chapter>p{color:rgba(239,238,236,.72);max-width:46ch}
.st__swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.st__swatches button,.st__toggle button{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 16px 6px 6px;border:1px solid rgba(239,238,236,.2);border-radius:999px;background:rgba(255,255,255,.03);color:#efeeec;cursor:pointer;font:500 14px/1.2 var(--sans);text-align:left;transition:border-color .3s,background-color .3s}
.st__swatches img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.st__swatches small{display:block;font:400 10.5px/1.4 var(--mono);letter-spacing:.06em;color:rgba(239,238,236,.55)}
.st__swatches button[aria-pressed=true],.st__toggle button[aria-pressed=true]{border-color:var(--accent);background:rgba(174,191,196,.12)}
.st__toggle{display:inline-flex;gap:6px;margin-top:22px;padding:4px;border:1px solid rgba(239,238,236,.16);border-radius:999px}
.st__toggle button{min-height:44px;padding:0 20px;border:0}
.st__more{display:inline-block;margin:16px 0 0 18px;font-size:14px;color:#efeeec;text-underline-offset:5px}
html:not(.cx-3d) .st__ui--worktop{padding-top:140px}
html:not(.cx-3d) .st__chapter:not(.st__chapter--hero){border-top:1px solid var(--line-2);padding-top:22px}
html:not(.cx-3d) .st--worktop .st__sticky{display:flex;flex-direction:column}
html:not(.cx-3d) .st__poster--slab{position:relative;inset:auto;order:2;margin:0 var(--gutter);aspect-ratio:2/1;z-index:2}
html:not(.cx-3d) .st__toggle,html:not(.cx-3d) .st__swatches{display:none}
/* Without the 3D there is nothing to scroll through and no illustration to disclose. */
html:not(.cx-3d) .st__note,html:not(.cx-3d) .st__hint,html:not(.cx-3d) .st__caption .st__hint{display:none}
.cx-3d .st__chapter{position:absolute;left:var(--gutter);bottom:clamp(48px,8vh,96px);width:min(560px,calc(100% - 2*var(--gutter)));opacity:0;transform:translateY(-10px);transition:opacity .18s linear,transform .3s var(--ease);pointer-events:none}
.cx-3d .st__chapter--hero{width:min(640px,calc(100% - 2*var(--gutter)))}
.cx-3d .st__chapter.is-active{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s .16s var(--ease),transform .8s .16s var(--ease)}
.cx-3d .st--worktop .st__sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,7,7,.85) 0%,rgba(7,7,7,.3) 34%,rgba(7,7,7,0) 50%)}

/* ============ CONTENT ============ */
/* Gallery wall labels */
.cx-plates__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px)}
.cx-plates--alt .cx-plates__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cx-plate{display:flex;flex-direction:column}
.cx-plate__media{display:block;overflow:hidden;border-radius:2px;background:var(--surface-2)}
.cx-plate__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.cx-plate:hover .cx-plate__media img{transform:scale(1.04)}
.cx-plate__label{border-top:1px solid var(--line-2);margin-top:18px;padding-top:14px;display:grid;gap:6px}
.cx-plate__type{display:flex;align-items:center;gap:8px;font:400 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cx-plate h3{font:500 clamp(25px,2.2vw,30px)/1.1 var(--display)}
.cx-plate h3 a{text-decoration:none}
.cx-plate__label>p:not(.cx-plate__type){font-size:14.5px;line-height:1.6;color:var(--muted)}
.cx-plate__ask{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;min-height:44px;font:600 14px/1.3 var(--sans);color:#86c9a6;text-decoration:underline;text-underline-offset:5px}
.cx-dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid var(--line-2);background:#ece7dc}
.cx-dot[data-tone=beige]{background:#d8c3a0}.cx-dot[data-tone=gold]{background:#c39a55}.cx-dot[data-tone=grey]{background:#8f8d88}
.cx-dot[data-tone=black]{background:#1c1b19}.cx-dot[data-tone=red]{background:#9c3b2b}.cx-dot[data-tone=blue]{background:#2f5fa8}.cx-dot[data-tone=mixed]{background:linear-gradient(135deg,#ddd 50%,#555 50%)}

/* Steps — a single line with four stations */
.cx-steps ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative;padding-top:34px}
.cx-steps ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line-2)}
.cx-steps li{position:relative}
.cx-steps li::before{content:"";position:absolute;top:-34px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--accent)}
.cx-steps__no{display:block;font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent);margin-bottom:16px}
.cx-steps h3{font:500 27px/1.1 var(--display);margin-bottom:10px}
.cx-steps p{color:var(--muted);font-size:15px}

/* Proof: real photographs after the 3D */
/* Include section to outrank the inset-section width rule; padding already owns the gutters. */
.cx main>section.cx-proof{width:100%;max-width:none;background:var(--paper);color:var(--paper-ink);padding:clamp(72px,9vw,140px) max(var(--gutter),calc((100% - var(--wide))/2));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,96px);align-items:center}
.cx-proof h2{color:#151310}
.cx-proof h2 em{color:#7a5a30}
.cx-proof .cx-eyebrow{color:#7a5a30}
.cx-proof__copy>p:not(.cx-eyebrow){margin:24px 0 30px;color:#57514a;max-width:48ch}
.cx-proof .cx-link{color:#151310;border-color:rgba(21,19,16,.3)}
.cx-proof__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;align-items:end}
.cx-proof__grid img{width:100%;object-fit:cover;border-radius:2px}
.cx-proof__a img{aspect-ratio:4/5}
.cx-proof__b img,.cx-proof__c img{aspect-ratio:3/4}
.cx-proof__c{margin-bottom:clamp(40px,6vw,96px)!important}
.cx-proof__cap{grid-column:1/-1;font:400 11px/1.5 var(--mono);letter-spacing:.06em;color:#645e55}

/* Spaces reel */
.cx-spaces__reel{display:grid;grid-template-columns:1.1fr .9fr 1.1fr .9fr;gap:14px;align-items:end;margin-bottom:28px}
.cx-spaces__reel img{width:100%;object-fit:cover;border-radius:2px;height:clamp(260px,30vw,460px)}
.cx-spaces__reel li:nth-child(even) img{height:clamp(220px,24vw,360px)}
.cx-spaces__reel figcaption,.cx-walk__strip figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint)}
.cx-spaces__reel figcaption span,.cx-walk__strip figcaption span{color:var(--accent)}

/* Brief */
.cx-brief{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,6vw,96px);align-items:start}
.cx-who{margin-top:30px!important;counter-reset:i}
.cx-who li{counter-increment:i;display:grid;grid-template-columns:52px 1fr;padding:16px 0;border-top:1px solid var(--line);font-size:17px;color:var(--ink)}
.cx-who li::before{content:counter(i,decimal-leading-zero);font:400 12px/2.2 var(--mono);color:var(--accent)}
.cx-brief__card{background:var(--surface);border:1px solid var(--line);padding:clamp(26px,3vw,40px);border-radius:4px}
.cx-brief__card h3{font:500 26px/1.15 var(--display);margin-bottom:20px}
.cx-brief__card li{padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.cx-brief__card b{display:block;color:var(--ink);font-size:15.5px;font-weight:600}

/* Visit / location */
.cx-visit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cx-visit__card{padding:clamp(28px,4.5vw,64px)}
.cx-visit address{display:grid;margin-top:28px;font:500 clamp(22px,2.2vw,28px)/1.3 var(--display);color:var(--ink)}
.cx-visit address span:first-child{font:400 11px/2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cx-visit__coords{display:flex;gap:22px;margin-top:20px!important;font:400 12px/1.6 var(--mono);letter-spacing:.1em;color:var(--accent)}
.cx-visit__hint{margin-top:18px!important;color:var(--muted);font-size:14.5px}
.cx-visit__photo{position:relative;min-height:320px}
.cx-visit__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-visit__photo figcaption{position:absolute;left:16px;right:16px;bottom:14px;font:400 11px/1.4 var(--mono);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* FAQ */
.cx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.cx-faq__list{border-top:1px solid var(--line-2)}
.cx-faq details{border-bottom:1px solid var(--line-2)}
.cx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;min-height:64px;padding:18px 0;font:500 clamp(19px,1.7vw,23px)/1.3 var(--display);color:var(--ink)}
.cx-faq summary::-webkit-details-marker{display:none}
.cx-faq summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;font:400 18px/1 var(--sans);transition:transform .3s var(--ease)}
.cx-faq details[open] summary::after{transform:rotate(45deg)}
.cx-faq details p{padding:0 48px 22px 0;color:var(--muted);max-width:68ch}

/* WhatsApp message builder drawn as a slab tag */
.cx main>section.cx-ask{width:100%;max-width:none;background:var(--band);color:var(--band-text);padding:clamp(72px,9vw,130px) max(var(--gutter),calc((100% - var(--wide))/2));display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:center;border-block:1px solid var(--line)}
.cx-ask h2{color:#fff}
.cx-ask .cx-eyebrow{color:#d9c19a}
.cx-ask__copy>p:not(.cx-eyebrow){margin-top:22px;color:rgba(233,230,220,.76);max-width:48ch}
.cx-ask__promise{margin-top:30px!important;display:grid;gap:12px}
.cx-ask__promise li{display:flex;gap:12px;align-items:baseline;color:rgba(233,230,220,.86);font-size:15px}
.cx-ask__promise li::before{content:"";width:18px;height:1px;background:#d9c19a;flex:none;transform:translateY(-4px)}
.cx-ask__panel{position:relative;background:#f4efe4;color:#2a251e;border-radius:10px;clip-path:polygon(0 34px,34px 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);padding:clamp(48px,4vw,60px) clamp(24px,3vw,40px) clamp(24px,3vw,40px);display:grid;gap:18px;transform:rotate(-1.2deg);transition:transform .8s var(--ease)}
.cx-ask__panel:hover,.cx-ask__panel:focus-within{transform:rotate(0)}
.cx-ask__hole{position:absolute;top:18px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--band);box-shadow:inset 0 0 0 3px #d6cfbf}
.cx-ask__tagline{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#6b6255;border-bottom:1px dashed rgba(42,37,30,.25);padding-bottom:14px}
.cx-ask__options{display:grid;gap:18px}
.cx-ask__options[hidden]{display:none}
.cx-ask__q,.cx-ask__label{font:400 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6b6255;margin-bottom:10px!important}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(23,20,15,.24);background:transparent;color:#17140f;font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.cx-chip:hover{border-color:#17140f}
.cx-chip[aria-pressed=true]{background:#17140f;border-color:#17140f;color:#faf7f2}
.cx-chip[aria-pressed=true]::before{content:"✓ "}
.cx-ask__preview{padding:16px 18px;background:#e7efe6;border-radius:4px 14px 14px 14px;font-size:15px;line-height:1.55;color:#1d2a22;border:1px solid rgba(29,92,67,.18)}
.cx-ask__panel .cx-btn{justify-self:start;background:#1d5c43}
.cx-ask__panel .cx-btn:hover{background:#154632}
.cx-ask__panel .cx-fineprint{color:#6b6255}
.cx-ask__panel .cx-ask__label{margin-bottom:-8px!important}

/* Related */
.cx-related ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.cx-related li+li a{border-left:1px solid var(--line)}
.cx-related a{position:relative;display:grid;gap:6px;height:100%;padding:24px 48px 24px 20px;text-decoration:none}
.cx-related li:first-child a{padding-left:0}
.cx-related b{font:500 23px/1.15 var(--display);color:var(--ink)}
.cx-related span{font-size:14px;color:var(--muted)}
.cx-related .cx-arrow{position:absolute;right:16px;top:28px;color:var(--accent)}

/* Gudang: signs, photographs, checklist */
.cx-see__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:v}
.cx-see__list li{counter-increment:v;background:var(--surface);border-top:4px solid #151412;padding:22px 20px 26px;position:relative}
.cx-see__list li::before{content:counter(v,decimal-leading-zero);display:inline-grid;place-items:center;min-width:40px;height:26px;padding:0 8px;background:#f2b705;color:#151412;font:500 12px/1 var(--mono);letter-spacing:.06em;margin-bottom:22px}
.cx-see__list h3{font:500 25px/1.12 var(--display);margin-bottom:10px}
.cx-see__list p{font-size:14.5px;color:var(--muted)}
.cx-walk__strip{display:grid;grid-template-columns:.8fr 1.25fr .8fr .8fr;gap:14px;align-items:end}
.cx-walk__strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.cx-walk__strip li:nth-child(2) img{aspect-ratio:4/3}
.cx-bring{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.cx-check{margin-top:28px!important;display:grid}
.cx-check li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-size:16.5px;color:var(--ink)}
.cx-check li::before{content:"";width:18px;height:18px;flex:none;margin-top:4px;border:1.5px solid #151412;border-radius:3px}
.cx-bring__swatches{display:grid;gap:18px}
.cx-bring__swatches ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cx-bring__swatches a{display:grid;gap:4px;text-decoration:none}
.cx-bring__swatches img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;transition:transform .6s var(--ease)}
.cx-bring__swatches a:hover img{transform:translateY(-4px)}
.cx-bring__swatches b{font:500 18px/1.1 var(--display);color:var(--ink);margin-top:6px}
.cx-bring__swatches small{font:400 10.5px/1.4 var(--mono);color:var(--faint)}

/* Granite content */
.cx-notice{border:1px solid var(--line-2);border-left:3px solid var(--accent);padding:20px 24px;border-radius:2px;background:var(--surface)}
.cx main>.st+.cx-notice{margin-top:clamp(72px,9vw,120px)}
.cx-notice p{color:var(--muted);font-size:15.5px;max-width:92ch}
.cx-notice b{color:var(--ink)}
.cx-granites__list{display:grid;gap:clamp(40px,5vw,72px);margin-bottom:28px}
.cx-granites .cx-plate{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,64px);align-items:end}
.cx-granites .cx-plate:nth-child(even){grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
.cx-granites .cx-plate:nth-child(even) .cx-plate__media{order:2}
.cx-granites .cx-plate__media img{aspect-ratio:16/10}
.cx-granites .cx-plate h3{font-size:clamp(34px,4vw,52px)}
.cx-granites .cx-plate__label{margin-top:0}
.cx-table-wrap{overflow-x:auto;margin-bottom:28px;border-top:1px solid var(--line-2)}
.cx-table{width:100%;border-collapse:collapse;min-width:640px}
.cx-table th,.cx-table td{text-align:left;vertical-align:top;padding:20px 24px 20px 0;border-bottom:1px solid var(--line)}
.cx-table thead th{font:500 34px/1.1 var(--display);color:var(--ink);padding-top:24px}
.cx-table thead th:nth-child(2){color:var(--accent)}
.cx-table tbody th{width:22%;font:400 11px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cx-table td{width:39%;color:var(--text);font-size:15.5px}
.cx-choose__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2)}
.cx-choose__grid li{padding:28px 28px 32px 0;border-bottom:1px solid var(--line)}
.cx-choose__grid li+li{padding-left:28px;border-left:1px solid var(--line)}
.cx-choose__grid h3{font:500 26px/1.15 var(--display);margin-bottom:10px}
.cx-choose__grid p{font-size:15px;color:var(--muted)}

/* Mobile WhatsApp dock (shown by script only when no other WhatsApp CTA is visible) */
.cx-dock{position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;display:none;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--wa);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;box-shadow:0 14px 40px rgba(0,0,0,.35);transform:translateY(160%);transition:transform .45s var(--ease)}
.cx-dock.is-on{transform:none}

@media (max-width:1080px){
  .cx-see__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-plates--alt .cx-plates__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-related li:nth-child(3) a{border-left:0;padding-left:0}
  .cx-related li:nth-child(n+3){border-top:1px solid var(--line)}
  .cx-index__list{columns:1}
}
@media (max-width:900px){
  .cx .editorial-header{min-height:72px}
  .cx .editorial-header .editorial-desktop{display:none}
  .cx .editorial-mobile{display:block}
  .st .cx-crumbs{top:80px}
  .cx-head--split,.cx main>section.cx-proof,.cx-brief,.cx-visit,.cx-faq,.cx main>section.cx-ask,.cx-bring,.cx-manifest__cols{grid-template-columns:1fr}
  .cx-steps ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .cx-plates__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-granites .cx-plate,.cx-granites .cx-plate:nth-child(even){grid-template-columns:1fr}
  .cx-granites .cx-plate:nth-child(even) .cx-plate__media{order:0}
  .cx-visit__photo{min-height:260px;order:-1}
  .st__caption{display:none}
  /* Stages: canvas stays full-bleed, copy sits on a scrim at the bottom. */
  .st__poster--book{inset:12% 6% 46% 6%}
  .st__poster--slab{inset:16% 6% 52% 6%}
  .st--bookmatch .st__sticky::after,.cx-3d .st--book .st__sticky::after,.cx-3d .st--worktop .st__sticky::after{background:linear-gradient(0deg,rgba(10,10,9,.96) 0%,rgba(10,10,9,.8) 34%,rgba(10,10,9,0) 60%)}
  .st__ui--book{grid-template-columns:1fr}
  .cx-3d .st__pages{min-height:200px}
}
@media (max-width:760px){
  .cx main>*+*{margin-top:84px}
  .cx main>.st+section:not(.st){padding-top:84px}
  .cx-facts{grid-template-columns:1fr 1fr}
  .cx-facts>div:last-child{grid-column:1/-1}
  .st__ui{padding-top:110px}
  .st__note,.cx-3d .st--aisle .st__note,.cx-3d .st--worktop .st__note{left:var(--gutter);right:var(--gutter);top:104px;bottom:auto;text-align:left;max-width:none}
  .st__pages h3{font-size:34px}
  .cx-3d .st__stops,.cx-3d .st__chapter{left:var(--gutter);right:var(--gutter);width:auto;bottom:44px}
  .cx-3d .st__stops li{left:0;right:0;width:auto}
  .st__stops li{padding:18px 18px}
  .st__swatches button{flex:1 1 140px}
  .cx-plates__grid,.cx-plates--alt .cx-plates__grid{grid-template-columns:1fr}
  .cx-index__list img{display:none}
  .cx-index__meta{display:none}
  .cx-index__list a{grid-template-columns:36px 1fr}
  .cx-proof__grid{grid-template-columns:1fr 1fr}
  .cx-proof__a{grid-column:1/-1}
  .cx-proof__c{margin-bottom:0!important}
  .cx-spaces__reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 6px;align-items:end}
  .cx-spaces__reel li{flex:0 0 74%;scroll-snap-align:start}
  .cx-spaces__reel img,.cx-spaces__reel li:nth-child(even) img{height:auto;aspect-ratio:4/5}
  .cx-steps ol{grid-template-columns:1fr;row-gap:36px;padding-top:0;padding-left:34px}
  .cx-steps ol::before{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
  .cx-steps li::before{top:4px;left:-34px}
  .cx-see__list{grid-template-columns:1fr}
  .cx-walk__strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 6px;align-items:start}
  .cx-walk__strip li{flex:0 0 74%;scroll-snap-align:start}
  .cx-walk__strip li:nth-child(2){flex-basis:88%}
  .cx-bring__swatches ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-choose__grid{grid-template-columns:1fr}
  .cx-choose__grid li+li{padding-left:0;border-left:0}
  .cx-related ul{grid-template-columns:1fr}
  .cx-related li+li a,.cx-related li:nth-child(3) a{border-left:0;padding-left:0}
  .cx-related li+li{border-top:1px solid var(--line)}
  .cx-related a{padding:20px 44px 20px 0}
  .cx-faq details p{padding-right:0}
  .cx-ask__panel{transform:none}
  .cx .editorial-footer{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:96px}
  .cx-dock{display:flex}
  /* Comparison table becomes stacked cards so both stones stay visible. */
  .cx-table-wrap{overflow:visible}
  .cx-table{min-width:0}
  .cx-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cx-table,.cx-table tbody,.cx-table tr,.cx-table th,.cx-table td{display:block;width:auto}
  .cx-table tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .cx-table tbody th,.cx-table td{width:auto;padding:0;border:0}
  .cx-table tbody th{margin-bottom:10px}
  .cx-table td{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:6px 0;font-size:15px}
  .cx-table td::before{content:attr(data-label);font:500 19px/1.2 var(--display);color:var(--accent)}
  .cx-table td+td::before{color:var(--ink)}
}
/* Short laptop screens: keep stage copy clear of the breadcrumb. */
@media (max-height:820px) and (min-width:761px){
  .st h1{font-size:clamp(34px,4vw,58px)}
  .st .cx-lede{font-size:15px;margin-top:14px!important}
  .st .cx-actions{margin-top:20px}
  .st__swatches{margin-top:16px}
  .st__swatches button{min-height:46px}
  .st__hint--scroll{margin-top:14px}
  .cx-3d .st__chapter,.cx-3d .st__stops{bottom:36px}
}
/* Keyboard: an overlay card that receives focus becomes visible even if scroll has moved on. */
.cx-3d .st__pages li:focus-within,.cx-3d .st__stops li:focus-within,.cx-3d .st__chapter:focus-within{opacity:1;transform:none;pointer-events:auto;z-index:2}
.cx-3d .st__pages:focus-within li.is-active:not(:focus-within),.cx-3d .st__stops:focus-within li.is-active:not(:focus-within),.cx-3d .st__ui:has(.st__chapter:focus-within) .st__chapter.is-active:not(:focus-within){opacity:0}
@media (prefers-reduced-motion:reduce){
  .cx *,.cx *::before,.cx *::after{transition-duration:0s!important}
}