/* SILVEN v4 — shared system.
   Part A: v3 tokens, nav, menu, type, moments, cta, footer, reveal helpers (unchanged look).
   Part B: v4 image-led component kit (see _kit.html for markup + API).
   Pages link: shared/base.css → v4.css → (page <style>) … js/gsap, ScrollTrigger, lenis → v4.js */

/* ============================== A. v3 base ============================== */
:root{
  --ink:#0F1211; --ink-2:#161A18; --forest:#1E2B27; --paper:#EDE9E2; --sand:#E2DCD2;
  --warm:#B9AFA2; --line-d:rgba(255,255,255,.14); --line-l:rgba(15,18,17,.14);
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --taupe:#7E7366; --taupe-2:#6E6459; --body-l:#3A3530;
  --sec:clamp(88px,11vw,170px);
}
html{background:var(--ink)}
body{background:var(--ink);color:#fff;font-size:17px;overflow-x:clip}
html.theme-light{background:var(--paper)}
body.light-page{background:var(--paper);color:var(--ink)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
::selection{background:#fff;color:var(--ink)}
body.light-page ::selection{background:var(--ink);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:12px 16px;font-size:13px}
.skip:focus{top:16px}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px}
.pre img{height:26px;width:auto;opacity:0}
.pre .bar{width:160px;height:1px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.pre .bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.is-static .pre,.no-motion .pre{display:none}

/* nav */
.top{position:fixed;left:0;right:0;top:0;z-index:50;height:84px;display:flex;align-items:center;mix-blend-mode:normal;color:#fff;background:rgba(20,24,21,.82);backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between}
.top .logo img{height:20px;width:auto;filter:invert(1)}
.top .links{display:flex;gap:36px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.top .links a{position:relative;padding:8px 0}
.top .links a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .4s var(--ease)}
.top .links a:hover::after,.top .links a[aria-current]::after{right:0}
.top .right{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.top .right .cta{border:1px solid currentColor;padding:12px 18px;transition:background .3s,color .3s}
.top .right .cta:hover{background:#fff;color:#000}
.menu-toggle{display:none}
@media (max-width:980px){.top .links{display:none}.top .right .cta{display:none}.menu-toggle{display:block}}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:60;background:var(--forest);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);clip-path:inset(0 0 100% 0);pointer-events:none}
.menu.open{pointer-events:auto}
.menu a.big{display:block;font-weight:300;font-size:clamp(34px,8vw,72px);line-height:1.1;letter-spacing:-.02em;padding:6px 0;border-bottom:1px solid var(--line-d)}
.menu .close{position:absolute;top:30px;right:var(--gutter);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.menu .foot{margin-top:32px;color:var(--warm);font-size:14px}

/* type */
.ln{display:block;overflow:hidden;line-height:1.02;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(0)}
.big{font-weight:300;font-size:clamp(36px,5.4vw,88px);letter-spacing:-.025em;line-height:1.02}
.mid{font-weight:300;font-size:clamp(28px,3.6vw,56px);letter-spacing:-.02em;line-height:1.08}
.xl,.hero-h1{font-weight:300;font-size:clamp(48px,8.2vw,132px);letter-spacing:-.03em;line-height:.98}
.eyebrow{color:var(--warm)}
.light .eyebrow{color:var(--taupe)}
.light{background:var(--paper);color:var(--ink)}
.light .muted{color:var(--taupe-2)}
.sand{background:var(--sand);color:var(--ink)}
.sand .eyebrow{color:var(--taupe)}
.p{max-width:520px;line-height:1.6}
.dark .p{color:rgba(255,255,255,.72)}
.arrow{width:16px;height:16px;flex:none}

/* full-bleed page hero (dark) */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink);color:#fff}
.hero .img{position:absolute;inset:-8% 0;will-change:transform}
.hero .img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,11,.72) 0%,rgba(10,12,11,.18) 45%,rgba(10,12,11,.12) 100%)}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(40px,6vh,72px)}
.hero .sub{font-size:clamp(16px,1.3vw,20px);max-width:520px;color:rgba(255,255,255,.82);margin-top:26px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero .eyebrow{color:var(--warm)}

/* full-bleed moments (v3) */
.moment{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#fff}
.moment .bg{position:absolute;inset:-10% 0;will-change:transform}
.moment .bg img{width:100%;height:100%;object-fit:cover}
.moment .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,11,.74),rgba(10,12,11,.05) 60%)}
.moment .inner{position:absolute;left:0;right:0;bottom:clamp(40px,6vh,72px)}
.moment .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.moment .mid{max-width:760px}
.moment .links{display:flex;gap:28px;flex-wrap:wrap}
.moment .eyebrow{color:var(--warm)}.moment .p{color:rgba(255,255,255,.78)}.moment .link{color:#fff}

/* cta + footer */
.cta-band{padding:clamp(64px,8vw,120px) 0;background:var(--forest);color:#fff}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta-band .eyebrow{color:var(--warm)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.footer{background:#0A0C0B}
.footer .cols{grid-template-columns:1.6fr repeat(4,1fr)}
@media (max-width:980px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer .cols{grid-template-columns:1fr}}

/* reveal helpers */
.rv-img{overflow:hidden}
.rv-img img{transform-origin:center}

/* light-page overrides */
body.light-page .eyebrow{color:var(--taupe)}
body.light-page .p{color:var(--body-l)}
body.light-page :is(.dark,.zoom,.moment,.hero,.next,.cta-band,.split:not(.light)) .eyebrow{color:var(--warm)}
body.light-page :is(.dark,.zoom,.moment,.hero,.next,.cta-band,.split:not(.light)) .p{color:rgba(255,255,255,.76)}
body.light-page .zoom-side .p{color:rgba(255,255,255,.86)}
.dark{background:var(--ink);color:#fff}
.dark .link,.dark .btn-ghost{color:#fff}

/* generic inner-page blocks (v3) */
.page-hero{padding:clamp(140px,18vh,220px) 0 clamp(48px,6vw,88px)}
.page-hero h1{font-weight:300;font-size:clamp(40px,6.4vw,104px);letter-spacing:-.03em;line-height:.98;max-width:14ch}
.page-hero .sub{font-size:clamp(16px,1.3vw,20px);max-width:560px;margin-top:28px}
.page-hero .grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
@media (max-width:900px){.page-hero .grid{grid-template-columns:1fr;gap:32px}}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{text-align:left;padding:14px 0;border-top:1px solid var(--line-l);vertical-align:top}
.spec-table th{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);border-top:0;padding-bottom:10px}
.spec-table td:first-child{color:var(--taupe-2);width:40%}
.spec-table td+td{padding-left:16px}
.dark .spec-table th,.dark .spec-table td{border-top-color:var(--line-d)}
.dark .spec-table th{color:var(--warm)}
.dark .spec-table td:first-child{color:rgba(255,255,255,.6)}
.spec-line{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.9}
.fig{overflow:hidden;background:var(--sand)}
.fig img{width:100%;height:100%;object-fit:cover}
.band-21{aspect-ratio:21/9}.ratio-32{aspect-ratio:3/2}.ratio-45{aspect-ratio:4/5}.ratio-11{aspect-ratio:1/1}.ratio-169{aspect-ratio:16/9}
@media (max-width:700px){.band-21{aspect-ratio:4/3}}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);align-items:center}
.two.rev{grid-template-columns:7fr 5fr}
@media (max-width:900px){.two,.two.rev{grid-template-columns:1fr}}
.sec{padding:var(--sec) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4vw,56px);flex-wrap:wrap}
.list-rows{border-top:1px solid var(--line-l)}
.list-rows li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-l)}
.list-rows li span:first-child{font-size:12px;letter-spacing:.14em;color:var(--taupe);padding-top:4px}
.dark .list-rows,.dark .list-rows li{border-color:var(--line-d)}
.dark .list-rows li span:first-child{color:var(--warm)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line-l)}
.dark .pill{border-color:var(--line-d)}
.doc-list{border-top:1px solid var(--line-l)}
.doc-list li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-l);align-items:center}
.doc-list .meta{font-size:12px;color:var(--taupe);letter-spacing:.06em;margin-top:4px}
.doc-list .link{font-size:12px}
@media (max-width:600px){.doc-list li{grid-template-columns:1fr}}

/* ============================== B. v4 components ============================== */

/* B0 — shared bits ------------------------------------------------------- */
.bleed{width:100%;overflow:hidden}
.media{position:relative;overflow:hidden;background:#0A0C0B}
.media img{width:100%;height:100%;object-fit:cover}
.idx{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.ar-11{aspect-ratio:1/1}.ar-45{aspect-ratio:4/5}.ar-34{aspect-ratio:3/4}.ar-43{aspect-ratio:4/3}.ar-32{aspect-ratio:3/2}.ar-169{aspect-ratio:16/9}.ar-219{aspect-ratio:21/9}
@media (max-width:700px){.ar-219{aspect-ratio:4/3}}

/* B10 — captions + "Visualisation" label (AD §4) ------------------------ */
/* in-image label: bottom-right, 24 px from the edges; format "<subject> · <spec> — Visualisation" or just "Visualisation" */
.vis{position:absolute;z-index:4;right:var(--vis-x,24px);bottom:var(--vis-y,24px);display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 48px);padding:6px 10px 6px 9px;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:1.25;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(15,18,17,.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis::before{content:"";width:5px;height:5px;border:1px solid currentColor;border-radius:50%;flex:none}
.vis--bl{right:auto;left:var(--vis-x,24px)}
.vis--tr{bottom:auto;top:var(--vis-y,24px)}
@media (max-width:600px){.vis{white-space:normal;max-width:calc(100% - 32px);--vis-x:16px;--vis-y:16px}}
.vis--plain{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;color:rgba(255,255,255,.62)}
.vis--plain::before{display:none}
/* caption under an image: 11 px caps, left-aligned, 12 px gap */
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:6px 20px;flex-wrap:wrap;margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:var(--taupe)}
.cap b{font-weight:500;color:var(--ink)}
.cap .n{font-variant-numeric:tabular-nums}
.dark .cap,.on-dark .cap{color:rgba(255,255,255,.62)}
.dark .cap b,.on-dark .cap b{color:#fff}
.foot-note{font-size:12px;line-height:1.5;color:var(--taupe-2)}
.dark .foot-note{color:rgba(255,255,255,.55)}

/* B1 — full-bleed zoom section -------------------------------------------- */
.zoom{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.zoom--short{height:84svh;min-height:540px}
.zoom-media{position:absolute;inset:0;overflow:hidden}
.zoom-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--zo,50% 60%);will-change:transform}
.zoom-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;top:104px;right:var(--gutter);z-index:3;border:1px solid rgba(255,255,255,.5);border-radius:0;padding:13px 18px;background:rgba(10,12,11,.32);color:#fff;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px)}
.film-toggle:hover{background:rgba(10,12,11,.58)}
.film-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.zoom-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(10,12,11,.74) 0%,rgba(10,12,11,.12) 50%,rgba(10,12,11,.26) 100%)}
.zoom--center .zoom-veil{background:radial-gradient(ellipse at 50% 55%,rgba(10,12,11,.46),rgba(10,12,11,.2) 70%)}
.zoom-inner{position:absolute;left:0;right:0;bottom:clamp(44px,8vh,96px);z-index:2}
.zoom--center .zoom-inner{top:50%;bottom:auto;transform:translateY(-50%);text-align:center}
.zoom--center .p{margin-left:auto;margin-right:auto}
.zoom-meta{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:end}
.zoom-side{border-left:1px solid rgba(255,255,255,.3);padding-left:clamp(18px,2vw,28px)}
.zoom-side .p{color:rgba(255,255,255,.84);font-size:16px}
.zoom-side .link{margin-top:22px;color:#fff}
.zoom .eyebrow{color:rgba(255,255,255,.72)}
.zoom .xl,.zoom .big{max-width:16ch}
.zoom--center .xl,.zoom--center .big{margin-left:auto;margin-right:auto}
.zoom .vis{--vis-x:var(--gutter)}
.zoom-scroll{position:absolute;z-index:2;left:50%;bottom:22px;width:1px;height:44px;background:rgba(255,255,255,.25);overflow:hidden}
.zoom-scroll::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#fff;animation:zscroll 2.4s var(--ease-io) infinite}
@keyframes zscroll{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.no-motion .zoom-scroll::after{animation:none}
@media (max-width:900px){.zoom-meta{grid-template-columns:1fr}.zoom-side{border-left:0;padding-left:0;max-width:440px}.zoom .vis{--vis-y:14px}}

/* B2 — split sticky -------------------------------------------------------- */
.split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:#fff}
.split.light{background:var(--paper);color:var(--ink)}
.split-media{position:sticky;top:0;align-self:start;height:100svh;overflow:hidden;background:#0A0C0B}
.split--rev .split-media{order:2}
.split-media .split-fig{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.08);transition:opacity 1.2s var(--ease),transform 2.4s var(--ease)}
.split-media .split-fig.is-on{opacity:1;transform:none;z-index:1}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split-hud{position:absolute;z-index:3;left:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);bottom:clamp(20px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:#fff;pointer-events:none}
.split-count{font-weight:300;font-size:clamp(44px,4.6vw,76px);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.split-count small{font-size:13px;letter-spacing:.14em;font-weight:500;margin-left:10px;opacity:.6;vertical-align:top;position:relative;top:.5em}
.split-hud .vis{position:static;align-self:flex-end}
.split-media::after{content:"";position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(to top,rgba(10,12,11,.5),rgba(10,12,11,0));z-index:2;pointer-events:none}
.split-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18)}
.split-bar i{position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s var(--ease)}
.split-steps{padding:0 var(--gutter) 0 clamp(40px,6.5vw,120px);min-width:0}
.split--rev .split-steps{padding:0 clamp(40px,6.5vw,120px) 0 var(--gutter)}
.split-step{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,10vh,120px) 0;max-width:540px;opacity:.26;transition:opacity .9s var(--ease)}
.split-step.is-on{opacity:1}
.split-step>.split-fig{display:none}
.split-step .n{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.split-step .n::after{content:"";width:48px;height:1px;background:currentColor;opacity:.6}
.split-step h3{font-weight:300;font-size:clamp(30px,3.3vw,52px);letter-spacing:-.022em;line-height:1.06;margin-top:22px}
.split-step p{margin-top:20px;color:rgba(255,255,255,.72);max-width:440px}
.split.light .split-step p{color:var(--body-l)}
.split-step .spec-line{margin-top:28px;padding-top:16px;border-top:1px solid var(--line-d);color:rgba(255,255,255,.58)}
.split.light .split-step .spec-line{border-color:var(--line-l);color:var(--taupe-2)}
.split.light .split-step .n{color:var(--taupe)}
.split-step--head{opacity:1}
.is-static .split-step,.no-motion .split-step{opacity:1;min-height:64svh}
.is-static .split-media .split-fig{transition:none}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split-media{display:none}
  .split-steps,.split--rev .split-steps{padding:clamp(56px,10vw,96px) var(--gutter)}
  .split-step{min-height:0;opacity:1;padding:0 0 56px;max-width:none}
  .split-step+.split-step{padding-top:0}
  .split-step>.split-fig{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;margin:0 calc(var(--gutter)*-1) 28px;background:#0A0C0B}
  .split-step>.split-fig .vis{--vis-x:var(--gutter)}
}

/* B3 — horizontal gallery -------------------------------------------------- */
.hgal{position:relative;overflow:hidden;padding:var(--sec) 0}
.hgal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.hgal-vp{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter)}
.hgal-vp::-webkit-scrollbar{display:none}
.hgal-track{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,24px);padding:0 var(--gutter);width:max-content}
.hgal-item{--w:clamp(280px,40vw,680px);flex:none;width:var(--w);margin:0;scroll-snap-align:start}
.hgal-item--wide{--w:clamp(300px,58vw,1000px)}
.hgal-item--tall{--w:clamp(240px,27vw,460px)}
.hgal-item--panel{--w:min(62vw,calc((100svh - 420px) * 1.6))}
.hgal-item--panel .hgal-img{height:auto;aspect-ratio:16/10}
.hgal-item--panel figcaption{grid-template-columns:44px minmax(0,1fr);max-width:560px}
.hgal-item figcaption .x{grid-column:2;display:inline-flex;margin-top:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-bottom:1px solid currentColor;padding-bottom:3px;justify-self:start}
.light .hgal-item figcaption .x{color:var(--ink)}
.hgal-img{position:relative;height:min(62vh,620px);overflow:hidden;background:#0A0C0B}
.hgal-img img{position:absolute;top:0;left:-5%;width:110%;max-width:none;height:100%;object-fit:cover}
.hgal-item figcaption{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;margin-top:16px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);max-width:520px}
.hgal-item figcaption .n{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--warm);padding-top:3px;font-variant-numeric:tabular-nums}
.hgal-item figcaption b{display:block;color:#fff;font-weight:400;font-size:16px;margin-bottom:2px}
.light .hgal-item figcaption,.hgal.light .hgal-item figcaption{color:var(--taupe-2)}
.light .hgal-item figcaption b{color:var(--ink)}
.light .hgal-item figcaption .n{color:var(--taupe)}
.hgal-foot{display:flex;align-items:center;gap:24px;margin-top:clamp(28px,3vw,44px)}
.hgal-bar{flex:1;height:1px;background:var(--line-d);position:relative;overflow:hidden}
.light .hgal-bar{background:var(--line-l)}
.hgal-bar i{position:absolute;inset:0;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left}
.hgal-count{font-size:12px;font-weight:500;letter-spacing:.16em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hgal-hint{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.hgal.is-pinned{height:100svh;padding:clamp(88px,11vh,110px) 0 clamp(24px,4vh,40px);display:flex;flex-direction:column;justify-content:center}
.hgal.is-pinned .hgal-head{margin-bottom:clamp(24px,3vh,40px)}
.hgal.is-pinned .hgal-vp{overflow:visible;scroll-snap-type:none}
.hgal.is-pinned .hgal-img{height:min(56vh,600px)}
.hgal.is-pinned .hgal-item--panel .hgal-img{height:auto}
.hgal.is-pinned .hgal-track{will-change:transform;cursor:grab;user-select:none}
.hgal.is-drag .hgal-track{cursor:grabbing}
@media (max-width:900px){
  .hgal-item{--w:80vw}.hgal-item--wide{--w:88vw}.hgal-item--tall{--w:64vw}
  .hgal-img{height:auto;aspect-ratio:4/5}
  .hgal-item--wide .hgal-img{aspect-ratio:4/3}
  .hgal-img img{left:0;width:100%}
  .hgal-hint{display:none}
  .hgal-item--panel{--w:86vw}
  .hgal-item--panel .hgal-img{aspect-ratio:16/10}
  /* .hgal--list: a vertical story on phone instead of a swipe row */
  .hgal--list .hgal-vp{overflow:visible;scroll-snap-type:none}
  .hgal--list .hgal-track{flex-direction:column;width:auto;gap:44px}
  .hgal--list .hgal-item{--w:100%}
  .hgal--list .hgal-img{margin:0 calc(var(--gutter)*-1)}
  .hgal--list .hgal-foot{display:none}
}
/* .hgal--list without motion on desktop: every step visible as a 3-column grid */
@media (min-width:901px){
  :is(.is-static,.no-motion) .hgal--list .hgal-vp{overflow:visible;scroll-snap-type:none}
  :is(.is-static,.no-motion) .hgal--list .hgal-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;gap:clamp(48px,5vw,72px) clamp(16px,2vw,32px)}
  :is(.is-static,.no-motion) .hgal--list .hgal-item{width:auto}
  :is(.is-static,.no-motion) .hgal--list :is(.hgal-foot,.hgal-hint){display:none}
}

/* B4/B5 — shared controls: tabs, segmented control, chips, stage --------- */
.tabs{display:flex;gap:clamp(18px,2.2vw,32px);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;padding:12px 0 13px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;transition:color .3s}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.tab:hover,.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:focus-visible{outline:none;color:var(--ink)}
.tab:focus-visible::after{transform:scaleX(1);height:2px}
.seg-b:focus-visible{outline:1px solid currentColor;outline-offset:-5px}
.seg{display:inline-flex;border:1px solid rgba(15,18,17,.22);flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-b{flex:none;min-height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-2);white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),opacity .35s}
.seg-b small{font-size:inherit;opacity:.6;letter-spacing:.06em}
.seg-b+.seg-b{border-left:1px solid rgba(15,18,17,.22)}
.seg-b:hover{color:var(--ink)}
.seg-b[aria-checked="true"],.seg-b[aria-selected="true"],.seg-b[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg.is-muted .seg-b{opacity:.42}
.seg--glass{border-color:rgba(255,255,255,.42);background:rgba(15,18,17,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.seg--glass .seg-b{color:rgba(255,255,255,.86)}
.seg--glass .seg-b+.seg-b{border-left-color:rgba(255,255,255,.3)}
.seg--glass .seg-b:hover{color:#fff}
.seg--glass .seg-b[aria-selected="true"],.seg--glass .seg-b[aria-checked="true"]{background:#fff;color:var(--ink)}
.dark .tab{color:var(--warm)}.dark .tab:hover,.dark .tab[aria-selected="true"]{color:#fff}

/* chips: colour radiogroup (crops of the laid floors) */
.chips-w{position:relative;padding-bottom:30px}
.chips{--chip:40px;position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px}
.chips--sm{--chip:28px;gap:10px 14px}
.chip-g{display:flex;flex-direction:column;gap:10px;flex:none}
.chip-l{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);transition:color .4s}
.chip-g.is-on .chip-l{color:var(--ink)}
.chip-row{display:flex;gap:8px}
.chips--sm .chip-row{gap:6px}
.chip{position:relative;width:var(--chip);height:var(--chip);border-radius:50%;flex:none;background:var(--sand);transition:transform .6s var(--ease)}
.chip img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chip::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ink);opacity:0;transform:scale(.82);transition:opacity .35s,transform .6s var(--ease)}
.chip[aria-checked="true"]::after{opacity:1;transform:none}
.chip:hover{transform:translateY(-2px)}
.chip:focus-visible{outline:none}
.chip:focus-visible::after{opacity:1;transform:none;border-style:dashed}
.chip::before{content:attr(data-tip);position:absolute;z-index:6;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:6px 9px;background:var(--ink);color:#fff;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .4s var(--ease)}
.chip:hover::before,.chip:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.chips-name{position:absolute;left:0;bottom:0;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink);transform:translateX(calc(var(--x,0px) - 50%));transition:transform .7s var(--ease)}
.dark .chip::after{border-color:#fff}.dark .chips-name,.dark .chip-g.is-on .chip-l{color:#fff}.dark .chip-l{color:var(--warm)}

/* stage: fixed-aspect box, 600 ms crossfade */
.cx-stage,.px-stage,.px-ibox{position:relative;overflow:hidden;background:var(--sand);touch-action:pan-y}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.stage-img.is-front{opacity:1;transform:none}
.stage-img.is-contain{object-fit:contain;background:var(--paper);padding:clamp(16px,2.4vw,40px)}
.stage-load{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:6;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.is-loading>.stage-load{opacity:1;transition-delay:.25s}
.stage-load::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.9);transform:translateX(-100%);animation:stload 1.2s var(--ease-io) infinite}
@keyframes stload{to{transform:translateX(100%)}}

/* C1 — colour room switcher (.cx) */
.cx-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"left info" "chips chips" "foot foot";column-gap:clamp(28px,4.4vw,80px)}
.cx-left{grid-area:left;min-width:0}
.cx-ctrl{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 28px;margin-bottom:16px;border-bottom:1px solid var(--line-l)}
.cx-ctrl .tabs{margin-bottom:-1px}
.cx-ctrl .seg{margin-bottom:10px}
.cx-stage{aspect-ratio:16/10}
.cx-hud{position:absolute;z-index:5;top:16px;right:16px;display:flex;gap:1px}
.cx-arr{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(15,18,17,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,color .3s}
.cx-arr:hover{background:#fff;color:var(--ink)}
.cx-hint{position:absolute;z-index:5;left:16px;top:16px;padding:8px 12px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(15,18,17,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.cx-hint.is-on{opacity:1;transform:none}
.cx-under{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cx-under .cap{margin-top:12px}
.cx-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-info{grid-area:info;min-width:0;display:flex;flex-direction:column;padding-top:72px}
.cx-num{font-weight:300;font-size:clamp(26px,2.2vw,36px);letter-spacing:-.02em;line-height:1;color:var(--taupe);font-variant-numeric:tabular-nums}
.cx-name{font-weight:300;font-size:clamp(56px,6.4vw,108px);letter-spacing:-.04em;line-height:.95;margin-top:10px}
.cx-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cx-mask>span{display:block}
.cx-meta{margin-top:20px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.cx-desc{margin-top:16px;max-width:360px;color:var(--body-l);font-size:16px;line-height:1.6}
.cx-prev{margin-top:12px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.cx-spec{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-l);font-size:11px;font-weight:500;letter-spacing:.1em;line-height:1.85;text-transform:uppercase;color:var(--taupe-2)}
.cx-actions{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cx-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.cx-links:empty{display:none}
.cx-chipsw{grid-area:chips;margin-top:clamp(28px,3vw,40px);min-width:0}
.cx-foot{grid-area:foot;margin-top:4px;padding-top:16px;border-top:1px solid var(--line-l);font-size:12px;line-height:1.5;color:var(--taupe-2)}
@media (max-width:1100px){.cx-info{padding-top:0;justify-content:flex-end}}
@media (max-width:900px){
  .cx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "chips" "info" "foot"}
  .cx-left{display:flex;flex-direction:column}
  .cx-stage{order:-1;aspect-ratio:4/5;margin:0 calc(var(--gutter)*-1)}
  .cx-under{order:-1;padding-bottom:4px}
  .cx-ctrl{flex-direction:column;align-items:stretch;gap:10px;margin:18px 0 0;border:0}
  .cx-ctrl .tabs,.cx-ctrl .seg{margin:0}
  .cx-info{padding-top:28px}
  .cx-actions .btn{width:100%}
  .cx-chipsw{margin-top:22px}
}
@media (max-width:900px){
  /* phone: segmented controls, 44 px tall, scrolling */
  .cx .tabs{gap:0;border:1px solid rgba(15,18,17,.22)}
  .cx .tab{flex:1 0 auto;min-height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;font-size:11px}
  .cx .tab+.tab{border-left:1px solid rgba(15,18,17,.22)}
  .cx .tab::after{display:none}
  .cx .tab[aria-selected="true"]{background:var(--ink);color:#fff}
  .cx .seg{display:flex}
  .cx .seg-b{flex:1 0 auto;min-height:44px}
  /* chip row: one horizontal scroll row, family labels stick at the row start */
  .chips:not(.chips--sm){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;margin:0 calc(var(--gutter)*-1);padding:6px var(--gutter)}
  .chips:not(.chips--sm)::-webkit-scrollbar{display:none}
  .chips:not(.chips--sm) .chip-g{flex-direction:row;align-items:center;gap:0;padding-right:18px}
  .chips:not(.chips--sm) .chip-l{position:sticky;left:calc(var(--gutter)*-1);z-index:2;align-self:stretch;display:flex;align-items:center;padding:0 22px 0 var(--gutter);margin-left:calc(var(--gutter)*-1);background:linear-gradient(to right,var(--paper) calc(100% - 16px),rgba(237,233,226,0))}
  .cx-hud{top:auto;bottom:12px}
  .cx .tabs:not(.is-end){-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .chips{--chip:44px}
  .chips-name{transform:none;left:0}
  .chip::before{display:none}
}

/* B6 — C3 pattern switcher (.px) */
.px-head{margin-bottom:clamp(28px,3vw,44px)}
.px-fig{position:relative}
.px-stage{aspect-ratio:2/1}
.px-bar{position:absolute;z-index:5;left:24px;right:24px;bottom:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;pointer-events:none}
.px-bar>*{pointer-events:auto}
.px-chips .chips-w{padding:0}
.px-chips .chips{padding:8px 10px;background:rgba(15,18,17,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.px-chips .chip::after{border-color:#fff}
.px-flat{display:none}
.px-inset{position:absolute;z-index:5;right:24px;bottom:96px;width:clamp(150px,16.6vw,240px)}
.px-ibox{aspect-ratio:1/1;border:1px solid rgba(255,255,255,.92)}
.px-il{position:absolute;left:8px;top:8px;z-index:6;padding:5px 8px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(15,18,17,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.px-under{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:16px clamp(24px,3vw,48px);margin-top:20px;align-items:start}
.px-line{font-size:16px;line-height:1.55;color:var(--body-l)}
.px-dim{font-size:11px;font-weight:500;letter-spacing:.1em;line-height:1.85;text-transform:uppercase;color:var(--taupe-2)}
.px-under .cap{margin-top:0;justify-content:flex-end;text-align:right}
.px-head .p,.px-head .mid{max-width:none}
@media (max-width:1100px){.px-inset{bottom:auto;top:20px;right:20px}}
@media (max-width:900px){
  .px-stage{aspect-ratio:4/5;margin:0 calc(var(--gutter)*-1)}
  .px-inset{display:none}
  .px-bar{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px;pointer-events:auto}
  .px-bar .seg{border-color:rgba(15,18,17,.22);background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .px-bar .seg .seg-b{flex:1 0 auto;min-height:44px;color:var(--taupe-2)}
  .px-bar .seg .seg-b+.seg-b{border-left-color:rgba(15,18,17,.22)}
  .px-bar .seg .seg-b[aria-selected="true"]{background:var(--ink);color:#fff}
  .px-flat{display:inline-flex;min-height:44px;border:1px solid rgba(15,18,17,.22)}
  .px-chips{grid-column:1/-1}
  .px-chips .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:6px 4px;margin:0 -4px}
  .px-chips .chips::-webkit-scrollbar{display:none}
  .px-chips .chips{--chip:36px}
  .px-chips .chip::after{border-color:var(--ink)}
  .px-chips .chip::before{display:none}
  .px-under{grid-template-columns:1fr;gap:10px}
  .px-under .cap{justify-content:flex-start;text-align:left}
}
@media (max-width:420px){.px-bar .seg .seg-b{padding:0 10px;font-size:10px;letter-spacing:.1em}.px-bar .seg-b small{display:none}}

/* B7 — to-scale width comparison (wc) -------------------------------------- */
.wc{--k:1;--h:clamp(300px,48vh,540px);--gap:6px;--ggap:clamp(20px,2.4vw,40px)}
.wc-row{display:flex;align-items:flex-end;gap:var(--ggap);overflow:clip;overflow-clip-margin:2px}
.wc-g{flex:none;display:flex;flex-direction:column;min-width:0}
.wc-gl{width:0;min-width:100%;display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid currentColor;white-space:nowrap}
.wc-gl .r{opacity:.7;font-variant-numeric:tabular-nums}
.wc-planks{display:flex;align-items:flex-end;gap:var(--gap)}
.wc-p{flex:none;width:calc((var(--eq) + (var(--w) - var(--eq)) * var(--k)) * var(--ppi,10) * 1px);transition:opacity .5s var(--ease)}
.wc-board{position:relative;height:var(--h);filter:brightness(var(--b,1)) saturate(var(--sat,1));background-color:var(--sand);background-size:cover;background-position:50% var(--y,50%);overflow:hidden}
.wc-board::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(10,12,11,.16),rgba(10,12,11,0) 7%,rgba(10,12,11,0) 93%,rgba(10,12,11,.16))}
.wc-l{margin-top:14px;white-space:nowrap}
.wc-in{display:block;font-weight:300;font-size:clamp(17px,1.65vw,26px);letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.wc-mm{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;color:var(--taupe);font-variant-numeric:tabular-nums}
.wc-row:hover .wc-p{opacity:.4}
.wc-row .wc-p:hover{opacity:1}
.wc-p.is-dim{opacity:.32}
.wc-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px);padding-top:16px;border-top:1px solid var(--line-l);font-size:13px;color:var(--taupe-2)}
.dark .wc-gl,.dark .wc-mm{color:var(--warm)}
.dark .wc-note{border-color:var(--line-d);color:rgba(255,255,255,.55)}
@media (max-width:900px){
  .wc{--h:clamp(170px,44vw,300px);--gap:4px}
  .wc-row{flex-direction:column;align-items:flex-start;gap:32px}
  .wc-mm{font-size:10px;letter-spacing:0}
  .wc-in{font-size:15px}
}

/* B8 — C12 accordion "Technical details" ---------------------------------- */
.acc{border-top:1px solid var(--line-l)}
.acc-item{border-bottom:1px solid var(--line-l)}
.acc-btn{width:100%;min-height:72px;display:flex;align-items:center;gap:12px 28px;padding:16px 0;text-align:left}
.acc-btn .t{font-weight:300;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.012em;line-height:1.2}
.acc-btn .t>span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.acc-btn:hover .t>span{background-size:100% 1px}
.acc-btn .sum{flex:1;min-width:0;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.acc-btn .k{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--taupe);font-variant-numeric:tabular-nums;flex:none;width:40px}
.acc-ic{position:relative;width:18px;height:18px;flex:none;margin-left:auto;transition:transform .5s var(--ease)}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:currentColor;transition:transform .5s var(--ease)}
.acc-ic::after{transform:rotate(90deg)}
.acc-item.is-open .acc-ic{transform:rotate(180deg)}
.acc-item.is-open .acc-ic::after{transform:rotate(180deg) scaleX(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-item.is-open>.acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .45s}
.acc-item.is-open>.acc-panel>.acc-inner{visibility:visible;transition-delay:0s}
.acc-body{padding:6px 0 clamp(28px,3vw,44px);opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.acc-item.is-open .acc-body{opacity:1;transform:none;transition-delay:.08s}
.acc--quiet .acc-btn .t{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.tbl{overflow-x:auto;scrollbar-width:thin}
.tbl .spec-table{min-width:520px}
.tbl .spec-table th:first-child,.tbl .spec-table td:first-child{position:sticky;left:0;z-index:1;background:var(--paper);padding-right:16px}
.dark .acc,.dark .acc-item{border-color:var(--line-d)}
.dark .acc-btn .k,.dark .acc-btn .sum{color:var(--warm)}
.dark .tbl .spec-table td:first-child,.dark .tbl .spec-table th:first-child{background:var(--ink)}
@media (max-width:700px){.acc-btn{flex-wrap:wrap;align-content:center}.acc-btn .sum{order:3;flex-basis:100%;margin-top:-4px}.acc-btn .k{width:auto}}

/* B9 — editorial image grids ------------------------------------------------ */
.ed{display:grid;gap:clamp(28px,2.4vw,40px) clamp(14px,2vw,32px)}
.ed-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ed-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed-2.ed-asym{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.ed-2.ed-asym-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
.ed-3.ed-stagger>.ed-item:nth-child(3n+2){margin-top:clamp(56px,9vw,150px)}
.ed-item{position:relative;margin:0;min-width:0}
.ed-media{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/5);background:var(--sand)}
.dark .ed-media{background:#0A0C0B}
.ed-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.ed-item:hover .ed-media img{transform:scale(1.045)}
.ed-media .ed-alt{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease),transform 1.8s var(--ease);z-index:1}
.ed-item:hover .ed-alt,.ed-item:focus-within .ed-alt{clip-path:inset(0 0 0 0)}
.ed-over{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,2vw,28px);color:#fff;background:linear-gradient(to top,rgba(10,12,11,.62),rgba(10,12,11,0));opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.ed-over .spec-line{font-size:11px;line-height:1.7}
.ed-item:hover .ed-over,.ed-item:focus-within .ed-over{opacity:1;transform:none}
.ed-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.ed-cap .t{font-size:17px;line-height:1.35}
.ed-cap .n{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--taupe);font-variant-numeric:tabular-nums;white-space:nowrap}
.ed-cap .d{display:block;margin-top:4px;font-size:14px;color:var(--taupe-2);line-height:1.5;max-width:44ch}
.dark .ed-cap .n{color:var(--warm)}
.dark .ed-cap .d{color:rgba(255,255,255,.58)}
a.ed-item{display:block;color:inherit}
@media (hover:none){.ed-over{opacity:1;transform:none}}
@media (max-width:900px){
  .ed-3{grid-template-columns:1fr 1fr}
  .ed-3.ed-stagger>.ed-item:nth-child(3n+2){margin-top:0}
  .ed-3>.ed-item:nth-child(3n){grid-column:1/-1}
  .ed-3>.ed-item:nth-child(3n) .ed-media{aspect-ratio:4/3}
}
@media (max-width:640px){
  .ed-2,.ed-2.ed-asym,.ed-2.ed-asym-r,.ed-3{grid-template-columns:1fr}
  .ed--swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter);scroll-padding-left:var(--gutter);gap:12px}
  .ed--swipe::-webkit-scrollbar{display:none}
  .ed--swipe>.ed-item{flex:none;width:78vw;scroll-snap-align:start}
  .ed--swipe>.ed-item:nth-child(3n) .ed-media{aspect-ratio:var(--ar,4/5)}
}

/* B11 — image-led cards + next-page link ------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,3vw,48px) clamp(12px,1.4vw,22px)}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;display:block;color:inherit;min-width:0}
.card-media{position:relative;overflow:hidden;aspect-ratio:var(--ar,3/4);background:#0A0C0B}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.8s var(--ease)}
.card:hover .card-media img{transform:scale(1.08)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,12,11,.32),rgba(10,12,11,0) 36%);pointer-events:none}
.card-n{position:absolute;z-index:2;left:clamp(16px,1.6vw,24px);top:clamp(14px,1.4vw,22px);font-weight:300;font-size:clamp(36px,3.4vw,56px);letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding-top:20px}
.card-t{font-weight:300;font-size:clamp(26px,2.3vw,38px);letter-spacing:-.022em;line-height:1.04}
.card-s{margin-top:10px;font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--taupe)}
.card-d{margin-top:12px;font-size:15px;line-height:1.55;color:var(--taupe-2);max-width:34ch}
.card-go{width:46px;height:46px;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;flex:none;opacity:.5;transition:background .45s var(--ease),color .45s var(--ease),opacity .45s}
.card-go svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.card:hover .card-go{opacity:1;background:var(--ink);color:#fff;border-color:var(--ink)}
.card:hover .card-go svg{transform:translateX(3px)}
.card-t>span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.card:hover .card-t>span{background-size:100% 1px}
.dark .card-s{color:var(--warm)}
.dark .card-d{color:rgba(255,255,255,.62)}
.dark .card:hover .card-go{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards--2,.cards--3{grid-template-columns:1fr;gap:44px}.card-media{aspect-ratio:var(--ar-m,4/3)}}

.next{position:relative;display:block;height:min(92svh,860px);min-height:540px;overflow:hidden;color:#fff;background:var(--ink)}
.next-media{position:absolute;inset:0;overflow:hidden}
.next-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2s var(--ease)}
.next:hover .next-media img{transform:scale(1.01)}
.next-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,11,.7) 0%,rgba(10,12,11,.1) 55%,rgba(10,12,11,.3) 100%)}
.next-top{position:absolute;left:0;right:0;top:clamp(28px,4vw,56px);z-index:2}
.next-top .wrap{display:flex;justify-content:space-between;gap:16px}
.next .eyebrow,body.light-page .next .eyebrow{color:rgba(255,255,255,.86)}
.next-inner{position:absolute;left:0;right:0;bottom:clamp(36px,6vh,72px);z-index:2}
.next-t{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-weight:300;font-size:clamp(64px,13vw,220px);letter-spacing:-.05em;line-height:.86}
.next-go{width:clamp(60px,6.4vw,104px);height:clamp(60px,6.4vw,104px);border:1px solid rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-bottom:.06em;transition:background .5s var(--ease),color .5s var(--ease)}
.next-go svg{width:clamp(18px,1.8vw,28px);height:auto;transition:transform .7s var(--ease)}
.next:hover .next-go{background:#fff;color:var(--ink)}
.next:hover .next-go svg{transform:translateX(5px)}
.next-s{margin-top:clamp(18px,2vw,28px);padding-top:16px;border-top:1px solid rgba(255,255,255,.3);display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;color:rgba(255,255,255,.78)}
.next .vis{top:auto;bottom:auto}
@media (max-width:640px){.next{height:78svh;min-height:480px}.next-t{font-size:clamp(52px,17vw,96px)}}

/* cursor label (pointer devices) */
.cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:92px;height:92px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transform:translate(-50%,-50%) scale(0)}
@media (hover:none){.cursor{display:none}}

/* ============================== C. v4 phase 2: page components ============================== */
.zoom-z{position:absolute;inset:0;will-change:transform}
.stage--slow .stage-img{transition-duration:1.2s,2.4s}
.stage--fast .stage-img{transition-duration:.45s,1s}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-spec{margin-top:20px;color:rgba(255,255,255,.82)}
.zoom .p{max-width:520px}
.zoom-inner .xl,.zoom-inner .big{text-wrap:balance}
.sec-head .p{margin-top:0}
.head2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(36px,4.4vw,64px)}
.head2 .p{margin:0}
@media (max-width:900px){.head2{grid-template-columns:1fr}}
.link-row{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:28px}
.vis-cap{margin-top:12px}

/* C2 — hero colour strip */
.c2{display:flex;flex-direction:column;align-items:flex-end;gap:12px;color:#fff}
.c2-top{display:flex;align-items:center;gap:16px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.c2-l b{font-weight:500;color:#fff}
.c2-timer{display:block;width:80px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;transition:opacity .5s}
.c2-timer b{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.c2-stopped .c2-timer{opacity:0}
.c2 .chips-w{padding:0}
.c2 .chips{--chip:32px;gap:8px 12px}
.c2 .chip::after{border-color:#fff;inset:-4px}
.c2 .chip::before{bottom:auto;top:calc(100% + 10px)}
.c2-all{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;color:#fff}
.c2-stage{position:absolute;inset:0;overflow:hidden}
.c2-stage .stage-img{object-position:50% 62%}
.hero-c2 .zoom-veil{background:linear-gradient(to right,rgba(10,12,11,.55) 0%,rgba(10,12,11,.18) 40%,rgba(10,12,11,0) 60%),linear-gradient(to top,rgba(10,12,11,.5) 0%,rgba(10,12,11,0) 32%)}
.hero-c2 .zoom-inner{bottom:clamp(36px,6vh,64px)}
.hero-c2 .c2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 48px;align-items:end;margin-top:30px}
.hero-c2 .vis{bottom:auto;top:104px}
@media (max-width:1100px){.hero-c2 .c2-grid{grid-template-columns:1fr}.c2{align-items:flex-start}}
@media (max-width:700px){
  .c2 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:6px var(--gutter);max-width:100vw}
  .c2 .chips::-webkit-scrollbar{display:none}
  .c2{gap:10px;width:100%}
  .c2 .chip::before{display:none}
}

/* C6 — compare */
.c6-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sand);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.c6{--x:50%}
.c6-a,.c6-b{position:absolute;inset:0;overflow:hidden}
.c6-b{clip-path:inset(0 calc(100% - var(--x)) 0 0);z-index:1}
.c6 .stage-img{object-position:50% 72%}
.c6-line{position:absolute;z-index:3;top:0;bottom:0;left:var(--x);width:1px;margin-left:-.5px;background:#fff;pointer-events:none}
.c6-knob{position:absolute;z-index:4;left:var(--x);top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;transition:transform .4s var(--ease)}
.c6-knob svg{width:22px;height:22px}
.c6.is-drag .c6-knob{transform:scale(.9);cursor:grabbing}
.c6-knob:focus-visible{outline:1px solid #fff;outline-offset:4px}
.c6-tag{position:absolute;z-index:3;top:18px;padding:6px 10px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(15,18,17,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.c6-tag--l{left:18px}.c6-tag--r{right:18px}
.c6-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;margin-top:22px}
.c6-p{min-width:0}
.c6-p:last-child{display:flex;flex-direction:column;align-items:flex-end}
.c6-lab{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.c6-lab b{font-weight:500;color:var(--ink)}
.c6 .chips-w{padding:0}
@media (max-width:700px){
  .c6-stage{aspect-ratio:4/5;cursor:ns-resize;margin:0 calc(var(--gutter)*-1)}
  .c6-b{clip-path:inset(0 0 calc(100% - var(--x)) 0)}
  .c6-line{top:var(--x);bottom:auto;left:0;right:0;width:auto;height:1px;margin:-.5px 0 0}
  .c6-knob{left:50%;top:var(--x)}
  .c6-knob svg{transform:rotate(90deg)}
  .c6-tag--l{top:14px;left:14px}.c6-tag--r{top:auto;bottom:14px;right:14px}
  .c6-pick{grid-template-columns:minmax(0,1fr)}
  .c6-p:last-child{align-items:stretch}
  .c6 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:6px var(--gutter)}
  .c6 .chips::-webkit-scrollbar{display:none}
  .c6 .chips{--chip:36px}
}

/* C7 — colour ribbon */
.c7{--h:clamp(440px,42vw,620px);margin:0}
.c7-vp{position:relative;overflow:hidden}
.c7-track{position:relative}
.c7-track>img{display:block;width:100%;height:var(--h);object-fit:cover}
.c7-hit{position:absolute;left:0;right:0;top:0;height:var(--h);display:flex;z-index:2}
.c7-hit a{position:relative;flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;min-width:0}
.c7-hit a::before{content:"";position:absolute;inset:0;background:rgba(15,18,17,.16);opacity:0;transition:opacity .45s var(--ease)}
.c7-hit:hover a:not(:hover)::before{opacity:1}
.c7-hit a span{position:relative;padding:5px 7px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#fff;background:rgba(15,18,17,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ease)}
.c7-hit a:hover span,.c7-hit a:focus-visible span{opacity:1;transform:none}
.c7-hit a:focus-visible{outline:1px solid #fff;outline-offset:-4px}
.c7-fam{display:flex;margin-top:12px}
.c7-fam span{min-width:0;padding:10px 12px 0 0;border-top:1px solid var(--ink);margin-right:2px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7-fam b{font-weight:500;color:var(--ink)}
.dark .c7-fam span{border-color:#fff}.dark .c7-fam b{color:#fff}
@media (max-width:900px){
  .c7{--h:420px}
  .c7-vp{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gutter)*-1)}
  .c7-vp::-webkit-scrollbar{display:none}
  .c7-track{width:calc(100vw * 17 / 2.5)}
  .c7-hit a{scroll-snap-align:start}
  .c7-hit a span{opacity:1;transform:none}
  .c7-fam{padding:0 var(--gutter)}
}

/* C15 — colour sheet */
.sheet{position:fixed;inset:0;z-index:80;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet[hidden]{display:none}
html.sheet-open,html.sheet-open body{overflow:hidden}
.sheet-bar{position:sticky;top:0;z-index:6;background:var(--paper);border-bottom:1px solid var(--line-l)}
.sheet-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:72px}
.sheet-bar .eyebrow{color:var(--taupe)}
.sheet-x{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:10px 0}
.sheet-x span{font-size:22px;line-height:1;font-weight:300}
.sheet-in{padding-top:28px;padding-bottom:72px}
.sheet-room{position:relative;aspect-ratio:1310/720;overflow:hidden;background:var(--sand)}
.sheet-room .stage-img{object-position:50% 68%}
.sheet-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);margin-top:clamp(28px,3vw,48px)}
.sheet-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;align-content:start}
.sheet-tile{margin:0}
.sheet-t{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--sand)}
.sheet-tile .cap{margin-top:10px}
.sheet-info .cx-name{margin-top:6px}
.sheet-row{margin-top:18px;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:1.8;text-transform:uppercase;color:var(--taupe-2)}
.sheet-specs .cx-spec{margin-top:12px;padding-top:12px}
.sheet-cta{margin-top:28px}
.sheet-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--line-l)}
.sheet-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line-l)}
@media (max-width:900px){.sheet-grid{grid-template-columns:1fr}.sheet-room{aspect-ratio:4/3;margin:0 calc(var(--gutter)*-1)}.sheet-cta{width:100%}}

/* range inputs (C4, C5) */
.rng{position:relative;padding-bottom:46px}
.rng input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.rng input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--ink) var(--rp,50%),rgba(15,18,17,.24) var(--rp,50%))}
.rng input::-moz-range-track{height:1px;background:rgba(15,18,17,.24)}
.rng input::-moz-range-progress{height:1px;background:var(--ink)}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--ink);border:6px solid var(--paper);outline:1px solid var(--ink);transition:transform .3s var(--ease)}
.rng input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:5px solid var(--paper);outline:1px solid var(--ink)}
.rng input:active::-webkit-slider-thumb{transform:scale(1.15)}
.rng input:focus-visible{outline:none}
.rng input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink)}
.rng-ticks span{position:absolute;top:34px;left:var(--p);transform:translateX(-50%);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--taupe);white-space:nowrap;text-align:center;line-height:1.4}
.rng-ticks span:first-child{transform:none}.rng-ticks span:last-child{transform:translateX(-100%)}
.rng-ticks b{display:block;font-weight:500;color:var(--ink);font-size:12px}
.sand .rng input::-webkit-slider-thumb{border-color:var(--sand)}

/* C4 — width to scale (XXL) */
.c4-stage{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--sand)}
.c4 .stage-img{object-position:0 50%}
.c4-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:2;background:linear-gradient(to top,rgba(10,12,11,.48),rgba(10,12,11,0));pointer-events:none}
.c4-ruler{position:absolute;z-index:3;left:0;bottom:0;color:#fff;overflow:visible}
.c4-ruler line{stroke:currentColor;stroke-width:1;shape-rendering:crispEdges}
.c4-ruler text{fill:currentColor;font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.04em}
.c4-ghost{position:absolute;z-index:3;left:0;top:0;border:1px dashed rgba(255,255,255,.95);border-left:0;border-top:0;transition:width .3s}
.c4-ghost span{position:absolute;left:10px;top:14px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;writing-mode:vertical-rl;padding:6px 4px;background:rgba(15,18,17,.3)}
.c4-ctl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px clamp(32px,5vw,96px);align-items:start;margin-top:30px}
.c4-ctl .c4-range{max-width:620px}
.c4-read b{display:block;font-weight:300;font-size:clamp(52px,5.4vw,88px);letter-spacing:-.035em;line-height:.95}
.c4-t{display:block;margin-top:12px;font-size:15px;line-height:1.55;color:var(--body-l)}
@media (max-width:700px){.c4-stage{aspect-ratio:4/3;margin:0 calc(var(--gutter)*-1)}.c4-ctl{grid-template-columns:1fr}}

/* C5 — free width slider (Custom) */
.c5-stage{position:relative;height:clamp(420px,39vw,560px);overflow:hidden;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);background:repeating-linear-gradient(to right,rgba(15,18,17,.05) 0 1px,transparent 1px calc(var(--ppi,26)*12px))}
.c5-board{position:absolute;left:0;right:0;top:50%;height:calc(var(--w,12) * var(--ppi,26) * 1px);transform:translateY(-50%);background:var(--tex) left center/auto 100% repeat-x;box-shadow:none;border-top:1px solid rgba(70,52,36,.45);border-bottom:1px solid rgba(70,52,36,.45);transition:height .35s var(--ease)}
.c5-ghost{position:absolute;z-index:2;left:0;right:0;top:50%;height:calc(var(--g) * var(--ppi,26) * 1px);transform:translateY(-50%);border-top:1px dashed rgba(15,18,17,.62);border-bottom:1px dashed rgba(15,18,17,.62);pointer-events:none}
.c5-ghost span{position:absolute;right:0;top:-1px;transform:translateY(-100%);padding-bottom:5px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.c5-ctl{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:28px clamp(32px,5vw,96px);align-items:start;margin-top:32px}
.c5-read{text-align:right}
.c5-read b{display:block;font-weight:300;font-size:clamp(56px,6vw,96px);letter-spacing:-.035em;line-height:.95;font-variant-numeric:tabular-nums}
.c5-mm{display:block;margin-top:10px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
@media (max-width:700px){
  .c5-stage{height:560px;background:none}
  .c5-board{top:0;bottom:0;left:50%;right:auto;height:auto;width:calc(var(--w,12) * var(--ppi,17) * 1px);transform:translateX(-50%);background:var(--tex-v) center top/100% auto repeat-y;border:0;border-left:1px solid rgba(70,52,36,.45);border-right:1px solid rgba(70,52,36,.45);transition:width .35s var(--ease)}
  .c5-ghost{top:0;bottom:0;left:50%;right:auto;height:auto;width:calc(var(--g) * var(--ppi,17) * 1px);transform:translateX(-50%);border:0;border-left:1px dashed rgba(15,18,17,.62);border-right:1px dashed rgba(15,18,17,.62)}
  .c5-ghost span{top:auto;bottom:8px;right:auto;left:50%;transform:translateX(-50%);padding:4px 6px;background:var(--paper);white-space:normal;text-align:center;width:max-content;max-width:120px}
  .c5-ghost:nth-child(2) span{bottom:52px}
  .c5-ctl{grid-template-columns:1fr}.c5-read{text-align:left;order:-1}
  .c5-ticks span:nth-child(2),.c5-ticks span:nth-child(5){display:none}
}

/* C8 — layer build */
.c8{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);color:var(--ink);--gap:30px}
.c8.is-flat{--gap:3px}
.c8-vis{position:sticky;top:0;align-self:start;height:100svh;overflow:hidden;background:var(--sand);display:flex;align-items:center;justify-content:center}
.c8-scene{width:min(26vw,390px);aspect-ratio:1/1;perspective:1800px;margin-top:-6vh}
.c8-stack{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-38deg)}
.c8-base{position:absolute;inset:0;overflow:hidden;background:#b49a7a}
.c8-base img{width:100%;height:100%;object-fit:cover}
.c8-b{position:absolute;inset:0;transform:translateZ(calc(var(--i) * var(--gap)));opacity:.28;transition:transform .7s var(--ease),opacity .6s var(--ease);background:rgba(250,248,244,.22);border:1px solid rgba(255,255,255,.85)}
.c8-b[data-g="colour"]{background:rgba(138,96,58,.38);border-color:rgba(255,236,214,.8)}
.c8-b[data-g="seal"]{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.1) 55%);border-color:#fff}
.c8[data-on="all"] .c8-b,.c8[data-on="colour"] .c8-b[data-g="colour"],.c8[data-on="flex"] .c8-b[data-g="mid"],.c8[data-on="strength"] .c8-b[data-g="mid"],.c8[data-on="seal"] .c8-b{opacity:1}
.c8-leg{position:absolute;left:clamp(20px,2.6vw,40px);bottom:clamp(20px,3vw,40px);display:grid;gap:6px}
.c8-leg li{display:flex;gap:14px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);transition:color .4s}
.c8-leg li b{font-weight:500;min-width:48px;font-variant-numeric:tabular-nums}
.c8[data-on="all"] .c8-leg li,.c8[data-on="colour"] .c8-leg [data-g="colour"],.c8[data-on="flex"] .c8-leg [data-g="mid"],.c8[data-on="strength"] .c8-leg [data-g="mid"],.c8[data-on="seal"] .c8-leg li{color:var(--ink)}
.c8-note{position:absolute;right:clamp(20px,2.6vw,40px);bottom:clamp(20px,3vw,40px);font-size:11px;color:var(--taupe-2);text-align:right;max-width:200px}
.c8-steps{padding:0 var(--gutter) 0 clamp(40px,6.5vw,120px);min-width:0}
.c8-head{min-height:90svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(100px,12vh,140px) 0 40px;max-width:540px}
.c8-step{min-height:72svh;display:flex;flex-direction:column;justify-content:center;max-width:500px;padding:40px 0;opacity:.3;transition:opacity .8s var(--ease)}
.c8[data-on="colour"] .c8-step[data-g="colour"],.c8[data-on="flex"] .c8-step[data-g="flex"],.c8[data-on="strength"] .c8-step[data-g="strength"],.c8[data-on="seal"] .c8-step[data-g="seal"]{opacity:1}
.c8-step .n{display:flex;gap:14px;align-items:center;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.c8-step .n::after{content:"";width:48px;height:1px;background:currentColor;opacity:.6}
.c8-step h3{margin-top:18px;font-weight:300;font-size:clamp(32px,3.4vw,52px);letter-spacing:-.022em;line-height:1.05}
.c8-step h3 small{display:block;margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.c8-step p{margin-top:18px;color:var(--body-l);max-width:440px}
.c8-steps .foot-note{padding:0 0 clamp(80px,10vw,140px)}
.is-static .c8-step,.no-motion .c8-step{opacity:1;min-height:52svh}
@media (max-width:900px){
  .c8{grid-template-columns:1fr;--gap:22px}
  .c8-vis{position:relative;height:auto;aspect-ratio:auto;margin:0;padding:150px 0 150px}
  .c8-scene{width:54vw;margin:0}
  .c8 .c8-b{opacity:1!important;transform:translateZ(calc(var(--i) * 22px))!important}
  .c8-leg li{color:var(--ink)!important}
  .c8-steps{display:contents}
  .c8 .c8-head{order:-2;min-height:0;padding:clamp(64px,12vw,96px) var(--gutter) 32px}
  .c8-vis{order:-1}
  .c8 .c8-step{min-height:0;opacity:1;padding:28px 0;margin:0 var(--gutter);border-top:1px solid var(--line-l)}
  .c8 .c8-steps .foot-note{padding:0 var(--gutter) 48px}
}

/* C9 compact / tab stage */
.ts-stage{position:relative;aspect-ratio:1310/420;overflow:hidden;background:var(--sand)}
.ts-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px clamp(24px,3vw,48px);align-items:center;margin-top:20px}
.ts-text{font-size:15px;line-height:1.55;color:var(--body-l);max-width:560px}
.ts .cap{margin-top:14px}
@media (max-width:800px){.ts-stage{aspect-ratio:3/1;margin:0 calc(var(--gutter)*-1)}.ts-bar{grid-template-columns:1fr}.ts .seg{display:flex}.ts .seg-b{flex:1;min-height:44px}}

/* ASY — 7/5 image + text */
.asy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5.5vw,104px);align-items:center}
.asy--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.asy--rev .asy-fig{order:2}
.asy-fig{margin:0;min-width:0}
.asy-fig .media{aspect-ratio:var(--ar,16/10)}
.asy-txt{min-width:0}
.asy-n{font-weight:300;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.01em;color:var(--taupe);font-variant-numeric:tabular-nums}
.dark .asy-n{color:var(--warm)}
.asy-txt .p{margin-top:22px}
.asy-txt .spec-line{margin-top:20px;color:var(--taupe-2)}
.dark .asy-txt .spec-line{color:rgba(255,255,255,.62)}
@media (max-width:900px){.asy,.asy--rev{grid-template-columns:1fr;gap:28px}.asy--rev .asy-fig{order:0}.asy-fig .media{aspect-ratio:var(--ar-m,4/5)}}

/* full-bleed band (21:9) with overlay */
.zoom--band{height:auto;min-height:0;aspect-ratio:1440/640}
@media (max-width:900px){.zoom--band{aspect-ratio:auto;height:auto;min-height:0;overflow:visible;background:var(--ink)}
  .zoom--band .zoom-media{position:relative;inset:auto;aspect-ratio:4/5}
  .zoom--band .zoom-veil{display:none}
  .zoom--band .zoom-inner{position:relative;bottom:auto;padding:36px 0 64px}}

/* HALF — image half + text half */
.half{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(640px,88svh,880px)}
.half-media{position:relative;overflow:hidden;background:#0A0C0B;margin:0}
.half-media>img,.half-media picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.half-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,8vw,130px) var(--gutter) clamp(64px,8vw,130px) clamp(40px,6vw,112px);min-width:0}
.half--rev .half-media{order:2}
.half--rev .half-txt{padding:clamp(64px,8vw,130px) clamp(40px,6vw,112px) clamp(64px,8vw,130px) var(--gutter)}
.half-txt .p{margin-top:22px}
.half-txt .btns{margin-top:32px}
@media (max-width:900px){.half{grid-template-columns:1fr;min-height:0}.half-media{aspect-ratio:4/5}.half--rev .half-media{order:0}.half-txt,.half--rev .half-txt{padding:48px var(--gutter) 72px}}

/* doors — two image halves with overlay text */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.door{position:relative;display:block;height:clamp(640px,92svh,880px);overflow:hidden;color:#fff;background:#0A0C0B}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.door-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,11,.78) 0%,rgba(10,12,11,.1) 58%)}
.door-in{position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,3.4vw,56px)}
.door-in .eyebrow{color:rgba(255,255,255,.8)}
.door-in h3{margin-top:16px;font-weight:300;font-size:clamp(28px,2.8vw,44px);letter-spacing:-.02em;line-height:1.08;max-width:16ch}
.door-in .p{margin-top:16px;color:rgba(255,255,255,.78);max-width:440px;font-size:16px}
.door-in .link{margin-top:24px;color:#fff}
.door .vis{bottom:auto;top:24px}
.doors:hover .door:not(:hover) img{opacity:.8}
.door:hover img{transform:scale(1.03)}
@media (max-width:800px){.doors{grid-template-columns:1fr}.door{height:auto;aspect-ratio:4/5}}

/* BIG — number facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-l);margin-top:clamp(40px,5vw,72px)}
.facts>div{padding:28px 24px 0 0;border-right:1px solid var(--line-l);min-width:0}
.facts>div+div{padding-left:24px}
.facts>div:last-child{border-right:0}
.facts b{display:block;font-weight:300;font-size:clamp(46px,5.4vw,86px);letter-spacing:-.035em;line-height:1;white-space:nowrap}
.facts span{display:block;margin-top:14px;font-size:14px;line-height:1.5;color:var(--taupe-2);max-width:26ch}
.facts a{border-bottom:1px solid currentColor}
.dark .facts,.dark .facts>div{border-color:var(--line-d)}.dark .facts span{color:rgba(255,255,255,.6)}
@media (max-width:800px){.facts{grid-template-columns:1fr 1fr}.facts>div{padding:24px 16px 24px 0;border-bottom:1px solid var(--line-l)}.facts>div+div{padding-left:0}.facts>div:nth-child(2n){border-right:0;padding-left:16px}.facts b{font-size:clamp(40px,11vw,56px)}}

/* QL — quote line */
.ql{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,96px);align-items:end}
.ql-q{font-weight:300;font-size:clamp(30px,3.5vw,54px);letter-spacing:-.022em;line-height:1.1;max-width:22ch;text-wrap:balance}
.ql .p{margin:0}
@media (max-width:900px){.ql{grid-template-columns:1fr}.ql-q{font-size:clamp(28px,8.6vw,36px)}}

/* LISTS */
.list8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-l);column-gap:24px}
.list8 li{display:grid;grid-template-columns:38px minmax(0,1fr);padding:22px 0;border-bottom:1px solid var(--line-l);font-size:17px}
.list8 li span:first-child{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--taupe);padding-top:5px;font-variant-numeric:tabular-nums}
.dark .list8,.dark .list8 li{border-color:var(--line-d)}.dark .list8 li span:first-child{color:var(--warm)}
@media (max-width:900px){.list8{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.list8{grid-template-columns:1fr}}
.list1{border-top:1px solid var(--line-l)}
.list1 li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:18px 0;border-bottom:1px solid var(--line-l);font-size:17px}
.list1 li span:first-child{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--taupe);padding-top:5px}
.dark .list1,.dark .list1 li{border-color:var(--line-d)}.dark .list1 li span:first-child{color:var(--warm)}
.steps5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}
.steps5 li{position:relative;padding-top:30px;border-top:1px solid var(--ink)}
.steps5 li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.steps5 .n{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--taupe)}
.steps5 p{margin-top:10px;font-size:17px;line-height:1.4;max-width:18ch}
@media (max-width:900px){.steps5{grid-template-columns:1fr;gap:0}.steps5 li{display:grid;grid-template-columns:48px 1fr;padding:18px 0 18px 0;border-top:1px solid var(--line-l)}.steps5 li::before{display:none}.steps5 p{margin:0;max-width:none}}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3vw,56px)}
.cols3>div{border-top:1px solid var(--line-l);padding-top:22px}
.cols3 h3{font-weight:300;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.015em;line-height:1.1;display:flex;gap:16px;align-items:baseline}
.cols3 h3 span{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--taupe)}
.cols3 p{margin-top:14px;color:var(--body-l);font-size:16px;max-width:36ch}
.dark .cols3>div{border-color:var(--line-d)}.dark .cols3 p{color:rgba(255,255,255,.7)}
@media (max-width:800px){.cols3{grid-template-columns:1fr}}
.buy2{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(32px,5vw,96px)}
.buy2>div{border-top:1px solid var(--line-l);padding-top:24px}
.buy2 h3{font-weight:300;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.02em}
.buy2 h3 span{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--taupe);margin-right:14px}
.buy2 p{margin-top:14px;color:var(--body-l);max-width:44ch}
.dark .buy2>div{border-color:var(--line-d)}.dark .buy2 p{color:rgba(255,255,255,.72)}
@media (max-width:800px){.buy2{grid-template-columns:1fr}}

/* marquee */
.marq{overflow:hidden;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:20px 0;white-space:nowrap;background:var(--ink)}
.marq span{display:inline-block;padding-right:48px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);animation:marq 46s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.no-motion .marq span,.is-static .marq span{animation:none}

/* 55°N block */
.deg{font-weight:300;font-size:clamp(84px,14vw,220px);letter-spacing:-.04em;line-height:.9}
.deg small{display:block;font-size:clamp(30px,5vw,72px);letter-spacing:.06em;font-weight:300;margin-top:10px}
.steps-v{list-style:none;margin:0;border-left:1px solid var(--line-d);padding-left:32px}
.steps-v li{border-bottom:1px solid var(--line-d)}
.steps-v a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;padding:11px 0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.steps-v a span:first-child{color:var(--warm);font-weight:400}
.steps-v a span:last-child{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.steps-v a:hover span:last-child{opacity:1;transform:none}
.steps-line{display:none;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:1.9;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:24px}
.zoom--origin .zoom-veil{background:linear-gradient(to bottom,rgba(8,11,10,.5),rgba(8,11,10,0) 20%),linear-gradient(to right,rgba(8,11,10,.66),rgba(8,11,10,.2) 60%,rgba(8,11,10,.5)),linear-gradient(to top,rgba(8,11,10,.5),rgba(8,11,10,0) 50%)}
@media (min-width:901px){.zoom--origin .zoom-meta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
@media (max-width:900px){.steps-v{display:none}.steps-line{display:block}}

/* comparison table (the one table) */
.ctable{width:100%;border-collapse:collapse;font-size:15px}
.ctable th,.ctable td{text-align:left;vertical-align:top;padding:18px 18px 18px 0;border-top:1px solid var(--line-d)}
.ctable thead th{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);border-top:0;padding-bottom:12px}
.ctable tbody th{font-weight:300;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;white-space:nowrap}
.ctable tbody th a{border-bottom:1px solid rgba(255,255,255,.4)}
.ctable td{color:rgba(255,255,255,.76)}
@media (max-width:900px){
  .ctable thead{display:none}
  .ctable,.ctable tbody,.ctable tr,.ctable td,.ctable tbody th{display:block;width:100%}
  .ctable tr{padding:24px 0;border-top:1px solid var(--line-d)}
  .ctable tbody th{border:0;padding:0 0 12px}
  .ctable td{border:0;padding:6px 0;display:grid;grid-template-columns:110px 1fr;gap:12px}
  .ctable td::before{content:attr(data-l);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);padding-top:3px}
}

/* flow diagram (two rows of steps) */
.flow{display:grid;gap:14px;margin-top:32px;padding:22px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.flow-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.flow-r b{font-weight:500;min-width:118px}
.flow-r i{font-style:normal;opacity:.5}
.flow-r--alt{color:var(--taupe)}

/* labels under a to-scale image */
.wlabels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;text-align:center}
.wlabels span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.wlabels b{display:block;font-weight:300;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.015em;text-transform:none;color:var(--ink);margin-bottom:2px}
@media (max-width:600px){.wlabels{grid-template-columns:1fr 1fr;row-gap:16px}}

/* address */
.addr{font-style:normal;margin-top:28px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.82)}
.addr b{font-weight:400;color:#fff}

/* other collections */
.oc .cards{margin-top:0}

/* family tiles (colours) */
.fam-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin-top:34px;max-width:520px}
.fam-tiles[data-n="5"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px}
.fam-t{display:block;text-align:left;min-width:0}
.fam-i{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--sand)}
.fam-i img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fam-i::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);opacity:0;transition:opacity .4s}
.fam-t:hover .fam-i img{transform:scale(1.06)}
.fam-t.is-on .fam-i::after{opacity:1}
.fam-l{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.fam-l b{font-weight:500;color:var(--ink);white-space:nowrap}
.dark .fam-l{color:rgba(255,255,255,.62)}.dark .fam-l b{color:rgba(255,255,255,.92)}.dark .fam-i{background:#0A0C0B}.dark .fam-i::after{border-color:#fff}
.fam-eb{display:flex;gap:16px}
.fam-eb span{opacity:.7;font-variant-numeric:tabular-nums}
@media (max-width:900px){.fam-tiles,.fam-tiles[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
.zoom--par .zoom-z{top:-9%;bottom:-9%}
:where(ol[class]){list-style:none;padding:0;margin-top:0;margin-bottom:0}
.asy-txt .big{font-size:clamp(34px,4.2vw,64px)}


/* Original material photography: same sections, fewer interior scenes. */
.palette-photos{height:var(--h);display:flex;width:100%;overflow:hidden}
.palette-photos>img{display:block;flex:1 1 0;width:0;min-width:0;height:100%;object-fit:cover}
.collection-facts b{font-size:clamp(24px,2.4vw,38px)!important;line-height:1.12!important;letter-spacing:-.02em!important}
.collection-facts span{max-width:250px}
.cx-stage,.px-stage,.sheet-room,.c6-stage{background:#d9d3c7}
.c2-stage .stage-img{object-position:50% 52%}
.hero-colours{position:relative}
.hero-sample{position:absolute;top:0;right:0;width:160px;height:112px;overflow:hidden;border:1px solid rgba(255,255,255,.65);padding:0;background:transparent;cursor:pointer;appearance:none}
.hero-colours .c2-top{padding-right:180px;min-height:112px}
.hero-colours .c2-timer{display:none}
.hero-colours .c2{gap:10px}
.mill-cinema{height:auto;min-height:0;scroll-margin-top:84px}
.mill-cinema .zoom-media{position:relative;aspect-ratio:16/9}
.mill-cinema .zoom-z{inset:0!important;transform:none!important}
.mill-cinema .zoom-media video{object-fit:contain}
.mill-cinema .zoom-veil{display:none}
.mill-cinema .zoom-inner{position:relative;inset:auto;padding:clamp(36px,5vw,72px) 0}
.mill-cinema .film-toggle{top:24px}

/* Owner review: larger real-colour sample and a shared partnership invitation. */
.hero-sample:focus-visible{outline:2px solid #fff;outline-offset:5px}
.hero-c2 .xl{font-size:clamp(60px,8.5vw,136px)}
.partner-section{padding:clamp(70px,8vw,128px) 0}
.partner-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,7vw,112px);align-items:center}
.partner-photo{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden}
.partner-photo>img{width:100%;height:100%;object-fit:cover;object-position:45% 75%}
.partner-copy .p{margin-top:24px;max-width:42ch}
.partner-copy .btns{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.partner-details{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:12px;letter-spacing:.03em}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr}.partner-photo{aspect-ratio:4/3;max-height:540px}}
@media(max-width:700px){.hero-sample{width:112px;height:84px}.hero-colours .c2-top{padding-right:128px;min-height:84px}.hero-c2 .xl{font-size:clamp(56px,12vw,84px)}}

/* Studio colours — selected C layout. Photograph colours remain unchanged. */
.studio-colours-section{scroll-margin-top:104px}
.studio-colours-section .sec-head{align-items:end}
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.sp-photograph{height:clamp(420px,40vw,560px);margin:0;background:#ebe8df;overflow:hidden}
.sp-photograph>img{display:block;width:100%;height:100%;object-fit:contain;filter:none;opacity:1}
.sp-number{font-size:10px;letter-spacing:.1em;color:var(--taupe);text-transform:uppercase}
.sp-name{font-size:clamp(34px,3.3vw,48px);font-weight:300;line-height:1.1;letter-spacing:-.04em;margin:12px 0}
.sp-family{font-size:10px;color:var(--taupe);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.sp-text{font-size:13px;line-height:1.6;max-width:40ch;min-height:42px;margin:0 0 24px}
.sp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}
.sp-choice{appearance:none;display:block;background:none;border:0;padding:0;text-align:left;min-width:0;color:inherit;cursor:pointer;font:inherit}
.sp-thumb{display:block;height:56px;outline:1px solid transparent;outline-offset:3px}
.sp-thumb>img{display:block;width:100%;height:100%;object-fit:cover;filter:none;opacity:1}
.sp-choice[aria-pressed="true"] .sp-thumb{outline-color:#404e36}
.sp-label{display:block;font-size:10px;line-height:1.4;margin-top:9px;white-space:nowrap}
.sp-label em{font-size:9px;font-style:normal;color:var(--taupe);margin-right:5px}
.sp-choice:focus-visible{outline:2px solid #404e36;outline-offset:6px}
.sp-details{margin-top:26px}
.sp-caption{margin-top:28px}
@media(max-width:800px){.sp-layout{grid-template-columns:1fr;gap:32px}.sp-photograph{height:clamp(320px,75vw,440px)}.sp-name{font-size:34px}.sp-text{min-height:0}.sp-thumb{height:65px}.sp-label{font-size:10px}}

/* Page sections: the Technical navigation pattern reused on long pages. */
.page-subnav{position:sticky;top:84px;z-index:25;background:rgba(237,233,226,.96);color:var(--ink);backdrop-filter:blur(10px);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.page-subnav .tabs{gap:clamp(18px,2.6vw,40px)}
.page-subnav .tab[aria-current="true"]{color:var(--ink)}
.page-subnav .tab[aria-current="true"]::after{transform:scaleX(1)}
.page-with-subnav main>[id]{scroll-margin-top:150px}
.page-with-subnav .hgal.is-pinned{padding-top:154px}
.page-with-subnav .c8-vis{top:132px;height:calc(100svh - 132px)}
@media(max-width:900px){.page-subnav{top:72px}.page-subnav .tab{font-size:10px;letter-spacing:.09em}.page-with-subnav main>[id]{scroll-margin-top:132px}}

/* Mobile Studio picker: keep the selected photograph in view while browsing choices. */
.sp-mobile-caption{display:none}
@media(max-width:800px){
  .sp-mobile-ready .sp-layout{display:block}
  .sp-mobile-ready .sp-photograph{position:sticky;top:var(--sp-sticky-top,84px);z-index:20;height:clamp(210px,32svh,280px);margin:0 0 20px;background:var(--paper);border-bottom:1px solid var(--line-l)}
  .sp-mobile-ready .sp-photograph>img{height:calc(100% - 58px);background:#ebe8df}
  .sp-mobile-caption{height:58px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper)}
  .sp-mobile-name{font-size:22px;font-weight:300;line-height:1.1;letter-spacing:-.025em}
  .sp-mobile-family{font-size:9px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);text-align:right;max-width:15ch}
  .sp-mobile-ready .sp-controls>div[aria-live]{display:none}
  .sp-mobile-ready .sp-grid{gap:14px 12px}
  .sp-mobile-ready .sp-thumb{height:48px}
}