/* ZHONGLIAN BEOGRAD — base.css
   Shared by index.html, proizvodi.html and proizvod.html.
   Tokens, reset, type, layout, buttons, material textures, grain, reveal,
   preloader, header, mobile nav, form components, calculator, FAQ, footer,
   assistant, back-to-top, cart button + drawer + toasts.
   Page-specific rules live in home.css / catalog.css / product.css. */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* substrate — warm near-black, sampled from the logo */
  --ink:        #0A0A06;
  --elev:       #121210;
  --sunken:     #060604;
  --line:       #23231C;
  --line-soft:  #17170F;

  /* gold ramp — sampled from the logo's metal */
  --gold-hi:    #F5E9C0;
  --gold:       #D9B75C;
  --gold-mid:   #C09A3E;
  --gold-deep:  #A87A2C;
  --gold-dark:  #6B4A15;

  /* type — all three clear WCAG AA (4.5:1) on --ink, --elev and --sunken.
     The previous --dim (#5C584C) measured 2.79:1 and failed on every surface. */
  --text:       #EFEBE0;   /* 16.65:1 on --ink */
  --muted:      #A59F91;   /*  7.52:1 */
  --dim:        #847F70;   /*  4.96:1 */

  /* text over photography needs more contrast than --muted can give */
  --muted-photo: #C6C0AE;

  --serif: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(.2,.7,.3,1);
  --pad:  clamp(20px, 5vw, 64px);
  --sec:  clamp(64px, 11vw, 160px);

  --metal: linear-gradient(135deg,
            var(--gold-deep) 0%, var(--gold-hi) 38%,
            var(--gold) 52%, var(--gold-deep) 78%, var(--gold-mid) 100%);
}

/* ---------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* Must outrank the component display rules below, or [hidden] panels stay visible. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.66;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold-deep);color:var(--gold-hi)}

/* ---------------------------------------------------------------- BASE TYPE
   Bodoni Moda is a didone: it reads smaller than a transitional serif at the same
   px value and needs far less negative tracking, so the scale is re-tuned for it. */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1}
em{font-style:italic;color:var(--gold-hi)}
strong{font-weight:500}

.mono{font-family:var(--mono);font-weight:400;font-variant-ligatures:none}

.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--dim);
}
.eyebrow .mono{color:var(--gold-deep)}

.metal{
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------------------------------------------------------------- A11Y */
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:fixed;left:0;top:0;z-index:200;
  transform:translateY(-120%);
  background:var(--gold);color:#0A0A06;
  padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;
}
.skip:focus{transform:none}

/* --gold-hi rather than --gold: the ring has to stay visible over the photographic hero */
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:2px;
}
.hero :focus-visible{outline-color:var(--gold-hi)}

/* ---------------------------------------------------------------- LAYOUT */
.wrap{
  width:100%;max-width:1440px;margin:0 auto;
  padding-inline:var(--pad);
  position:relative;
}
.wrap--narrow{max-width:980px}

.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec) * .68)}

.sec__hd{max-width:66ch;margin-bottom:clamp(40px,6vw,80px)}
.sec__h{
  font-size:clamp(32px,5vw,70px);
  letter-spacing:-.02em;line-height:1.02;
  margin:16px 0 20px;
}
.sec__t{color:var(--muted);max-width:60ch;font-size:clamp(16px,1.4vw,18.5px)}

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  white-space:nowrap;
  padding:15px 26px;
  font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);
  background:transparent;color:var(--text);
  cursor:pointer;
  transition:background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
.btn--gold{
  background:var(--metal);
  color:#0A0A06;
  border-color:transparent;
  font-weight:500;
  position:relative;overflow:hidden;
}
.btn--gold:hover{filter:brightness(1.1)}
/* single sheen sweep on hover — what makes the gold read as polished metal */
.btn--gold::after{
  content:'';position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg);
  pointer-events:none;
}
.btn--gold:hover::after,.btn--gold:focus-visible::after{
  transition:transform 600ms var(--ease);
  transform:translateX(340%) skewX(-18deg);
}
.btn--ghost:hover{border-color:var(--gold-deep);color:var(--gold-hi)}

/* ---------------------------------------------------------------- MATERIAL TEXTURES
   Every surface is generated. No image requests, identical rendering offline. */
.mat{
  position:relative;
  overflow:hidden;
  background-color:var(--sunken);
  background-repeat:repeat;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.45);
}
/* lighting layer — swapped by the day/night toggle */
.mat::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(178deg, rgba(255,255,255,.045), rgba(0,0,0,.30));
  transition:background 700ms var(--ease);
}

/* 01 — dark walnut acoustic slats over felt */
.m-akustik{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg,
      #070604 0 3px,   #150e08 3px 5px,  #33230f 5px 8px,
      #4a3418 8px 14px,#573d1d 14px 17px,#3d2a12 17px 20px,#1c1409 20px 22px);
  background-size:100% 100%, 22px 100%;
}

/* 04 — warm oak 3D lamella, lit edge to shadow edge across each rib */
.m-lamela{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0) 30%, rgba(0,0,0,.46)),
    repeating-linear-gradient(90deg,
      #0b0805 0 3px,  #8a6233 3px 6px,   #a4763f 6px 16px,
      #8c6234 16px 28px, #62431f 28px 36px, #33220e 36px 40px);
  background-size:100% 100%, 40px 100%;
}

/* 02 — natural bamboo: wider, warmer, flatter, with node lines */
.m-bambus{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 34%, rgba(0,0,0,.38)),
    repeating-linear-gradient(0deg, rgba(92,72,36,.22) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(90deg,
      #7d6438 0 2px, #c2a570 2px 20px, #cdb27e 20px 34px,
      #b0925c 34px 46px, #8e7343 46px 48px);
  background-size:100% 100%, 100% 128px, 48px 100%;
}

/* 03 — Calacatta: warm white ground with cloudy grey drifts; vein network in ::after.
   Marble is a light material, so it takes a lighter inset than the timber surfaces. */
.m-mermer{
  background-color:#e8e3d8;
  background-image:
    radial-gradient(46% 34% at 18% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 66%),
    radial-gradient(40% 30% at 68% 64%, rgba(199,192,177,.72), rgba(199,192,177,0) 68%),
    radial-gradient(52% 38% at 88% 16%, rgba(186,178,161,.60), rgba(186,178,161,0) 64%),
    radial-gradient(34% 26% at 44% 84%, rgba(206,199,183,.55), rgba(206,199,183,0) 66%),
    linear-gradient(158deg,#f4f1ea 0%,#e4dfd3 54%,#d6cfc0 100%);
  box-shadow:
    inset 0 0 46px rgba(80,70,50,.22),
    inset 0 0 0 1px rgba(0,0,0,.35);
}
/* Vein network. Each layer is confined by background-size/position so the veins read as
   short branching strands rather than straight lines ruled across the whole slab. */
.m-mermer::before{
  /* warmer, lighter than the default surface lighting — marble must not go grey */
  background:linear-gradient(178deg, rgba(255,255,255,.06), rgba(72,60,38,.20));
}
.m-mermer::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    /* dominant vein, full height */
    linear-gradient(74deg, transparent 47.4%, rgba(168,156,130,.34) 48.0%, rgba(96,86,66,.78) 48.6%, rgba(158,146,120,.38) 49.1%, transparent 49.9%),
    /* branches */
    linear-gradient(66deg, transparent 44.0%, rgba(112,102,80,.55) 44.7%, transparent 45.5%),
    linear-gradient(98deg, transparent 38.0%, rgba(120,108,84,.48) 38.7%, transparent 39.6%),
    linear-gradient(54deg, transparent 55.0%, rgba(134,122,98,.42) 55.6%, transparent 56.4%),
    linear-gradient(108deg, transparent 60.0%, rgba(128,116,92,.38) 60.6%, transparent 61.4%),
    linear-gradient(84deg, transparent 30.0%, rgba(146,134,110,.34) 30.6%, transparent 31.4%),
    linear-gradient(62deg, transparent 70.0%, rgba(150,138,112,.30) 70.6%, transparent 71.5%);
  background-size:
    100% 100%,
    54% 46%, 40% 38%, 46% 52%, 34% 30%, 38% 34%, 30% 26%;
  background-position:
    0 0,
    6% 10%, 58% 6%, 34% 54%, 74% 62%, 12% 70%, 66% 34%;
}

/* 05 — graphite PVC grille: hard opaque / void alternation */
.m-resetka{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0) 32%, rgba(0,0,0,.46)),
    repeating-linear-gradient(90deg,
      #05050a 0 7px, #1a1a20 7px 9px, #2e2e35 9px 17px, #1c1c22 17px 19px);
  background-size:100% 100%, 19px 100%;
}

/* 07/08 — smoked oak SPC, slightly raked bands with plank seams */
.m-spc{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,0) 30%, rgba(0,0,0,.48)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.60) 0 2px, transparent 2px 94px),
    repeating-linear-gradient(93deg,
      #2b2018 0 6px, #3a2c20 6px 14px, #46362a 14px 22px,
      #33261c 22px 31px, #241a13 31px 38px);
  background-size:100% 100%, 100% 94px, 38px 100%;
}

/* neutral — warm concrete */
.m-beton{
  background-color:#3a382f;
  background-image:
    radial-gradient(42% 36% at 18% 22%, rgba(255,255,255,.075), transparent 62%),
    radial-gradient(46% 40% at 78% 74%, rgba(0,0,0,.34), transparent 64%),
    radial-gradient(30% 26% at 64% 18%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(150deg,#413e34,#2a2822);
}

/* ---------------------------------------------------------------- GRAIN */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------------------------------------------------------------- REVEAL */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}
.js .hero .reveal{transition-delay:60ms}

/* ---------------------------------------------------------------- PRELOADER */
.preloader{display:none}
.js .preloader{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:150;
  background:var(--ink);
}
.preloader__inner{display:grid;place-items:center;gap:28px;text-align:center}
.preloader__markwrap{position:relative;display:block;width:88px;height:88px;overflow:hidden}
.preloader__mark{width:88px;height:88px;opacity:.9}
/* single gold sweep across the mark */
.preloader__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(245,233,192,.62) 50%, transparent 66%);
  background-size:260% 100%;
  background-position:180% 0;
  animation:shine 1600ms var(--ease) 120ms 1 forwards;
  mix-blend-mode:screen;
}
@keyframes shine{to{background-position:-80% 0}}
.preloader__num{
  font-family:var(--mono);font-size:13px;font-weight:400;
  letter-spacing:.3em;color:var(--gold);font-variant-numeric:tabular-nums;
}
.preloader__hint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
.preloader__wipe{
  position:absolute;inset:0;background:var(--ink);
  transform:translateY(0);
  transition:transform 620ms var(--ease);
}
.preloader.is-done .preloader__inner{opacity:0;transition:opacity 200ms linear}
.preloader.is-done .preloader__wipe{transform:translateY(-100%)}
.preloader.is-gone{display:none}

/* ---------------------------------------------------------------- HEADER */
.hdr{
  position:fixed;inset-inline:0;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background 320ms var(--ease), border-color 320ms var(--ease), backdrop-filter 320ms var(--ease);
}
.hdr.is-stuck{
  background:rgba(10,10,6,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
/* 1fr auto 1fr keeps the nav in the OPTICAL centre of the viewport — the logo block and
   the actions block have different widths, so flex centring would visibly bias it. */
.hdr__in{
  max-width:1440px;margin:0 auto;padding-inline:var(--pad);
  height:96px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  transition:height 320ms var(--ease);
}
.hdr.is-stuck .hdr__in{height:74px}

.brand{display:flex;align-items:center;gap:14px;justify-self:start}
.brand__mark{width:54px;height:54px;transition:width 320ms var(--ease), height 320ms var(--ease)}
.hdr.is-stuck .brand__mark{width:44px;height:44px}
.brand__word{
  font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.22em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.nav{justify-self:center}
.nav__list{display:flex;gap:38px}
.nav__list a{
  position:relative;display:block;padding:8px 0;
  font-size:15.5px;color:var(--muted);
  transition:color 320ms var(--ease);
}
.nav__list a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);
  transition:right 350ms var(--ease);
}
.nav__list a:hover,.nav__list a:focus-visible{color:var(--text)}
.nav__list a:hover::after,.nav__list a:focus-visible::after{right:0}
.nav__list a.is-active{color:var(--gold-hi)}
.nav__list a.is-active::after{right:0}

.hdr__end{display:flex;align-items:center;gap:22px;justify-self:end;margin-left:auto}
.lang{display:flex;gap:2px}
.lang__b{
  background:none;border:0;cursor:pointer;padding:5px 7px;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--dim);
  transition:color 260ms var(--ease);
}
.lang__b.is-on{color:var(--gold)}
.lang__b[disabled]{cursor:not-allowed;color:#7A7568}
.hdr__cta{padding:16px 32px;font-size:13.5px;letter-spacing:.13em}

.burger{
  display:none;width:48px;height:48px;
  background:none;border:1px solid var(--line);cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:20px;height:1px;background:var(--text);margin:4px auto;transition:transform 300ms var(--ease), opacity 300ms var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}

/* ---------------------------------------------------------------- MOBILE NAV */
.mobnav{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity 340ms var(--ease), visibility 340ms;
}
.mobnav.is-open{opacity:1;visibility:visible}
.mobnav__in{display:flex;flex-direction:column;gap:6px;padding:var(--pad);width:100%;max-width:520px}
.mobnav__in a{
  font-family:var(--serif);font-size:clamp(30px,8vw,44px);letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(18px);
}
.mobnav.is-open .mobnav__in a{
  opacity:1;transform:none;
  transition:opacity 480ms var(--ease) var(--d,0ms), transform 480ms var(--ease) var(--d,0ms);
}
.mobnav__in a .mono{font-size:11px;color:var(--gold-deep);letter-spacing:.16em}
.mobnav__foot{margin-top:30px;display:grid;gap:12px;justify-items:start}
.mobnav__foot a{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted);
  border:0;padding:0;opacity:1;transform:none;
}
.mobnav__cta{
  font-family:var(--mono);color:#0A0A06;
  padding:15px 28px;margin-bottom:6px;width:100%;justify-content:center;
}
.mobnav__lang{display:flex;margin-top:6px}
.mobnav__lang .lang__b{font-size:13px}

/* ---------------------------------------------------------------- KALKULATOR */
.calc{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.calc__in,.calc__out{background:var(--ink);padding:clamp(24px,3.4vw,46px)}
.calc__out{background:var(--elev)}

.fld{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line-soft)}
.fld:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.fld legend{margin-bottom:14px}
.fld__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:transparent;border:1px solid var(--line);cursor:pointer;
  padding:9px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  transition:border-color 280ms var(--ease), color 280ms var(--ease), background 280ms var(--ease);
}
.chip:hover{border-color:var(--gold-dark);color:var(--text)}
.chip.is-on{border-color:var(--gold);color:var(--gold-hi);background:rgba(217,183,92,.07)}

.inp{display:flex;flex-direction:column;gap:7px}
.inp__l{font-size:10px;letter-spacing:.18em;color:var(--dim)}
.inp input{
  background:var(--sunken);border:1px solid var(--line);
  padding:13px 14px;
  font-family:var(--mono);font-size:16px;color:var(--text);
  width:100%;
  transition:border-color 280ms var(--ease);
}
.inp input:hover{border-color:var(--gold-dark)}
.inp input:focus{border-color:var(--gold);outline:none}
.inp input.is-bad{border-color:#8a4a3a}

.seg{display:inline-flex;border:1px solid var(--line)}
.seg__b{
  background:transparent;border:0;cursor:pointer;
  padding:10px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);
  transition:color 280ms var(--ease), background 280ms var(--ease);
}
.seg__b + .seg__b{border-left:1px solid var(--line)}
.seg__b.is-on{color:var(--gold-hi);background:rgba(217,183,92,.07)}

.calc__total{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.calc__total .mono{
  font-size:clamp(38px,6vw,72px);line-height:1;letter-spacing:-.03em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.calc__total i{font-style:normal;font-size:14px;color:var(--gold-deep);letter-spacing:.14em}
.calc__note{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.calc__brk{margin:28px 0 26px;border-top:1px solid var(--line)}
.calc__brk > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.calc__brk dt{color:var(--muted);font-size:14px}
.calc__brk dd{font-size:14px;color:var(--text);letter-spacing:.02em}

.calc__act{display:flex;flex-wrap:wrap;gap:12px}
.calc__fine{margin-top:18px;font-size:13px;color:var(--dim);max-width:44ch}
.calc__ns{color:var(--muted);font-size:14px}
/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(19px,2.2vw,27px);letter-spacing:-.02em;line-height:1.2;
  transition:color 300ms var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:0;top:26px;
  font-family:var(--mono);font-size:19px;color:var(--gold);line-height:1;
}
.faq details[open] summary{color:var(--gold-hi)}
.faq details[open] summary::after{content:'−'}
.faq__a{padding:0 44px 26px 0;max-width:66ch}
.faq__a p{color:var(--muted)}

/* ---------------------------------------------------------------- FOOTER */
.ftr{border-top:1px solid var(--line);padding-top:clamp(56px,8vw,110px);background:var(--sunken)}
.ftr__stmt{
  font-family:var(--serif);font-size:clamp(28px,5vw,64px);
  letter-spacing:-.03em;line-height:1.02;max-width:18ch;
  margin-bottom:clamp(48px,7vw,90px);
}
.ftr__cols{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,48px);
  padding-bottom:clamp(44px,6vw,80px);
}
.ftr__c .eyebrow{margin-bottom:16px}
.ftr__id{font-size:12px;line-height:1.85;color:var(--muted);letter-spacing:.02em}
.ftr__l{display:grid;gap:9px}
.ftr__l a{font-size:14px;color:var(--muted);transition:color 280ms var(--ease)}
.ftr__l a:hover{color:var(--gold-hi)}
.ftr__l--c{gap:11px}
.ftr__l--c .mono{font-size:12px;color:var(--dim);line-height:1.7;letter-spacing:.02em}

.ftr__bar{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  border-top:1px solid var(--line);
  /* Bottom padding clears the two fixed corner controls at full scroll. */
  padding:22px 0 96px;
  font-size:11px;letter-spacing:.1em;color:var(--dim);
}

/* ---------------------------------------------------------------- ASSISTANT (bottom-left) */
.asst__launch{display:none}
.js .asst__launch{
  display:grid;place-items:center;
  position:fixed;left:24px;bottom:24px;z-index:95;
  width:56px;height:56px;border-radius:50%;
  background:var(--elev);border:1px solid var(--gold-dark);
  cursor:pointer;padding:0;
  /* Held back until the hero stat bar has scrolled clear — it would otherwise sit on "09". */
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity 380ms var(--ease), transform 380ms var(--ease), border-color 320ms var(--ease);
}
.js .asst__launch.is-on{opacity:1;transform:none;pointer-events:auto}
.asst__launch.is-on:hover{border-color:var(--gold);transform:translateY(-2px)}
.asst__launch img{width:30px;height:30px;grid-area:1/1}
.asst__ring{
  grid-area:1/1;position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--gold);
  animation:pulse 2.6s var(--ease) infinite;
}
.asst__launch.is-used .asst__ring{display:none}
@keyframes pulse{
  0%  {transform:scale(1);   opacity:.55}
  70% {transform:scale(1.45); opacity:0}
  100%{transform:scale(1.45); opacity:0}
}
.asst__dot{
  position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink);
}
.asst__dot.is-off{display:none}

.asst{
  position:fixed;left:24px;bottom:92px;z-index:96;
  width:380px;height:560px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;
  background:var(--ink);border:1px solid var(--line);
  border-radius:2px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
}
.asst.is-open{opacity:1;transform:none;pointer-events:auto}
.asst__hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid var(--line);
}
.asst__t{font-family:var(--serif);font-size:21px;letter-spacing:-.02em;line-height:1}
.asst__s{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.asst__x{
  background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:24px;line-height:1;padding:0 4px;
  transition:color 260ms var(--ease);
}
.asst__x:hover{color:var(--gold)}

.asst__log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.asst__log::-webkit-scrollbar{width:6px}
.asst__log::-webkit-scrollbar-thumb{background:var(--line)}

.msg{max-width:88%;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.msg--bot{
  align-self:flex-start;color:var(--text);
  border-left:1px solid var(--gold-dark);padding:2px 0 2px 13px;
}
.msg--you{
  align-self:flex-end;color:var(--muted);text-align:right;
  border-right:1px solid var(--line);padding:2px 13px 2px 0;
}
.msg b{color:var(--gold-hi);font-weight:400}
.msg .mono{font-size:13.5px;letter-spacing:.01em}

.typing{display:flex;gap:5px;align-self:flex-start;padding:8px 0 8px 13px;border-left:1px solid var(--gold-dark)}
.typing i{width:5px;height:5px;background:var(--gold-deep);display:block;animation:blip 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes blip{0%,60%,100%{opacity:.25}30%{opacity:1}}

.asst__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px}
.asst__chip{
  background:transparent;border:1px solid var(--line);cursor:pointer;
  padding:7px 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  transition:border-color 260ms var(--ease), color 260ms var(--ease);
}
.asst__chip:hover{border-color:var(--gold-deep);color:var(--gold-hi)}

.asst__form{display:flex;gap:10px;align-items:flex-end;padding:14px 18px 18px;border-top:1px solid var(--line)}
.asst__form textarea{
  flex:1;resize:none;max-height:110px;
  background:var(--sunken);border:1px solid var(--line);
  padding:11px 12px;font-size:14.5px;font-family:var(--sans);
  transition:border-color 260ms var(--ease);
}
.asst__form textarea:focus{border-color:var(--gold-deep);outline:none}
.asst__send{
  flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  background:var(--metal);color:#0A0A06;border:0;cursor:pointer;
  transition:filter 260ms var(--ease);
}
.asst__send:hover{filter:brightness(1.12)}

/* ---------------------------------------------------------------- BACK TO TOP (bottom-right) */
.totop{display:none}
.js .totop{
  display:grid;place-items:center;
  position:fixed;right:24px;bottom:24px;z-index:95;
  width:52px;height:52px;
  background:rgba(18,18,16,.85);border:1px solid var(--line);
  border-radius:2px;cursor:pointer;padding:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity 380ms var(--ease), transform 380ms var(--ease), border-color 300ms var(--ease);
}
.js .totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--gold-deep)}
.totop__ring{grid-area:1/1;width:52px;height:52px;transform:rotate(-90deg)}
.totop__ring circle{fill:none;stroke-width:1.5}
.totop__trk{stroke:var(--line)}
.totop__bar{stroke:var(--gold-deep);transition:stroke 300ms var(--ease)}
.totop:hover .totop__bar{stroke:var(--gold)}
.totop__ar{grid-area:1/1;color:var(--gold);transition:transform 300ms var(--ease)}
.totop:hover .totop__ar{transform:translateY(-3px)}


/* =====================================================================
   RESPONSIVE — shared chrome only
   ===================================================================== */

/* Without JS the burger is inert, so fall back to the inline nav instead. */
html:not(.js) .burger{display:none}

/* Tighten before anything is allowed to wrap — the header must never go to two lines.
   Steps down earlier than the first draft because the cart button and its divider
   add ~70px to the right-hand block. */
@media (max-width:1500px){
  .nav__list{gap:28px}
  .hdr__cta{padding:15px 24px}
}
@media (max-width:1340px){
  .nav__list{gap:20px}
  .nav__list a{font-size:14.5px}
  .hdr__cta{padding:14px 18px;font-size:12.5px}
  .brand__mark{width:48px;height:48px}
  .hdr__end{gap:14px}
}
@media (max-width:1180px){
  .nav__list{gap:15px}
  .nav__list a{font-size:13.5px}
  .lang{display:none}
  .hdr__div{display:none}
}

@media (max-width:1024px){
  .nav{display:none}
  /* 2-column grid so the burger is hard against the right edge, not tucked behind the wordmark */
  .hdr__in{grid-template-columns:auto 1fr}
  .burger{display:grid;justify-self:end}
  .hdr__cta{display:none}
  .lang{display:none}

  html:not(.js) .hdr__in{height:auto;flex-wrap:wrap;padding-block:14px;gap:10px 20px}
  html:not(.js) .nav{display:block;margin-inline:0;width:100%}
  html:not(.js) .nav__list{flex-wrap:wrap;gap:10px 18px}
}

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

@media (max-width:768px){
  body{font-size:16px}
  .hdr__in{height:76px}
  .hdr.is-stuck .hdr__in{height:64px}
  .brand__mark{width:42px;height:42px}
  .hdr.is-stuck .brand__mark{width:38px;height:38px}
  .brand__word{font-size:15px}
  .burger{margin-right:0}
  .ftr__cols{grid-template-columns:repeat(2,1fr)}
  .asst__launch{left:16px;bottom:16px}
  .totop{right:16px;bottom:16px}
}

@media (max-width:640px){
  .asst{
    left:0;right:0;bottom:0;top:0;
    width:auto;height:auto;max-height:none;border:0;border-radius:0;
  }
  .faq summary{font-size:19px}
  .calc__act .btn{flex:1 1 100%;justify-content:center}
}

@media (max-width:400px){
  .ftr__cols{grid-template-columns:1fr}
}

/* =====================================================================
   REDUCED MOTION — shared
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .preloader{display:none}
  .preloader__shine{animation:none;display:none}
  .asst__ring{display:none}
  .btn--gold::after{display:none}
}

/* =====================================================================
   CART — button, drawer, line items, toasts
   ===================================================================== */

/* ---- header button ---- */
.hdr__div{width:1px;height:22px;background:var(--line);flex:0 0 auto}
.cartbtn{
  position:relative;display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:0;color:var(--gold);
  transition:color 260ms var(--ease);
}
.cartbtn:hover{color:var(--gold-hi)}
.cartbtn svg{width:20px;height:20px}
.cartbtn__n{
  position:absolute;top:1px;right:0;
  min-width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--metal);color:var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:500;line-height:1;
  padding:0 4px;
}
.cartbtn__n.is-pulse{animation:badgePulse 320ms var(--ease)}
@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---- drawer ---- */
.cart__scrim{
  position:fixed;inset:0;z-index:110;
  background:rgba(6,6,4,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity 380ms var(--ease);
}
.cart__scrim.is-on{opacity:1}

.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:111;
  width:440px;max-width:100vw;
  display:flex;flex-direction:column;
  background:var(--ink);border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform 380ms cubic-bezier(.2,.7,.3,1);
}
.cart.is-open{transform:none}

.cart__hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 24px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.cart__t{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.cart__n{font-size:11px;letter-spacing:.14em;color:var(--dim);margin-top:6px}
.cart__x{
  background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:26px;line-height:1;padding:0 4px;transition:color 260ms var(--ease);
}
.cart__x:hover{color:var(--gold)}

.cart__body{flex:1;overflow-y:auto;overscroll-behavior:contain}

/* ---- line item ---- */
.cline{
  display:grid;grid-template-columns:76px minmax(0,1fr) auto;
  gap:16px;align-items:start;
  padding:20px 24px;border-bottom:1px solid var(--line);
}
.cline__tex{display:block;width:76px;height:76px}
.cline__name{font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.3;letter-spacing:0}
.cline__dim{font-size:10.5px;letter-spacing:.06em;color:var(--dim);margin-top:5px}
.cline__money{text-align:right;display:grid;gap:4px}
.cline__unit{font-size:11px;color:var(--dim);letter-spacing:.04em}
.cline__tot{font-size:14px;color:var(--text);letter-spacing:.02em}
.cline__cov{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.cline__rm{
  background:none;border:0;padding:0;cursor:pointer;margin-top:10px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line);transition:color 240ms var(--ease), border-color 240ms var(--ease);
}
.cline__rm:hover{color:var(--gold-hi);border-color:var(--gold-deep)}

/* ---- quantity stepper ---- */
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--line);margin-top:12px}
.qty__b{
  width:32px;background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:15px;line-height:1;transition:color 240ms var(--ease), background 240ms var(--ease);
}
.qty__b:hover{color:var(--gold-hi);background:rgba(217,183,92,.07)}
.qty__v{
  width:46px;text-align:center;background:var(--sunken);
  border:0;border-inline:1px solid var(--line);
  padding:8px 0;font-size:13px;color:var(--text);
}
.qty__v:focus{outline:2px solid var(--gold-hi);outline-offset:-2px}

/* ---- footer ---- */
.cart__ft{flex:0 0 auto;border-top:1px solid var(--line);padding:20px 24px 24px;background:var(--elev)}
.cart__sum{margin-bottom:14px}
.cart__sum > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.cart__sum dt{color:var(--muted);font-size:14px}
.cart__sum dd{font-size:14px;color:var(--text)}
.cart__grand{border-bottom:0 !important;padding-top:14px !important}
.cart__grand dt{color:var(--text);font-size:15px}
.cart__grand dd{font-size:clamp(24px,4vw,32px);color:var(--gold);letter-spacing:-.02em;line-height:1}
.cart__fine{font-size:11.5px;color:var(--dim);margin-bottom:4px}
.cart__fine.mono{letter-spacing:.06em}
.cart__act{display:grid;gap:10px;margin-top:16px}
.cart__act .btn{justify-content:center;width:100%}
.cart__cont{
  background:none;border:0;cursor:pointer;padding:6px 0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  transition:color 240ms var(--ease);
}
.cart__cont:hover{color:var(--gold-hi)}

/* ---- inquiry form ---- */
.cart__form{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.cart__form .eyebrow{margin-bottom:14px}
.cart__fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cart__form .fld{padding-bottom:16px;margin-bottom:16px}
.cart__form textarea{
  background:var(--sunken);border:1px solid var(--line);
  padding:11px 12px;font-family:var(--sans);font-size:14px;color:var(--text);
  width:100%;resize:vertical;
}
.cart__form textarea:focus{border-color:var(--gold);outline:none}
.cart__err{font-size:11.5px;color:#D98A6A;letter-spacing:.04em;margin-top:8px}

/* ---- empty state ---- */
.cart__empty{display:grid;justify-items:center;gap:14px;text-align:center;padding:64px 32px}
.cart__empty svg{color:var(--line);opacity:.9}
.cart__emptyT{font-family:var(--serif);font-size:26px;letter-spacing:-.02em}
.cart__emptyS{font-size:14px;color:var(--muted);max-width:34ch}
.cart__empty .btn{margin-top:6px}

/* ---- toasts ---- */
.toasts{
  position:fixed;z-index:97;left:50%;transform:translateX(-50%);
  bottom:24px;width:min(420px,calc(100vw - 200px));
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  gap:12px;align-items:center;
  background:rgba(18,18,16,.96);border:1px solid var(--line);
  padding:12px 14px;pointer-events:auto;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.toast.is-on{opacity:1;transform:none}
.toast__tex{display:block;width:44px;height:44px}
.toast__t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.toast__p{font-size:13px;color:var(--text);margin-top:3px;overflow-wrap:anywhere}
.toast__go{
  background:none;border:0;cursor:pointer;white-space:nowrap;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color 240ms var(--ease), border-color 240ms var(--ease);
}
.toast__go:hover{color:var(--gold-hi);border-color:var(--gold-deep)}

/* assistant reply inline add-to-cart */
.msg__add{
  display:inline-block;margin-top:10px;
  background:none;border:1px solid var(--gold-deep);cursor:pointer;
  padding:7px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-hi);
  transition:background 240ms var(--ease);
}
.msg__add:hover{background:rgba(217,183,92,.10)}
.msg__add[disabled]{opacity:.6;cursor:default;border-color:var(--line)}

@media (max-width:768px){
  .cart{width:100vw;border-left:0}
  .cart__fgrid{grid-template-columns:1fr}
  /* clear of the assistant launcher and the back-to-top button */
  .toasts{left:16px;right:16px;bottom:88px;width:auto;transform:none}
  .cline{grid-template-columns:60px minmax(0,1fr);gap:12px;padding:18px 20px}
  .cline__tex{width:60px;height:60px}
  .cline__money{grid-column:2;text-align:left;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
  .cart__hd,.cart__ft{padding-inline:20px}
}

@media (prefers-reduced-motion: reduce){
  .cartbtn__n.is-pulse{animation:none}
}