/* ============================================================
   SUPER 313 TRADERS — “The Quiet Gallery”
   Warm-stone editorial · Fraunces + Archivo
   ============================================================ */
:root{
  --bg:#F8F7F3;
  --bg-2:#EFEAE2;
  --ink:#171717;
  --dark:#111111;
  --gold:#B89B5E;
  --gold-deep:#9A7F45;
  --line:rgba(23,23,23,.14);
  --line-soft:rgba(23,23,23,.08);
  --paper-line:rgba(248,247,243,.18);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Archivo",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,4.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- typography helpers ---------- */
.serif{font-family:var(--serif)}
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.chapter{
  display:flex;align-items:baseline;gap:1.4rem;
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.chapter .num{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:300;
  font-style:italic;
  color:var(--gold);
  line-height:1;
}
.chapter .rule{flex:1;height:1px;background:var(--line);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.inview .chapter .rule{transform:scaleX(1)}
.h-display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,5.2vw,4.6rem);
  line-height:1.06;
  letter-spacing:-.015em;
}
.h-display em{font-style:italic;font-weight:300;color:var(--gold-deep)}
.lede{
  font-size:clamp(.95rem,1.15vw,1.08rem);
  font-weight:300;
  color:rgba(23,23,23,.72);
  max-width:34em;
}
.dark-section .lede{color:rgba(248,247,243,.66)}

/* ---------- reveal animations ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.inview .rv,.rv.inview{opacity:1;transform:none}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.rv-img{clip-path:inset(6% 4% 6% 4%);transition:clip-path 1.4s var(--ease)}
.inview .rv-img,.rv-img.inview{clip-path:inset(0 0 0 0)}
.inview .rv-img img,.rv-img.inview img{transform:scale(1)}
[data-d="1"]{transition-delay:.12s}[data-d="2"]{transition-delay:.24s}
[data-d="3"]{transition-delay:.36s}[data-d="4"]{transition-delay:.48s}
[data-d="5"]{transition-delay:.6s}[data-d="6"]{transition-delay:.72s}

/* ---------- nav ---------- */
nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  background:rgba(248,247,243,0);
  border-bottom:1px solid transparent;
  transition:background .5s,border-color .5s,padding .5s;
}
nav.scrolled{
  background:rgba(248,247,243,.72);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
  padding:.8rem var(--pad);
}
nav .logo{
  font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.02em;
  color:#fff;transition:color .5s;display:flex;align-items:baseline;gap:.5rem;
}
nav .logo .n313{color:var(--gold);font-style:italic}
nav .logo small{font-family:var(--sans);font-weight:300;font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;opacity:.75}
nav.scrolled .logo{color:var(--ink)}
nav.solid-nav .logo{color:var(--ink)}
nav ul{display:flex;gap:2.2rem;align-items:center}
nav ul a{
  font-size:.7rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.85);transition:color .4s;position:relative;
}
nav.scrolled ul a{color:rgba(23,23,23,.75)}
nav ul a::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
nav ul a.active{color:#fff}
nav.scrolled ul a.active{color:var(--ink)}
nav ul a.active::after{transform:scaleX(1)}
.btn{
  display:inline-block;
  font-size:.68rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  padding:.95em 2.1em;border:1px solid currentColor;
  position:relative;overflow:hidden;transition:color .45s var(--ease);
  cursor:pointer;background:transparent;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;
}
.btn:hover{color:#fff;border-color:var(--gold)}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-solid::before{background:var(--dark)}
.btn-solid:hover{border-color:var(--dark)}
nav .btn{color:#fff}
nav.scrolled .btn{color:var(--ink)}
nav .burger{display:none}

/* ---------- hero (home) ---------- */
header.hero{
  position:relative;height:100vh;
  display:flex;align-items:flex-end;
  color:#fff;
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:118%;object-fit:cover;object-position:50% 40%;
  will-change:transform;
}
.hero-scrim{position:absolute;inset:0;background:rgba(12,10,8,.34)}
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad) clamp(3rem,7vh,5.5rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.5rem;
}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.9rem,7vw,6.4rem);
  line-height:1.02;letter-spacing:-.02em;max-width:11em;
}
.hero h1 em{font-style:italic;color:#E8D9B8}
.hline{display:block;overflow:hidden}
.hline span{display:block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.loaded .hline span{transform:none}
.hline:nth-child(2) span{transition-delay:.12s}
.hline:nth-child(3) span{transition-delay:.24s}
.hero-side{max-width:21rem;padding-bottom:.6rem;opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease) .6s,transform 1.2s var(--ease) .6s}
.loaded .hero-side{opacity:1;transform:none}
.hero-side p{font-size:.86rem;font-weight:300;color:rgba(255,255,255,.82);margin-bottom:1.6rem}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:2.6rem;z-index:2;
  width:1px;height:64px;background:rgba(255,255,255,.35);overflow:hidden;
}
.scroll-cue::after{
  content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;
  background:#fff;animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{0%{top:-40%}60%,100%{top:110%}}

/* ---------- page banner (sub-pages) ---------- */
.page-banner{
  position:relative;height:clamp(22rem,62vh,34rem);
  display:flex;align-items:flex-end;color:#fff;overflow:hidden;
}
.page-banner .media{position:absolute;inset:0}
.page-banner .media img{width:100%;height:100%;object-fit:cover}
.page-banner .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.35),rgba(12,10,8,.62))}
.page-banner .inner{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(2.2rem,5vh,3.6rem)}
.page-banner .eyebrow{color:#E8D9B8;display:block;margin-bottom:1.1rem;font-size:.72rem;letter-spacing:.34em}
.page-banner h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,6.6vw,5.9rem);line-height:1.02;letter-spacing:-.02em;
}
.page-banner h1 em{font-style:italic;color:#E8D9B8}
.page-banner.solid{background:var(--dark)}
.page-banner p.sub{max-width:36em;margin-top:1.3rem;font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.9)}
/* Company hero — a taller, cinematic frame so the flagship storefront reads far more completely (object-fit stays cover; no distortion) */
.page-banner.company-hero{height:clamp(32rem,92vh,58rem)}
@media(max-width:700px){
  .page-banner.company-hero{height:clamp(26rem,76vh,40rem)}
}

/* ---------- generic section ---------- */
section{padding:clamp(4.5rem,10vw,8.5rem) var(--pad);position:relative}
.dark-section{background:var(--dark);color:var(--bg)}
.dark-section .chapter .rule{background:var(--paper-line)}
.tinted{background:var(--bg-2)}

/* ---------- tile manufacturing process ---------- */
.mfg-block{padding:clamp(2.6rem,5vw,4.2rem) 0;border-top:1px solid var(--paper-line)}
.mfg-block:first-of-type{border-top:0;padding-top:0}
.mfg-head{margin-bottom:2.4rem;max-width:56em}
.mfg-head .k{display:inline-flex;align-items:baseline;gap:.9rem}
.mfg-head .k b{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--gold);line-height:1}
.mfg-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.01em;margin:.2rem 0 0}
.mfg-head p{color:rgba(248,247,243,.62);font-size:1.02rem;line-height:1.68;max-width:46em;margin-top:.7rem}
.mfg-head .k h3{margin:0}

/* hero band */
.mfg-hero{margin:0 0 clamp(2.6rem,5vw,4rem);border-radius:16px;overflow:hidden}
.mfg-hero img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}

/* shared image cards */
.mfg-mats,.mfg-thick{display:grid;gap:1.2rem}
.mfg-mats{grid-template-columns:repeat(4,1fr)}
.mfg-thick{grid-template-columns:repeat(4,1fr)}
.mfg-mat,.mfg-t,.mfg-flow li{border:1px solid var(--paper-line);border-radius:14px;overflow:hidden;background:rgba(248,247,243,.02);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.mfg-mat:hover,.mfg-t:hover,.mfg-flow li:hover{border-color:var(--gold);transform:translateY(-5px)}
.mfg-mat img,.mfg-t img,.mfg-flow figure img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.mfg-mat:hover img,.mfg-t:hover img,.mfg-flow li:hover figure img{transform:scale(1.06)}

/* raw materials */
.mfg-mat figcaption{padding:1.25rem 1.3rem 1.45rem}
.mfg-mat b{display:block;font-family:var(--serif);font-weight:500;font-size:1.12rem;margin-bottom:.4rem}
.mfg-mat span{font-size:.85rem;line-height:1.55;color:rgba(248,247,243,.55)}

/* process flow */
.mfg-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mfg-flow figure{position:relative;margin:0;overflow:hidden}
.mfg-flow figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.5),transparent 42%);pointer-events:none}
.mfg-flow .no{position:absolute;left:1.1rem;top:.7rem;z-index:2;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.7rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.mfg-flow .cap{padding:1.2rem 1.4rem 1.4rem}
.mfg-flow b{display:block;font-family:var(--serif);font-weight:500;font-size:1.1rem;margin-bottom:.4rem}
.mfg-flow p{font-size:.85rem;line-height:1.56;color:rgba(248,247,243,.55);margin:0}

/* thickness */
.mfg-t figcaption{padding:1.05rem 1.2rem 1.25rem;text-align:center}
.mfg-t figcaption b{font-family:var(--serif);font-weight:500;font-size:1.15rem;display:block;color:var(--bg)}
.mfg-t figcaption span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-top:.4rem}

@media(max-width:900px){
  .mfg-mats,.mfg-flow,.mfg-thick{grid-template-columns:repeat(2,1fr)}
  .mfg-hero img{aspect-ratio:16/9}
}
@media(max-width:560px){
  .mfg-mats,.mfg-flow{grid-template-columns:1fr}
  .mfg-thick{grid-template-columns:repeat(2,1fr);gap:.8rem}
}

/* ---------- heritage timeline ---------- */
.heritage-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2.4rem,6vw,5.5rem);align-items:start}
.heritage-lede p{font-size:1.08rem;line-height:1.8;color:rgba(23,23,23,.74);margin:0 0 1.3rem;max-width:34em}
.heritage-lede p:first-child{font-size:1.28rem;line-height:1.7;color:var(--ink)}
.tline{list-style:none;margin:0;padding:0}
.tline li{position:relative;padding:0 0 2.4rem 2.4rem;border-left:1px solid var(--line)}
.tline li:last-child{padding-bottom:0}
.tline li::before{content:"";position:absolute;left:-6px;top:.25rem;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);transition:background .4s}
.tline li:hover::before{background:var(--gold)}
.tline .ph{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.tline h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.55rem);margin:.45rem 0 .5rem;letter-spacing:-.01em}
.tline p{font-size:.98rem;line-height:1.68;color:rgba(23,23,23,.68);margin:0;max-width:40em}

/* ---------- vision pillars ---------- */
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3.2rem}
.pillar{border:1px solid var(--line);border-radius:16px;padding:2.1rem 1.7rem;background:var(--bg);transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s}
.pillar:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 24px 60px -34px rgba(23,23,23,.34)}
.pillar .ic{width:34px;height:34px;color:var(--gold-deep);margin-bottom:1.2rem;display:block}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:1.22rem;margin:0 0 .6rem;letter-spacing:-.01em}
.pillar p{font-size:.92rem;line-height:1.62;color:rgba(23,23,23,.66);margin:0}

@media(max-width:960px){
  .heritage-wrap{grid-template-columns:1fr;gap:3rem}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .pillar-grid{grid-template-columns:1fr}
}

/* ---------- statement ---------- */
.statement{text-align:center;padding-top:clamp(6rem,13vw,11rem);padding-bottom:clamp(6rem,13vw,11rem)}
.statement .eyebrow{display:block;margin-bottom:2.6rem}
.statement h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,4.3vw,3.9rem);
  line-height:1.22;letter-spacing:-.01em;
  max-width:24em;margin:0 auto;
}
.statement h2 em{font-style:italic;color:var(--gold-deep)}
.statement .foot{
  margin-top:3rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,23,.45);
}

/* ---------- categories ---------- */
.cat-grid{
  display:grid;gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(15rem,26vw,26rem);
}
.cat{position:relative;overflow:hidden;grid-column:span 4;cursor:pointer}
.cat:nth-child(1){grid-column:span 7}
.cat:nth-child(2){grid-column:span 5}
.cat:nth-child(3){grid-column:span 4}
.cat:nth-child(4){grid-column:span 4}
.cat:nth-child(5){grid-column:span 4}
.cat:nth-child(6){grid-column:span 12;grid-auto-rows:auto;min-height:12rem}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.cat:hover img{transform:scale(1.055)}
.cat.cat-zoom img{position:absolute;width:230%;max-width:none;height:auto;left:-128%;top:-30%}
.cat.cat-zoom .veil{background:rgba(12,10,8,.05)}
.cat.cat-zoom:hover .veil{background:rgba(12,10,8,.08)}
.cat.cat-zoom .tag{color:var(--ink)}
.cat.cat-zoom .arrow{border-color:rgba(23,23,23,.4);color:var(--ink)}
.cat.cat-zoom:hover .arrow{color:#fff}
.cat .veil{position:absolute;inset:0;background:rgba(12,10,8,.18);transition:background .8s}
.cat:hover .veil{background:rgba(12,10,8,.34)}
.cat .tag{
  position:absolute;left:1.6rem;bottom:1.5rem;right:1.6rem;color:#fff;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.cat .tag h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.8rem);line-height:1.1}
.cat .tag small{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8;margin-top:.45rem}
.cat .arrow{
  width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.5);border-radius:50%;
  display:grid;place-items:center;flex:none;
  transition:background .5s,transform .5s var(--ease);font-size:1rem;
}
.cat:hover .arrow{background:var(--gold);border-color:var(--gold);transform:rotate(45deg)}
.cat-text{
  background:var(--dark);color:var(--bg);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:2.4rem 2.2rem;gap:1.5rem;
}
.cat-text h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.8rem)}
.cat-text h3 em{font-style:italic;color:var(--gold)}
.cat-text p{font-size:.8rem;color:rgba(248,247,243,.6);max-width:44em}
.cat-text .series{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}

/* ---------- featured collections ---------- */
.feature{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.5vw,2.6rem);
  align-items:center;
  padding:clamp(2.6rem,5vw,4.2rem) 0;
  border-top:1px solid var(--line-soft);
}
.feature:first-of-type{border-top:0}
.feature .media{grid-column:1/8;position:relative}
.feature:nth-child(even) .media{grid-column:6/13;order:2}
.feature .media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature .media .chip{
  position:absolute;right:-1px;bottom:-1px;background:var(--bg);
  padding:.7rem 1.1rem 0 1.1rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,23,.5);
}
.feature .info{grid-column:8/13}
.feature:nth-child(even) .info{grid-column:1/6;order:1}
.feature .info .code{font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1rem;display:block}
.feature .info h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.05;margin-bottom:1.2rem}
.feature .info p{font-size:.9rem;color:rgba(23,23,23,.68);margin-bottom:1.8rem;max-width:30em}
.spec{border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;font-size:.78rem}
.spec dt{letter-spacing:.18em;text-transform:uppercase;font-size:.62rem;color:rgba(23,23,23,.45);padding-top:.15em}
.spec dd{text-align:right;font-weight:400}
.swatch-pair{position:absolute;left:1.4rem;top:1.4rem;width:clamp(4rem,7vw,6.2rem);box-shadow:0 18px 44px rgba(12,10,8,.35)}
.swatch-pair img{aspect-ratio:1/2;object-fit:cover}

/* index of all designs */
.surface-index{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);padding-top:2.6rem}
.surface-index h4{font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.25rem;margin-bottom:1.8rem;color:rgba(23,23,23,.8)}
.idx{columns:4;gap:2.5rem;font-size:.74rem;line-height:2.1}
.idx li{break-inside:avoid;display:flex;justify-content:space-between;gap:.8rem;border-bottom:1px dotted var(--line-soft)}
.idx li span:last-child{color:rgba(23,23,23,.45);font-size:.66rem;letter-spacing:.08em}
@media(max-width:1100px){.idx{columns:3}}
@media(max-width:800px){.idx{columns:2}}
@media(max-width:520px){.idx{columns:1}}

/* ---------- showcase masonry ---------- */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2vw,1.8rem);align-items:stretch}
@media(max-width:1080px){.masonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.masonry{grid-template-columns:1fr}}
.card{
  display:flex;flex-direction:column;
  background:#161513;border:1px solid rgba(248,247,243,.09);
  transition:border-color .6s;
}
.card:hover{border-color:rgba(184,155,94,.55)}
.card .ph{overflow:hidden;position:relative}
.card .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:1.5rem 1.5rem 1.6rem}
.card .brandline{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem}
.card .brandline b{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:400}
.card .brandline span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,247,243,.4)}
.card h3{font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.12;margin-bottom:.9rem}
.card .specs{border-top:1px solid rgba(248,247,243,.12)}
.card .specs .spec{border-color:rgba(248,247,243,.09);font-size:.74rem}
.card .specs .spec dt{color:rgba(248,247,243,.42)}
.card .specs .spec dd{color:rgba(248,247,243,.88);font-weight:300}
.card.text-card .body{padding-top:2rem}
.card.text-card .glyph{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:3rem;color:var(--gold);line-height:1;margin-bottom:1.2rem;display:block;
}
.card .note{font-size:.76rem;color:rgba(248,247,243,.5);margin-bottom:1.1rem}

/* ---------- immersive inspiration ---------- */
.imm{position:relative;height:clamp(30rem,92vh,52rem);overflow:hidden;margin:0}
.imm img{width:100%;height:126%;object-fit:cover;will-change:transform}
.imm .cap{
  position:absolute;inset:auto 0 0 0;padding:2.4rem var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;color:#fff;z-index:2;
}
.imm .veil{position:absolute;inset:0;background:rgba(12,10,8,.16)}
.imm .cap h3{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.5rem,2.6vw,2.4rem)}
.imm .cap small{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.75}
.insp-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.75rem);padding:clamp(1rem,2vw,1.75rem) var(--pad)}
.insp-duo figure{position:relative;overflow:hidden}
.insp-duo img{width:100%;height:clamp(16rem,40vw,32rem);object-fit:cover;transition:transform 1.6s var(--ease)}
.insp-duo figure:hover img{transform:scale(1.045)}
.insp-duo figcaption{
  position:absolute;left:1.5rem;bottom:1.3rem;color:#fff;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
}
@media(max-width:700px){.insp-duo{grid-template-columns:1fr}}

/* ---------- brands ---------- */
.brand-wall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brand{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2rem,4vw,3.6rem) clamp(1.4rem,2.5vw,2.4rem);
  transition:background .6s;position:relative;overflow:hidden;
}
.brand:hover{background:var(--bg-2)}
.brand .wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:.03em;margin-bottom:.9rem}
.brand .wordmark i{color:var(--gold);font-style:normal}
.brand p{font-size:.78rem;color:rgba(23,23,23,.6);max-width:22em}
.brand .origin{
  display:inline-block;margin-top:1.3rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);
  border:1px solid rgba(184,155,94,.4);padding:.45em 1em;
}
@media(max-width:980px){.brand-wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.brand-wall{grid-template-columns:1fr}}

/* ---------- catalogues ---------- */
.cat-lib{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2vw,2rem)}
@media(max-width:1080px){.cat-lib{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cat-lib{grid-template-columns:1fr}}
.book{position:relative}
.book .cover{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-2);
  box-shadow:0 26px 60px -22px rgba(12,10,8,.38);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
  display:block;
}
.book:hover .cover{transform:translateY(-8px);box-shadow:0 40px 74px -20px rgba(12,10,8,.48)}
.book .cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:10px;z-index:3;
  background:rgba(12,10,8,.22);mix-blend-mode:multiply;
}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book .cover .overlay{
  position:absolute;inset:0;background:rgba(17,17,17,.35);z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.5rem 1.5rem 1.5rem 1.9rem;color:#fff;
}
.book .cover .overlay .top small{display:block;font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;opacity:.85;margin-bottom:.5rem}
.book .cover .overlay .top h3{font-family:var(--serif);font-weight:300;font-size:1.55rem;line-height:1.12}
.book .cover .overlay .pg{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.book .cover.solid{background:var(--dark)}
.book .cover.solid .overlay{background:transparent}
.book .cover.solid .overlay .motif{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:5rem;color:var(--gold);opacity:.9;line-height:.9;
}
.book .meta{display:flex;justify-content:space-between;align-items:center;padding:1.1rem .2rem 0}
.book .meta span{font-size:.72rem;color:rgba(23,23,23,.55)}
.book .links{display:flex;gap:1.4rem}
.book .links a{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold);padding-bottom:.35em;transition:color .4s;
}
.book .links a:hover{color:var(--gold-deep)}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.75rem)}
.gallery figure{position:relative;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{
  position:absolute;left:1.4rem;bottom:1.2rem;color:#fff;z-index:2;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
}
.gallery .g1{grid-column:1/8;aspect-ratio:16/10}
.gallery .g2{grid-column:8/13;aspect-ratio:auto}
.gallery .g3{grid-column:1/5;aspect-ratio:4/5}
.gallery .g4{grid-column:5/9;aspect-ratio:4/5}
.gallery .g5{grid-column:9/13;aspect-ratio:4/5}
.gallery .g6{grid-column:1/8;aspect-ratio:16/10}
.gallery .g7{grid-column:8/13;aspect-ratio:auto}
.gallery .g8{grid-column:1/13;aspect-ratio:24/9}
@media(max-width:760px){
  .gallery .g1,.gallery .g2,.gallery .g6,.gallery .g7,.gallery .g8{grid-column:1/13}
  .gallery .g3,.gallery .g4,.gallery .g5{grid-column:1/13;aspect-ratio:16/10}
  .gallery .g8{aspect-ratio:16/10}
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-grid h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.1}
.about-grid h2 em{font-style:italic;color:var(--gold)}
/* Bath & Sanitary · Section 03 — larger, more readable right column */
#accessories .about-grid{align-items:center}
#accessories .about-grid h2{font-size:clamp(2.2rem,4vw,3.7rem);line-height:1.12}
#accessories .lede{font-size:1.18rem;line-height:1.78;margin-bottom:2.6rem!important;color:rgba(23,23,23,.78)}
#accessories .vrow{font-size:1.02rem;padding:1.35rem 0;gap:2rem;align-items:baseline}
#accessories .vrow b{flex:0 0 8.5rem;font-size:.66rem;letter-spacing:.28em;color:var(--gold-deep);padding-top:.15em}
#accessories .vrow span{line-height:1.7;color:rgba(23,23,23,.74)}
@media(max-width:860px){
  #accessories .about-grid{align-items:start}
  #accessories .vrow{gap:1.1rem}
  #accessories .vrow b{flex:0 0 6rem}
}
.about-copy p{font-size:.95rem;color:rgba(248,247,243,.72);margin-bottom:1.4rem;max-width:36em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);margin-top:2.8rem}
.stat{background:var(--dark);padding:1.6rem 1.4rem}
.stat b{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.6rem);color:var(--gold);display:block;line-height:1}
.stat span{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(248,247,243,.5);display:block;margin-top:.7rem}

/* ---------- showroom ---------- */
.showroom{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,3vw,3rem);align-items:stretch}
@media(max-width:900px){.showroom{grid-template-columns:1fr}}
.showroom .visit{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:.4rem 0}
.showroom .visit h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.08}
.vrow{border-top:1px solid var(--line-soft);padding:1.05rem 0;display:flex;gap:1.5rem;font-size:.86rem}
.vrow b{flex:0 0 7.5rem;font-weight:400;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,23,.45);padding-top:.35em}
.map-ph{
  margin-top:.5rem;border:1px solid var(--line);height:11rem;position:relative;
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,var(--line-soft) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,var(--line-soft) 39px 40px);
}
.map-ph::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);
  box-shadow:0 0 0 8px rgba(184,155,94,.22);
}
.map-ph span{
  position:absolute;left:1rem;bottom:.8rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,23,.4);
}
.showroom .media{overflow:hidden}
.showroom .media img{width:100%;height:100%;object-fit:cover;min-height:22rem}

/* ---------- contact ---------- */
.contact{text-align:center}
.contact h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,5.4vw,5rem);line-height:1.05;letter-spacing:-.015em;
  max-width:16em;margin:0 auto 2.4rem;
}
.contact h2 em{font-style:italic;color:var(--gold)}
.contact .rows{max-width:34rem;margin:3.4rem auto 0;text-align:left}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--dark);color:var(--bg);text-align:center;
  padding:clamp(4.5rem,9vw,7.5rem) var(--pad);
}
.cta-band h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.1;letter-spacing:-.01em;
  max-width:18em;margin:0 auto 2.4rem;
}
.cta-band h2 em{font-style:italic;color:var(--gold)}
.cta-band .eyebrow{display:block;margin-bottom:2rem;color:var(--gold)}

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--bg);padding:clamp(4rem,8vw,6.5rem) var(--pad) 2.2rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:4rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:1.4rem}
.foot-grid ul li{margin-bottom:.7rem}
.foot-grid ul a{font-size:.82rem;color:rgba(248,247,243,.65);transition:color .4s}
.foot-grid ul a:hover{color:var(--gold)}
.foot-brand p{font-size:.84rem;color:rgba(248,247,243,.55);max-width:24em;margin-top:1.2rem}
.giant{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,7vw,6rem);line-height:.95;letter-spacing:-.02em;
  border-top:1px solid var(--paper-line);padding-top:3rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em;
}
.giant i{color:var(--gold);font-style:italic}
.legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-top:2.6rem;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,247,243,.35);
}
.legal a{color:rgba(248,247,243,.5)}
/* generous cream break between the tiles-page CTA and the footer */
.cta-band-spaced{margin-bottom:clamp(3.5rem,8vw,7rem)}

/* ---------- footer social ---------- */
.foot-social{margin-top:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.foot-social a{display:inline-flex;align-items:center;gap:.75rem;font-size:.8rem;color:rgba(248,247,243,.6);transition:color .4s var(--ease)}
.foot-social a:hover{color:var(--gold)}
.foot-so-ic{flex:0 0 2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--paper-line);border-radius:50%;color:rgba(248,247,243,.72);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.foot-so-ic svg{width:15px;height:15px}
.foot-social a:hover .foot-so-ic{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}

/* ---------- responsive nav ---------- */
/* medium screens: tighten the 8-item nav so it never crowds the logo/buttons */
@media(min-width:1121px) and (max-width:1320px){
  nav ul{gap:1.3rem}
  nav ul a{letter-spacing:.13em;font-size:.66rem}
}
@media(max-width:1120px){
  nav > div .btn{display:none}
  nav ul{display:none}
  nav .burger{
    display:block;background:none;border:0;color:inherit;cursor:pointer;
    font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;
  }
  nav.scrolled .burger{color:var(--ink)}
  nav.open ul{
    display:flex;flex-direction:column;position:fixed;inset:0;
    background:var(--dark);color:#fff;justify-content:center;align-items:center;gap:2rem;
  }
  nav.open ul a{color:#fff;font-size:1rem}
  nav.open ul a.active{color:var(--gold)}
  nav.open .burger{position:relative;z-index:5}
}
@media(max-width:920px){
  .cat,.cat:nth-child(1),.cat:nth-child(2),.cat:nth-child(3),.cat:nth-child(4),.cat:nth-child(5){grid-column:span 12}
  .feature .media,.feature:nth-child(even) .media{grid-column:1/13;order:0}
  .feature .info,.feature:nth-child(even) .info{grid-column:1/13;order:1}
}

/* ---------- language switcher ---------- */
.lang-btn{
  background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  font-family:"Noto Nastaliq Urdu",var(--sans);font-size:.78rem;line-height:1.5;
  padding:.35em 1.1em .5em;cursor:pointer;
  transition:color .4s,border-color .4s,background .4s;
}
.lang-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
nav.scrolled .lang-btn{color:var(--ink);border-color:rgba(23,23,23,.35)}
nav.scrolled .lang-btn:hover{color:#fff;border-color:var(--gold)}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:95;
  width:3.5rem;height:3.5rem;border-radius:50%;
  background:var(--dark);display:grid;place-items:center;
  box-shadow:0 14px 34px rgba(12,10,8,.35);
  transition:transform .4s var(--ease),background .4s;
}
.wa-float svg{width:1.65rem;height:1.65rem;fill:#fff}
.wa-float:hover{transform:translateY(-4px);background:var(--gold)}
[dir="rtl"] .wa-float{right:auto;left:1.5rem}

/* ---------- urdu / rtl ---------- */
.ur .i18n-ur{
  font-family:"Noto Nastaliq Urdu","Fraunces",serif!important;
  letter-spacing:0!important;line-height:2!important;font-style:normal;
}
.ur .i18n-ur em{font-style:normal}
.ur .hero h1 .i18n-ur,.ur .hero h1{line-height:1.9}
.ur .hero h1{font-size:clamp(2.2rem,5vw,4.4rem)}
.ur .h-display{font-size:clamp(1.9rem,4vw,3.4rem)}
.ur .statement h2.i18n-ur{font-size:clamp(1.5rem,3.2vw,2.8rem);line-height:2.1!important}
.ur .page-banner h1{font-size:clamp(2rem,4.6vw,3.8rem)}
.ur .cta-band h2.i18n-ur{font-size:clamp(1.6rem,3.4vw,2.9rem)}
.ur .contact h2.i18n-ur{font-size:clamp(1.8rem,4vw,3.4rem)}
.ur .card h3.i18n-ur{font-size:1.3rem}
.ur .eyebrow.i18n-ur,.ur .tag small.i18n-ur,.ur .chip.i18n-ur,.ur .origin.i18n-ur,
.ur .brandline span.i18n-ur,.ur .vrow b.i18n-ur,.ur .book .pg.i18n-ur,
.ur .book .links a.i18n-ur,.ur .gallery figcaption.i18n-ur,.ur .insp-duo figcaption.i18n-ur{
  font-size:.85rem;text-transform:none;
}
.ur .spec dt.i18n-ur,.ur .spec dd.i18n-ur,.ur .stat span.i18n-ur{text-transform:none;font-size:.85rem}
[dir="rtl"] .spec dd{text-align:left}
[dir="rtl"] .idx li{direction:ltr}
[dir="rtl"] .cat .arrow{transform:scaleX(-1)}
[dir="rtl"] .cat:hover .arrow{transform:scaleX(-1) rotate(45deg)}

/* ---------- in-house catalogue ---------- */
.ctl-tabs{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  background:rgba(248,247,243,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  padding:4.6rem var(--pad) .9rem;margin-top:-3.7rem;
}
.ctl-tabs a{
  font-size:.64rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  padding:.7em 1.3em;border:1px solid transparent;color:rgba(23,23,23,.6);
  transition:color .35s,border-color .35s,background .35s;
}
.ctl-tabs a:hover{color:var(--ink)}
.ctl-tabs a.on{border-color:var(--gold);color:var(--gold-deep)}
.ctl-print{
  margin-left:auto;background:none;cursor:pointer;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid rgba(23,23,23,.3);padding:.7em 1.3em;color:rgba(23,23,23,.7);
  transition:background .35s,color .35s,border-color .35s;font-family:var(--sans);
}
.ctl-print:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.ctl-sec{scroll-margin-top:7.5rem}
.ctl-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,3.2rem);align-items:start}
@media(max-width:980px){.ctl-duo{grid-template-columns:1fr}}
.ctl-h3{
  font-family:var(--serif);font-weight:300;font-size:1.45rem;line-height:1.15;
  margin-bottom:1.1rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.ctl-h3 span{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep);
}
.ctl-wrap{overflow-x:auto;border:1px solid var(--line-soft);background:rgba(255,255,255,.4)}
.dark-section .ctl-wrap{border-color:rgba(248,247,243,.12);background:rgba(248,247,243,.03)}
.ctl-table{width:100%;border-collapse:collapse;font-size:.8rem}
.ctl-table th{
  text-align:left;font-weight:400;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);padding:.9em 1.1em;border-bottom:1px solid var(--line);white-space:nowrap;
}
.ctl-table td{
  padding:.72em 1.1em;border-bottom:1px solid var(--line-soft);
  color:rgba(23,23,23,.8);vertical-align:top;
}
.ctl-table tbody tr:last-child td{border-bottom:0}
.ctl-table td:first-child{font-family:var(--serif);font-size:.98rem;color:var(--ink);white-space:nowrap}
.ctl-table tbody tr{transition:background .3s}
.ctl-table tbody tr:hover{background:var(--bg-2)}
.ctl-dark th{color:var(--gold);border-color:rgba(248,247,243,.16)}
.ctl-dark td{color:rgba(248,247,243,.75);border-color:rgba(248,247,243,.08)}
.ctl-dark td:first-child{color:var(--bg)}
.ctl-dark tbody tr:hover{background:rgba(248,247,243,.05)}
.ctl-note{font-size:.78rem;color:rgba(248,247,243,.55);margin-top:1.2rem;max-width:44em}
.ctl-sec:not(.dark-section) .ctl-note{color:rgba(23,23,23,.55)}
.ctl-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.2vw,1.1rem);margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.ctl-strip figure{position:relative;overflow:hidden}
.ctl-strip img{width:100%;aspect-ratio:1/1.6;object-fit:cover;transition:transform 1.2s var(--ease)}
.ctl-strip figure:hover img{transform:scale(1.06)}
.ctl-strip figcaption{
  position:absolute;left:.7rem;bottom:.6rem;color:#fff;font-size:.56rem;
  letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55);
}
@media(max-width:900px){.ctl-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ctl-strip{grid-template-columns:repeat(2,1fr)}}
.ctl-imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem)}
@media(max-width:760px){.ctl-imgrow{grid-template-columns:1fr}}
.ctl-imgrow figure{position:relative;overflow:hidden;background:#fff}
.ctl-imgrow img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ctl-imgrow figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:.7rem 1rem;
  background:rgba(17,17,17,.72);color:#fff;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
}

/* ---------- print ---------- */
@media print{
  nav,.ctl-tabs,.wa-float,.cta-band,footer,.page-banner{display:none!important}
  section{padding:1.2cm 0!important}
  body{background:#fff}
  .rv,.rv-img{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ---------- mobile refinements ---------- */
@media(max-width:640px){
  section{padding:3.4rem 1.25rem}
  .chapter{gap:.8rem;margin-bottom:1.9rem;flex-wrap:wrap}
  .chapter .num{font-size:1.5rem}
  .h-display{font-size:1.9rem}
  .eyebrow{letter-spacing:.3em;font-size:.6rem}
  .hero h1{font-size:2.5rem}
  .hero-inner{padding-bottom:2.4rem;gap:1.6rem}
  .hero-side{max-width:100%}
  .statement{padding-top:4.6rem;padding-bottom:4.6rem}
  .statement h2{font-size:1.5rem}
  .cat-grid{grid-auto-rows:13.5rem}
  .cat .tag h3{font-size:1.15rem}
  .cat .tag small{font-size:.55rem}
  .cat .arrow{width:2.1rem;height:2.1rem}
  .cat-text{padding:1.7rem 1.4rem}
  .feature{padding:1.9rem 0;gap:1.1rem}
  .feature .info h3{font-size:1.6rem}
  .swatch-pair{width:3.4rem}
  .imm{height:22rem}
  .imm .cap{padding:1.5rem 1.25rem}
  .imm .cap h3{font-size:1.15rem}
  .insp-duo img{height:13.5rem}
  .brand{padding:1.7rem 1.4rem}
  .cta-band{padding:3.4rem 1.25rem}
  .cta-band h2{font-size:1.5rem}
  .page-banner{height:19rem;min-height:0}
  .page-banner h1{font-size:2rem}
  .page-banner p.sub{font-size:.8rem}
  .showroom .media img{min-height:13rem}
  .map-ph{height:8rem}
  .vrow{gap:.9rem}
  .vrow b{flex:0 0 5.2rem;font-size:.56rem}
  .contact h2{font-size:1.8rem}
  .stats{grid-template-columns:1fr}
  .foot-grid{gap:2rem;padding-bottom:2.4rem}
  .giant{font-size:3rem;padding-top:1.8rem}
  .legal{flex-direction:column;gap:.6rem}
  .wa-float{width:3rem;height:3rem;right:1rem;bottom:1rem}
  .wa-float svg{width:1.35rem;height:1.35rem}
  nav{padding:.9rem 1.25rem}
  nav.scrolled{padding:.7rem 1.25rem}
  nav .logo{font-size:1rem}
  nav .logo small{display:none}
  .lang-btn{font-size:.7rem;padding:.3em .9em .45em}
  .ctl-tabs{padding:4.2rem 1.25rem .7rem;gap:.25rem}
  .ctl-tabs a{padding:.55em .8em;font-size:.56rem;letter-spacing:.16em}
  .ctl-print{margin-left:0;margin-top:.4rem}
  .ctl-h3{font-size:1.2rem}
  .ctl-table{font-size:.72rem}
  .ctl-table td:first-child{font-size:.85rem;white-space:normal}
  .ur .hero h1{font-size:1.9rem}
  .ur .h-display{font-size:1.6rem}
  .ur .statement h2.i18n-ur{font-size:1.25rem}
  .ur .page-banner h1{font-size:1.7rem}
  .ur .cta-band h2.i18n-ur{font-size:1.3rem}
}

/* ---------- team page ---------- */
.ceo-wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.2rem,5vw,5rem);align-items:center}
@media(max-width:900px){.ceo-wrap{grid-template-columns:1fr;max-width:34rem}}
.ceo-photo{position:relative;margin:0 0 1rem 0}
.ceo-photo::after{
  content:"";position:absolute;inset:1.3rem -1.3rem -1.3rem 1.3rem;
  border:1px solid var(--gold);z-index:-1;
}
.ceo-photo img{width:100%;display:block}
.ceo-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.2rem 1.6rem 1.4rem;color:#fff;
  background:rgba(17,17,17,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ceo-photo figcaption b{font-family:var(--serif);font-weight:400;font-size:1.5rem;display:block}
.ceo-photo figcaption span{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:#E8D9B8}
.ceo-quote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.7rem,2.8vw,2.45rem);line-height:1.45;color:var(--gold-deep);
  margin-bottom:2rem;
}
.ceo-p{font-size:1.06rem;line-height:1.75;color:rgba(23,23,23,.78);margin-bottom:1.5rem;max-width:38em}
.ceo-p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:400;
  float:left;font-size:3.1em;line-height:.82;padding:.08em .14em 0 0;color:var(--gold-deep);
}
.ur .ceo-p::first-letter{float:none;font-size:inherit;padding:0;color:inherit}
.ceo-sig{margin-top:2.2rem;border-top:1px solid var(--line-soft);padding-top:1.4rem}
.sig-name{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:2rem;color:var(--ink);line-height:1.1;
}
.sig-role{display:block;margin-top:.55rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,23,.55)}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2vw,1.8rem)}
@media(max-width:1080px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.team-grid{grid-template-columns:1fr;max-width:20rem}}
.t-card{background:var(--bg);border:1px solid var(--line-soft);transition:border-color .5s,transform .5s var(--ease)}
.t-card:hover{border-color:rgba(184,155,94,.55);transform:translateY(-4px)}
.t-ph{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--dark);
  display:grid;place-items:center;
}
.t-ph img{width:100%;height:100%;object-fit:cover}
.t-ph .t-mono{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:3.4rem;color:rgba(184,155,94,.5);line-height:1;
}
.t-ph .t-soon{
  position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,247,243,.4);
}
.t-body{padding:1.2rem 1.3rem 1.4rem}
.t-body h3{font-family:var(--serif);font-weight:300;font-size:1.25rem;line-height:1.1;min-height:1.2em}
.t-role{display:block;margin-top:.4rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.team-note{margin-top:2.2rem;font-size:.78rem;color:rgba(23,23,23,.45)}
@media(max-width:640px){
  .ceo-quote{font-size:1.3rem}
  .sig-name{font-size:1.4rem}
  .ceo-photo::after{inset:.9rem -.9rem -.9rem .9rem}
}

/* ceo landscape photo → editorial portrait crop */
.ceo-photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 42%}
.t-ph.has-photo img{object-position:50% 45%}

/* ============================================================
   v6 — stronger typography + richer motion
   ============================================================ */

/* ---------- bolder, darker type ---------- */
body{font-weight:400}
nav ul a{font-weight:600;color:rgba(255,255,255,.92)}
nav.scrolled ul a{color:rgba(23,23,23,.88)}
nav .logo small{font-weight:600;opacity:.95}
.btn{font-weight:600}
.eyebrow{font-weight:600}
.lang-btn{font-weight:600}
.spec dt{color:var(--ink);font-weight:600}
.spec dd{font-weight:500}
.card .specs .spec dt{color:rgba(248,247,243,.88);font-weight:600}
.card .specs .spec dd{color:#fff;font-weight:400}
.card .brandline b{font-weight:600}
.card .brandline span{color:rgba(248,247,243,.6);font-weight:500}
.card .note{color:rgba(248,247,243,.68)}
.vrow b{color:var(--ink);font-weight:600}
.ctl-table th{color:var(--ink);font-weight:600}
.ctl-dark th{color:rgba(248,247,243,.92)}
.ctl-table td{color:rgba(23,23,23,.85)}
.ctl-dark td{color:rgba(248,247,243,.8)}
.ctl-h3 span{font-weight:600}
.lede{color:rgba(23,23,23,.8)}
.dark-section .lede{color:rgba(248,247,243,.78)}
.brand p{color:rgba(23,23,23,.72)}
.brand .origin{font-weight:600}
.stat span{color:rgba(248,247,243,.68);font-weight:500}
.foot-grid ul a{color:rgba(248,247,243,.78)}
.foot-grid h5{font-weight:600}
.foot-brand p{color:rgba(248,247,243,.66)}
.t-role{font-weight:600}
.sig-role{font-weight:600;color:rgba(23,23,23,.6)}
.cat .tag small{opacity:.95;font-weight:500}
.cat-text p{color:rgba(248,247,243,.72)}
.cat-text .series{font-weight:600}
.book .links a{font-weight:600}
.about-copy p{color:rgba(248,247,243,.8)}
.ceo-p{color:rgba(23,23,23,.82)}
.hero-side p{color:rgba(255,255,255,.92)}
.page-banner p.sub{color:rgba(255,255,255,.9)}
.feature .info p{color:rgba(23,23,23,.78)}
.feature .info .code{font-weight:600}
.idx li span:last-child{color:rgba(23,23,23,.6)}
.imm .cap small{font-weight:600}
.gallery figcaption,.insp-duo figcaption,.ctl-strip figcaption,.ctl-imgrow figcaption{font-weight:600}
.statement .foot{font-weight:600;color:rgba(23,23,23,.55)}
.team-note{color:rgba(23,23,23,.55)}
.ctl-sec:not(.dark-section) .ctl-note{color:rgba(23,23,23,.65)}
.ctl-note{color:rgba(248,247,243,.65)}
.ctl-tabs a{font-weight:600;color:rgba(23,23,23,.68)}
.ctl-print{font-weight:600}

/* ---------- richer motion ---------- */
.rv{filter:blur(10px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.inview .rv,.rv.inview{filter:blur(0)}
.chapter .num{opacity:0;transform:translateY(16px) rotate(-4deg);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s}
.inview .chapter .num{opacity:1;transform:none}
.page-banner .media img{animation:kb 9s var(--ease) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.btn{transition:color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(184,155,94,.55)}
.card{transition:border-color .6s,transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -20px rgba(0,0,0,.55)}
.brand{transition:background .6s,transform .5s var(--ease)}
.brand:hover{transform:translateY(-4px)}
.gallery figcaption,.insp-duo figcaption{transform:translateY(8px);opacity:.75;transition:transform .6s var(--ease),opacity .6s}
.gallery figure:hover figcaption,.insp-duo figure:hover figcaption{transform:none;opacity:1}
.ctl-strip figure img{filter:saturate(.92)}
.ctl-strip figure:hover img{filter:saturate(1.08)}
.wa-float{animation:waping 3.4s ease-out infinite}
@keyframes waping{
  0%{box-shadow:0 14px 34px rgba(12,10,8,.35),0 0 0 0 rgba(184,155,94,.5)}
  70%{box-shadow:0 14px 34px rgba(12,10,8,.35),0 0 0 16px rgba(184,155,94,0)}
  100%{box-shadow:0 14px 34px rgba(12,10,8,.35),0 0 0 0 rgba(184,155,94,0)}
}
.stat b{transition:color .4s}
@media (prefers-reduced-motion:reduce){
  .rv{filter:none;transition:none;opacity:1;transform:none}
  .page-banner .media img,.wa-float{animation:none}
}

/* ============================================================
   v7 — hero refinement: cinematic zoom, vignette, polish
   ============================================================ */
.hero-zoom{position:absolute;inset:0;animation:heroKb 16s cubic-bezier(.16,1,.3,1) .4s both;will-change:transform}
@keyframes heroKb{from{transform:scale(1)}to{transform:scale(1.028)}}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 -150px 150px -85px rgba(8,6,4,.5),inset 0 90px 120px -85px rgba(8,6,4,.32);
}
.hero-scrim{background:
  linear-gradient(100deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.78) 24%, rgba(10,8,6,.52) 44%, rgba(10,8,6,.22) 62%, rgba(10,8,6,0) 80%),
  linear-gradient(0deg, rgba(10,8,6,.74) 0%, rgba(10,8,6,.18) 40%, rgba(10,8,6,0) 62%),
  linear-gradient(rgba(10,8,6,.16), rgba(10,8,6,.16))}
.hero h1{letter-spacing:-.025em;text-shadow:0 2px 18px rgba(8,6,4,.78),0 2px 46px rgba(8,6,4,.6)}
.hero-copy .hero-p{text-shadow:0 1px 12px rgba(8,6,4,.7)}
.hero-tag{text-shadow:0 1px 10px rgba(8,6,4,.7)}
.hline span{transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.hline:nth-child(2) span{transition-delay:.16s}
.hline:nth-child(3) span{transition-delay:.32s}
.hero-side{
  max-width:22rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.3);
}
.hero-eyebrow{
  display:block;margin-bottom:.9rem;
  font-size:.58rem;font-weight:600;letter-spacing:.44em;text-transform:uppercase;
  color:#E8D9B8;
}
.hero-side p{margin-bottom:1.8rem}
.scroll-cue::before{
  content:"SCROLL";position:absolute;bottom:calc(100% + .9rem);left:50%;
  transform:translateX(-50%);writing-mode:vertical-rl;
  font-size:.54rem;font-weight:600;letter-spacing:.42em;
  color:rgba(255,255,255,.55);
}
@media (prefers-reduced-motion:reduce){.hero-zoom{animation:none}}
@media(max-width:640px){.hero-zoom{animation-duration:12s}}

/* ============================================================
   v10 — hero: label, dual CTAs, glass featured card, sequence
   ============================================================ */
.hero-inner{align-items:flex-end;justify-content:space-between;gap:clamp(2rem,4vw,4rem)}
.hero-copy{max-width:46rem}
.hero-tag{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.6rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:#E8D9B8;margin-bottom:1.7rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s;
}
.hero-tag::before{content:"";width:2.4rem;height:1px;background:var(--gold);flex:none}
.loaded .hero-tag{opacity:1;transform:none}
.hero h1{margin-bottom:1.7rem}
.hline span{
  opacity:0;transform:translateY(72%);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity 1.1s var(--ease);
}
.loaded .hline span{opacity:1;transform:none}
.hline:nth-child(1) span{transition-delay:.3s}
.hline:nth-child(2) span{transition-delay:.46s}
.hline:nth-child(3) span{transition-delay:.62s}
.hero-p{
  max-width:36em;font-size:.95rem;line-height:1.85;
  color:rgba(255,255,255,.92);margin-bottom:2.2rem;
  text-shadow:0 1px 12px rgba(8,6,4,.55);
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .85s,transform 1s var(--ease) .85s;
}
.loaded .hero-p{opacity:1;transform:none}
.hero-ctas{
  display:flex;gap:1rem;flex-wrap:wrap;
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) 1.02s,transform 1s var(--ease) 1.02s;
}
.loaded .hero-ctas{opacity:1;transform:none}
.btn-glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.4);color:#fff;
}
.btn-glass::before{background:rgba(255,255,255,.14)}
.btn-glass:hover{color:#fff;border-color:rgba(255,255,255,.85)}
.hero-card{
  width:clamp(17rem,24vw,21rem);flex:none;
  padding:1.9rem 1.9rem 1.7rem;color:#fff;
  background:rgba(17,15,12,.38);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 32px 64px -26px rgba(0,0,0,.65);
  opacity:0;transform:translateY(28px);
  transition:opacity 1.1s var(--ease) 1.15s,transform 1.1s var(--ease) 1.15s,
             border-color .5s,box-shadow .6s var(--ease);
}
.loaded .hero-card{opacity:1;transform:none}
.loaded .hero-card:hover{transform:translateY(-6px);border-color:rgba(184,155,94,.65);box-shadow:0 42px 76px -26px rgba(0,0,0,.75)}
.hc-label{
  display:block;margin-bottom:.9rem;
  font-size:.56rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:#E8D9B8;
}
.hc-name{font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1.05;margin-bottom:.7rem}
.hero-card p{font-size:.82rem;line-height:1.75;color:rgba(255,255,255,.8);margin-bottom:1.4rem}
.hc-link{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#E8D9B8;border-bottom:1px solid rgba(184,155,94,.6);padding-bottom:.45em;
  transition:color .4s,border-color .4s;
}
.hc-link:hover{color:#fff;border-color:#fff}
.hc-arrow{transition:transform .45s var(--ease)}
.hc-link:hover .hc-arrow{transform:translateX(5px)}
[dir="rtl"] .hc-link:hover .hc-arrow{transform:translateX(-5px)}
@media(max-width:980px){
  .hero-card{width:100%;max-width:26rem}
  header.hero{height:auto;min-height:100vh;padding-top:7.5rem}
}
@media(max-width:640px){
  .hero-tag{letter-spacing:.3em;font-size:.55rem}
  .hero-p{font-size:.88rem;margin-bottom:1.8rem}
  .hero-ctas .btn{padding:.95em 1.6em}
  .hero-card{padding:1.5rem}
  .hc-name{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-tag,.hline span,.hero-p,.hero-ctas,.hero-card{opacity:1;transform:none;transition:none}
}

/* ============================================================
   v13 — intro: flagship storefront reveal (home only)
   Cream façade · white columns · dark-glass doors · red carpet
   ============================================================ */
html.intro-play,html.intro-play body{overflow:hidden}
.intro-done .intro{display:none}
.intro{
  position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#EDE4D3 0%,#E4DAC5 60%,#DED2BA 100%);
}
/* faint plaster texture on the cream wall */
.intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.014) 0 2px,transparent 2px 9px);
}
/* ---- top signage band (dark, like the storefront sign) ---- */
.intro-facade{
  position:absolute;top:0;left:0;right:0;z-index:6;
  height:clamp(82px,15vh,144px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:linear-gradient(180deg,#1b1916 0%,#131110 100%);
  box-shadow:0 8px 26px rgba(0,0,0,.4),inset 0 -1px 0 rgba(184,155,94,.35);
}
.intro-store{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.05rem,3.1vw,2rem);letter-spacing:.1em;color:#fff;white-space:nowrap;
}
.intro-store i{color:var(--gold);font-style:italic}
.intro-flagship{
  font-size:.54rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(232,217,168,.9);padding-left:.5em;
}
/* ---- the entrance: columns flanking the doorway ---- */
.intro-entrance{
  position:absolute;left:50%;transform:translateX(-50%);
  top:clamp(82px,15vh,144px);bottom:clamp(52px,11vh,104px);
  width:min(92vw,620px);display:flex;align-items:stretch;z-index:3;
}
.intro-col{
  position:relative;flex:none;width:clamp(24px,4vw,52px);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,rgba(255,255,255,.4) 3px 5px,rgba(0,0,0,.035) 5px 9px),
    linear-gradient(90deg,#cfc5b0 0%,#f6f1e6 44%,#fffdf8 54%,#ece3d2 72%,#cabfa8 100%);
  background-blend-mode:overlay,normal;
  box-shadow:inset 0 0 20px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05);
}
.intro-col::before,.intro-col::after{
  content:"";position:absolute;left:-5px;right:-5px;height:clamp(13px,2vh,20px);
  background:linear-gradient(180deg,#fbf7ef,#dfd5c1);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.intro-col::before{top:0}
.intro-col::after{bottom:0;background:linear-gradient(0deg,#fbf7ef,#dfd5c1)}
/* ---- doorway opening ---- */
.intro-portal{
  position:relative;flex:1;overflow:hidden;
  border:clamp(7px,1.2vw,13px) solid #F1EBDE;
  box-shadow:
    inset 0 0 0 1px rgba(184,155,94,.45),
    inset 0 0 44px rgba(0,0,0,.55),
    0 14px 44px rgba(0,0,0,.32);
  background:#0b0a08;
}
.intro-door{
  position:absolute;top:0;bottom:0;width:50.4%;will-change:transform;
  background:
    linear-gradient(115deg,rgba(255,255,255,.06) 0 16%,transparent 30% 60%,rgba(255,255,255,.035) 72%,transparent 82%),
    linear-gradient(180deg,#26221b 0%,#161310 55%,#0c0b09 100%);
}
.intro-left{left:0}
.intro-right{right:0}
/* gold vertical handles at the seam */
.intro-door::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:4px;height:34%;border-radius:4px;
  background:linear-gradient(180deg,#E6D6A9,#B89B5E 45%,#8a713d);
  box-shadow:0 0 16px rgba(184,155,94,.55);
}
.intro-left::after{right:6%}
.intro-right::after{left:6%}
.intro-seam{
  position:absolute;top:6%;bottom:6%;left:50%;width:2px;z-index:3;
  transform:translateX(-50%) scaleY(0);transform-origin:center;
  background:linear-gradient(180deg,transparent,rgba(232,217,168,.9) 20%,rgba(232,217,168,.95) 50%,rgba(232,217,168,.9) 80%,transparent);
  box-shadow:0 0 22px rgba(232,217,168,.7);
}
/* ---- black steps + red carpet ---- */
.intro-steps{
  position:absolute;left:0;right:0;bottom:0;z-index:5;height:clamp(52px,11vh,104px);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34%),
    linear-gradient(180deg,#3b3b3e 0%,#242426 45%,#141415 100%);
}
.intro-carpet{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:6;
  width:clamp(120px,20vw,210px);height:clamp(116px,24vh,220px);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 7px,transparent 7px 16px),
    linear-gradient(180deg,#7f1b1b 0%,#a52a2a 45%,#861f1f 100%);
  box-shadow:0 -2px 26px rgba(0,0,0,.3);
}
.intro-carpet::before{
  content:"";position:absolute;inset:0;
  border-left:2px solid rgba(184,155,94,.4);border-right:2px solid rgba(184,155,94,.4);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
}
/* ---- choreography ---- */
.intro-play .intro-facade{animation:introSignIn 1s var(--ease) .2s both}
.intro-play .intro-entrance,.intro-play .intro-carpet{animation:introFrameIn 1s var(--ease) .35s both}
.intro-play .intro-seam{animation:introSeam .85s var(--ease) .55s forwards}
.intro-play .intro-left{animation:introDoorL 1.55s cubic-bezier(.76,0,.24,1) 1.75s forwards}
.intro-play .intro-right{animation:introDoorR 1.55s cubic-bezier(.76,0,.24,1) 1.75s forwards}
.intro-play .intro{animation:introReveal .8s var(--ease) 3.35s forwards}
@keyframes introSignIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes introFrameIn{from{opacity:0}to{opacity:1}}
@keyframes introSeam{from{transform:translateX(-50%) scaleY(0)}to{transform:translateX(-50%) scaleY(1)}}
@keyframes introDoorL{to{transform:translateX(-102%)}}
@keyframes introDoorR{to{transform:translateX(102%)}}
@keyframes introReveal{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}

/* ============================================================
   v14 — showroom locations grid
   ============================================================ */
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2vw,1.8rem)}
@media(max-width:980px){.sh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sh-grid{grid-template-columns:1fr}}
.sh-card{
  border:1px solid var(--line-soft);background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .5s,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.sh-card:hover{border-color:rgba(184,155,94,.55);transform:translateY(-5px);box-shadow:0 26px 54px -28px rgba(0,0,0,.4)}
.sh-map{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg-2)}
.sh-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.04) brightness(.98);transition:filter .7s var(--ease)}
.sh-card:hover .sh-map iframe{filter:grayscale(0)}
.sh-map::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:none}
.sh-map img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.sh-card:hover .sh-map img{transform:scale(1.06)}
.vc-map{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:14px}
.vc-map img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.vc-map:hover img{transform:scale(1.04)}
.sh-map-soon{display:grid;place-content:center;justify-items:center;gap:.5rem;background:var(--dark)}
.sh-map-soon span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:2.6rem;color:var(--gold);line-height:1}
.sh-map-soon small{font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,247,243,.4)}
.sh-body{padding:1.3rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.sh-city{font-size:.58rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:.7rem}
.sh-body h3{font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.08;margin-bottom:.5rem}
.sh-body p{font-size:.82rem;color:rgba(23,23,23,.66);margin-bottom:1.3rem;flex:1}
.sh-dir{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55em;
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold);padding-bottom:.4em;transition:color .4s;
}
.sh-dir span{transition:transform .4s var(--ease)}
.sh-dir:hover{color:var(--gold-deep)}
.sh-dir:hover span{transform:translateX(5px)}
[dir="rtl"] .sh-dir:hover span{transform:translateX(-5px)}

/* ---------- inspiration captions: always-visible, bold, legible ---------- */
.gallery figure::after,.insp-duo figure::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(12,10,8,.74),rgba(12,10,8,0));
  z-index:1;pointer-events:none;
}
.gallery figcaption,.insp-duo figcaption{
  z-index:3;opacity:1;transform:none;
  font-weight:700;font-size:.75rem;letter-spacing:.24em;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.5);
}
.gallery figure:hover figcaption,.insp-duo figure:hover figcaption{opacity:1;transform:none}