/* ═══════════════════════════════════════════════════════════════════════════
   Belvando — premium laminate landing page
   Monochrome brand + wood photography. Warm near-black on warm off-white.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Poppins is the site face, built by tools/build_fonts.py, which also patches
   in the Uzbek okina. It is a Latin family with no Cyrillic at all, so the
   Montserrat cuts below are not decoration — they are what actually renders the
   Russian locale, picked up glyph-by-glyph via unicode-range. See the README. */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700.woff2) format("woff2")}

@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --ink:#12100e;
  --ink-2:#1b1815;
  --ink-3:#2a2521;
  --paper:#faf7f2;
  --paper-2:#f1ebe1;
  --muted:#7c7266;
  --muted-l:#a49c92;
  --brass:#b08d5f;
  --line:rgba(18,16,14,.12);
  --line-l:rgba(255,255,255,.14);

  --font-sans:Poppins,Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,10vw,150px);
  --r:14px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Components below set display explicitly, which would otherwise beat the
   UA rule for [hidden] and leave overlays intercepting clicks. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--font-sans);
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

::selection{background:var(--brass);color:#fff}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

.skip{position:fixed;left:-999px;top:0;z-index:200}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:860px}

/* the header is fixed, so anchor jumps must stop short of it or the heading
   they landed on ends up hidden underneath */
[id]{scroll-margin-top:92px}

/* ───────────────────────────── type ───────────────────────────── */
.h2{
  font-size:clamp(28px,4.4vw,54px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.h2--center{text-align:center}

.eyebrow{
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
}
/* over photography, so it needs a shadow to hold up on bright frames */
.eyebrow--light{color:#e0c49b;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.sec--ink .eyebrow--light{text-shadow:none;color:#c9a878}

.sec{padding-block:var(--sec-y);position:relative}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--ink .h2{color:var(--paper)}

.sec__head{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__sub{margin:18px 0 0;color:var(--muted);font-size:clamp(15px,1.5vw,18px);max-width:56ch}
.sec--ink .sec__sub{color:var(--muted-l)}
.sec__head--center .sec__sub{margin-inline:auto}

/* ───────────────────────────── buttons ───────────────────────────── */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 28px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:100px;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .35s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(18,16,14,.5)}
.btn:active{transform:translateY(0)}
.btn--dark{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--light{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper)}
.btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--ghost:hover{--bg:rgba(255,255,255,.12);--bd:#fff}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--full{width:100%}

/* ───────────────────────────── header ───────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s;
}
/* Gaps are tighter than the rest of the site's rhythm because the bar carries
   six nav items, a language switch, three profiles and a phone number inside the
   same 1240px the page content gets. Russian sets the budget — "Характеристики"
   alone is 122px — and at the old spacing the row overran the wrap and the phone
   stopped lining up with the column below it. */
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);
}
.hdr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.hdr__mark{width:24px;height:auto}
.hdr__word{width:104px;height:auto}
.hdr__mark,.hdr__word{filter:invert(1) brightness(2);transition:filter .4s var(--ease)}

.hdr__nav{display:flex;gap:clamp(11px,1.5vw,20px);margin-inline:auto}
.hdr__nav a{
  text-decoration:none;font-size:13.5px;font-weight:500;color:#fff;opacity:.86;
  position:relative;padding-block:6px;transition:opacity .25s,color .4s;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.hdr__nav a:hover{opacity:1}
.hdr__nav a:hover::after{transform:scaleX(1)}

.hdr__side{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.lang{position:relative;display:flex;align-items:center}
/* Same colour treatment the row of links had: white over the hero, flipped to
   ink by the .is-stuck rule below once the bar turns to paper. */
.lang__trigger{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:#fff;
  transition:opacity .25s,color .4s;
}
.lang__trigger:hover{opacity:.8}
/* stroked rather than filled, so it reads as a line icon next to the label */
.lang__ico{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4}

/* Floating surface, in the idiom the stuck header and the form panel already
   use: paper ground, hairline border, the site's small radius. It carries its
   own colours because it opens over both the photo and the paper bar. */
.lang__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:10;
  min-width:168px;padding:6px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 40px -20px rgba(18,16,14,.55);
}
.lang__opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:9px 11px;
  background:none;border:0;border-radius:8px;cursor:pointer;
  font-size:14px;font-weight:400;color:inherit;text-align:left;
  transition:background .2s;
}
.lang__opt:hover,.lang__opt:focus-visible{background:var(--paper-2)}
.lang__opt[aria-checked="true"]{font-weight:600}
/* the tick is the visual echo of aria-checked, so it hides with it */
.lang__tick{width:15px;height:15px;flex:0 0 auto;color:var(--brass);opacity:0}
.lang__opt[aria-checked="true"] .lang__tick{opacity:1}

/* The number carries the weight the "Contact us" button used to: calling is the
   action that button existed to prompt, so it says so instead of pointing at a
   form. Nowrap because a phone number broken across two lines stops being one. */
.hdr__tel{
  text-decoration:none;white-space:nowrap;
  font-size:14px;font-weight:600;color:#fff;
  transition:opacity .25s,color .4s;
}
.hdr__tel:hover{opacity:.78}
/* the --hdr modifier itself sits with the other .social modifiers further down */

/* scrolled state — flips to a solid paper bar */
.hdr.is-stuck{background:rgba(250,247,242,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.is-stuck .hdr__mark,.hdr.is-stuck .hdr__word{filter:none}
.hdr.is-stuck .hdr__nav a{color:var(--ink)}
.hdr.is-stuck .lang__trigger{color:var(--ink)}
.hdr.is-stuck .hdr__tel{color:var(--ink)}
.hdr.is-stuck .social--hdr a{border-color:var(--line);color:var(--ink)}
.hdr.is-stuck .social--hdr a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* What goes overboard first when the bar runs out of room: the three profiles,
   because they are the only part of it repeated verbatim in the footer. The nav
   links go next. The number never goes — a tap-to-call is worth more on a phone
   than it is anywhere else. Needs .hdr to outrank the plain .social further down
   this file, which would otherwise win the tie and keep the row visible. */
/* Both thresholds are measured against Russian, the widest of the three, so the
   bar behaves identically in every locale rather than breaking in one. Measured:
   the profiles stop fitting below 1208px and the nav links below 1083px. */
@media (max-width:1220px){
  .hdr .social--hdr{display:none}
}
@media (max-width:1100px){
  .hdr__nav{display:none}
  .hdr__side{margin-left:auto}
}
/* The compact bar. Below this the wordmark is what gives way — the mark still
   says whose site this is, and the only other things left are the number and the
   language switch, either of which would cost more to break up. */
@media (max-width:420px){
  .hdr__tel{font-size:13px}
  .hdr__in{gap:12px}
  .hdr__word{display:none}
}

/* ───────────────────────────── hero ───────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding-block:140px clamp(90px,12vh,140px);
  background:var(--ink);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.06)}to{transform:scale(1.14) translateY(-1.2%)}}

.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    /* darkens the left column so the copy holds up over bright window light,
       while the right side of the room stays open */
    linear-gradient(100deg,rgba(10,9,8,.74) 0%,rgba(10,9,8,.42) 42%,rgba(10,9,8,0) 72%),
    linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.18) 34%,rgba(10,9,8,.52) 72%,rgba(10,9,8,.86) 100%),
    radial-gradient(120% 80% at 20% 100%,rgba(10,9,8,.6),transparent 60%);
}
@media (max-width:700px){
  .hero__veil{background:linear-gradient(180deg,rgba(10,9,8,.66) 0%,rgba(10,9,8,.4) 40%,rgba(10,9,8,.88) 100%)}
}
.hero__in{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);color:#fff}
.hero__title{
  margin:0;max-width:17ch;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(32px,5.6vw,72px);line-height:1.06;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  text-wrap:balance;
}
@media (max-width:700px){.hero__title{max-width:none}}
.hero__sub{
  margin:22px 0 0;max-width:46ch;
  font-size:clamp(15px,1.7vw,19px);line-height:1.6;color:rgba(255,255,255,.88);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:rgba(255,255,255,.72);text-decoration:none;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.hero__scroll i{width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.75),transparent);animation:sdown 2.1s ease-in-out infinite}
@keyframes sdown{0%,100%{transform:scaleY(.45);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (max-width:700px){.hero__scroll{display:none}}

/* ─────────────────────────── comparison ─────────────────────────── */
.cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,30px)}
@media (max-width:760px){.cmp{grid-template-columns:1fr}}

.cmp__card{
  background:#22282a;color:#fff;border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;
}
.cmp__media{border-radius:12px;overflow:hidden;background:#22282a}
/* Both renders sit around 1.45:1; matching that keeps the letterbox from
   `contain` (which equalises the two cards) down to a few pixels. */
.cmp__media img{width:100%;aspect-ratio:1.45;object-fit:contain}
.cmp__name{
  margin:20px 0 14px;font-size:clamp(20px,2.4vw,27px);font-weight:600;letter-spacing:-.01em;
}
.cmp__list{margin:0;display:grid;gap:14px}
.cmp__list div{display:grid;gap:3px}
.cmp__list dt{font-size:13px;font-weight:700;letter-spacing:.04em;color:#c9a878}
.cmp__list dd{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.76)}

.verdict{
  margin-top:clamp(40px,5vw,66px);text-align:center;
  padding-top:clamp(30px,4vw,46px);border-top:1px solid var(--line);
}
.verdict p{margin:0;font-size:clamp(18px,2.5vw,28px);line-height:1.45;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.verdict p span{display:block}
.verdict__kick{margin-top:22px !important;font-weight:700;color:var(--brass)}

/* ─────────────────────────── equation ─────────────────────────── */
.eqs{padding-block:clamp(80px,11vw,160px);text-align:center}
.eq{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5em;margin:0 0 clamp(26px,4vw,44px);
  font-size:clamp(16px,2.3vw,26px);color:var(--muted-l);letter-spacing:.02em;
}
.eq__o{color:var(--brass);font-weight:300}
.eq__t--hi{color:var(--paper);font-weight:700}

/* ─────────────────────────── technology ─────────────────────────── */
.tech__grid{display:grid;grid-template-columns:1.32fr .88fr;gap:clamp(26px,4vw,60px);align-items:center}
@media (max-width:900px){.tech__grid{grid-template-columns:1fr}}

.tech__media{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#1a1a1a}
.tech__media img{width:100%}
.tech__notes{display:grid;gap:clamp(24px,3vw,38px)}

.note{position:relative;padding-left:56px}
.note__n{
  position:absolute;left:0;top:2px;
  font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--brass);
}
.note__n::after{content:"";position:absolute;left:0;top:26px;width:34px;height:1px;background:var(--line-l)}
.note__t{margin:0 0 10px;font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.01em}
.note__b{margin:0;font-size:15px;line-height:1.68;color:var(--muted-l)}

.tech__cap{
  margin:clamp(40px,5vw,64px) 0 0;text-align:center;
  font-size:clamp(15px,1.8vw,19px);color:var(--muted-l);font-style:italic;
}

/* ───────────────────────────── moods ───────────────────────────── */
.moods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:860px){.moods{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.mood__media{border-radius:var(--r-lg);overflow:hidden;background:#2b2b2b;aspect-ratio:1/1}
.mood__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mood:hover .mood__media img{transform:scale(1.045)}
.mood__t{margin:20px 0 8px;font-size:clamp(18px,2.1vw,23px);font-weight:600;letter-spacing:-.01em}
.mood__b{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

/* ────────────────────── pattern visualiser ────────────────────── */
/* Two stages side by side, so the layouts are compared directly rather than
   from memory. They stack before they get too narrow for the perspective to
   read. */
.viz__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
@media (max-width:860px){.viz__pair{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

.viz__one{margin:0}
.viz__cap{margin-top:clamp(16px,2vw,22px);text-align:center}
.viz__t{margin:0 0 8px;font-size:clamp(18px,2.1vw,23px);font-weight:600;letter-spacing:-.01em}
.viz__b{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted-l)}

/* ── the room ─────────────────────────────────────────────────────
   .room__plane tilts the floor away from the viewer; the boards inside are
   laid out in flat 2-D coordinates and inherit the perspective for free. */
.viz__stage{position:relative}
.room{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:5/4;
  background:linear-gradient(180deg,#1e1b18 0%,#141210 55%,#0e0c0b 100%);
  /* vanishing point sits exactly on the skirting, so the floor converges into
     the wall the way a real room does */
  perspective:1000px;perspective-origin:50% 38%;
}
@media (max-width:860px){.room{aspect-ratio:4/3}}

.room__wall{
  position:absolute;inset:0 0 62% 0;
  background:
    radial-gradient(74% 135% at 50% 118%,rgba(255,233,201,.30),transparent 74%),
    linear-gradient(180deg,#3b352e 0%,#4b433a 100%);
}
.room__skirt{
  position:absolute;left:0;right:0;top:36.9%;height:1.2%;
  background:linear-gradient(180deg,#5a5147,#2e2822);
  box-shadow:0 3px 14px rgba(0,0,0,.55);
}
/* Pinned at the near edge and tilted so the rest recedes. Rotating about the
   top instead would bring the floor toward the camera and past it, projecting
   the far boards to nonsense coordinates. */
.room__plane{
  position:absolute;left:0;right:0;top:38%;bottom:0;
  transform:rotateX(61deg);
  transform-origin:50% 100%;
  transform-style:preserve-3d;
}
/* Fixed pixel size, scaled uniformly. Sizing the boards in percentages instead
   would stretch width and height by different factors, and rotated herringbone
   blocks would stop meeting at their corners. */
.room__floor{
  position:absolute;left:50%;bottom:0;
  width:1200px;height:820px;margin-left:-600px;
  transform:scale(var(--vs,1));
  transform-origin:50% 100%;
}

/* warm pool of light + darkening toward the horizon, so the plane reads as
   a lit room rather than a flat texture */
.room__haze{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 82%,rgba(255,230,194,.18),transparent 70%),
    linear-gradient(180deg,rgba(10,9,8,.30) 30%,rgba(10,9,8,0) 46%,rgba(10,9,8,.30) 100%);
}

/* ── boards ─────────────────────────────────────────────────────── */
/* --g orients the grain along each board's length: the 90° partner in a
   herringbone pair has its long side on the other axis. */
.brd{
  position:absolute;border-radius:1px;
  background-color:var(--t);
  background-image:
    repeating-linear-gradient(var(--g,180deg),rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.04) 1px 3px,transparent 3px 8px),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.09));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;
  transform:rotate(var(--r)) translateY(-26px) scale(.94);
  transition:opacity .7s var(--ease),transform 1.15s var(--ease);
  transition-delay:var(--d);
  will-change:transform,opacity;
}
.brd.is-in{opacity:1;transform:rotate(var(--r)) translateY(0) scale(1)}
/* leaving boards clear quickly so the incoming pattern reads cleanly */
.brd.is-out{opacity:0;transform:rotate(var(--r)) translateY(18px) scale(.96);transition-duration:.45s,.45s}

.viz__replay{
  position:absolute;right:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(20,18,16,.6);
  backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:600;
  transition:background .25s,border-color .25s;
}
.viz__replay:hover{background:rgba(20,18,16,.85);border-color:#fff}
.viz__replay span:first-child{font-size:9px;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .brd{opacity:1;transform:rotate(var(--r));transition:none;transition-delay:0s !important}
}

/* ─────────────────────────── collection ─────────────────────────── */
.coll{padding-bottom:clamp(40px,6vw,80px)}

.rail{
  display:flex;gap:clamp(10px,1.6vw,20px);
  overflow-x:auto;padding-bottom:10px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail__i{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--muted);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;
  transition:color .25s;
}
.rail__sw{
  width:clamp(56px,8vw,78px);aspect-ratio:1;border-radius:50%;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--line),0 6px 18px -8px rgba(18,16,14,.4);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.rail__i:hover{color:var(--ink)}
.rail__i:hover .rail__sw{transform:translateY(-3px);box-shadow:0 0 0 2px var(--brass),0 10px 24px -8px rgba(18,16,14,.45)}

.model{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.model:first-of-type{margin-top:clamp(36px,5vw,60px)}
.model__in{
  display:grid;grid-template-columns:minmax(240px,320px) 1fr;
  gap:clamp(26px,4vw,64px);align-items:start;
}
.model:nth-of-type(even) .model__in{direction:rtl}
.model:nth-of-type(even) .model__in>*{direction:ltr}
@media (max-width:900px){
  .model__in,.model:nth-of-type(even) .model__in{grid-template-columns:1fr;direction:ltr}
}

.model__intro{position:sticky;top:96px}
@media (max-width:900px){.model__intro{position:static}}

.model__sw{border-radius:var(--r);overflow:hidden;margin-bottom:22px;box-shadow:0 14px 34px -18px rgba(18,16,14,.55)}
.model__sw img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;transition:transform .8s var(--ease)}
.model__sw:hover img{transform:scale(1.06)}

.model__code{
  margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--brass);
}
.model__name{margin:0 0 6px;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em}
.model__desc{margin:0 0 14px;color:var(--muted);font-size:15px}
.tag{
  display:inline-block;margin:0 0 22px;padding:5px 13px;
  border:1px solid var(--line);border-radius:100px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

.model__gal{display:grid;gap:clamp(10px,1.4vw,16px)}
.model__hero{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.model__hero img{width:100%;aspect-ratio:16/10;object-fit:cover;cursor:zoom-in;transition:transform 1s var(--ease)}
.model__hero:hover img{transform:scale(1.035)}

.model__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)}
.model__thumbs--2{grid-template-columns:repeat(2,1fr)}
.model__thumbs img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);
  background:var(--paper-2);cursor:zoom-in;
  transition:transform .7s var(--ease),filter .4s;
}
.model__thumbs img:hover{transform:translateY(-3px);filter:brightness(1.04)}
@media (max-width:560px){
  .model__thumbs{grid-template-columns:repeat(2,1fr)}
  .model__hero img{aspect-ratio:4/3}
}

/* ───────────────────────────── specs ───────────────────────────── */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)}
@media (max-width:900px){.specs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.specs{grid-template-columns:1fr}}

.spec{padding-top:24px;border-top:1px solid var(--line-l)}
.spec__v{
  margin:0 0 4px;font-size:clamp(34px,4.6vw,52px);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--paper);
}
.spec__l{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.spec__d{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted-l)}

/* ──────────────────────────── parquet ──────────────────────────── */
/* Its own warm, deep tone — a second product line, not more of the laminate */
.pq{background:#241f1a;color:var(--paper)}
.pq .eyebrow{color:#c9a878}
.pq .h2{color:var(--paper)}
.pq .sec__sub{color:var(--muted-l)}

.pq__h{
  margin:clamp(48px,6vw,80px) 0 clamp(20px,2.4vw,30px);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);
  padding-bottom:14px;border-bottom:1px solid var(--line-l);
}

/* ── the opening shot ── */
.pq__shot{
  margin:0 0 clamp(48px,6vw,84px);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(0,0,0,.9);
}
/* The frame is a tall portrait; 3:2 is as wide as it crops without losing the
   styling in the lower half. */
.pq__shot img{
  width:100%;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in;
  transition:transform 1.2s var(--ease);
}
.pq__shot:hover img{transform:scale(1.03)}
@media (max-width:700px){.pq__shot img{aspect-ratio:4/3}}

.pq__build{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:880px){.pq__build{grid-template-columns:1fr}}
.pq__notes{display:grid;gap:clamp(22px,2.8vw,34px)}

/* ── cross-section, drawn to scale: 3 / 8 / 3 of 14 mm ── */
.lyrs{margin:0;display:flex;gap:16px}
.lyrs__scale{
  position:relative;flex:0 0 62px;
  display:flex;align-items:center;justify-content:flex-end;padding-right:14px;
}
.lyrs__scale::before{
  content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,var(--brass),rgba(176,141,95,.25),var(--brass));
}
.lyrs__scale span{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--brass)}

.lyrs__stack{
  flex:1;height:clamp(230px,26vw,300px);
  display:flex;flex-direction:column;
  border-radius:8px;overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07);
}
.lyr{position:relative}
/* flex values are the real millimetres, so the drawing stays honest */
.lyr--oak{
  flex:3;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg,rgba(90,58,30,.20) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#b98f5e,#a97f50);
}
.lyr--oak b{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:700;letter-spacing:.08em;color:#3a2614;
}
/* vertical dividers read as the end grain of the cross-laid battens */
.lyr--pine{
  flex:8;
  background:
    repeating-linear-gradient(90deg,rgba(60,42,24,.55) 0 2px,transparent 2px 54px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,#d8bb92,#c6a67c);
}
.lyr--base{
  flex:3;
  background:
    repeating-linear-gradient(90deg,rgba(60,42,24,.18) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#9d8266,#846a50);
}

/* ── dimensions ── */
.dims{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,60px)}
@media (max-width:700px){.dims{grid-template-columns:1fr}}
.dims div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line-l);
}
.dims dt{font-size:14.5px;color:var(--muted-l)}
.dims dd{margin:0;font-size:15.5px;font-weight:600;text-align:right}

/* ── the long plank and its three colours ── */
/* A full section head landing mid-section, so it supplies the top margin that
   .sec__head does not carry — enough air to read as its own opening rather than
   as the next line of the dimensions table above it. */
.pq__range{margin-top:clamp(72px,9vw,124px)}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media (max-width:820px){.grades{grid-template-columns:1fr}}
.grade{
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--line-l);border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);
}
/* A close-up of the real floor. Grading is about knots and colour variation —
   things a drawn swatch can only gesture at. */
.grade__chip{
  position:relative;aspect-ratio:16/10;
  border-radius:10px;margin-bottom:20px;overflow:hidden;
  background:rgba(255,255,255,.05);
}
.grade__chip img{
  width:100%;height:100%;object-fit:cover;cursor:zoom-in;
  transition:transform .8s var(--ease);
}
.grade:hover .grade__chip img{transform:scale(1.06)}
/* the ring sits above the photo, which would otherwise cover an inset shadow */
.grade__chip::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.grade__g{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.grade__n{margin:0 0 10px;font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.01em}
.grade__b{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted-l)}

/* ── advantages + care ── */
.advs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
@media (max-width:900px){.advs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.advs{grid-template-columns:1fr}}
.adv{padding-top:20px;border-top:1px solid var(--line-l)}
.adv h4{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.adv p{margin:0;font-size:14px;line-height:1.6;color:var(--muted-l)}

.pq__foot{
  margin-top:clamp(40px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;
}
/* ─────────────────── short parquet — oak herringbone ─────────────────── */
.spq{padding-block:clamp(44px,6vw,84px);border-top:1px solid var(--line)}
.spq:first-of-type{margin-top:clamp(32px,4vw,54px)}

/* Same split as .model: fragment column on the left, photography on the right,
   collapsing to one column at the width where the two stop fitting side by side. */
.spq__in{
  display:grid;grid-template-columns:minmax(230px,300px) 1fr;
  gap:clamp(24px,4vw,60px);align-items:start;
}
@media (max-width:900px){.spq__in{grid-template-columns:1fr}}

.spq__intro{position:sticky;top:96px}
@media (max-width:900px){.spq__intro{position:static}}

/* The fragments carry their own alpha, so the chevron sits on the page rather
   than in a card: no fill, no border, just a soft drop shadow following the
   cut-out edge to lift it off the paper. Nothing here may paint a background —
   that is the one thing a card would do and a cut-out must not. Those images
   also carry no --c for the same reason, so the tint rule below never applies. */
.spq__frag{margin-bottom:20px}
.spq__frag img{
  width:100%;aspect-ratio:1;object-fit:contain;
  cursor:zoom-in;transition:transform .7s var(--ease);
  filter:drop-shadow(0 16px 22px rgba(18,16,14,.20));
}
.spq__frag:hover img{transform:scale(1.04)}

.spq__code{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--brass)}
.spq__name{margin:0 0 8px;font-size:clamp(22px,2.8vw,32px);font-weight:700;letter-spacing:-.02em}
.spq__meta{
  margin:0 0 12px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}

/* auto-fit is what makes the count dynamic: two photos fill the row as two,
   three as three, and any future fourth wraps on its own without a media query */
.spq__gal{
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.spq__shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.spq__shot img{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  cursor:zoom-in;transition:transform .8s var(--ease),filter .4s;
}
.spq__shot:hover img{transform:scale(1.045)}

/* Below the stacking point the photos become a swipeable rail rather than
   shrinking to postage stamps. */
@media (max-width:600px){
  .spq__gal{
    grid-auto-flow:column;grid-auto-columns:78%;
    grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  }
  .spq__gal::-webkit-scrollbar{display:none}
  .spq__shot{scroll-snap-align:center}
}

/* ──────────────────────────── contact ──────────────────────────── */
.cta__in{display:grid;grid-template-columns:1fr minmax(340px,470px);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:940px){.cta__in{grid-template-columns:1fr}}

.cta__sub{margin:18px 0 26px;color:var(--muted);font-size:clamp(15px,1.6vw,18px);max-width:48ch}


.cta__direct{display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:600}
.cta__direct a{
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px;
  transition:color .25s;
}
.cta__direct a:hover{color:var(--brass)}

/* brand marks inherit link colour, so they follow every hover and theme */
.ico{
  width:1.05em;height:1.05em;flex:0 0 auto;
  fill:currentColor;color:var(--brass);
  transition:color .25s;
}
.cta__direct a:hover .ico{color:inherit}

.cta__form{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);
  box-shadow:0 30px 70px -40px rgba(18,16,14,.45);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field{margin-bottom:18px}
.field label{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13.5px;font-weight:600}
.opt{font-style:normal;font-weight:400;font-size:12px;color:var(--muted-l)}
.field input,.field select{
  width:100%;padding:14px 16px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  font-size:16px;transition:border-color .25s,background .25s,box-shadow .25s;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--ink);background:#fff;
  box-shadow:0 0 0 3px rgba(176,141,95,.18);
}

/* +998 sits beside the field rather than inside its value, so a typed or
   pasted country code can never be confused with operator code 99. */
.phone{
  display:flex;align-items:stretch;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.phone:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(176,141,95,.18)}
.phone__cc{
  display:flex;align-items:center;padding:0 12px 0 16px;
  font-size:16px;font-weight:600;color:var(--muted);
  border-right:1px solid var(--line);
}
.phone input{border:0;background:none;border-radius:0;padding-left:14px}
.phone input:focus{box-shadow:none;background:none}
.phone:has(input[aria-invalid="true"]){border-color:#b4442f;background:#fdf5f3}
.field .phone input[aria-invalid="true"]{background:none}
.field input[aria-invalid="true"]{border-color:#b4442f;background:#fdf5f3}
.err{margin:8px 0 0;font-size:13px;color:#b4442f}

.fine{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-l);text-align:center}

.formmsg{text-align:center;padding:clamp(16px,3vw,32px) 0}
.formmsg__ic{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;font-size:24px;
  background:var(--ink);color:var(--paper);
}
.formmsg h3{margin:0 0 8px;font-size:22px;font-weight:700}
.formmsg p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.6}
.formmsg--err .formmsg__ic{background:#b4442f}
.formmsg--err .cta__direct{justify-content:center}

/* ───────────────────────────── footer ───────────────────────────── */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(50px,7vw,84px) 0}
.foot__in{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:760px){.foot__in{grid-template-columns:1fr}}
.foot__brand img{width:150px;filter:invert(1) brightness(2)}
.foot__brand p{margin:20px 0 0;max-width:36ch;color:var(--muted-l);font-size:14.5px;line-height:1.6}
.foot__cols{display:flex;gap:clamp(30px,5vw,70px);flex-wrap:wrap}
.foot__cols h4{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.foot__cols a{
  display:flex;align-items:center;gap:9px;width:fit-content;
  text-decoration:none;font-size:15px;margin-bottom:9px;
  color:rgba(250,247,242,.86);transition:color .25s;
}
.foot__cols a:hover{color:#fff}
.foot__cols .ico{color:var(--brass)}
.foot__cols a:hover .ico{color:#fff}
/* the handle is identical on both networks, so name the network quietly */
.net{font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--muted-l);opacity:.75}

.foot__plain{margin:0 0 6px;font-size:15px;color:rgba(250,247,242,.86)}
.foot__plain--hi{font-weight:600;color:#fff}

/* icon-only social row — the handle is spelled out on the contact page.
   Buttons are named alongside the links because the showroom page puts a share
   control in this row, and it has to be a button: it acts on the page rather
   than going anywhere. */
.social{display:flex;gap:10px;margin-top:22px}
.social a,.social button{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line-l);border-radius:50%;
  background:none;color:var(--brass);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease);
}
.social a:hover,.social button:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px)}
.social .ico{width:17px;height:17px;color:inherit}
.social--lg{margin-top:14px}
.social--lg a,.social--lg button{width:46px;height:46px;border-color:var(--line);color:var(--ink)}
.social--lg a:hover,.social--lg button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Header row: smaller than the footer's, and white rather than brass because it
   spends the top of the page over the hero photograph. The .hdr.is-stuck rules
   in the header block flip it to ink once the bar turns to paper. */
.social--hdr{margin-top:0;gap:6px}
.social--hdr a{width:29px;height:29px;border-color:rgba(255,255,255,.34);color:#fff}
.social--hdr a:hover{background:#fff;border-color:#fff;color:var(--ink)}
.social--hdr .ico{width:13px;height:13px}

.foot__base{
  margin-top:clamp(40px,6vw,70px);padding-block:22px;
  border-top:1px solid var(--line-l);
  display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;
  font-size:13px;color:var(--muted-l);
}
.foot__base p{margin:0}
.foot__city{margin-inline:auto !important}
@media (max-width:640px){.foot__city{margin-inline:0 !important;order:3;width:100%}}
.foot__base a{text-decoration:none}
.foot__base a:hover{color:#fff}

/* ─────────────────────────── contact page ─────────────────────────── */
/* the header is opaque from the first pixel here, so the page needs to clear it */
.page main{padding-top:74px}
.hdr__nav a.is-here{opacity:1}
.hdr__nav a.is-here::after{transform:scaleX(1)}

.ct__head{padding-bottom:0}
.ct__head .h2{max-width:20ch}
.ct__body{padding-top:clamp(36px,5vw,60px)}

.ct__grid{
  display:grid;grid-template-columns:1fr minmax(340px,460px);
  gap:clamp(32px,5vw,80px);align-items:start;
}
@media (max-width:940px){.ct__grid{grid-template-columns:1fr}}

.ct__info{display:grid;gap:clamp(26px,3.4vw,40px)}
.info{padding-top:20px;border-top:1px solid var(--line)}
.info__k{
  margin:0 0 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.info__v{margin:0 0 4px;font-size:clamp(17px,2vw,21px);font-weight:600;letter-spacing:-.01em}
.info__v a{text-decoration:none;transition:color .25s}
.info__v a:hover{color:var(--brass)}
.info__note{margin:8px 0 0;font-size:14px;color:var(--muted)}
.info__link{
  display:inline-block;margin-top:10px;font-size:14px;font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px;
  transition:color .25s;
}
.info__link:hover{color:var(--brass)}

.form__t{margin:0 0 8px;font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.01em}
.form__s{margin:0 0 24px;font-size:14.5px;line-height:1.6;color:var(--muted)}

.ct__mapsec{padding-top:clamp(30px,4vw,50px)}
.map__t{margin-bottom:clamp(20px,3vw,32px);font-size:clamp(22px,3vw,36px)}
.map{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  height:clamp(320px,52vh,520px);
}
.map iframe{display:block;width:100%;height:100%;border:0}

/* ────────────────────────── showrooms page ────────────────────────── */
.sr__head{padding-bottom:0}
.sr__body{padding-top:clamp(30px,4vw,52px)}
.sr__title{margin-top:clamp(14px,2vw,22px)}

/* The only breadcrumb on the site. It borrows the eyebrow's letterspaced
   smallness but not its brass — a trail you read past is not an accent. */
.crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0;padding:0;list-style:none;
  font-size:13px;font-weight:500;color:var(--muted);
}
.crumb li{display:flex;align-items:center;gap:9px}
.crumb li+li::before{content:"/";color:var(--muted-l)}
.crumb a{text-decoration:none;transition:color .25s}
.crumb a:hover{color:var(--brass)}
.crumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* 3 / 2 / 1. The breakpoints are where a card's own content stops fitting
   rather than round device numbers: the address is the widest thing in it. */
.srs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}
@media (max-width:980px){.srs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.srs{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* The card body the contact form already established — white ground, hairline
   border, the large radius — with overflow clipped so the photo takes the top
   corners from the card itself and the two can never disagree. */
.sr{
  position:relative;display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(18,16,14,.4);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
/* one step further than the .btn lift, because a card is a bigger object */
.sr:hover{transform:translateY(-6px);box-shadow:0 34px 60px -32px rgba(18,16,14,.5)}

.sr__media{position:relative;aspect-ratio:4/3;background:var(--paper-2)}
.sr__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.sr:hover .sr__media img{transform:scale(1.045)}

/* Over the photo rather than beside the address: the top half of the card is
   where the eye lands, and the number is how you tell the cards apart. */
.sr__num{
  position:absolute;top:14px;left:14px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;
  background:var(--brass);color:#fff;
  font-size:15px;font-weight:700;line-height:1;
  box-shadow:0 6px 18px -6px rgba(18,16,14,.65);
}

.sr__body-in{
  flex:1;display:flex;flex-direction:column;gap:16px;
  padding:clamp(18px,2.2vw,24px);
}
/* takes the slack, so the buttons line up across a row of uneven addresses */
.sr__addr{
  flex:1;margin:0;
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;line-height:1.6;
}
.sr__pin{width:18px;height:18px;margin-top:3px}

.sr__map{--bg:var(--brass);--fg:#fff;--bd:var(--brass);padding:13px 20px;font-size:14px}
.sr__map:hover{--bg:#9a7a4f;--bd:#9a7a4f}
/* the icon is brass by default, which is invisible on a brass button */
.sr__map .ico{width:15px;height:15px;color:inherit}

/* ─────────────────────── showroom detail page ─────────────────────── */
/* Gallery and details on the left, the map holding its own column on the right;
   one column below the width where the map stops being worth its half. */
.sd__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:start;
  margin-top:clamp(18px,2.4vw,30px);
}
@media (max-width:960px){.sd__grid{grid-template-columns:1fr}}

/* ── gallery ── */
.gal{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)}
/* the rail itself: one slide wide, snapping, and swipeable with no script */
.gal__track{
  display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.gal__slide img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Same circular affordance as .social, sized for a photo edge and carrying the
   same ‹ › the lightbox uses, so the two navigations read as one idea. */
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(250,247,242,.9);color:var(--ink);
  font-size:26px;line-height:1;
  box-shadow:0 6px 20px -8px rgba(18,16,14,.6);
  transition:background .25s,transform .25s var(--ease),opacity .25s;
}
.gal__nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal__nav--p{left:12px}
.gal__nav--n{right:12px}

.gal__dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:7px;
}
.gal__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(250,247,242,.55);
  box-shadow:0 1px 6px rgba(18,16,14,.4);
  transition:background .25s,width .3s var(--ease);
}
.gal__dot.is-on{background:var(--brass);width:20px;border-radius:5px}

/* ── the details under it ── */
.sd__info{margin-top:clamp(22px,3vw,32px)}
.sd__name{
  margin:0 0 18px;font-size:clamp(24px,3vw,34px);
  font-weight:700;letter-spacing:-.02em;
}
.sd__row{
  display:flex;align-items:flex-start;gap:11px;
  margin:0 0 13px;font-size:15.5px;line-height:1.6;
}
.sd__row .ico{width:18px;height:18px;margin-top:3px}
.sd__row a{text-decoration:none;font-weight:600;transition:color .25s}
.sd__row a:hover{color:var(--brass)}

/* Reads as a state, not a label: filled, small, and sitting on the hours line. */
.sd__badge{
  flex:0 0 auto;margin-left:2px;padding:2px 10px;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(158,42,34,.1);color:#9e2a22;
}
.sd__badge.is-open{background:rgba(31,122,74,.12);color:#1f7a4a}

.sd__dir{--bg:var(--brass);--fg:#fff;--bd:var(--brass);margin-top:20px}
.sd__dir:hover{--bg:#9a7a4f;--bd:#9a7a4f}
.sd__dir .ico{width:15px;height:15px;color:inherit}

.sd__social{margin-top:26px}
.sd__share-ok{display:none}
.sd__share.is-done .sd__share-i{display:none}
.sd__share.is-done .sd__share-ok{display:block}

/* ── map column ── */
/* Sticky so the map stays with you while the details scroll past, which is the
   whole reason it gets a column of its own rather than a band underneath. */
.sd__mapwrap{position:sticky;top:96px}
@media (max-width:960px){.sd__mapwrap{position:static}}
.sd__map{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  height:clamp(380px,64vh,620px);
}
@media (max-width:960px){.sd__map{height:clamp(320px,52vh,460px)}}
.sd__map iframe{display:block;width:100%;height:100%;border:0}

/* ────────────────────────── mobile dock ────────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.dock.is-up{transform:none}
.dock a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:13px 12px;border-radius:100px;text-decoration:none;
  font-size:13.5px;font-weight:600;
}
.dock a{white-space:nowrap}
.dock__call{flex:0 0 38%;border:1px solid var(--ink);color:var(--ink)}
.dock__cta{background:var(--ink);color:var(--paper)}
/* reserve the dock's height so it can never sit on top of the footer */
@media (max-width:900px){.dock{display:flex}body{padding-bottom:74px}}

/* ───────────────────────────── lightbox ───────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  background:rgba(10,9,8,.94);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.lb.is-open{opacity:1}
.lb__img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain}
.lb__x,.lb__nav{
  position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;
  display:grid;place-items:center;transition:background .25s,transform .25s;
}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.22)}
/* × is a lighter mark than the ‹ › it sits beside, so it needs the extra size
   to read at the same weight */
.lb__x{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);font-size:30px}
.lb__nav{top:50%;transform:translateY(-50%);font-size:30px}
.lb__nav--p{left:clamp(8px,2vw,26px)}
.lb__nav--n{right:clamp(8px,2vw,26px)}
.lb__nav:hover{transform:translateY(-50%) scale(1.06)}

/* ────────────────────── image loading + reveal ────────────────────── */
/* --c is the image's dominant colour, used as a tint until the file decodes.
   Both effects are scoped to .js so a script failure can never leave the page
   blank — without JS everything simply renders opaque and in place. */
img[style*="--c"]{background-color:var(--c,var(--paper-2))}
.js img[loading="lazy"]{opacity:0;transition:opacity .7s var(--ease)}
.js img[loading="lazy"].is-loaded{opacity:1}

.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .hero__media img{animation:none}
}

/* ─────────────────────────── 404 ─────────────────────────── */
/* The not-found page. It is the one page a visitor reaches by accident, so it
   stays quiet: no imagery to load, just the two actions the rest of the site
   pushes toward. Centred as a block rather than with .h2--center alone, so the
   paragraph and the buttons line up under the heading. */
.nf{display:flex;align-items:center;min-height:calc(100vh - 74px)}
.nf__in{text-align:center}
.nf__text{
  margin:18px auto 0;max-width:52ch;
  color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.7;
}
.nf__acts{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:34px;
}
.nf__home{
  display:inline-block;margin-top:28px;
  color:var(--muted);font-size:14px;letter-spacing:.02em;
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.nf__home:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* The dock is fixed to the bottom on small screens and would otherwise sit on
   top of the home link, which is the last thing in the block. */
@media (max-width:760px){
  .nf{min-height:calc(100vh - 74px - 68px)}
  .nf__in{padding-bottom:68px}
  .nf__acts .btn{width:100%}
}