/* ============================================================
   Zoombask Curtains — Luxury Interiors Design System v2
   Tokens: ivory / charcoal / brass / taupe / sage
   Mobile-first · RTL-first (logical properties) · No external fonts
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --ivory:#F7F3EE;
  --ivory-deep:#F1EAE0;
  --charcoal:#1F1D1B;
  --charcoal-soft:#4A453F;
  --charcoal-faint:#6E675F;
  --brass:#B08D57;
  --brass-deep:#96733F;
  --brass-soft:#D9C29A;
  --taupe:#E8E0D5;
  --taupe-deep:#DCD2C2;
  --sage:#8A9A86;
  --sage-deep:#6E7D6A;
  --white:#FFFFFF;
  --line:rgba(31,29,27,.12);
  --shadow-sm:0 2px 8px rgba(31,29,27,.07);
  --shadow-md:0 8px 28px rgba(31,29,27,.10);
  --shadow-lg:0 20px 60px rgba(31,29,27,.14);
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman','Noto Naskh Arabic',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Tahoma,'Noto Sans Arabic',sans-serif;
  --font-ar:"Segoe UI",Tahoma,"Noto Naskh Arabic","Noto Sans Arabic",sans-serif;
  --space-1:8px; --space-2:16px; --space-3:24px;
  --space-4:32px; --space-5:48px; --space-6:64px; --space-8:96px;
  --tap:48px;
  --maxw:1200px;
  --header-h:68px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{font-family:var(--font-ar)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brass-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:1.25;
  margin:0 0 var(--space-2);
  letter-spacing:.01em;
  color:var(--charcoal);
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-ar);font-weight:700;letter-spacing:0}
h1{font-size:clamp(2.1rem,6.5vw,3.6rem)}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem)}
h3{font-size:clamp(1.15rem,3vw,1.4rem)}
p{margin:0 0 var(--space-2)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-2)}
.section{padding-block:clamp(var(--space-5),7vw,var(--space-8))}
.section.tinted{background:var(--taupe)}
/* 12-column grid for desktop section layouts */
@media (min-width:961px){
  .grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-3)}
  .col-span-4{grid-column:span 4}
  .col-span-6{grid-column:span 6}
  .col-span-8{grid-column:span 8}
  .col-span-12{grid-column:span 12}
}
/* section headings: constrained measure, safe wrapping */
.sec-head h2{max-width:24ch;overflow-wrap:anywhere}
.sec-sub{max-width:60ch;overflow-wrap:anywhere}
.lead{font-size:clamp(1.02rem,2.6vw,1.22rem);color:var(--charcoal-soft);max-width:38em}
.kicker{
  font-family:var(--font-sans);
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-deep);margin:0 0 var(--space-1);
}
.sec-sub{color:var(--charcoal-faint);max-width:44em}
.sec-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-4)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:12px 28px;
  border-radius:999px;border:1.5px solid transparent;
  font-family:var(--font-sans);font-weight:600;font-size:1rem;line-height:1.2;
  cursor:pointer;text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--brass-soft);outline-offset:3px}
.btn-primary{background:var(--brass);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brass-deep);box-shadow:var(--shadow-md);color:#fff}
.btn-outline{border-color:var(--brass);color:var(--brass-deep);background:transparent}
.btn-outline:hover{background:rgba(176,141,87,.1);color:var(--brass-deep)}
.btn-quiet{border-color:var(--line);color:var(--charcoal);background:var(--white)}
.btn-quiet:hover{border-color:var(--brass);color:var(--brass-deep)}
.btn-lg{padding:14px 36px;font-size:1.06rem}
.btn-sm{min-height:44px;padding:8px 20px;font-size:.94rem}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,243,238,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;gap:var(--space-2);min-height:var(--header-h);padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;color:var(--charcoal);margin-inline-end:auto}
.brand:hover{text-decoration:none}
.brand-mark{flex:0 0 auto;width:40px;height:40px}
.brand-word{display:flex;flex-direction:column;line-height:1.15}
.brand-word strong{font-family:var(--font-serif);font-size:1.18rem;font-weight:700;letter-spacing:.02em}
.brand-word small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.mainnav ul.more-menu,.mainnav ul.lang-menu{display:none;flex-direction:column;align-items:stretch}
.mainnav ul.more-menu.open,.mainnav ul.lang-menu.open{display:flex}
.mainnav a,.more-toggle,.lang-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:var(--charcoal-soft);font-weight:500;font-size:.95rem;
  background:none;border:0;cursor:pointer;font-family:var(--font-sans);
}
.mainnav a:hover,.more-toggle:hover,.lang-toggle:hover{color:var(--brass-deep);background:rgba(176,141,87,.08);text-decoration:none}
.mainnav a.active{color:var(--brass-deep);font-weight:700}
.nav-more,.nav-lang{position:relative}
.more-menu,.lang-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:200px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;z-index:70;
}
[dir="rtl"] .more-menu,[dir="rtl"] .lang-menu{left:auto;right:0}
.more-menu.open,.lang-menu.open{display:block}
.more-menu li,.lang-menu li{list-style:none}
.more-menu a,.lang-menu button{display:flex;width:100%;padding:10px 12px;border-radius:var(--r-sm);font-size:.95rem}
.lang-menu .tick{display:none;margin-inline-start:auto;color:var(--brass-deep);font-weight:700}
.lang-menu button[aria-checked="true"] .tick{display:inline}
.drawer-lang{display:none}
/* drawer-only chrome: hidden on desktop */
.drawer-head,.drawer-cta{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-cta{display:flex;align-items:center;gap:10px}
.header-phone{font-weight:600;color:var(--charcoal);white-space:nowrap;font-size:.95rem}
.header-phone:hover{color:var(--brass-deep);text-decoration:none}
@media (max-width:760px){.header-phone{display:none}}
.menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:var(--tap);height:var(--tap);background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;padding:12px;
}
.menu-btn span{display:block;height:2px;background:var(--charcoal);border-radius:2px;transition:.25s}
@media (max-width:960px){
  .menu-btn{display:flex}

  /* ============ Full-screen drawer ============ */
  .mainnav{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:80;
    width:auto;max-width:none;margin:0;
    background:var(--ivory);border:0;box-shadow:none;
    padding:0;
    display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateY(-102%);visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.8,.3,1), visibility 0s linear .32s;
  }
  .mainnav.open,
  .mainnav:target{
    transform:none;visibility:visible;
    transition:transform .32s cubic-bezier(.22,.8,.3,1);
  }
  @media (prefers-reduced-motion:reduce){
    .mainnav{transition:none}
  }

  /* drawer header with close button */
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:var(--ivory);z-index:2;flex:none;
  }
  .drawer-head-title{font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:var(--charcoal)}
  .drawer-close{
    width:48px;height:48px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
    color:var(--charcoal);cursor:pointer;
  }
  .drawer-close:hover{background:rgba(176,141,87,.12)}
  .drawer-close:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}

  /* drawer primary links */
  .mainnav > ul{
    display:flex;flex-direction:column;align-items:stretch;
    list-style:none;margin:0;padding:12px 16px;gap:4px;flex:none;
  }
  .mainnav > ul > li{list-style:none}
  .mainnav > ul > li > a,
  .mainnav .more-toggle{
    display:flex;align-items:center;
    width:100%;min-height:56px;
    padding:12px 8px;
    font-size:1.18rem;font-weight:600;color:var(--charcoal);
    border-radius:var(--r-sm);text-decoration:none;
    background:none;border:0;cursor:pointer;font-family:var(--font-sans);
    text-align:start;
  }
  .mainnav > ul > li > a:hover,
  .mainnav .more-toggle:hover{background:rgba(176,141,87,.1);color:var(--brass-deep);text-decoration:none}
  .mainnav > ul > li > a.active{color:var(--brass-deep)}
  .mainnav > ul > li > a:focus-visible,
  .mainnav .more-toggle:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}
  .nav-dhide{display:none}

  /* More accordion */
  .nav-more{position:static}
  .mainnav .more-toggle{justify-content:space-between;gap:8px}
  .mainnav .more-toggle .chev{transition:transform .25s ease;flex:none}
  .mainnav .more-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  @media (prefers-reduced-motion:reduce){
    .mainnav .more-toggle .chev{transition:none}
  }
  .mainnav .more-menu{
    display:none;
    position:static;box-shadow:none;border:0;border-radius:0;
    background:transparent;padding:0;margin:0;min-width:0;
    flex-direction:column;
  }
  .mainnav .more-menu.open{display:flex}
  .mainnav .more-menu li{list-style:none}
  .mainnav .more-menu a{
    display:flex;align-items:center;min-height:52px;
    padding:10px 8px 10px 24px;
    font-size:1.05rem;font-weight:500;color:var(--charcoal-soft);
    border-radius:var(--r-sm);text-decoration:none;
  }
  [dir="rtl"] .mainnav .more-menu a{padding:10px 24px 10px 8px}
  .mainnav .more-menu a:hover{background:rgba(176,141,87,.1);color:var(--brass-deep)}
  .mainnav .more-menu a:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}

  /* desktop language dropdown hidden in drawer */
  .mainnav .nav-lang{display:none}

  /* drawer language switcher */
  .drawer-lang{
    display:block;flex:none;
    margin:8px 16px 0;padding:16px 0 0;
    border-top:1px solid var(--line);
  }
  .drawer-lang-label{font-size:.85rem;color:var(--charcoal-faint);margin:0 0 8px}
  .drawer-lang-btns{display:flex;gap:8px}
  .drawer-lang-btns button{
    flex:1;min-height:52px;border:1.5px solid var(--line);border-radius:var(--r-md);
    background:var(--white);font-weight:600;font-size:1rem;cursor:pointer;color:var(--charcoal);
  }
  .drawer-lang-btns button.active{border-color:var(--brass);color:var(--brass-deep);background:rgba(176,141,87,.08)}
  .drawer-lang-btns button:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}

  /* drawer bottom CTA */
  .drawer-cta{
    display:flex;flex-direction:column;gap:10px;flex:none;
    padding:16px;margin-top:auto;
    border-top:1px solid var(--line);
    position:sticky;bottom:0;background:var(--ivory);
  }
  .drawer-cta .btn{justify-content:center;min-height:54px;font-size:1.05rem}

  .header-cta .btn{display:none}
}

/* ============================================================
   HERO — full viewport, CSS curtain reveal
   Robust rules: no absolute-positioned text, no fixed text
   heights; decorative art isolated behind content (z-index:-1)
   inside .hero-art; physical top/left/right/bottom only.
   ============================================================ */
.hero{
  position:relative;
  isolation:isolate; /* stacking context: .hero-art at z-index:-1 sits behind text, above bg */
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-deep) 100%);
}
.hero-art{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:-1;
  pointer-events:none;
}
.curtain{position:absolute;top:0;bottom:0;width:34%}
.curtain.left{left:0}
.curtain.right{right:0}
[dir="rtl"] .curtain.left{left:auto;right:0}
[dir="rtl"] .curtain.right{right:auto;left:0}
.curtain .fabric{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(90deg,
    rgba(176,141,87,.34) 0px, rgba(176,141,87,.34) 6px,
    rgba(150,115,63,.5) 12px, rgba(150,115,63,.5) 18px,
    rgba(217,194,154,.42) 24px, rgba(217,194,154,.42) 30px,
    rgba(176,141,87,.34) 36px);
  box-shadow:inset -18px 0 30px rgba(31,29,27,.18);
}
.curtain.right .fabric{box-shadow:inset 18px 0 30px rgba(31,29,27,.18)}
.curtain .rod{position:absolute;top:0;left:0;right:0;height:14px;background:linear-gradient(180deg,#8a6f45,#5e4a2e);border-radius:0 0 6px 6px}
.curtain .hem{position:absolute;bottom:0;left:0;right:0;height:10px;background:rgba(150,115,63,.35)}
@keyframes curtainOpenL{from{transform:translateX(0)}to{transform:translateX(-72%)}}
@keyframes curtainOpenR{from{transform:translateX(0)}to{transform:translateX(72%)}}
.curtain.left .fabric{animation:curtainOpenL 2.8s cubic-bezier(.22,.8,.3,1) .4s forwards}
.curtain.right .fabric{animation:curtainOpenR 2.8s cubic-bezier(.22,.8,.3,1) .4s forwards}
[dir="rtl"] .curtain.left .fabric{animation-name:curtainOpenR}
[dir="rtl"] .curtain.right .fabric{animation-name:curtainOpenL}
.hero-light{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%,rgba(255,252,244,.95) 0%,rgba(255,252,244,0) 70%),
    linear-gradient(180deg,rgba(217,194,154,.25),rgba(247,243,238,0));
  opacity:0;animation:lightIn 2.2s ease 1.6s forwards;
}
@keyframes lightIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .curtain.left .fabric{transform:translateX(-72%);animation:none}
  .curtain.right .fabric{transform:translateX(72%);animation:none}
  [dir="rtl"] .curtain.left .fabric{transform:translateX(72%)}
  [dir="rtl"] .curtain.right .fabric{transform:translateX(-72%)}
  .hero-light{opacity:1;animation:none}
}
.hero-in{
  width:100%;
  text-align:center;
  padding-block:clamp(var(--space-5),8vh,var(--space-8));
  max-width:760px;
  margin-inline:auto;
}
.hero-eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-deep);background:rgba(176,141,87,.12);
  border:1px solid rgba(176,141,87,.35);border-radius:999px;padding:8px 20px;margin-bottom:var(--space-3);
}
.hero h1{
  margin-bottom:var(--space-2);
  margin-inline:auto;
  max-width:22ch;
  overflow-wrap:anywhere;
}
.hero h1 .accent{color:var(--brass-deep);font-style:italic}
.hero .lead{margin-inline:auto;margin-bottom:var(--space-4);max-width:38em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:var(--space-5)}
.hero-note{font-size:.9rem;color:var(--charcoal-faint);margin-bottom:0}
/* scroll cue: in normal flow, never overlapping */
.scroll-cue{
  text-align:center;color:var(--charcoal-faint);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;margin:var(--space-4) 0 0;
}
.scroll-cue::after{content:"";display:block;width:1px;height:34px;background:var(--brass);margin:8px auto 0;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue::after{animation:none}}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{background:var(--charcoal);color:var(--ivory);padding-block:var(--space-3)}
.trustbar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.trustbar li{display:flex;align-items:center;justify-content:center;gap:12px;text-align:start;min-height:var(--tap)}
.trustbar .tic{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:rgba(176,141,87,.18);border:1px solid var(--brass);
  display:flex;align-items:center;justify-content:center;color:var(--brass-soft);
}
.trustbar strong{display:block;font-family:var(--font-serif);font-size:1.02rem;font-weight:600}
.trustbar small{color:rgba(247,243,238,.72);font-size:.85rem}
@media (max-width:640px){
  .trustbar ul{grid-template-columns:1fr;gap:4px}
  .trustbar li{justify-content:flex-start}
}

/* ============================================================
   COLLECTIONS — illustrated cards (inline SVG art)
   ============================================================ */
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media (max-width:860px){.coll-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.coll-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);color:var(--charcoal);
  transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;
}
.coll-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow-md)}
.coll-media{aspect-ratio:4/3;background:linear-gradient(160deg,var(--taupe),var(--ivory-deep));display:flex;align-items:center;justify-content:center;padding:var(--space-3);overflow:hidden}
.coll-media img{width:100%;height:100%;object-fit:cover}
.coll-media:has(img){padding:0}
.coll-media svg{width:72%;height:auto;max-height:190px}
.coll-body{padding:var(--space-3)}
.coll-body h3{margin-bottom:6px}
.coll-body p{color:var(--charcoal-faint);font-size:.95rem;margin:0}
.coll-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-2);font-weight:600;color:var(--brass-deep);font-size:.95rem}

/* ============================================================
   STYLE & COLOUR PREVIEW (interactive)
   ============================================================ */
.preview-sec{background:var(--charcoal);color:var(--ivory);border-radius:var(--r-xl);overflow:hidden}
.preview-sec h2{color:var(--ivory)}
.preview-sec .sec-sub{color:rgba(247,243,238,.72)}
.preview-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4);align-items:center;padding:var(--space-5)}
@media (max-width:860px){.preview-grid{grid-template-columns:1fr;padding:var(--space-3)}}
.stage-window{
  background:linear-gradient(180deg,#2b2825,#3a352f);
  border-radius:var(--r-lg);padding:var(--space-3);
  border:1px solid rgba(176,141,87,.3);box-shadow:inset 0 0 60px rgba(0,0,0,.35);
}
.stage-frame{background:#141210;border-radius:10px;padding:14px;position:relative;overflow:hidden;min-height:280px}
.stage-sky{position:absolute;inset:14px;border-radius:6px;background:linear-gradient(180deg,#bcd3e8 0%,#e8dfd2 70%,#f5e9d4 100%);transition:filter .4s}
.stage-curtain{position:absolute;top:14px;bottom:14px;width:30%;transition:all .5s ease;z-index:2}
.stage-curtain.left{left:14px}
.stage-curtain.right{right:14px}
[dir="rtl"] .stage-curtain.left{left:auto;right:14px}
[dir="rtl"] .stage-curtain.right{right:auto;left:14px}
.stage-blind{position:absolute;top:14px;left:14px;right:14px;z-index:2;transition:all .5s ease}
.opt-group{margin-bottom:var(--space-3)}
.opt-label{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:10px}
.style-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.style-opt{
  min-height:var(--tap);border:1.5px solid rgba(247,243,238,.25);border-radius:var(--r-md);
  background:rgba(247,243,238,.05);color:var(--ivory);cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:10px 14px;font-weight:600;font-size:.95rem;
  transition:border-color .2s,background .2s;font-family:var(--font-sans);
}
.style-opt:hover{border-color:var(--brass)}
.style-opt[aria-pressed="true"]{border-color:var(--brass);background:rgba(176,141,87,.18)}
.swatch-row{display:flex;gap:10px;flex-wrap:wrap}
.swatch{
  width:var(--tap);height:var(--tap);border-radius:50%;cursor:pointer;
  border:3px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  transition:transform .15s,border-color .15s;padding:0;
}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed="true"]{border-color:var(--ivory);box-shadow:0 0 0 2px var(--brass)}
.preview-cta{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:12px}
.stage-caption{margin-top:10px;font-size:.88rem;color:rgba(247,243,238,.65);text-align:center}

/* ============================================================
   HOW IT WORKS — 5-step timeline
   ============================================================ */
.timeline{position:relative;margin-top:var(--space-4);display:grid;gap:0}
.tstep{position:relative;padding-inline-start:76px;padding-bottom:var(--space-4);min-height:var(--tap)}
.tstep::before{
  content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--brass),var(--taupe-deep));
}
[dir="rtl"] .tstep::before{left:auto;right:27px}
[dir="rtl"] .tstep-num{left:auto;right:0}
.tstep:last-child::before{display:none}
.tstep-num{
  position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:var(--white);border:2px solid var(--brass);color:var(--brass-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:1.3rem;font-weight:700;box-shadow:var(--shadow-sm);
}
.tstep h3{margin-bottom:4px}
.tstep p{color:var(--charcoal-faint);margin:0;max-width:44em}

/* ============================================================
   GALLERY — intentional empty state
   ============================================================ */
.gallery-empty{
  text-align:center;padding:var(--space-8) var(--space-3);
  background:var(--white);border:1px dashed var(--brass);border-radius:var(--r-xl);
  max-width:640px;margin-inline:auto;
}
.gallery-empty svg{margin:0 auto var(--space-3);opacity:.85}
.gallery-empty h3{margin-bottom:8px}
.gallery-empty p{color:var(--charcoal-faint);margin-bottom:var(--space-3)}

/* ============================================================
   FAQ teaser / cards
   ============================================================ */
.faq-list{max-width:760px;margin-inline:auto;display:grid;gap:12px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq-q{
  width:100%;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:none;border:0;cursor:pointer;text-align:start;
  font-size:1.02rem;font-weight:600;color:var(--charcoal);font-family:var(--font-sans);
}
.faq-q .plus{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--taupe);color:var(--brass-deep);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:transform .25s}
.faq-item.open .faq-q .plus{transform:rotate(45deg);background:var(--brass);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{padding:0 20px 20px;color:var(--charcoal-soft);margin:0}

/* ============================================================
   FINAL CTA band
   ============================================================ */
.cta-band{
  background:linear-gradient(135deg,var(--charcoal) 0%,#33291d 60%,var(--brass-deep) 130%);
  color:var(--ivory);border-radius:var(--r-xl);text-align:center;
  padding:var(--space-6) var(--space-3);box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(176,141,87,.07) 34px 36px);
}
.cta-band h2{color:var(--ivory);position:relative}
.cta-band p{color:rgba(247,243,238,.78);position:relative;max-width:36em;margin-inline:auto}
.cta-band .btn-row{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--space-3)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--charcoal);color:rgba(247,243,238,.82);margin-top:var(--space-6)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-4);padding-block:var(--space-5) var(--space-4)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--space-3)}}
.foot-brand strong{font-family:var(--font-serif);font-size:1.25rem;color:var(--ivory);display:block;margin-bottom:6px}
.foot-brand .tagline{color:var(--brass-soft);font-size:.9rem;letter-spacing:.06em}
.foot-legal{font-size:.82rem;color:rgba(247,243,238,.55);margin-top:var(--space-2)}
.foot-nav{display:flex;flex-direction:column;gap:2px}
.foot-nav strong,.foot-contact strong{color:var(--ivory);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:10px}
.foot-nav a{color:rgba(247,243,238,.75);padding:7px 0;min-height:36px;display:inline-flex;align-items:center}
.foot-nav a:hover{color:var(--brass-soft)}
.foot-contact p{margin-bottom:10px;font-size:.95rem}
.foot-social{display:flex;gap:10px;margin-top:var(--space-2)}
.foot-social a{
  width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid rgba(247,243,238,.25);display:flex;align-items:center;justify-content:center;
  color:var(--ivory);transition:.2s;
}
.foot-social a:hover{border-color:var(--brass);color:var(--brass-soft);transform:translateY(-2px);text-decoration:none}
.foot-base{
  border-top:1px solid rgba(247,243,238,.14);padding-block:var(--space-2);
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  font-size:.85rem;color:rgba(247,243,238,.55);
}
.foot-policies a{color:rgba(247,243,238,.7)}
.foot-complaint{flex-basis:100%;font-size:.8rem}

/* ============================================================
   STICKY BOTTOM ACTION BAR (mobile)
   ============================================================ */
/* sticky-bar removed - replaced by float-cta pill */

/* floating WhatsApp (desktop) */
/* wa-float removed - replaced by float-cta pill */

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{background:linear-gradient(160deg,var(--charcoal),#33291d);color:var(--ivory);padding-block:var(--space-6)}
.page-hero h1{color:var(--ivory)}
.page-hero .lead{color:rgba(247,243,238,.75)}
.crumbs{font-size:.88rem;color:rgba(247,243,238,.6);margin-bottom:var(--space-2)}
.crumbs a{color:var(--brass-soft)}
.page-content{padding-block:var(--space-5)}
.prose{max-width:760px}
.prose h2{margin-top:var(--space-4)}
.prose ul{padding-inline-start:20px}
.prose li{margin-bottom:8px}

/* steps (inner pages reuse) */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);margin-top:var(--space-4)}
@media (max-width:900px){.steps{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-3);box-shadow:var(--shadow-sm)}
.step-num{
  width:44px;height:44px;border-radius:50%;background:var(--brass);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:1.15rem;margin-bottom:12px;
}
.step h3{font-size:1.08rem;margin-bottom:6px}
.step p{font-size:.93rem;color:var(--charcoal-faint);margin:0}

/* ============================================================
   FORMS
   ============================================================ */
.quote-form,.track-form,.contact-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--space-4);box-shadow:var(--shadow-md);max-width:720px;margin-inline:auto;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:var(--space-2)}
.form-group label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.form-group label .req{color:var(--brass-deep)}
.form-group input,.form-group select,.form-group textarea{
  width:100%;min-height:var(--tap);padding:12px 16px;
  border:1.5px solid var(--taupe-deep);border-radius:var(--r-md);
  font-family:var(--font-sans);font-size:1rem;color:var(--charcoal);background:var(--ivory);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.18);background:var(--white);
}
.form-group textarea{min-height:120px;resize:vertical}
.form-hint{font-size:.85rem;color:var(--charcoal-faint);margin-top:6px}
.form-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--space-2)}
.form-check input{width:24px;height:24px;margin-top:2px;accent-color:var(--brass-deep)}
.wiz-progress{display:flex;gap:6px;margin-bottom:var(--space-4)}
.wiz-progress span{flex:1;height:6px;border-radius:3px;background:var(--taupe-deep)}
.wiz-progress span.done{background:var(--brass)}
.wiz-step{display:none}
.wiz-step.active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wiz-step.active{animation:none}}
/* ---- Quote wizard: progress, nav, summary, inline errors ---- */
.wiz-head{margin-bottom:var(--space-3)}
.wiz-count{font-size:.9rem;color:var(--charcoal-faint);margin:0 0 10px}
.wiz-count strong{color:var(--brass-deep)}
.wiz-labels{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.wiz-label{flex:1;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--charcoal-faint);padding:8px 10px;border-radius:var(--r-md);background:var(--ivory);border:1px solid var(--line)}
.wiz-label .wiz-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--taupe-deep);color:var(--charcoal);font-size:.8rem;font-weight:700}
.wiz-label.current{color:var(--charcoal);border-color:var(--brass)}
.wiz-label.current .wiz-dot{background:var(--brass);color:#fff}
.wiz-label.done .wiz-dot{background:var(--brass-deep);color:#fff}
@media (max-width:600px){.wiz-label{font-size:.72rem;padding:6px 8px}.wiz-label>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.wiz-progress .wiz-seg{flex:1;height:6px;border-radius:3px;background:var(--taupe-deep)}
.wiz-progress .wiz-seg.done{background:var(--brass)}
.wiz-title{font-family:var(--font-serif);font-size:1.15rem;margin:0 0 var(--space-2)}
.wiz-title:focus{outline:none}
.wiz-nav{display:flex;gap:12px;margin-top:var(--space-3)}
.wiz-nav .btn{flex:1;min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.wiz-nav-end{justify-content:flex-end}
.wiz-nav-end .btn{flex:0 1 auto;min-width:200px}
[dir="rtl"] .wiz-nav .arrow{transform:scaleX(-1);display:inline-block}
.field-error{color:#B3261E;font-size:.85rem;margin:6px 0 0}
.form-group.invalid input,.form-group.invalid select,.form-group.invalid textarea{border-color:#B3261E}
.form-group.invalid input:focus,.form-group.invalid select:focus,.form-group.invalid textarea:focus{box-shadow:0 0 0 3px rgba(179,38,30,.15);border-color:#B3261E}
.form-check.invalid{outline:2px solid #B3261E;outline-offset:2px;border-radius:var(--r-sm)}
.wiz-summary{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);margin-bottom:var(--space-2)}
.wiz-summary-title{margin:0 0 12px;font-size:1.05rem}
.wiz-summary-title:focus{outline:none}
.wiz-dl{margin:0;display:grid;gap:10px}
.wiz-dl>div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.wiz-dl>div:last-child{border-bottom:0;padding-bottom:0}
.wiz-dl dt{font-weight:600;font-size:.9rem;color:var(--charcoal-faint)}
.wiz-dl dd{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:var(--space-3)}
.quote-success{text-align:center;padding:var(--space-5) var(--space-3)}
.quote-success .ok-ring{
  width:84px;height:84px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto var(--space-3);
}
.status-timeline{display:grid;gap:0;margin:var(--space-3) 0}
.status-step{display:flex;gap:12px;align-items:center;padding:10px 0;position:relative}
.st-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--taupe-deep);background:var(--white);flex:0 0 auto}
.status-step.done .st-dot{background:var(--sage);border-color:var(--sage)}
.status-step.current .st-dot{background:var(--brass);border-color:var(--brass-deep);box-shadow:0 0 0 4px rgba(176,141,87,.2)}

/* legal */
.legal-body{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.legal-draft{display:none}

/* chat widget */
.chat-fab{
  position:fixed;bottom:24px;left:24px;z-index:55;
  width:60px;height:60px;border-radius:50%;background:var(--brass);color:#fff;border:0;cursor:pointer;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
@media (max-width:760px){.chat-fab{bottom:96px}}
[dir="rtl"] .chat-fab{left:auto;right:24px}

/* gallery grid (kept for future real photos) */
.gallery-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-3)}
.gallery-filters button{
  min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--white);cursor:pointer;font-weight:600;color:var(--charcoal-soft);
}
.gallery-filters button.active{border-color:var(--brass);color:var(--brass-deep);background:rgba(176,141,87,.1)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media (max-width:640px){.gallery-grid{grid-template-columns:1fr}}
.gal-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin:0}
.gal-card img{width:100%;height:280px;object-fit:cover;display:block}
.gal-card figcaption{padding:var(--space-2) var(--space-3)}
.gal-card figcaption strong{display:block;font-size:1rem;margin-bottom:4px}
.gal-room{font-size:.85rem;color:var(--charcoal-faint);text-transform:capitalize}
/* Shop by room */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.room-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-3);box-shadow:var(--shadow-sm)}
.room-card h3{margin:0 0 8px;font-size:1.1rem}
.room-card p{margin:0 0 16px;color:var(--charcoal-soft);font-size:.95rem}
/* Measure guide */
.measure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-3)}
.measure-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.measure-card h3{margin:0 0 12px;color:var(--brass-deep)}
/* Collection meters */
.meters{margin-top:12px;display:grid;gap:8px}
.meter{display:grid;gap:4px;font-size:.85rem;color:var(--charcoal-soft)}
.meter-bar{height:6px;background:var(--taupe);border-radius:3px;overflow:hidden}
.meter-fill{height:100%;background:var(--brass);border-radius:3px}
/* Floating CTA pill (Option 3: dark + gold) */
.float-cta{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(0);display:flex;background:#1F1D1B;border:1px solid var(--brass);border-radius:50px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.3);z-index:90;transition:transform .3s ease,opacity .3s ease}
.float-cta[hidden]{display:flex;transform:translateX(-50%) translateY(100px);opacity:0;pointer-events:none}
.float-cta a{padding:14px 28px;color:#F7F3EE;text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap;min-height:48px;display:flex;align-items:center}
.float-cta a:first-child{border-right:1px solid var(--brass)}
.float-cta a.wa-float-link{color:var(--brass)}
[dir="rtl"] .float-cta a:first-child{border-right:none;border-left:1px solid var(--brass)}
/* Honeypot: invisible to people and assistive tech */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.hp-field input{position:absolute!important;left:-9999px!important}
.gallery-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery-photos{display:grid;grid-template-columns:1fr 1fr}
.gallery-photo{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--taupe);color:var(--charcoal-faint);font-size:.9rem;padding:var(--space-2);text-align:center}
.gallery-caption{padding:var(--space-2) var(--space-3)}
.gallery-caption h3{font-size:1.05rem;margin-bottom:4px}
.gallery-caption p{font-size:.9rem;color:var(--charcoal-faint);margin:0}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(20,18,16,.85);display:none;align-items:center;justify-content:center;padding:var(--space-2)}
.lightbox.open{display:flex}
.lightbox-content{background:var(--ivory);border-radius:var(--r-lg);max-width:640px;width:100%;padding:var(--space-3);position:relative}
.lightbox-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--charcoal);color:#fff;font-size:1.3rem;cursor:pointer}
[dir="rtl"] .lightbox-close{right:auto;left:10px}
.lightbox-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--space-2)}
.lightbox-caption h3{margin-bottom:4px}
.lightbox-caption p{color:var(--charcoal-faint);margin:0}

/* utility */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.text-center{text-align:center}
.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mb-0{margin-bottom:0}