/* =========================================================
   OPULENT — composite architectural surfaces
   Design tokens
   ========================================================= */
:root{
  --ink:#12100E;          /* deep near-black, warm */
  --ink-2:#1C1916;        /* raised dark surface */
  --sand:#F4F0E9;         /* cream section bg */
  --sand-2:#E7E0D4;       /* cream border / muted */
  --bronze:#B98B5E;       /* primary accent */
  --bronze-lt:#D8B48A;    /* accent hover / hairline */
  --paper:#FFFFFF;
  --muted:#8C8378;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;

  --wrap:1440px;
  --gutter:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--bronze-lt);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronze);font-weight:400;
}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.05;margin:0}
.section-title{font-size:clamp(28px,3.4vw,46px);letter-spacing:.01em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35);transition:.45s var(--ease);
  position:relative;overflow:hidden;
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--bronze);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:1;
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{border-color:var(--bronze);color:#fff}
.btn--solid{background:var(--bronze);border-color:var(--bronze);color:#fff}
.btn--solid::after{background:#fff}
.btn--solid:hover{color:var(--ink)}
.btn--pill{border-radius:100px;padding:12px 26px}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  padding-block:22px;transition:.5s var(--ease);
}
.site-header.is-stuck{
  background:rgba(18,16,14,.92);backdrop-filter:blur(14px);
  padding-block:12px;border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{font-family:var(--display);line-height:.9}
.brand b{display:block;font-size:30px;font-weight:400;letter-spacing:.04em}
.brand small{
  display:block;font-family:var(--body);font-size:9px;
  letter-spacing:.42em;color:var(--bronze-lt);padding-left:3px;
}
.nav{display:flex;gap:clamp(14px,2vw,32px);align-items:center}
.nav > li{position:relative}
.nav a{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding-block:10px;display:inline-flex;gap:6px;align-items:center;
}
.nav > li > a::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--bronze);transition:width .4s var(--ease);
}
.nav > li:hover > a::after,.nav .current-menu-item > a::after{width:100%}
.nav .sub-menu{
  position:absolute;top:100%;left:-18px;min-width:210px;list-style:none;
  margin:0;padding:10px 0;background:rgba(20,18,16,.97);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.35s var(--ease);
}
.nav li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:9px 18px;letter-spacing:.1em}
.nav .sub-menu a:hover{background:rgba(185,139,94,.16);color:var(--bronze-lt)}
.header-tools{display:flex;align-items:center;gap:16px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);transition:.4s var(--ease)}
.icon-btn:hover{background:var(--bronze);border-color:var(--bronze)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger i{width:22px;height:1px;background:#fff;display:block;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:-8% 0 0 0;height:118%;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.scene{position:absolute;inset:0;transition:opacity 1.2s var(--ease)}
.scene--night{
  background:
    radial-gradient(120% 90% at 72% 62%,rgba(226,164,94,.5),transparent 55%),
    radial-gradient(90% 70% at 20% 12%,rgba(70,96,132,.55),transparent 60%),
    linear-gradient(180deg,#1b2436 0%,#241d1a 48%,#100d0c 100%);
}
.scene--day{
  opacity:0;
  background:
    radial-gradient(120% 90% at 70% 68%,rgba(255,214,160,.42),transparent 58%),
    radial-gradient(100% 80% at 25% 8%,rgba(150,186,224,.75),transparent 62%),
    linear-gradient(180deg,#8fb1cf 0%,#c8b49b 52%,#3a2d24 100%);
}
body[data-scene="day"] .scene--day{opacity:1}
body[data-scene="day"] .scene--night{opacity:0}
/* architectural slat silhouette — only shows on the CSS-gradient placeholder,
   never over a real uploaded photo */
.scene:not(.has-img)::after{
  content:"";position:absolute;right:0;bottom:0;width:58%;height:78%;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.55) 0 10px,rgba(120,86,56,.35) 10px 26px);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  opacity:.7;
}
/* a real photo replaces the gradient entirely and needs a touch of grade
   so day/night still read as distinct moods */
.scene.has-img{background:#000}
.scene.has-img img{opacity:.94}
.scene--night.has-img img{filter:brightness(.62) saturate(1.05) contrast(1.05)}
.scene--day.has-img img{filter:brightness(1.02) saturate(1.08)}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.6) 38%,transparent 68%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:120px}
.hero h1{
  font-size:clamp(52px,8.6vw,124px);letter-spacing:-.01em;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line i{display:block;font-style:normal;transform:translateY(105%);
  animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2) i{animation-delay:.14s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{
  max-width:34ch;margin:26px 0 34px;font-size:clamp(15px,1.3vw,19px);
  color:rgba(244,240,233,.82);opacity:0;animation:fade .9s .5s var(--ease) forwards;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fade .9s .68s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,54px);margin-top:clamp(36px,6vh,74px);
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  opacity:0;animation:fade .9s .86s var(--ease) forwards;
}
.stat{display:flex;gap:12px;align-items:center}
.stat svg{width:24px;height:24px;stroke:var(--bronze);fill:none;stroke-width:1.1}
.stat b{display:block;font-family:var(--display);font-size:26px;font-weight:400;color:var(--bronze-lt);line-height:1}
.stat span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,240,233,.6)}
.scene-toggle{
  position:absolute;right:var(--gutter);bottom:34px;z-index:3;display:flex;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:4px;
  background:rgba(18,16,14,.5);backdrop-filter:blur(10px);
}.scene-toggle button{
  padding:8px 18px;border-radius:100px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;transition:.4s var(--ease);color:rgba(255,255,255,.65)
}
.scene-toggle button.is-on{background:#fff;color:var(--ink)}
.scroll-hint{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);
  text-align:center;
}
.scroll-hint i{display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(var(--bronze),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(38px);transition:1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-44px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in{transform:none}
[data-stagger] > *{opacity:0;transform:translateY(30px);transition:.9s var(--ease)}
[data-stagger].in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important}
}

/* ---------- Split: areas + configurator ---------- */
.split{display:grid;grid-template-columns:1.12fr .88fr}
.areas{background:var(--sand);color:var(--ink);padding:clamp(48px,6vw,84px) 0}
.areas .wrap{max-width:none;padding-inline:clamp(24px,4vw,58px)}
.rule-title{display:flex;align-items:center;gap:20px;margin-bottom:34px}
.rule-title h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--body);font-weight:300}
.rule-title::after{content:"";flex:1;height:1px;background:var(--sand-2)}
.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.area{
  position:relative;aspect-ratio:.78;overflow:hidden;display:flex;
  align-items:flex-end;padding:20px 16px;color:#fff;isolation:isolate;
}
.area-bg{position:absolute;inset:0;z-index:-2;transition:transform 1.1s var(--ease)}
.area:hover .area-bg{transform:scale(1.09)}
.area::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(transparent 32%,rgba(10,8,7,.86))}
.area-icon{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;transition:.5s var(--ease);
}
.area:hover .area-icon{background:var(--bronze);border-color:var(--bronze);transform:translate(-50%,-50%) scale(1.12)}
.area h3{font-family:var(--body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.area p{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.7)}

/* ---------- 3D configurator ---------- */
.configurator{background:var(--ink-2);padding:clamp(40px,4vw,64px) clamp(24px,3vw,52px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
#stage{width:100%;aspect-ratio:1.05;cursor:grab;touch-action:none}
#stage:active{cursor:grabbing}
.stage-tools{display:flex;gap:20px;justify-content:center;margin-top:6px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.stage-tools button:hover{color:var(--bronze-lt)}
.cfg-field{margin-bottom:20px}
.cfg-field label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.cfg-field select{
  width:100%;padding:13px 14px;background:rgba(255,255,255,.05);color:#fff;
  border:1px solid rgba(255,255,255,.16);font-family:var(--body);font-size:14px;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),
    linear-gradient(135deg,var(--bronze) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.cfg-field select option{background:var(--ink)}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.swatch{text-align:center;width:52px}
.swatch i{display:block;width:38px;height:38px;border-radius:50%;margin:0 auto 7px;
  border:2px solid transparent;outline:1px solid rgba(255,255,255,.18);outline-offset:2px;
  transition:.35s var(--ease)}
.swatch.is-on i,.swatch:hover i{outline-color:var(--bronze);transform:scale(1.08)}
.swatch span{font-size:10px;color:var(--muted);letter-spacing:.04em}

/* ---------- Feature strips ---------- */
.strip{background:var(--sand);color:var(--ink);padding:clamp(38px,4vw,56px) 0}
.strip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.strip-item{padding:0 clamp(14px,1.8vw,26px);border-left:1px solid var(--sand-2)}
.strip-item:first-child{border-left:0;padding-left:0}
.strip-item svg{width:26px;height:26px;stroke:var(--bronze);fill:none;stroke-width:1.1;margin-bottom:12px}
.strip-item h4{margin:0 0 6px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:400}
.strip-item p{margin:0;font-size:13px;color:#6C645A;line-height:1.5}

.bar{background:linear-gradient(90deg,#241C15,#3A2C20 50%,#241C15);padding:clamp(30px,4vw,46px) 0}
.bar-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;gap:20px}
.bar-item b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,46px);
  font-weight:300;color:var(--sand)}
.bar-item span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,233,.62)}

/* ---------- Build / exploded view ---------- */
.build{background:var(--sand);color:var(--ink);padding:clamp(60px,8vw,120px) 0}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}

.exploded{display:flex;flex-direction:column;gap:22px;padding:12px 0}
.exploded-row{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:18px;
  opacity:0;transform:translateX(-34px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.exploded.in .exploded-row{opacity:1;transform:none}
.exploded-row:nth-child(1){transition-delay:.03s}
.exploded-row:nth-child(2){transition-delay:.11s}
.exploded-row:nth-child(3){transition-delay:.19s}
.exploded-row:nth-child(4){transition-delay:.27s}
.exploded-row:nth-child(5){transition-delay:.35s}

.exploded-num{
  font-family:var(--display);font-size:15px;color:var(--bronze);
  text-align:right;letter-spacing:.02em;
}
.exploded-bar{
  height:30px;border-radius:4px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -6px 10px rgba(0,0,0,.18) inset,0 6px 14px rgba(30,20,10,.14);
}
.exploded-bar::after{
  content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 40%);
}
.exploded-label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C645A;
  white-space:nowrap;
}
.build p{color:#6C645A;max-width:46ch}

/* ---------- Before / after ---------- */
.visualiser{padding:clamp(60px,8vw,120px) 0;background:var(--ink)}
.ba{position:relative;aspect-ratio:16/8;overflow:hidden;user-select:none;max-width:960px;margin-inline:auto}
.ba-layer{position:absolute;inset:0}
.ba-before{background:linear-gradient(180deg,#6E6B63,#3E3B36)}
.ba-after{background:
  radial-gradient(80% 60% at 60% 80%,rgba(226,164,94,.35),transparent),
  repeating-linear-gradient(92deg,#5A3D26 0 14px,#7A5535 14px 28px);
  clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;cursor:ew-resize}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.4)}
.ba-tag{position:absolute;top:16px;padding:6px 14px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;background:rgba(0,0,0,.55);z-index:4}
.ba-tag.l{left:16px}.ba-tag.r{right:16px}

/* ---------- Projects marquee ---------- */
.projects{padding:clamp(60px,8vw,110px) 0;background:var(--ink-2);overflow:hidden}
.track{display:flex;gap:20px;will-change:transform}
.card{flex:0 0 clamp(260px,26vw,380px);aspect-ratio:4/3;position:relative;overflow:hidden}
.card-bg{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.card:hover .card-bg{transform:scale(1.07)}
.card figcaption{position:absolute;left:20px;bottom:18px;z-index:2}
.card figcaption b{font-family:var(--display);font-size:22px;font-weight:400;display:block}
.card figcaption span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-lt)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,7,6,.85))}

/* ---------- CTA + footer ---------- */
.cta{padding:clamp(70px,10vw,150px) 0;text-align:center;
  background:radial-gradient(70% 100% at 50% 0%,rgba(185,139,94,.22),transparent 70%),var(--ink)}
.cta h2{font-size:clamp(34px,5.4vw,78px)}
.site-footer{background:#0C0B0A;padding:clamp(50px,6vw,80px) 0 30px;border-top:1px solid rgba(255,255,255,.07)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot-grid h5{margin:0 0 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{font-size:14px;color:rgba(244,240,233,.72)}
.foot-grid a:hover{color:var(--bronze-lt)}
.foot-bottom{margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(244,240,233,.45)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .split{grid-template-columns:1fr}
  .area-grid{grid-template-columns:repeat(3,1fr)}
  .strip-grid{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .strip-item:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:900px){
  .nav,.header-tools .icon-btn{display:none}
  .burger{display:flex}
  .site-header.nav-open .nav{
    display:flex;position:fixed;inset:0;flex-direction:column;justify-content:center;
    background:rgba(14,12,11,.98);gap:6px;text-align:center;z-index:80;
  }
  .site-header.nav-open .nav a{font-size:15px;padding:14px}
  .site-header.nav-open .nav .sub-menu{display:none}
  .configurator{grid-template-columns:1fr}
  .build-grid,.foot-grid{grid-template-columns:1fr}
  .bar-grid{grid-template-columns:repeat(2,1fr);row-gap:28px}
}
@media (max-width:560px){
  .exploded-row{grid-template-columns:24px 1fr;row-gap:8px}
  .exploded-label{grid-column:2;font-size:11px}
  .exploded-bar{height:26px}
}
@media (max-width:640px){
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:1fr;row-gap:26px}
  .strip-item{border-left:0;padding-left:0}
  .hero-stats{gap:22px}
  .scroll-hint{display:none}
}

/* =========================================================
   WordPress + inner pages
   ========================================================= */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999}
.skip-link:focus{left:var(--gutter);top:14px;padding:10px 18px;background:var(--bronze);color:#fff}

/* photos supplied through the media library sit inside these wrappers */
.scene.has-img::after{display:none}
.scene img,.area-bg img,.card-bg img,.ba-layer img{width:100%;height:100%;object-fit:cover}
.area-bg,.card-bg{display:block}
.ba-after img{position:absolute;inset:0}
.custom-logo-link img{max-height:52px;width:auto}

.header-search{max-height:0;overflow:hidden;transition:.5s var(--ease);background:rgba(14,12,11,.96)}
.header-search.is-open{max-height:130px;padding-block:20px}
.search-form{display:flex;gap:10px}
.search-form input{flex:1;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;font:inherit}

.inner{padding:clamp(130px,16vh,190px) 0 clamp(70px,9vw,120px)}
.wrap--narrow{max-width:820px}
.entry{color:rgba(244,240,233,.82);font-size:17px;line-height:1.8}
.entry h2,.entry h3{font-family:var(--display);margin:2em 0 .6em;font-size:clamp(24px,3vw,38px)}
.entry a{color:var(--bronze-lt);text-decoration:underline;text-underline-offset:4px}
.entry img,.feature-img img{width:100%;height:auto}
.feature-img{margin:34px 0}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post-card a{display:block}
.post-card img{aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.post-card a:hover img{transform:scale(1.05)}
.post-card h2{font-size:22px;margin:16px 0 8px}
.post-card p{color:rgba(244,240,233,.6);font-size:14px;margin:0}
.card--static{aspect-ratio:4/3}
.pagination{margin-top:50px}
.pagination a,.pagination .current{padding:8px 14px;border:1px solid rgba(255,255,255,.18);margin-right:6px;display:inline-block}
.pagination .current{background:var(--bronze);border-color:var(--bronze)}

/* =========================================================
   Pricing
   ========================================================= */
.pricing{padding:clamp(120px,15vh,180px) 0 clamp(60px,8vw,110px)}
.price-head{max-width:60ch;margin-bottom:clamp(40px,6vw,70px)}
.price-head p{color:rgba(244,240,233,.68);margin-top:18px}

.price-block{
  border-top:1px solid rgba(255,255,255,.12);
  padding:clamp(34px,5vw,58px) 0;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,64px);
}
.price-block:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}
.price-block h3{font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.price-block .lede{color:rgba(244,240,233,.68);max-width:38ch}
.spec{margin-top:24px;display:grid;gap:10px}
.spec div{display:flex;gap:14px;font-size:13px;line-height:1.5}
.spec dt{flex:0 0 96px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:10px;padding-top:3px}
.spec dd{margin:0;color:rgba(244,240,233,.86)}

.finish-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chip{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);font-size:12px}
.chip i{width:18px;height:18px;border-radius:50%;display:block}

.price-table{width:100%;border-collapse:collapse;font-size:15px}
.price-table th{
  text-align:left;font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);
}
.price-table td{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.price-table tr:last-child td{border-bottom:0}
.price-table tbody tr{transition:background .4s var(--ease)}
.price-table tbody tr:hover{background:rgba(185,139,94,.07)}
.price-table .len{font-family:var(--display);font-size:24px;color:var(--sand)}
.price-table .lead{color:var(--bronze-lt)}
.price-table td small{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em}

.price-flat{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.price-flat b{font-family:var(--display);font-size:clamp(38px,5vw,62px);font-weight:300;color:var(--bronze-lt);line-height:1}
.price-flat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.note{font-size:13px;color:var(--muted);margin-top:18px;padding-left:16px;border-left:1px solid var(--bronze)}

/* Estimator */
.estimator{
  background:var(--ink-2);border:1px solid rgba(255,255,255,.1);
  padding:clamp(26px,3vw,40px);position:sticky;top:100px;
}
.est-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.est-grid .full{grid-column:1/-1}
.est-out{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.est-line{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:rgba(244,240,233,.78)}
.est-line b{font-weight:400;color:#fff}
.est-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.est-total span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.est-total b{font-family:var(--display);font-size:clamp(32px,4vw,46px);font-weight:300;color:var(--bronze-lt)}
.toggle-gst{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-top:16px}
.toggle-gst input{accent-color:var(--bronze);width:16px;height:16px}
.num{width:100%;padding:13px 14px;background:rgba(255,255,255,.05);color:#fff;
  border:1px solid rgba(255,255,255,.16);font-family:var(--body);font-size:14px}

.delivery-bar{
  background:linear-gradient(90deg,#241C15,#3A2C20 50%,#241C15);
  padding:clamp(30px,4vw,48px) 0;margin-top:clamp(40px,6vw,80px);
}
.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.delivery-grid h4{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-weight:400}
.delivery-grid p{margin:0;font-size:15px;color:rgba(244,240,233,.82)}

@media (max-width:1000px){
  .price-block{grid-template-columns:1fr}
  .estimator{position:static}
  .delivery-grid{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
  .est-grid{grid-template-columns:1fr}
  .price-table{font-size:14px}
  .spec dt{flex-basis:80px}
}

/* =========================================================
   v2 — motion layer
   ========================================================= */
.split-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.split-word i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform .9s var(--ease)}
[data-split].in .split-word i{transform:none}

.drag-cursor{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  border:1px solid var(--bronze);display:grid;place-items:center;
  transform-origin:center;opacity:0;transition:opacity .3s var(--ease);
  backdrop-filter:blur(2px);
}
.drag-cursor.is-on{opacity:1}
.drag-cursor span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-lt)}
#stage.is-dragging{cursor:grabbing}


.pin-section{position:relative}
@media (min-width:901px){
  .pin-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    justify-content:center;overflow:hidden}
  .pin-inner .track{transition:none}
}

.curtain{
  position:fixed;inset:0;z-index:300;pointer-events:none;
  background:linear-gradient(120deg,var(--ink) 0%,#2A211A 50%,var(--ink) 100%);
  transform:translateY(0);transition:transform .6s var(--ease);
}
body.page-ready .curtain{transform:translateY(-100%)}
body.is-leaving .curtain{transform:translateY(0);transition-duration:.5s}

/* =========================================================
   v2 — AR viewer
   ========================================================= */
.ar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(60px,8vw,120px) 0}
model-viewer{width:100%;aspect-ratio:1;background:
  radial-gradient(60% 60% at 50% 45%,rgba(185,139,94,.18),transparent 70%),var(--ink-2);
  border:1px solid rgba(255,255,255,.1)}
.ar-fallback{aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:30px;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:14px}
.ar-steps{display:grid;gap:14px;margin:26px 0 30px;padding:0;list-style:none;counter-reset:s}
.ar-steps li{display:flex;gap:14px;font-size:15px;color:rgba(244,240,233,.78);counter-increment:s}
.ar-steps li::before{content:counter(s,decimal-leading-zero);color:var(--bronze);
  font-size:11px;letter-spacing:.12em;padding-top:5px}

/* =========================================================
   v2 — photo visualiser tool
   ========================================================= */
.vis-tool{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.vis-stage{position:relative;background:var(--ink-2);border:1px solid rgba(255,255,255,.1);
  min-height:340px;display:grid;place-items:center;overflow:hidden}
#vis-canvas{max-width:100%;height:auto;display:none;cursor:crosshair;touch-action:none}
.has-photo #vis-canvas{display:block}
.vis-drop{text-align:center;padding:50px 24px;color:var(--muted)}
.has-photo .vis-drop{display:none}
.vis-drop svg{width:40px;height:40px;stroke:var(--bronze);fill:none;stroke-width:1;margin-bottom:16px}
.vis-panel{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);padding:24px}
.vis-panel .swatches{gap:10px}
.vis-panel .swatch{width:46px}
.vis-panel .swatch i{width:32px;height:32px}
input[type=range]{width:100%;accent-color:var(--bronze);background:transparent}
.vis-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.vis-actions button{padding:10px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);transition:.35s var(--ease)}
.vis-actions button:hover{border-color:var(--bronze);color:var(--bronze-lt)}
.file-btn{display:block;text-align:center;cursor:pointer}
.file-btn input{display:none}

/* =========================================================
   v2 — sun slider
   ========================================================= */
.sun-control{margin-top:18px}
.sun-control .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sun-control label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#sun-label{font-family:var(--display);font-size:20px;color:var(--bronze-lt)}

/* =========================================================
   v2 — samples, sticky bar
   ========================================================= */
.sample-add{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);transition:.35s var(--ease)}
.sample-add:hover:not(:disabled){border-color:var(--bronze);color:var(--bronze-lt)}
.sample-add.is-in{background:var(--bronze);border-color:var(--bronze);color:#fff}
.sample-add:disabled{opacity:.35;cursor:not-allowed}

.sample-tray{position:fixed;right:24px;bottom:24px;z-index:80;
  background:rgba(20,18,16,.96);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);padding:18px 22px;
  transform:translateY(140%);transition:.6s var(--ease);max-width:320px}
.sample-tray.is-on{transform:none}
.sample-tray h5{margin:0 0 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);font-weight:400}
#sample-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;font-size:14px}
#sample-list li{display:flex;justify-content:space-between;gap:14px;align-items:center}
#sample-list button{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#sample-list button:hover{color:var(--bronze-lt)}
#sample-list .empty{color:var(--muted);font-size:13px}

.est-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(20,18,16,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);padding:14px 0;
  transform:translateY(110%);transition:.55s var(--ease);
}
.est-bar.is-on{transform:none}
.est-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.est-bar dl{display:flex;gap:30px;margin:0}
.est-bar dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.est-bar dd{margin:2px 0 0;font-family:var(--display);font-size:24px;color:var(--bronze-lt)}

/* =========================================================
   v2 — filters, comparison, locator, downloads
   ========================================================= */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filter-row button{padding:9px 18px;border-radius:100px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.18);transition:.35s var(--ease)}
.filter-row button.is-on{background:var(--bronze);border-color:var(--bronze);color:#fff}
[data-tags]{transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-tags].is-hidden{display:none}

.compare{width:100%;border-collapse:collapse;font-size:15px;margin:30px 0}
.compare th{text-align:left;font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.compare th:nth-child(2){color:var(--bronze)}
.compare td{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.compare td:first-child{color:var(--muted);width:34%}
.compare td:nth-child(2){color:var(--sand);padding-right:26px}
.compare td:last-child{color:rgba(244,240,233,.6)}
.compare tfoot td{font-family:var(--display);font-size:22px;color:var(--bronze-lt);border-bottom:0}

.locator-form{display:flex;gap:10px;max-width:420px;margin-bottom:30px}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.loc-card{border:1px solid rgba(255,255,255,.12);padding:22px;transition:.4s var(--ease)}
.loc-card:hover{border-color:var(--bronze);background:rgba(185,139,94,.06)}
.loc-card h4{margin:0 0 6px;font-family:var(--display);font-size:20px;font-weight:400}
.loc-area{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-lt)}
.loc-serv{margin:10px 0 0;font-size:13px;color:var(--muted)}
.loc-tel{display:inline-block;margin-top:12px;font-size:14px;color:var(--sand);
  border-bottom:1px solid var(--bronze);padding-bottom:2px}
.loc-empty{color:var(--muted);font-size:14px}

.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
.dl{display:flex;align-items:center;gap:14px;padding:18px 20px;
  border:1px solid rgba(255,255,255,.12);transition:.4s var(--ease)}
.dl:hover{border-color:var(--bronze);background:rgba(185,139,94,.06)}
.dl svg{width:22px;height:22px;stroke:var(--bronze);fill:none;stroke-width:1.1;flex:0 0 auto}
.dl b{display:block;font-weight:400;font-size:14px}
.dl span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .ar,.vis-tool{grid-template-columns:1fr}
  .sample-tray{left:16px;right:16px;bottom:16px;max-width:none}
  .est-bar dl{gap:20px}
  .est-bar dd{font-size:19px}
  .drag-cursor{display:none}
}

/* =========================================================
   v3 — empty-state fallbacks
   ========================================================= */
.area-bg:empty,.card-bg:empty{background:linear-gradient(160deg,#2E4A5C,#7A5535)}
.area:nth-child(2) .area-bg:empty,.card:nth-child(2) .card-bg:empty{background:linear-gradient(160deg,#8A6A45,#3A2C20)}
.area:nth-child(3) .area-bg:empty,.card:nth-child(3) .card-bg:empty{background:linear-gradient(160deg,#6B4A2E,#20252B)}
.area:nth-child(4) .area-bg:empty,.card:nth-child(4) .card-bg:empty{background:linear-gradient(160deg,#4E6B4A,#2B2019)}
.area:nth-child(5) .area-bg:empty,.card:nth-child(5) .card-bg:empty{background:linear-gradient(160deg,#586572,#8A5F3A)}
.ba-before:empty{background:linear-gradient(180deg,#6E6B63,#3E3B36)}

.pin-section.no-pin{height:auto!important}
.pin-section.no-pin .pin-inner{position:static;height:auto;padding-block:0}

/* =========================================================
   v3 — WooCommerce
   ========================================================= */
.woo{padding-top:clamp(130px,16vh,190px)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.shop-card{border:1px solid rgba(255,255,255,.1);transition:.45s var(--ease);background:var(--ink-2)}
.shop-card:hover{border-color:var(--bronze);transform:translateY(-4px)}
.shop-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#1E1A17}
.shop-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.shop-card:hover .shop-media img{transform:scale(1.06)}
.shop-body{padding:20px}
.shop-body h3{font-family:var(--display);font-size:22px;font-weight:400;margin:0 0 6px}
.shop-price{margin:0 0 16px;color:var(--bronze-lt);font-size:16px}
.shop-price del{color:var(--muted);margin-right:8px}

/* WooCommerce core loop, styled to match */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  border:1px solid rgba(255,255,255,.1);background:var(--ink-2);padding:0;transition:.45s var(--ease)}
.woocommerce ul.products li.product:hover{border-color:var(--bronze);transform:translateY(-4px)}
.woocommerce ul.products li.product a img{margin:0;aspect-ratio:4/3;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-size:21px;font-weight:400;padding:18px 20px 4px;color:var(--sand)}
.woocommerce ul.products li.product .price{display:block;padding:0 20px;color:var(--bronze-lt);font-size:16px}
.woocommerce ul.products li.product .button{margin:14px 20px 20px;display:inline-flex;
  background:var(--bronze);color:#fff;border-radius:100px;padding:11px 22px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;transition:.4s var(--ease)}
.woocommerce ul.products li.product .button:hover{background:var(--bronze-lt);color:var(--ink)}
.woocommerce span.onsale{background:var(--bronze);color:#fff;border-radius:0;padding:6px 14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;min-height:0;line-height:1.4}

.woocommerce div.product .product_title{font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,52px)}
.woocommerce div.product p.price{color:var(--bronze-lt);font-size:26px;font-family:var(--display)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border-bottom:1px solid rgba(255,255,255,.12)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;padding:0 20px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--bronze-lt)}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--bronze);color:#fff;border-radius:100px;padding:14px 30px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400;transition:.4s var(--ease)}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--bronze-lt);color:var(--ink)}
.woocommerce .quantity .qty{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:#fff;padding:12px 8px}
.woocommerce table.shop_table,.woocommerce-cart table.cart{border:1px solid rgba(255,255,255,.12);
  border-radius:0;color:var(--sand)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:rgba(255,255,255,.1)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--ink-2);border-top:2px solid var(--bronze);color:var(--sand)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--bronze)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container--default .select2-selection--single{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#fff;padding:13px 14px}
.woocommerce .woocommerce-ordering select,.woocommerce-page .woocommerce-ordering select{
  background:var(--ink-2);color:var(--sand);border:1px solid rgba(255,255,255,.16);padding:10px}
.cart-link{position:relative}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;
  background:var(--bronze);color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center;padding:0 5px}

/* =========================================================
   v4 — mobile
   ========================================================= */

/* Never let anything push the page sideways. */
html,body{max-width:100%}
img,canvas,svg,video,iframe,model-viewer{max-width:100%}

/* Comfortable tap targets everywhere. */
@media (pointer:coarse){
  .btn{padding:16px 28px}
  .icon-btn{width:44px;height:44px}
  .swatch i{width:44px;height:44px}
  .swatch{width:60px}
  .nav a,.foot-grid a,#sample-list button,.vis-actions button{min-height:44px;display:flex;align-items:center}
  .foot-grid ul{gap:2px}
  .stage-tools button,.filter-row button{padding:12px 18px}
}

/* Wide tables scroll rather than squash. */
.price-table,.compare{min-width:520px}
.price-block > div,.build-grid > div{min-width:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  /* ---- Slide-in navigation ---- */
  .site-header{padding-block:14px}
  .site-header.nav-open{background:rgba(18,16,14,.96);backdrop-filter:blur(14px)}
  body.nav-locked{overflow:hidden}

  .nav{
    display:flex!important;position:fixed;top:0;right:0;bottom:0;
    width:min(88vw,380px);flex-direction:column;justify-content:flex-start;
    gap:0;padding:96px 26px 40px;margin:0;list-style:none;
    background:#141210;border-left:1px solid rgba(255,255,255,.1);
    transform:translateX(100%);transition:transform .5s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;z-index:85;
  }
  .site-header.nav-open .nav{transform:none;position:fixed;background:#141210;text-align:left}
  .nav > li{position:relative;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav > li > a,.site-header.nav-open .nav a{
    font-size:15px;letter-spacing:.1em;padding:16px 0;justify-content:flex-start;
  }
  .nav > li > a::after{display:none}
  .nav > li > a > svg{display:none}

  .sub-toggle{
    position:absolute;top:4px;right:0;width:46px;height:46px;
    display:grid;place-items:center;color:var(--bronze-lt);
    transition:transform .35s var(--ease);
  }
  .sub-open > .sub-toggle{transform:rotate(180deg)}
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;backdrop-filter:none;
    max-height:0;overflow:hidden;padding:0;margin:0;list-style:none;
    transition:max-height .45s var(--ease);
  }
  .sub-open > .sub-menu{max-height:420px;padding-bottom:10px}
  .nav .sub-menu a{padding:11px 0 11px 16px;font-size:14px;color:rgba(244,240,233,.72)}
  .nav .sub-menu a:hover{background:none;color:var(--bronze-lt)}

  .burger{display:flex;position:relative;z-index:95}
  .site-header.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .site-header.nav-open .burger i:nth-child(2){opacity:0}
  .site-header.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .header-tools .icon-btn,.cart-link{display:grid}
  .header-tools .btn--pill{display:none}

  /* ---- Hero ---- */
  .hero{min-height:88svh;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .hero-inner{padding-top:100px}
  .hero h1{font-size:clamp(42px,13vw,64px)}
  .hero-sub{max-width:none;margin:18px 0 26px;font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .hero-stats{gap:16px 26px;margin-top:34px;padding-top:20px}
  .stat svg{width:20px;height:20px}
  .stat b{font-size:21px}
  /* Taken out of the absolute-positioned floating layer and put back into
     normal document flow, so they simply stack below the stats instead of
     overlapping them at unpredictable content heights. */
  .scroll-hint{position:static;margin:28px auto 0;align-self:center}
  .scene-toggle{position:static;margin:20px auto 34px;width:fit-content;align-self:center}

  /* ---- Configurator ---- */
  #stage{aspect-ratio:1.15}
  .configurator{padding-inline:var(--gutter)}

  /* ---- Before/after ---- */
  .ba{aspect-ratio:4/3}
  .ba-handle::after{width:54px;height:54px}

  /* ---- Projects: plain horizontal swipe ---- */
  .projects .track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:14px;scrollbar-width:none}
  .projects .track::-webkit-scrollbar{display:none}
  .projects .card{scroll-snap-align:start;flex:0 0 78vw}

  /* ---- Pricing ---- */
  .price-block{padding-block:34px}
  .price-flat b{font-size:44px}
  .estimator{padding:22px}

  /* ---- Stop the two floating bars stacking on top of each other ---- */
  .sample-tray{bottom:16px;left:16px;right:16px;padding:16px 18px}
  body.has-est-bar .sample-tray{bottom:94px}
  .est-bar{padding:12px 0}
  .est-bar .wrap{gap:12px}
  .est-bar dl{gap:22px;flex:1}
  .est-bar .btn{width:100%;justify-content:center}

  /* ---- Footer ---- */
  .foot-grid{gap:30px}
  .foot-bottom{flex-direction:column;gap:8px}
}

@media (max-width:560px){
  .hero-stats .stat:nth-child(n+4){display:none}
  .bar-grid{grid-template-columns:1fr 1fr}
  .bar-item:last-child{grid-column:1/-1}
  .rule-title h2{font-size:18px}
  .area{aspect-ratio:1}
  .area h3{font-size:12px}
  .area p{font-size:11px}
  .vis-panel{padding:18px}
  .est-bar dd{font-size:17px}
  .loc-grid,.downloads,.shop-grid{grid-template-columns:1fr}
}

/* Landscape phones: don't let a full-height hero swallow the screen. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:110px 60px}
  .scroll-hint{display:none}
}

/* Save battery and data on phones. */
@media (max-width:900px){
  .hero-media{transform:none!important}
  .curtain{display:none}
}

/* =========================================================
   v5 — contact form
   ========================================================= */
.contact-form{max-width:640px;display:flex;flex-direction:column;gap:20px;margin-top:30px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-row label,.form-row-pair label{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.form-row input,.form-row textarea,.form-row-pair input{
  width:100%;padding:14px 16px;background:rgba(255,255,255,.05);color:var(--sand);
  border:1px solid rgba(255,255,255,.16);font-family:var(--body);font-size:15px;
  transition:.35s var(--ease);
}
.form-row input:focus,.form-row textarea:focus,.form-row-pair input:focus{
  outline:none;border-color:var(--bronze);background:rgba(255,255,255,.08);
}
.form-row textarea{resize:vertical;min-height:120px}
.form-row-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-errors{background:rgba(200,80,60,.12);border-left:2px solid #C8503C;padding:14px 18px}
.form-errors p{margin:0 0 4px;font-size:14px;color:#F0B6AA}
.form-errors p:last-child{margin-bottom:0}
.form-success{background:rgba(185,139,94,.12);border-left:2px solid var(--bronze);padding:22px 26px;margin-top:30px}
.form-success p{margin:0;font-size:16px;color:var(--sand)}
@media (max-width:640px){.form-row-pair{grid-template-columns:1fr}}

/* =========================================================
   v5 — richer placeholder art (no photos uploaded yet)
   ========================================================= */
.area-bg:empty,.card-bg:empty{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#2E4A5C 0%,#3B3733 46%,#7A5535 100%);
}
.area-bg:empty::after,.card-bg:empty::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px);
  mix-blend-mode:overlay;
}
.area:nth-child(2) .area-bg:empty,.card:nth-child(2) .card-bg:empty{background:linear-gradient(155deg,#8A6A45,#4A3324,#2A2018)}
.area:nth-child(3) .area-bg:empty,.card:nth-child(3) .card-bg:empty{background:linear-gradient(155deg,#6B4A2E,#3A332C,#20252B)}
.area:nth-child(4) .area-bg:empty,.card:nth-child(4) .card-bg:empty{background:linear-gradient(155deg,#4E6B4A,#3A3B2D,#2B2019)}
.area:nth-child(5) .area-bg:empty,.card:nth-child(5) .card-bg:empty{background:linear-gradient(155deg,#586572,#5D5347,#8A5F3A)}

/* =========================================================
   v6 — popular products everywhere
   ========================================================= */
.shop-media{position:relative}
.shop-badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.shop-badge{
  background:var(--bronze);color:#fff;padding:6px 12px;border-radius:100px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.shop-badge--sale{background:#C8503C}
.shop-hover{
  position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:18px;background:linear-gradient(transparent 50%,rgba(10,8,7,.72));
  opacity:0;transition:.4s var(--ease);
}
.shop-card:hover .shop-hover{opacity:1}
.shop-hover span{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid var(--bronze-lt);padding-bottom:2px;
}
.shop-rating{display:flex;gap:2px;margin-bottom:8px}
.shop-rating svg{width:13px;height:13px;fill:rgba(255,255,255,.18)}
.shop-rating svg.is-on{fill:var(--bronze-lt)}

/* Shop-by-range tiles reuse .area-grid but need breathing room before the
   product rows that follow them. */
.opulent-category-row{padding-top:clamp(60px,8vw,100px)}
.opulent-category-row .area-grid{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.opulent-product-row + .opulent-product-row{margin-top:clamp(50px,6vw,80px)}

/* When the product grid is auto-appended to a page's content (Decking,
   Cladding, Screening, Accessories) it needs to break out of the narrow
   text column and breathe like it does on the homepage. */
.entry .opulent-product-row{
  margin:56px calc(50% - 50vw) 0;padding:56px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.entry .opulent-product-row .wrap{max-width:var(--wrap)}

@media (max-width:900px){
  .shop-hover{display:none} /* hover states don't apply on touch — avoid a dead overlay */
}

/* =========================================================
   v8 — mega menu (professional category preview on hover)
   ========================================================= */
.mega-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  width:min(720px,calc(100vw - 48px));z-index:60;
  opacity:0;visibility:hidden;transition:.4s var(--ease);
  pointer-events:none;
}
.menu-item-has-children:hover > .mega-menu,
.menu-item-has-children:focus-within > .mega-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
}
.mega-menu-inner{
  display:grid;grid-template-columns:200px 1fr;gap:0;
  background:#161310;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px rgba(0,0,0,.5);overflow:hidden;
}
.mega-intro{
  padding:28px 26px;background:linear-gradient(155deg,#221B15,#161310);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.mega-intro h3{font-family:var(--display);font-size:26px;font-weight:400;margin:6px 0 2px;color:var(--sand)}
.mega-count{font-size:12px;color:var(--muted);margin:0 0 18px}
.mega-products{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-products li a{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:2px;
  transition:.3s var(--ease);
}
.mega-products li a:hover{background:rgba(185,139,94,.1)}
.mega-thumb{
  flex:0 0 auto;width:44px;height:44px;border-radius:2px;overflow:hidden;
  background:#1E1A17;display:block;
}
.mega-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mega-name{
  flex:1;font-size:13px;letter-spacing:normal;color:var(--sand);
  line-height:1.3;text-transform:none;
}
.mega-price{font-size:12px;letter-spacing:normal;text-transform:none;color:var(--bronze-lt);white-space:nowrap}

/* Mega menu is a hover/desktop pattern only — the mobile slide-in panel
   already lists the same top-level link, kept simple there on purpose. */
@media (max-width:900px){
  .mega-menu{display:none}
}

/* =========================================================
   v9 — consolidated Catalogue mega menu (all categories at once)
   ========================================================= */
.mega-menu--catalogue{width:min(900px,calc(100vw - 48px))}
.mega-menu-inner--wide{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) 220px;
  gap:0;
}
.mega-col{padding:26px 20px;border-right:1px solid rgba(255,255,255,.08)}
.mega-col-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);
}
.mega-products--stacked{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.mega-products--stacked li a{padding:8px 6px}
.mega-col-link{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--bronze-lt);padding:0;
}
.mega-col-link:hover{color:var(--bronze)}
.mega-col-link svg{stroke:currentColor;flex:0 0 auto}

.mega-promo{
  padding:26px 22px;background:linear-gradient(165deg,#241C15,#161310);
  display:flex;flex-direction:column;
}
.mega-promo-img{
  aspect-ratio:4/3;border-radius:2px;margin-bottom:16px;
  background:linear-gradient(150deg,#8A6A45,#3A2C20);
}
.mega-promo h4{
  font-family:var(--display);font-size:19px;font-weight:400;margin:6px 0 16px;color:var(--sand);
}
.mega-promo .btn{align-self:flex-start}

@media (max-width:1100px){
  .mega-menu--catalogue{width:min(680px,calc(100vw - 32px))}
  .mega-menu-inner--wide{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .mega-promo{display:none} /* keep the panel from getting cramped on smaller laptop screens */
}

/* =========================================================
   v10 — real business details in the footer
   ========================================================= */
.foot-contact-details{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.foot-contact-details li{font-size:14px;color:rgba(244,240,233,.7)}
.foot-contact-details a{color:rgba(244,240,233,.85)}
.foot-contact-details a:hover{color:var(--bronze-lt)}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:rgba(244,240,233,.7);transition:.35s var(--ease);
}
.foot-social a:hover{border-color:var(--bronze);color:var(--bronze-lt);background:rgba(185,139,94,.1)}

/* =========================================================
   v14 — stacking product cards
   Each card sticks to the top of the viewport as you scroll, and the next
   one slides up over it like a deck being dealt. This is pure CSS
   position:sticky on elements in normal document flow — no canvas, no
   absolute positioning, no JavaScript required. If every script on the
   page failed, this still works.
   ========================================================= */
.showcase{
  padding:clamp(60px,8vw,110px) 0 clamp(80px,12vw,160px);
  background:
    radial-gradient(70% 50% at 50% 20%,rgba(185,139,94,.08),transparent 70%),
    var(--ink);
}
.showcase-head{text-align:center;margin-bottom:clamp(30px,5vw,56px)}
.showcase-head .section-title{margin-top:10px}

.stack{
  /* Nothing may clip a sticky child, so no overflow here. */
  max-width:1000px;margin:0 auto;
}

.stack-item{
  position:sticky;
  /* Each card parks slightly lower than the one before, so the stack
     fans out and you can still see the edges of the cards beneath. */
  top:calc(90px + var(--i, 0) * 18px);
  padding-bottom:clamp(40px,6vw,80px);
}

.stack-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(155deg,rgba(44,37,31,.98),rgba(20,18,16,.99));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  text-decoration:none;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
  min-height:clamp(300px,42vh,420px);
}
.stack-card:hover{
  border-color:rgba(216,180,140,.42);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 50px rgba(185,139,94,.14),inset 0 1px 0 rgba(255,255,255,.14);
}

.stack-card-media{display:block;overflow:hidden;background:#1E1A17}
.stack-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.stack-card:hover .stack-card-media img{transform:scale(1.05)}

.stack-card-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3.5vw,48px);
}
.stack-card-num{
  font-size:11px;letter-spacing:.22em;color:var(--bronze);margin-bottom:14px;
}
.stack-card-cat{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.stack-card-name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3vw,40px);line-height:1.12;
  color:var(--sand);margin-bottom:10px;
}
.stack-card-spec{
  display:block;color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:6px;
}
.stack-card-price{
  color:var(--bronze-lt);font-size:19px;margin-bottom:26px;
}
.stack-card-cta{
  align-self:flex-start;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand);border-bottom:1px solid var(--bronze);
  padding-bottom:4px;transition:color .4s var(--ease);
}
.stack-card:hover .stack-card-cta{color:var(--bronze-lt)}
.stack-card:focus-visible{outline:2px solid var(--bronze-lt);outline-offset:4px}

/* Cards below the active one dim and shrink very slightly, which is what
   makes the stack read as depth rather than a flat pile. Applied by JS as
   a progressive enhancement — the layout is correct without it. */
.stack-item{transition:transform .4s var(--ease),opacity .4s var(--ease)}

@media (max-width:820px){
  .stack-card{grid-template-columns:1fr;min-height:0}
  .stack-card-media{aspect-ratio:16/10}
  .stack-item{top:calc(70px + var(--i, 0) * 12px)}
}

/* Sticky stacking depends on scrolling, so for reduced motion the cards
   simply become a normal stacked list. */
@media (prefers-reduced-motion:reduce){
  .stack-item{position:static;transform:none!important;opacity:1!important}
}

/* Admin-only heads-up shown on the placeholder showcase — never seen by visitors. */
.showcase-admin-note{
  margin-top:14px;font-size:12px;color:var(--muted);
  border-left:2px solid var(--bronze);padding-left:12px;max-width:56ch;
  margin-left:auto;margin-right:auto;
}

/* =========================================================
   v15 — full-screen image expansion
   Starts as a small centred frame and grows to fill the viewport. Sizes
   are set from JS in px so the end state lands exactly on the viewport
   edge. Nothing here is a timed animation — it is all scroll position.
   ========================================================= */
.expand{position:relative;height:260vh;border-top:1px solid rgba(244,240,233,.1)}
.expand-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--ink);
}
.expand-frame{
  position:relative;overflow:hidden;
  width:var(--fw,34vw);height:var(--fh,23vw);
  border-radius:var(--fr,6px);border:1px solid rgba(244,240,233,.12);
  will-change:width,height,border-radius;
}
.expand-img{
  position:absolute;inset:0;background-size:cover;background-position:50% 62%;
  transform:scale(var(--is,1.12));will-change:transform;
}
.expand-grade{
  position:absolute;inset:0;opacity:var(--go,0);
  background:linear-gradient(180deg,rgba(18,16,14,.30) 0%,transparent 34%,transparent 52%,rgba(18,16,14,.88) 100%);
}
.expand-cap{
  position:absolute;left:0;right:0;bottom:clamp(28px,7vh,72px);
  padding:0 var(--gutter);text-align:center;
  opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 18px));
}
.expand-cap h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,4vw,58px);line-height:1.06;margin:10px 0 8px;color:var(--sand);
}
.expand-cap p{color:rgba(244,240,233,.75);font-size:14.5px;margin:0 auto;max-width:52ch}
.expand-cap .expand-price{color:var(--bronze-lt);font-size:17px;margin:14px 0 20px}
.expand-lede{
  position:absolute;left:0;right:0;top:clamp(84px,13vh,140px);
  padding:0 var(--gutter);text-align:center;opacity:var(--lo,1);
}

@media (max-width:820px){
  .expand{height:auto}
  .expand-sticky{position:relative;height:auto;padding:clamp(60px,9vw,100px) 0;display:block}
  .expand-frame{width:calc(100% - var(--gutter) * 2)!important;height:auto!important;aspect-ratio:16/10;margin:0 auto;border-radius:6px!important}
  .expand-lede{position:static;padding:0 var(--gutter) 26px;opacity:1!important}
  .expand-cap{position:static;padding:26px var(--gutter) 0;opacity:1!important;transform:none!important}
  .expand-grade{opacity:.5!important}
}

/* =========================================================
   v15 — horizontal scroll gallery
   ========================================================= */
.hscroll{position:relative;border-top:1px solid rgba(244,240,233,.1);background:var(--ink)}
.hscroll-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.hscroll-head{
  padding:0 var(--gutter);margin-bottom:clamp(20px,3vh,40px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hscroll-count{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hscroll-track{display:flex;gap:clamp(16px,2vw,30px);padding-inline:var(--gutter);will-change:transform}
.hitem{
  flex:0 0 clamp(230px,26vw,380px);
  border:1px solid rgba(244,240,233,.12);border-radius:6px;overflow:hidden;
  background:var(--ink-2);text-decoration:none;
  transition:border-color .4s var(--ease);
}
.hitem:hover{border-color:var(--bronze)}
.hitem-art{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}
.hitem-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,16,14,.55))}
.hitem-body{display:block;padding:18px 20px 22px}
.hitem-cat{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.hitem-name{display:block;font-family:var(--display);font-weight:300;font-size:21px;line-height:1.2;margin-bottom:6px;color:var(--sand)}
.hitem-price{display:block;color:var(--bronze-lt);font-size:14px}
.hscroll-rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;height:1px;background:rgba(244,240,233,.12)}
.hscroll-rail span{display:block;height:100%;background:var(--bronze);transform-origin:left center;transform:scaleX(0)}
.hscroll-hint{
  position:absolute;left:var(--gutter);bottom:48px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

@media (max-width:820px){
  .hscroll{height:auto!important}
  .hscroll-sticky{position:relative;height:auto;padding:clamp(60px,9vw,100px) 0}
  .hscroll-track{
    transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:16px;
  }
  .hitem{scroll-snap-align:start;flex-basis:76vw}
  .hscroll-rail,.hscroll-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .expand,.hscroll{height:auto!important}
  .expand-sticky,.hscroll-sticky{position:relative;height:auto;padding:60px 0;display:block}
  .expand-frame{width:calc(100% - var(--gutter) * 2)!important;height:auto!important;aspect-ratio:16/10;margin:0 auto}
  .expand-img{transform:none!important}
  .expand-lede,.expand-cap{position:static;opacity:1!important;transform:none!important;padding-inline:var(--gutter)}
  .hscroll-track{transform:none!important;overflow-x:auto}
  .hscroll-rail,.hscroll-hint{display:none}
}

/* =========================================================
   v16 — portal hero
   Two panels meet in the middle so the hero begins CLOSED, then part
   outward to uncover the photograph while the wordmark grows, its
   tracking tightens and its halves travel to opposite edges. Every value
   is driven from scroll POSITION, so it closes again on the way back up.
   ========================================================= */
.portal{position:relative;height:250vh}
.portal-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:var(--ink);
}
.portal-media{position:absolute;inset:0;z-index:1}
.portal-media .scene{position:absolute;inset:0;transition:opacity 1.2s var(--ease)}
.portal-media .scene img{width:100%;height:100%;object-fit:cover;display:block}
.portal-media .scene--day{opacity:0}
body[data-scene="day"] .portal-media .scene--day{opacity:1}
body[data-scene="day"] .portal-media .scene--night{opacity:0}
.portal-media .scene--night img{filter:brightness(.62) saturate(1.05) contrast(1.05)}
.portal-media .scene--day img{filter:brightness(1.02) saturate(1.08)}

.portal-duotone{
  position:absolute;inset:0;z-index:2;opacity:0;
  background:linear-gradient(122deg,#4A6B72 0%,var(--bronze) 100%);
  mix-blend-mode:overlay;will-change:opacity;
}
.portal-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(66% 60% at 50% 46%,transparent 28%,rgba(18,16,14,.9) 100%);
}
.portal-panel{position:absolute;top:0;bottom:0;z-index:5;width:52%;background:var(--ink);will-change:transform}
.portal-panel--l{left:0}
.portal-panel--r{right:0}
.portal-dot{
  position:absolute;top:50%;left:50%;z-index:4;
  width:7px;height:7px;border-radius:50%;margin:-3.5px 0 0 -3.5px;will-change:transform;
}
.portal-dot--a{background:var(--bronze);box-shadow:0 0 18px 3px rgba(185,139,94,.5)}
.portal-dot--b{background:#4A6B72;box-shadow:0 0 18px 3px rgba(74,107,114,.55)}

.portal-title{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.portal-title h1{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(44px,12vw,180px);line-height:1;letter-spacing:.04em;
  white-space:nowrap;display:flex;color:var(--sand);
  will-change:transform,letter-spacing;
}
.portal-title span{display:inline-block;will-change:transform}

.portal-copy{
  position:absolute;left:0;right:0;bottom:clamp(96px,15vh,150px);z-index:7;
  padding:0 var(--gutter);text-align:center;
  opacity:var(--pc,1);transform:translateY(calc(var(--pc,1) * 0px + (1 - var(--pc,1)) * 16px));
}
.portal-sub{
  margin:0 auto 22px;max-width:44ch;color:rgba(244,240,233,.82);
  font-size:clamp(15px,1.3vw,18px);
}
.portal-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.portal-corner{
  position:absolute;z-index:7;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,240,233,.6);line-height:1.8;
}
.portal-corner--tl{top:86px;left:var(--gutter)}
.portal-corner--tr{top:86px;right:var(--gutter);text-align:right}
.portal-corner--bl{bottom:34px;left:var(--gutter)}
.portal-corner--br{bottom:34px;right:var(--gutter);text-align:right}

.portal .scene-toggle{
  position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:8;
  right:auto;
}

@media (max-width:820px){
  .portal-corner--tr,.portal-corner--br{display:none}
  .portal-corner--tl{top:74px}
  .portal-copy{bottom:clamp(104px,17vh,160px)}
  .portal-cta .btn{flex:1 1 auto;justify-content:center}
}
/* A pinned, scroll-driven hero is poor on a short screen or when the
   visitor has asked for less motion — fall back to a plain static hero. */
@media (prefers-reduced-motion:reduce){
  .portal{height:auto}
  .portal-stage{position:relative;height:88svh}
  .portal-panel{display:none}
  .portal-title h1{transform:none!important;letter-spacing:.01em!important}
  .portal-title span{transform:none!important}
  .portal-duotone{opacity:.2}
}

/* =========================================================
   v17 — statement fold with spinning image
   ========================================================= */
.statement{
  position:relative;min-height:100svh;display:flex;align-items:center;
  border-top:1px solid rgba(244,240,233,.1);overflow:hidden;background:var(--ink);
}
.statement .wrap{width:100%;position:relative;z-index:2}
.statement-big{
  font-family:var(--display);font-weight:300;
  font-size:clamp(24px,3.6vw,52px);line-height:1.16;
  max-width:22ch;margin:22px 0 0;color:var(--sand);
}
.statement-big em{font-style:normal;color:var(--bronze)}
.statement-numeral{
  position:absolute;left:var(--gutter);bottom:6vh;z-index:1;
  font-family:var(--display);font-weight:400;font-size:clamp(120px,22vw,300px);
  line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(244,240,233,.14);
  pointer-events:none;user-select:none;
}
.orb{
  position:absolute;right:-14vw;top:50%;z-index:1;
  width:min(46vw,560px);aspect-ratio:1;opacity:.34;margin-top:-23vw;
  will-change:transform;
}
/* The photograph sits on an inner element so its continuous spin and the
   scroll-driven drift on the parent never overwrite one another. */
.orb-inner{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background-size:cover;background-position:center;
  animation:orb-spin 44s linear infinite;
  will-change:transform;
}
@keyframes orb-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media (max-width:820px){
  .statement{min-height:0;padding:clamp(70px,11vw,120px) 0}
  .orb{right:-32vw;width:70vw;margin-top:-35vw;opacity:.22}
  .statement-numeral{font-size:38vw;bottom:2vh}
}
@media (prefers-reduced-motion:reduce){
  .orb-inner{animation:none}
  .orb{transform:none!important}
}

/* =========================================================
   v19 — finishes deck (throwable sample stack)
   ========================================================= */
.finishes{padding:clamp(70px,10vw,130px) 0;border-top:1px solid rgba(244,240,233,.1);background:var(--ink)}
.finishes-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.finishes-copy .section-title{margin:16px 0 20px}
.finishes-copy p{color:rgba(244,240,233,.72);max-width:44ch;font-size:15px;margin:0 0 30px}
.finishes .btn-row{display:flex;gap:12px;flex-wrap:wrap}

.deck-col{display:flex;flex-direction:column;align-items:center}
.deck{
  position:relative;width:100%;max-width:430px;aspect-ratio:1;
  touch-action:pan-y;cursor:grab;
}
.deck:active{cursor:grabbing}
.deck-card{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(244,240,233,.12);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  will-change:transform;
}
.deck-art{flex:1;display:block}
.deck-meta{
  padding:18px 20px;border-top:1px solid rgba(244,240,233,.12);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:rgba(18,16,14,.5);
}
.deck-meta b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--sand)}
.deck-meta span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.deck-hint{margin-top:22px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}
.dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(244,240,233,.2);transition:background .3s var(--ease),width .3s var(--ease)}
.dots i.on{background:var(--bronze);width:18px;border-radius:3px}

@media (max-width:900px){
  .finishes-grid{grid-template-columns:1fr}
  .deck{max-width:340px}
}

/* =========================================================
   v21 — best sellers
   ========================================================= */
.bestsellers{padding:clamp(70px,10vw,130px) 0;border-top:1px solid rgba(244,240,233,.1);background:var(--ink)}
.bestsellers-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,50px);
}
.bestsellers-head .section-title{margin-top:10px}
.bestsellers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2vw,24px)}

.bs-card{
  border:1px solid rgba(244,240,233,.1);border-radius:6px;overflow:hidden;
  background:var(--ink-2);transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.bs-card:hover{transform:translateY(-5px);border-color:var(--bronze);box-shadow:0 26px 55px rgba(0,0,0,.45)}
.bs-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#1E1A17}
.bs-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.bs-card:hover .bs-media img{transform:scale(1.06)}

.bs-badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bs-rank{
  min-width:30px;height:30px;padding:0 9px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bronze);color:#fff;
  font-family:var(--display);font-size:15px;font-weight:400;
}
.bs-badge{
  padding:6px 12px;border-radius:100px;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;background:var(--bronze);color:#fff;
}
.bs-badge--sale{background:#C8503C}

.bs-body{padding:18px 20px 22px}
.bs-rating{display:flex;gap:2px;margin-bottom:8px}
.bs-rating svg{width:13px;height:13px;fill:rgba(244,240,233,.18)}
.bs-rating svg.is-on{fill:var(--bronze-lt)}
.bs-body h3{font-family:var(--display);font-size:21px;font-weight:400;margin:0 0 6px;line-height:1.2}
.bs-body h3 a{color:var(--sand)}
.bs-price{margin:0 0 6px;color:var(--bronze-lt);font-size:16px}
.bs-price del{color:var(--muted);margin-right:8px;font-size:14px}
.bs-sold{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bs-body .btn{margin-top:8px}

@media (max-width:560px){
  .bestsellers-grid{grid-template-columns:1fr}
}
.hscroll-note{
  display:block;margin-top:6px;font-style:normal;text-transform:none;
  letter-spacing:.04em;font-size:10px;color:var(--bronze);opacity:.85;
}

/* =========================================================
   v24 — inspiration gallery
   ========================================================= */
.gal{margin-top:clamp(24px,4vw,44px)}

.gal-filters{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);align-items:flex-start;
  padding-bottom:clamp(20px,3vw,30px);border-bottom:1px solid rgba(244,240,233,.12);
}
.gal-filter-group{display:flex;flex-direction:column;gap:10px}
.gal-filter-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gal-filter-options{display:flex;flex-wrap:wrap;gap:8px}
.gal-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:100px;
  border:1px solid rgba(244,240,233,.16);background:none;color:var(--ink-2);
  font-family:var(--body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:.3s var(--ease);
}
.gal-chip:hover{border-color:var(--bronze);color:var(--bronze-lt)}
.gal-chip.is-on{background:var(--bronze);border-color:var(--bronze);color:#fff}
.gal-chip-count{font-size:10px;opacity:.65}
.gal-clear{
  align-self:flex-end;background:none;border:0;cursor:pointer;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);border-bottom:1px solid var(--bronze);padding-bottom:3px;
}
.gal-count{
  margin:22px 0 clamp(16px,2vw,26px);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* Masonry-style columns so tall and wide shots both sit naturally. */
.gal-grid{
  columns:3;column-gap:clamp(12px,1.6vw,20px);
}
@media (max-width:1100px){.gal-grid{columns:2}}
@media (max-width:620px){.gal-grid{columns:1}}

.gal-item{
  display:block;width:100%;padding:0;margin:0 0 clamp(12px,1.6vw,20px);
  border:1px solid rgba(244,240,233,.1);border-radius:4px;overflow:hidden;
  background:var(--ink-2);cursor:zoom-in;position:relative;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  opacity:0;transform:translateY(18px);
  animation:gal-in .6s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 45ms);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
@keyframes gal-in{to{opacity:1;transform:none}}
.gal-item:hover{border-color:var(--bronze);transform:translateY(-3px)}
.gal-item.is-hidden{display:none}
.gal-item img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.gal-item:hover img{transform:scale(1.04)}

.gal-item-meta{
  position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;text-align:left;
  background:linear-gradient(transparent,rgba(18,16,14,.88));
  opacity:0;transition:opacity .4s var(--ease);
}
.gal-item:hover .gal-item-meta,
.gal-item:focus-visible .gal-item-meta{opacity:1}
.gal-item-cat{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-lt);margin-bottom:4px}
.gal-item-title{display:block;font-family:var(--display);font-size:18px;color:var(--sand);line-height:1.2}

.gal-empty,.gal-admin-note{color:var(--muted);font-size:14px;padding:30px 0}
.gal-admin-note{
  font-size:12px;border-left:1px solid var(--bronze);padding:0 0 0 14px;margin-top:26px;
}

/* ---- lightbox ---- */
body.gal-open{overflow:hidden}
.gal-lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,9,8,.96);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);
}
.gal-lightbox[hidden]{display:none}
.gal-lightbox-inner{margin:0;max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:16px}
.gal-lightbox-inner img{
  max-width:100%;max-height:76vh;width:auto;height:auto;
  object-fit:contain;border-radius:4px;margin:0 auto;display:block;
}
.gal-lightbox-inner figcaption{text-align:center}
.gal-lightbox-inner strong{
  display:block;font-family:var(--display);font-weight:300;font-size:22px;color:var(--sand);
}
.gal-lightbox-inner span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px;max-width:60ch;margin-inline:auto}
.gal-close{
  position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,240,233,.2);
  background:none;color:var(--sand);font-size:26px;line-height:1;cursor:pointer;
  transition:.3s var(--ease);
}
.gal-close:hover{border-color:var(--bronze);color:var(--bronze-lt)}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,240,233,.2);
  background:rgba(18,16,14,.6);color:var(--sand);font-size:30px;line-height:1;cursor:pointer;
  transition:.3s var(--ease);
}
.gal-nav:hover{border-color:var(--bronze);color:var(--bronze-lt)}
.gal-prev{left:clamp(8px,2vw,26px)}
.gal-next{right:clamp(8px,2vw,26px)}
@media (max-width:620px){
  .gal-nav{width:42px;height:42px;font-size:24px}
  .gal-item-meta{opacity:1;padding:30px 14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .gal-item{opacity:1;transform:none;animation:none}
  .gal-item:hover{transform:none}
  .gal-item:hover img{transform:none}
}