/* ============================================================
   Cavroy — design language
   Reference: boffi.com — warm neutral field, thin utilitarian
   sans for chrome, literary serif for statements, pill CTAs,
   edge-to-edge imagery with quiet captions.
   ============================================================ */

:root {
  /* Brand theme — light beige field, deep brown text, dark CTAs,
     copper (from the Cav Roy logo) as the interaction accent. */
  --bg: #f3ecdf;
  --surface: #e9dfcd;
  --card: #f9f4ea;
  --ink: #2b1c15;
  --muted: #7a6455;
  --line: #d8c9b1;
  --accent: #a3622f;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --hdr-h: 88px;
  --gutter: clamp(16px, 4vw, 56px);
}

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

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

.skip {
  position: absolute; inset-inline-start: 0; top: 0; transform: translateY(-300%);
  background: #0d0b0a; color: #fff; padding: 8px 16px; z-index: 100;
}
.skip:focus { transform: none; }

/* ---------------- header ---------------- */

/* The bar is never visible: no background, no border, at any scroll
   position. Only the link colour changes (see main.js): white while over a
   photo, dark while over the beige page. A panel that is open (menu, mobile
   drawer) gets a solid background so its text stays legible. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent; color: var(--ink);
  transition: color .25s, background .25s;
}
.hdr { text-shadow: 0 0 10px rgba(243, 236, 223, .85), 0 0 2px rgba(243, 236, 223, .6); }
.hdr .on-dark { color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .35); }
.hdr.has-open, .hdr.has-open .on-dark { color: var(--ink); text-shadow: none; }
.hdr.has-open { background: var(--surface); }

.hdr__in {
  height: var(--hdr-h);
  display: flex; align-items: center; gap: 34px;
  padding: 0 clamp(16px, 2.5vw, 32px);
}

/* Brand mark. The original transparent artwork, always in its own colours, used directly on
   the beige: no plate, no circle, never recoloured. A soft cream halo keeps it readable over photos. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img {
  height: 74px; width: auto; display: block;
  filter: drop-shadow(0 0 5px rgba(243, 236, 223, .95)) drop-shadow(0 0 14px rgba(243, 236, 223, .75));
  transition: opacity .25s;
}
.logo:hover img { opacity: .8; }
.logo--ftr img { height: 84px; filter: none; }

.nav { display: flex; flex: 1; align-items: center; }
.nav__list { display: flex; gap: 4px; }
.nav__util { display: flex; gap: 4px; margin-left: auto; align-items: center; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: opacity .2s;
}
.nav__link:hover { opacity: .55; }

/* products mega-dropdown */
.has-sub { position: relative; }
.sub {
  position: fixed; left: 0; right: 0; top: var(--hdr-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.has-sub.is-open .sub { opacity: 1; visibility: visible; transform: none; }

.sub__in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 28px var(--gutter) 34px;
  max-width: 1240px; margin: 0 auto;
}
.sub__item .sub__media {
  display: block; aspect-ratio: 4 / 3; margin-bottom: 10px;
  transition: opacity .25s;
}
.sub__item:hover .sub__media { opacity: .82; }
.sub__name { font-size: 12.5px; }

/* language menu */
.lang { position: relative; }
.lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 130px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; font-size: 12.5px;
}
.lang__menu button:hover { background: var(--bg); }
.lang__menu button.is-on { font-weight: 600; }

/* burger (mobile) */
.burger { display: none; margin-left: auto; padding: 10px; }
.burger span {
  display: block; width: 20px; height: 1.5px; background: currentColor;
  margin: 5px 0; transition: transform .25s, opacity .25s;
}

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  height: calc(100svh - 0px);
  min-height: 540px;
}
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s ease, visibility .8s;
}
.slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
/* the hidden attribute must win over display:flex */
.slide[hidden] { visibility: hidden; }

.slide__body {
  padding: 0 var(--gutter) clamp(48px, 8vh, 84px);
  max-width: 780px;
}
.slide__title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600; letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: 8px;
}
.slide__sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.35;
  margin-bottom: 26px;
}

.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; padding: 18px 12px; z-index: 3; opacity: .75;
  transition: opacity .2s;
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: 6px; }
.hero__arrow--next { right: 6px; }

.hero__dots {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.hero__dots button {
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  transition: background .3s;
}
.hero__dots button.is-on { background: rgba(255, 255, 255, .95); }

/* ---------------- sections ---------------- */

.sec { padding: clamp(64px, 9vw, 110px) var(--gutter); }
.sec--tight { padding-top: 0; }
.sec--center { text-align: center; }

.sec__head {
  text-align: center;
  font-size: clamp(22px, 1.9vw, 32px); font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase;
  line-height: 1.38;
  margin-bottom: clamp(40px, 5vw, 68px);
}
.sec--center .sec__head { margin-bottom: 26px; }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto 34px;
}

.sec__cta { text-align: center; margin-top: clamp(32px, 4vw, 52px); }

/* pill buttons — solid black, white label; copper on hover */
.pill {
  display: inline-block;
  padding: 12px 28px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.pill:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.pill--ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------- grids & cards ---------------- */

.grid { display: grid; gap: clamp(18px, 2.5vw, 34px); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card { display: block; }
.card__media {
  display: block; aspect-ratio: 3 / 4;
  transition: opacity .3s;
}
.card__media--wide { aspect-ratio: 16 / 10; }
.card:hover .card__media { opacity: .85; }
.card__cap {
  display: block; margin-top: 12px;
  font-size: 12.5px; letter-spacing: .01em;
}
.grid--2 .card__cap { text-align: center; }

/* ---------------- collections rail ----------------
   Boffi-style horizontal scroller: cards bleed off both edges, roughly
   three in view, dragged via a short custom scrollbar underneath.
   Proportions (26vw card / 9.5vw gap) measured from the reference. */

.sec--rail { padding-left: 0; padding-right: 0; }

.rail {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  /* No scroll-snap: the rail loops infinitely by teleporting one set
     width, and snapping fights that jump. */
  cursor: grab;
  outline: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; }
.rail, .rail * { -webkit-user-select: none; user-select: none; }
.rail a, .rail img { -webkit-user-drag: none; }
.rail.is-dragging a { pointer-events: none; }
.rail:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

.rail__track {
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
  padding: 0 var(--gutter);
  width: max-content;
}

.railcard { flex: 0 0 clamp(380px, 41vw, 760px); }
.railcard__media {
  display: block; aspect-ratio: 5 / 6;
  transition: opacity .3s;
}
.railcard:hover .railcard__media { opacity: .86; }
.railcard__cap {
  display: block; margin-top: 18px;
  font-size: clamp(13px, 1vw, 16px); letter-spacing: .01em;
}

/* short centred scrollbar, echoing the reference */
.rail__bar {
  position: relative;
  width: clamp(90px, 9vw, 130px);
  height: 3px; margin: clamp(30px, 4vw, 46px) auto 0;
  background: var(--line); border-radius: 2px;
  cursor: pointer;
}
.rail__thumb {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 40%; min-width: 18px;
  background: var(--ink); border-radius: 2px;
}

/* ---------------- footer ---------------- */

.ftr {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(48px, 6vw, 72px) var(--gutter) 0;
}
.ftr__in {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  gap: clamp(28px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.logo--ftr { font-size: 22px; }
.ftr__note {
  margin-top: 12px; color: var(--muted);
  font-family: var(--serif); font-size: 16px;
}

.ftr__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 32px; }
.ftr__col h3, .ftr__news h3 {
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.ftr__col a {
  display: block; padding: 3px 0;
  font-size: 12.5px; color: var(--muted);
  transition: color .2s;
}
.ftr__col a:hover { color: var(--ink); }

.field {
  display: flex; border-bottom: 1px solid var(--line);
}
.field:focus-within { border-color: var(--accent); }
.field input {
  flex: 1; border: 0; background: none; padding: 10px 0;
  font: inherit; font-size: 13px; color: var(--ink); outline: none;
}
.field input::placeholder { color: var(--muted); }
.field button { padding: 10px 4px; }
.field__msg { margin-top: 10px; font-size: 12px; color: var(--muted); min-height: 1.2em; }

.ftr__base {
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0 22px;
  font-size: 11.5px; color: var(--muted);
}
.ftr__base a:hover { color: var(--ink); }

/* ---------------- inner pages ---------------- */

.page-hero {
  height: 62svh; min-height: 380px;
  display: flex; align-items: flex-end; color: #fff;
}
.page-hero .slide__body { padding-bottom: clamp(40px, 6vh, 64px); }

.prose {
  max-width: 660px; margin: 0 auto;
  font-size: 15px; color: #4a372d;
}
.prose p + p { margin-top: 1.2em; }

.spec {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 34px);
  max-width: 1080px; margin: 0 auto;
}
.spec__item { border-top: 1px solid var(--line); padding-top: 14px; }
.spec__item h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.spec__item p { font-size: 13px; color: var(--muted); }

/* Poliform-style model grid — uniform three-up, square images, caption
   left-aligned beneath: NAME in caps over the category in muted text. */
.models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 2.6vw, 46px) clamp(16px, 1.7vw, 32px);
}
.model { text-align: left; }
.model__media {
  display: block; aspect-ratio: 1 / 1;
  transition: opacity .3s;
}
.model:hover .model__media { opacity: .88; }
.model__name {
  display: block; margin-top: 14px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
}
.model__cat {
  display: block; margin-top: 3px;
  font-size: 12.5px; color: var(--muted);
}

/* breadcrumb — sits directly under the hero, so no header offset */
.crumb {
  padding: clamp(20px, 2.5vw, 34px) var(--gutter) 0;
  font-size: 12.5px; color: var(--muted);
}
.crumb a { transition: color .2s; }
.crumb a:hover { color: var(--ink); }
.crumb span { color: var(--ink); }

/* 404 */
.notfound {
  min-height: calc(100svh - var(--hdr-h) - 120px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--hdr-h) + 60px) var(--gutter) 80px;
}
.notfound__code {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(72px, 14vw, 170px); line-height: 1;
  color: var(--accent);
}
.notfound__title {
  font-size: clamp(22px, 3vw, 34px); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  margin: 8px 0 16px;
}
.notfound__text { max-width: 440px; color: var(--muted); margin-bottom: 34px; }
.notfound__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ftr__base--solo { border-top: 0; justify-content: center; gap: 6px 24px; text-align: center; }
.ftr__base--solo a:hover { color: var(--ink); }

/* login */
.auth {
  min-height: calc(100svh - var(--hdr-h));
  display: grid; place-items: center;
  padding: calc(var(--hdr-h) + 40px) var(--gutter) 60px;
}
.auth__card { width: min(400px, 100%); }
.auth__card h1 {
  font-size: 24px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; margin-bottom: 6px;
}
.auth__card > p { color: var(--muted); margin-bottom: 32px; }
.auth label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 22px 0 4px;
}
.auth input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: none; padding: 9px 0; font: inherit; font-size: 14px;
  color: var(--ink); outline: none;
  transition: border-color .2s;
}
.auth input:focus { border-color: var(--accent); }
.auth .pill { width: 100%; text-align: center; margin-top: 34px; }
.auth__aux { margin-top: 20px; font-size: 12.5px; color: var(--muted); text-align: center; }
.auth__aux a { text-decoration: underline; text-underline-offset: 3px; }

/* contact */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px);
  max-width: 1080px; margin: 0 auto;
}

/* generic content offset below fixed header */
main > .sec:first-child { padding-top: calc(var(--hdr-h) + clamp(48px, 7vw, 90px)); }

/* ============================================================
   Placeholder imagery — layered gradients standing in for
   photography until real assets are supplied. Each [data-tone]
   evokes a material palette (wood, stone, plaster, shadow).
   ============================================================ */

/* ---- real photography ----
   [data-photo] wins over [data-tone]: any element carrying a photo name
   shows the image; everything else keeps its gradient placeholder until
   the corresponding shots exist. */
[data-photo] {
  background-color: #d9cbb6;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-photo="bedroom-hero"]     { background-image: url("../img/photos/bedroom-hero.jpg"); }
[data-photo="bedroom-rail"]     { background-image: url("../img/photos/bedroom-rail.jpg"); }
[data-photo="model-arwa"]       { background-image: url("../img/photos/model-arwa.jpg"); }
[data-photo="model-gul"]        { background-image: url("../img/photos/gul/gul-bed.jpg"); }
[data-photo="model-istanbul"]   { background-image: url("../img/photos/model-istanbul.jpg"); }
[data-photo="model-kare"]       { background-image: url("../img/photos/model-kare.jpg"); }
[data-photo="project-bedroom"]  { background-image: url("../img/photos/project-bedroom.jpg"); }
[data-photo="project-wardrobe"] { background-image: url("../img/photos/project-wardrobe.jpg"); }

[data-tone] { background-color: #cdb996; }

[data-tone="a"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(15deg, #b58f66 0%, #dcc7a5 100%);
}
[data-tone="b"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(10deg, #a98259 0%, #d3bb96 100%);
}
[data-tone="c"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(20deg, #c2a07e 0%, #e6d5b9 100%);
}
[data-tone="d"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(12deg, #9c7a55 0%, #cfb48d 100%);
}
[data-tone="hero-a"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #a98259 0%, #e0cfb0 100%);
}
[data-tone="hero-b"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #b28d63 0%, #e5d4b7 100%);
}
[data-tone="hero-c"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #9c7a55 0%, #d9c5a3 100%);
}
[data-tone="film"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #a98259 0%, #e0cfb0 100%);
}
[data-tone="p1"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(25deg, #b08b62 0%, #dfcaa8 100%);
}
[data-tone="p2"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(18deg, #bd9a75 0%, #e8d8bc 100%);
}

/* slide media needs to fill behind text */
.slide[data-tone], .page-hero[data-tone] { background-size: cover; }

/* darken lower edge of heroes so white text reads */
.slide::after, .page-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38));
  pointer-events: none;
}

/* Top scrim. The transparent header sits over the hero, and real
   photography can be bright up there (windows, pale walls) where the
   gradient placeholders never were — without this the white nav is
   unreadable against a light image. */
.slide::before, .page-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: calc(var(--hdr-h) + 90px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none; z-index: 0;
}
.slide__body, .page-hero .slide__body { position: relative; z-index: 1; }
.page-hero { position: relative; }

/* ---------------- responsive ---------------- */

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sub__in { grid-template-columns: repeat(2, 1fr); }
  .ftr__in { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .models { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .hero__arrow { display: none; }
}

@media (max-width: 480px) {
  /* the 340px floor would overflow a phone — show one card plus a peek */
  .railcard { flex: 0 0 78vw; }
  .rail__track { gap: 12px; }
  .models { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .model__name, .model__cat { font-size: 11.5px; }
}

/* ============================================================
   Collection pages (products/gul.html ...)
   Layout reference: saloni.furniture product pages — full-screen room
   photo with a huge thin name, a strip of the pieces, and a Dimensions
   accordion whose cards are isometric drawings with sizes in cm.
   Generated by tools/build_collections.py.
   ============================================================ */

.coll-hero {
  position: relative; height: 100svh; min-height: 560px;
  display: grid; place-items: center; text-align: center;
  color: #fff; overflow: hidden; background: #2a1c14;
}
.coll-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  filter: brightness(.66) saturate(1.05); /* bright rooms would wash out the white title */
}
.coll-hero::before, .coll-hero::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
.coll-hero::before { top: 0; height: calc(var(--hdr-h) + 90px); background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.coll-hero::after { bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5)); }
.coll-hero__body { position: relative; z-index: 1; padding: 0 var(--gutter); }
.coll-hero__kicker {
  font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: clamp(10px, 2vh, 22px); text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.coll-hero__name {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(64px, 13vw, 190px); line-height: 1;
  letter-spacing: .4em; margin-right: -.4em; /* re-centres the tracked-out word */
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .25);
}
.coll-hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
}
.coll-hero__scroll i { display: block; width: 1px; height: 38px; background: rgba(255,255,255,.7); animation: cueLine 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cueLine { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coll-hero__scroll i { animation: none; } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.chips li {
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.sec--center .prose { text-align: center; }

/* strip of the pieces */
.sec--strip { padding-left: 0; padding-right: 0; }
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--gutter); margin-bottom: clamp(24px, 3vw, 40px); }
.sec__head--left { text-align: left; margin-bottom: 0; }
.strip-nav { display: flex; gap: 8px; }
.strip-nav button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.strip-nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.strip {
  display: flex; gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  padding: 0 var(--gutter) 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.strip:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.strip__item { flex: 0 0 auto; scroll-snap-align: start; }
.strip__item img { height: clamp(300px, 62svh, 640px); width: auto; max-width: none; }
.strip__item figcaption {
  margin-top: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}

/* Dimensions accordion */
.dimgroups { max-width: 1080px; margin: 0 auto; }
.dimgroup { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dimgroup__sum {
  display: flex; align-items: center; gap: 14px; padding: 22px 4px; cursor: pointer; list-style: none;
}
.dimgroup__sum::-webkit-details-marker { display: none; }
.dimgroup__title { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dimgroup__count { font-size: 12.5px; color: var(--muted); }
.dimgroup__chev { margin-left: auto; transition: transform .25s; }
.dimgroup[open] .dimgroup__chev { transform: rotate(180deg); }
.dimgroup__sum:hover .dimgroup__title { color: var(--accent); }
.dimgroup__sum:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.dim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); padding: 8px 0 30px; }
.dimcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 20px 22px 22px; display: flex; flex-direction: column;
}
.dimcard__name {
  font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.dimcard__tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em; padding: 2px 8px;
  border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
}
.dimcard__art { margin: 6px 0 4px; }
.dimcard__art svg, .dimcard__art img { display: block; width: 100%; height: auto; }
.dimcard__art img { mix-blend-mode: multiply; }
.dimcard__meta { font-size: 13px; font-weight: 500; text-align: center; }
.dimcard__note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 2px; }

/* drawing styles */
.dimcard svg .f-front { fill: rgba(43, 28, 21, .10); }
.dimcard svg .f-side  { fill: rgba(43, 28, 21, .17); }
.dimcard svg .f-top   { fill: rgba(43, 28, 21, .03); }
.dimcard svg polygon  { stroke: var(--ink); stroke-width: 1.15; stroke-linejoin: round; }
.dimcard svg .ln      { stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.dimcard svg .ln--dim { stroke-opacity: .55; stroke-width: .9; }
.dimcard svg .ln--h   { stroke: var(--accent); stroke-width: 2; }
.dimcard svg .ext     { stroke: var(--muted); stroke-width: .7; stroke-dasharray: 2 3; }
.dimcard svg .dim     { stroke: var(--muted); stroke-width: .9; }
.dimcard svg .dot     { fill: var(--muted); }
.dimcard svg .lbl     { font-family: var(--sans); fill: var(--ink); }
.dimcard svg .num     { font-size: 13px; font-weight: 600; }
.dimcard svg .unit    { font-size: 9.5px; fill: var(--muted); }

.sec--ask .lede { margin-bottom: 30px; }
.ask { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 720px) {
  .dim-grid { grid-template-columns: 1fr; }
  .coll-hero__name { letter-spacing: .28em; margin-right: -.28em; }
  .strip-nav { display: none; }
  .strip__item img { height: 54svh; }
}

/* ============================================================
   Homepage photography + client projects
   ============================================================ */

/* hero slides carry a real <img> now (alt text, priority loading) */
.slide { isolation: isolate; }
.slide__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}

/* photo names used by CSS-background tiles (rail cards, nav menu) */

/* client projects: natural proportions, no cropping */
.masonry { column-count: 3; column-gap: clamp(16px, 2.2vw, 30px); }
.pj { display: block; break-inside: avoid; margin: 0 0 clamp(16px, 2.2vw, 30px); }
.pj img { width: 100%; height: auto; transition: opacity .3s; }
.pj:hover img { opacity: .88; }
.pj__cap { display: block; margin-top: 10px; font-size: 12.5px; }
.sec__sub { max-width: 560px; margin: -26px auto clamp(34px, 4vw, 52px); text-align: center; color: var(--muted); font-size: 15px; }

@media (max-width: 960px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

[data-photo="projects-hero"] { background-image: url("../img/photos/custom-work/custom-work-04.jpg"); background-position: 50% 45%; }
.pj img { display: block; }

/* ============================================================
   Header, Saloni-style: logo centred, links split left / right
   ============================================================ */
.hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.logo { grid-column: 2; grid-row: 1; justify-self: center; }
@media (min-width: 601px) {
  .nav { display: contents; }
  .nav__list { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__util { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}
@media (max-width: 600px) {
  .burger { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}

/* ============================================================
   Category photos. One name per product family, used by the
   Products menu, the homepage cards and the Explore-more cards.
   ============================================================ */
[data-photo="cat-bedroom"]  { background-image: url("../img/photos/arwa-new/arwa-new-05.jpg");            background-position: 50% 35%; }
[data-photo="cat-kitchen"]  { background-image: url("../img/photos/kitchen/made-2.jpg");              background-position: 40% 50%; }
[data-photo="cat-shoes"]    { background-image: url("../img/photos/shoe-cabinets/hero/hero-01.jpg");      background-position: 52% 50%; }
[data-photo="cat-dressing"] { background-image: url("../img/photos/dressing/dressing-new-02.jpg"); background-position: 50% 50%; }
[data-photo="cat-tables"]   { background-image: url("../img/photos/base-tables/base-tables-01.jpg");      background-position: 60% 55%; }
[data-photo="cat-bathroom"] { background-image: url("../img/photos/bathroom/bathroom-new-01.jpg");          background-position: 50% 40%; }
[data-photo="cat-tv"]       { background-image: url("../img/photos/tv-units/tv-units-01.jpg");            background-position: 50% 50%; }
[data-photo="col-gul"]      { background-image: url("../img/photos/gul/gul-bed.jpg");                     background-position: 40% 50%; }
[data-photo="col-zenith"]   { background-image: url("../img/photos/zenith/zenith-01.jpg");                background-position: 50% 60%; }
[data-photo="col-nil"]      { background-image: url("../img/photos/nil/nil-01.jpg");                      background-position: 50% 50%; }



/* ============================================================
   Leaflet-inspired sections (homepage): process + contact, kitchens.
   Built as real text, photos and drawn icons; the leaflet is a reference
   for the look (Cormorant headings, short copper rules, line icons), not
   something the site embeds. Copper here is the leaflet's #c97b48.
   ============================================================ */
:root { --copper: #c97b48; }

.lc { text-align: center; }
.lc-h {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -.005em;
}
.lc-h--xl { font-size: clamp(40px, 5.6vw, 74px); }
.lc-h--sm { font-size: clamp(26px, 3vw, 40px); }
.lc-rule { display: block; width: clamp(56px, 7vw, 96px); height: 2px; background: var(--copper); margin: 0 auto; }
.lc-rule--left { margin: 0; }

/* process row: four line icons separated by thin copper rules */
.lc-final .lc-rule:first-child { margin-bottom: clamp(20px, 3vw, 34px); }
.lc-steps {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 900px; margin: clamp(30px, 4vw, 52px) auto clamp(64px, 9vw, 120px);
}
.lc-steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 8px 10px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(19px, 2.1vw, 26px);
}
.lc-steps li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 6%; bottom: 6%; width: 1px; background: var(--copper); opacity: .85; }
.lc-ico { width: clamp(46px, 6.4vw, 68px); height: auto; color: var(--copper); }
.lc-ico .lc-wheel { fill: var(--bg); }
.lc-final .lc-rule + .lc-sub, .lc-final .lc-h--xl + .lc-rule { margin-top: clamp(18px, 2.4vw, 30px); }
.lc-sub { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(14px, 1.3vw, 16px); }
.lc-sub a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--copper); }
.lc-sub a:hover { color: var(--accent); }

/* kitchens: title, two points with copper rules, two photos, closing line + finish swatches */
.lc-kitchen {
  max-width: 1100px; margin: 0 auto; text-align: start;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 3vw, 40px); row-gap: clamp(28px, 5vw, 64px); align-items: start;
}
.lc-kitchen__head { grid-column: 1 / -1; text-align: center; }
.lc-point--a { grid-column: 1 / 5; grid-row: 2; }
.lc-photo--a { grid-column: 5 / 13; grid-row: 2; }
.lc-photo--b { grid-column: 1 / 8; grid-row: 3; }
.lc-point--b { grid-column: 9 / 13; grid-row: 3; align-self: center; }
.lc-close { grid-column: 1 / -1; grid-row: 4; }
.lc-photo img { width: 100%; height: auto; transition: opacity .3s; }
.lc-photo:hover img { opacity: .92; }
.lc-point .lc-rule { margin-bottom: 18px; }
.lc-point h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; }
.lc-point p { margin-top: 12px; font-size: 15px; color: #4a372d; max-width: 260px; }
.lc-close .lc-rule { margin-bottom: 18px; }
/* the color palette under "Your kitchen, your color.": plain rectangles, one per sample, and a black one */
.palette { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 11vw, 124px), 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.palette__sw { aspect-ratio: 3 / 2; border-radius: 3px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(43, 28, 21, .12); }
.palette__sw--white { background: #fbfaf7; }
.palette__sw--beige { background: #d9c9ad; }
.palette__sw--black { background: #141414; }
.lc-swatches { list-style: none; padding: 0; display: flex; height: 5px; margin-top: clamp(22px, 3vw, 34px); }
.lc-swatches li { flex: 1; }

@media (max-width: 720px) {
  .lc-point--a, .lc-photo--a, .lc-photo--b, .lc-point--b { grid-column: 1 / -1; grid-row: auto; }
  .lc-point--a { order: 1; } .lc-photo--a { order: 2; } .lc-photo--b { order: 3; } .lc-point--b { order: 4; }
  .lc-close { order: 5; grid-row: auto; }
  .lc-point p { max-width: none; }
}
@media (max-width: 560px) {
  .lc-steps { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .lc-steps li:nth-child(odd)::before { display: none; }
}

/* ============================================================
   Right-to-left (Arabic) and the Arabic typeface
   ============================================================ */
html[lang="ar"] body * {
  font-family: "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
  letter-spacing: 0; text-transform: none; font-style: normal;
}
html[lang="ar"] .lc-h, html[lang="ar"] .lc-point h3, html[lang="ar"] .slide__title, html[lang="ar"] .sec__head { font-weight: 600; }
html[lang="ar"] .lc-h { line-height: 1.35; }
/* the rail scrolls and loops with LTR maths; keep it LTR, restore RTL on the captions */
.rail { direction: ltr; }
html[dir="rtl"] .railcard__cap { direction: rtl; text-align: right; }
html[dir="rtl"] .rail__bar { direction: ltr; }
html[dir="rtl"] .hero__arrow--prev { left: auto; right: 6px; }
html[dir="rtl"] .hero__arrow--next { right: auto; left: 6px; }
html[dir="rtl"] .lang__menu { right: auto; left: 0; }

/* longer French labels: never wrap header links, tighten a little on tablets */
.nav__link { white-space: nowrap; }
@media (min-width: 601px) and (max-width: 860px) {
  .nav__link { padding: 8px 4px; font-size: 10px; letter-spacing: .03em; }
  .hdr__in { gap: 6px; padding: 0 8px; }
  .logo img { height: 54px; }
}

/* ============================================================
   Contact blocks, in the layout of the owner's Hexalion contact section.
   Used by the homepage card and by contacts.html.
   ============================================================ */
.lc-card {
  max-width: 460px; margin: clamp(34px, 4vw, 50px) auto 0; text-align: start;
  background: var(--card); border-top: 2px solid var(--copper); border-radius: 0 0 4px 4px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 70px -44px rgba(43, 28, 21, .3);
}
.lc-card__name { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: .04em; }
.lc-card__tag { margin-top: 2px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.lc-btn { margin-top: clamp(28px, 3.5vw, 40px); padding: 15px 42px; }

.ct-hr { height: 1px; background: rgba(43, 28, 21, .12); margin: 22px 0; }
.ct-lbl { font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--copper); margin-bottom: 14px; }
.ct-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; font-size: 15px; line-height: 1.55; color: #3a2a21; }
.ct-lbl + .ct-row { margin-top: 0; }
.ct-row a { transition: color .2s; }
.ct-row a:hover { color: var(--accent); }
.ct-row .ct-loc { margin-left: auto; align-self: center; flex: none; padding: 9px 20px; color: var(--ink); }
.ct-row .ct-loc:hover { color: #fff; }
.lc-mini { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--copper); }

.ct-head { padding-bottom: 8px; }
.ct-eyebrow { margin-bottom: 18px; font-size: 11px; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: var(--copper); }
.ct-div { display: inline-block; width: 2.5rem; height: 1px; background: var(--copper); vertical-align: middle; margin: 0 16px; }
.ct-main { padding-top: clamp(40px, 5vw, 72px); }
.ct-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 80px); max-width: 1120px; margin: 0 auto; align-items: start; }
.ct-body { max-width: 460px; font-size: 15px; line-height: 1.75; color: #4a372d; }
.ct-body + .ct-body { margin-top: 14px; }
.ct-info .ct-hr { margin: 28px 0; }

.ct-form { display: grid; gap: 26px; background: #fffdf9; border-radius: 16px; padding: clamp(28px, 4vw, 44px); box-shadow: 0 30px 80px -40px rgba(43, 28, 21, .3); }
.ct-field { display: block; }
.ct-flabel { display: block; font-size: 10px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--copper); }
.ct-field input, .ct-field textarea {
  width: 100%; margin-top: 8px; padding: 10px 0; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(43, 28, 21, .18); font: inherit; font-size: 15px; color: var(--ink);
  outline: none; resize: none; transition: border-color .2s;
}
.ct-field input:focus, .ct-field textarea:focus { border-color: var(--copper); }
.ct-field ::placeholder { color: rgba(43, 28, 21, .35); }
.ct-send { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.ct-send .lc-mini { margin: 0; color: currentColor; }
.ct-msg { font-size: 13px; text-align: center; color: var(--muted); }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } .ct-body { max-width: none; } }

/* ============================================================
   Header on phones (<=600px): links collapse into a menu button + drawer.
   Wider than that the links stay in the bar. (Restored 2026-09-30 after an
   accidental deletion; keep this block.)
   ============================================================ */
@media (max-width: 600px) {
  .burger { display: block; }

  .nav {
    position: fixed; inset: var(--hdr-h) 0 0 0;
    background: var(--surface);
    flex-direction: column; align-items: stretch;
    padding: 18px var(--gutter);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }

  .nav__list, .nav__util { flex-direction: column; gap: 0; }
  .nav__util { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .nav__link { padding: 13px 0; font-size: 13px; width: 100%; justify-content: space-between; }

  .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; border: 0;
  }
  .has-sub.is-open .sub { display: block; }
  .sub__in { grid-template-columns: 1fr 1fr; padding: 4px 0 18px; gap: 12px; }

  .lang__menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; }
  .lang.is-open .lang__menu { display: block; }

  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
}

/* tablets: keep every link beside the logo */
@media (min-width: 601px) and (max-width: 900px) {
  .hdr__in { gap: 10px; padding: 0 10px; }
  .nav__link { padding: 8px 5px; font-size: 10.5px; letter-spacing: .05em; }
  .nav__list, .nav__util { gap: 0; }
  .logo img { height: 58px; }
}

/* Products menu: wheel scrolling stays inside the panel (it never scrolls the page behind it) */
.sub { max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; }
/* About: hardware close-ups */
.mech { max-width: 1100px; margin: 0 auto; }
.mech img { width: 100%; height: auto; }
.mech figcaption { margin-top: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 720px) { .mech { grid-template-columns: 1fr; } }

/* phones: a slightly smaller mark so the bar stays tidy */
@media (max-width: 600px) { .logo img { height: 62px; } }

/* About: text and picture rows that alternate sides */
.about-stat__num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(64px, 11vw, 132px); line-height: 1; color: var(--copper); }
.about-stat .lc-rule { margin: clamp(14px, 2vw, 22px) auto; }
.about-stat__cap { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.about-stat__sub { max-width: 520px; margin: 14px auto 0; color: #4a372d; }
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1100px; margin: 0 auto clamp(56px, 8vw, 110px); }
.about-row--flip .about-row__pic { order: -1; }
.about-row__pic img { width: 100%; height: auto; border-radius: 3px; }
.about-row__text .lc-rule { margin-bottom: 18px; }
.about-row__text p { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: #4a372d; max-width: 480px; }
@media (max-width: 720px) {
  .about-row { grid-template-columns: 1fr; }
  .about-row .about-row__pic, .about-row--flip .about-row__pic { order: -1; }
}

/* shoe cabinet models */
[data-photo="sh-classic"] { background-image: url("../img/photos/shoe-cabinets/classic-M-taxus-beige/classic-M-taxus-beige-01.jpg"); background-position: 50% 50%; }
[data-photo="sh-dobla"]   { background-image: url("../img/photos/shoe-cabinets/classic-M-solomon-blanc/classic-M-solomon-blanc-01.jpg"); background-position: 50% 50%; }

/* ---------- Products index page ---------- */
.prod-head { padding-top: calc(var(--hdr-h) + clamp(32px, 6vh, 64px)); padding-bottom: 8px; }
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 28px); padding-top: 24px; }
.prod-card { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; background: var(--surface); }
.prod-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.prod-card:hover .prod-card__media { transform: scale(1.04); }
.prod-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,28,21,.62), rgba(43,28,21,0) 55%); }
.prod-card__cap { position: absolute; z-index: 1; inset-inline: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.prod-card__name { font-family: var(--serif, inherit); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; }
.prod-card__sub { font-size: 14px; opacity: .88; }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; } }

/* ---------- Category showcase: one screen per model ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coll-show { display: grid; flex: 0 0 100%; scroll-snap-align: start; color: #fff; }
.coll-show .coll-hero__img { transition: transform 1.2s ease; }
.coll-show:hover .coll-hero__img { transform: scale(1.03); }

.show { position: relative; direction: ltr; }
.show__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.show__track::-webkit-scrollbar { display: none; }
.show__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.show__track img { -webkit-user-drag: none; user-select: none; }
/* ---------- Product page: full-width draggable photos, then a narrow centered text block ---------- */
.crumb--pp { padding-top: calc(var(--hdr-h) + 12px); }
.pp { padding-bottom: clamp(20px, 4vw, 50px); }
.pp__row {
  display: flex; gap: clamp(8px, 1.2vw, 16px); overflow-x: auto; scrollbar-width: none; cursor: grab;
  overscroll-behavior-x: contain; padding: 8px var(--gutter);
  scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--gutter);
}
.pp__shot { scroll-snap-align: start; }
.pp { position: relative; }
.pp__row::-webkit-scrollbar { display: none; }
.pp__shot { flex: 0 0 auto; height: min(74vh, 760px); overflow: hidden; border-radius: 4px; background: var(--surface); }
.pp__shot img { height: 100%; width: auto; max-width: none; display: block; transition: transform .7s ease; }
.pp__shot:hover img { transform: scale(1.05); }
.pp__text { max-width: 680px; margin: clamp(32px, 6vw, 72px) auto 0; padding: 0 var(--gutter); text-align: center; }
.pp__kicker { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pp__name { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1.05; margin-bottom: 18px; }
.pp__text .lede { margin: 0 auto 14px; }
@media (max-width: 600px) { .pp__shot { height: 56vh; } }

/* drag rows: the grabbing hand, and no snapping while dragging; hover zoom on showcase photos */
[data-drag].is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-drag] img { -webkit-user-drag: none; }
.show__track img, .coll-show .coll-hero__img { -webkit-user-drag: none; }

/* arrows added by main.js to every drag row */
.drag-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center; color: #fff;
  background: rgba(43, 28, 21, .38); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  cursor: pointer; transition: background .2s, opacity .2s;
}
.pp .drag-arrow { top: calc(8px + min(74vh, 760px) / 2); }
.drag-arrow:hover { background: rgba(43, 28, 21, .65); }
.drag-arrow--prev { left: clamp(10px, 2vw, 28px); }
.drag-arrow--next { right: clamp(10px, 2vw, 28px); }
.drag-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .drag-arrow { width: 42px; height: 42px; } .pp .drag-arrow { top: calc(8px + 28vh); } }

/* "Your kitchen, your color": real woods and colors from pieces we have built */
.lc-note { margin-top: clamp(14px, 2vw, 22px); max-width: 560px; color: #4a372d; font-size: 15px; }
.fin { list-style: none; padding: 0; margin-top: clamp(22px, 3vw, 36px); display: grid; gap: clamp(10px, 1.6vw, 18px); grid-template-columns: repeat(9, minmax(0, 1fr)); }
.fin__img {
  display: block; aspect-ratio: 1; border-radius: 5px; position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  /* a thick sample board: lit top edge, shaded bottom edge, soft shadow on the table */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.14),
              0 14px 20px -12px rgba(43,28,21,.55), 0 3px 5px -2px rgba(43,28,21,.25);
  transition: transform .45s ease, box-shadow .45s ease;
}
.fin__img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(0,0,0,.14)); }
.fin__card:hover .fin__img { transform: translateY(-4px) rotate(-.6deg); }
.fin__card { padding-bottom: 6px; }
.fin__name { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.fin__used { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.fin__used a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.fin__used a:hover { color: var(--accent); }
@media (max-width: 1000px) { .fin { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Kitchen page: one finished kitchen per row, big photo + a short note ---------- */
.kit-head { text-align: center; max-width: 720px; margin: 0 auto; padding: calc(var(--hdr-h) + clamp(28px, 6vh, 64px)) var(--gutter) clamp(28px, 5vw, 56px); }
.kit-head .lede { margin: 0 auto; }
.kit { display: grid; gap: clamp(36px, 6vw, 84px); padding: 0 var(--gutter) clamp(36px, 6vw, 80px); max-width: 1500px; margin: 0 auto; }
.kit-row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.kit-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
.kit-row:nth-child(even) .kit-row__img { order: 2; }
.kit-row__img { display: block; overflow: hidden; border-radius: 4px; background: var(--surface); }
.kit-row__img img { width: 100%; height: auto; display: block; transition: transform .8s ease; }
.kit-row__img:hover img { transform: scale(1.04); }
.kit-row__n { font-size: 11px; letter-spacing: .24em; color: var(--accent); margin-bottom: 12px; }
.kit-row__t { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; margin-bottom: 14px; }
.kit-row__txt p:last-child { color: #4a372d; max-width: 360px; }
@media (max-width: 860px) {
  .kit-row, .kit-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .kit-row:nth-child(even) .kit-row__img { order: 0; }
  .kit-row__txt p:last-child { max-width: none; }
}

/* ---------- Shoe cabinets page: model tabs, photo stage with color dots, size buttons ---------- */
.sh-tabs { display: flex; justify-content: center; gap: 10px; padding: 10px var(--gutter) 22px; }
.sh-tab { padding: 11px 26px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 12px/1 var(--sans, inherit); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sh-tab:hover { border-color: var(--ink); }
.sh-tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sh { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 72px); align-items: center;
  padding: 0 var(--gutter) clamp(36px, 6vw, 80px); max-width: 1500px; margin: 0 auto; }
.sh__stage { position: relative; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 40px -28px rgba(43,28,21,.5); }
.sh__row { display: flex; overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.sh__row::-webkit-scrollbar { display: none; }
.sh__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.sh__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.sh__slide.is-portrait img { object-fit: contain; }
.sh__slide:hover img { transform: scale(1.04); }
.sh__slide.is-portrait:hover img { transform: none; }
.sh__pill { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px;
  background: rgba(43,28,21,.62); backdrop-filter: blur(6px); border-radius: 999px; color: #fff; }
.sh__dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: var(--c); cursor: pointer; padding: 0; position: relative; }
.sh__dot.is-on { border-color: #fff; }
.sh__dot.is-on::after { content: ""; position: absolute; left: 50%; top: 46%; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg); mix-blend-mode: difference; }
.sh__cname { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-inline-start: 4px; }
.sh__dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; padding: 7px 10px; background: rgba(43,28,21,.5); border-radius: 999px; }
.sh__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .25s, background .25s; }
.sh__dots i.is-on { width: 20px; border-radius: 4px; background: #fff; }
.sh__dots[hidden], .sh__pill[hidden] { display: none; }
.sh__info .lede { text-align: left; margin: 0 0 14px; }
.sh__info .prose { text-align: left; }
.sh__sizebox { margin-top: 26px; }
.sh__lbl { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.sh__sizes { display: flex; gap: 10px; }
.sh__size { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 13px/1 var(--sans, inherit); cursor: pointer; transition: all .2s; }
.sh__size:hover:not([disabled]) { border-color: var(--ink); }
.sh__size.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sh__size[disabled] { opacity: .3; cursor: not-allowed; }
.sh-work { max-width: 1500px; margin: 0 auto; }
.sh-work[hidden] { display: none; }
.sh-work__wrap { position: relative; }
.sh-work .pp__row { padding-inline: 0; }
.sh-work .pp__shot { height: min(46vh, 420px); }
.sh-work .pp__shot img { height: 100%; width: auto; }
.sh .drag-arrow, .sh-work .drag-arrow { }
@media (max-width: 860px) { .sh { grid-template-columns: minmax(0, 1fr); } }
html[dir="rtl"] .sh__row { direction: ltr; }
.sh__dots { left: auto; right: 16px; transform: none; bottom: 22px; }
.sh__sizebox { margin-bottom: 30px; }
.sh__info .ask { margin-top: 0; }
@media (max-width: 600px) { .sh__pill { left: 10px; bottom: 10px; } .sh__dots { right: 10px; bottom: 14px; } }

/* sizes sit right under the picture */
.sh__left { min-width: 0; }
.sh__left .sh__sizebox { margin: 18px 0 0; }
.sh__stage { cursor: zoom-in; }
.sh__row { cursor: zoom-in; }
.sh__row.is-drag { cursor: grabbing; }
.pp__shot img { cursor: zoom-in; }

/* full-screen viewer */
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(20,12,8,.96); direction: ltr; }
.lb[hidden] { display: none; }
.lb-open { overflow: hidden; }
.lb__view { width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.lb__track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.22,.7,.2,1); will-change: transform; }
.lb__slide { flex: 0 0 100%; display: grid; place-items: center; }
.lb__img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; user-select: none; }
.lb__x, .lb__a { position: absolute; z-index: 2; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; cursor: pointer; transition: background .2s; }
.lb__x:hover, .lb__a:hover { background: rgba(255,255,255,.28); }
.lb__x { top: 18px; right: 18px; width: 48px; height: 48px; }
.lb__a { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb__a--prev { left: clamp(10px, 2vw, 28px); }
.lb__a--next { right: clamp(10px, 2vw, 28px); }
.lb__a[hidden] { display: none; }
.lb__n { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .2em; }
@media (max-width: 600px) { .lb__a { width: 42px; height: 42px; } .lb__x { top: 10px; right: 10px; width: 42px; height: 42px; } }

.sh__cta { display: flex; justify-content: center; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); }

/* bigger picture on the shoe cabinets page */
.sh { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); max-width: 1700px; gap: clamp(24px, 4vw, 64px); }
.sh__slide { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .sh { grid-template-columns: minmax(0, 1fr); } .sh__slide { aspect-ratio: 4 / 3; } }
@media (min-width: 861px) and (max-width: 1150px) { .sh { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
/* finish samples: the name and the models they were used on, easy to read */
.fin__name { margin-top: 12px; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.fin__used { margin-top: 4px; gap: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.fin__used a { text-decoration: none; opacity: .78; }
.fin__used a + a::before { content: "·"; margin: 0 6px; opacity: .5; }
.fin__used a:hover { color: var(--accent); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.fin__group { margin-top: clamp(26px, 3.5vw, 44px); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.fin__group + .fin { margin-top: 16px; }
.fin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fin { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* trust strip on the home page: small, three facts separated by hairlines */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: clamp(8px, 2vw, 24px) auto clamp(36px, 5vw, 64px);
  padding: clamp(18px, 2.4vw, 28px) var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.trust__item { padding: 0 clamp(8px, 2vw, 28px); }
.trust__item + .trust__item { border-inline-start: 1px solid var(--line); }
.trust__big { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; color: var(--ink); }
.trust__cap { margin-top: 6px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; gap: 16px; } .trust__item + .trust__item { border-inline-start: 0; border-top: 1px solid var(--line); padding-top: 16px; } }

/* home category row, PC / tablet: smaller cards so about three and a half show at once (phones keep their own size above) */
@media (min-width: 481px) {
  .railcard { flex: 0 0 clamp(260px, 25vw, 440px); }
  .railcard__media { aspect-ratio: 4 / 5; }
}

/* phones: each picture is one full-width slide, shown whole instead of cropped by a fixed height */
@media (max-width: 600px) {
  .pp__shot { height: auto; width: calc(100vw - 2 * var(--gutter)); }
  .pp__shot img { width: 100%; height: auto; }
  .pp .drag-arrow { top: calc(8px + (100vw - 2 * var(--gutter)) * .3); }
}
@media (max-width: 600px) {
  .pp__row { align-items: flex-start; }
  .pp__shot { aspect-ratio: 4 / 3; overflow: hidden; }
  .pp__shot img { height: 100%; object-fit: cover; }
  .pp__shot.is-portrait img { object-fit: contain; }
  .pp .drag-arrow { top: calc(8px + (100vw - 2 * var(--gutter)) * .375); }
}

/* phones only: floating WhatsApp + call buttons */
.fab { position: fixed; right: 14px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.fab[hidden] { display: none; }
.fab__b { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px -6px rgba(43,28,21,.55); }
.fab__b--wa { background: #2f8f55; }
.fab__b--tel { background: var(--accent); }
html[dir="rtl"] .fab { right: auto; left: 14px; }
html.lb-open .fab { display: none; }

/* contact form: honeypot field (kept out of sight for people, visible to spam robots) and the error line */
.ct-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-msg--err { color: #b3372f; }


/* four facts in a row (Built to last, resellers) */
.spec--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .spec--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .spec--4 { grid-template-columns: 1fr; } }
/* home strip: four facts */
.trust { max-width: 1080px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) and (min-width: 561px) { .trust { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } .trust__item:nth-child(3) { border-inline-start: 0; } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* ---------------- resellers page ---------------- */
.rs-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1180px;
  margin: calc(var(--hdr-h) + clamp(14px, 3vw, 40px)) auto clamp(28px, 4vw, 56px); padding-inline: var(--gutter); }
.rs-kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.rs-hero__text .lede { margin-top: 16px; max-width: 460px; }
.rs-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rs-btns--center { justify-content: center; }
.rs-mosaic { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 4 / 3; }
.rs-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; min-height: 0; }
.rs-mosaic__a { grid-row: 1 / 3; }
.rs-nums { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin: 0 auto; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(22px, 3vw, 40px) 0; }
.rs-num { padding: 0 clamp(8px, 2vw, 24px); }
.rs-num + .rs-num { border-inline-start: 1px solid var(--line); }
.rs-num__big { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(44px, 6vw, 84px); line-height: 1; color: var(--copper); }
.rs-num__cap { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 34px); max-width: 1080px; margin: 0 auto; }
.rs-step { border-top: 1px solid var(--line); padding-top: 16px; }
.rs-step__n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 42px; line-height: 1; color: var(--copper); margin-bottom: 10px; }
.rs-step h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.rs-step p { font-size: 14px; line-height: 1.6; color: #4a372d; }
.rs-step p + p { margin-top: 8px; font-weight: 600; color: var(--ink); }
.rs-range { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 1180px; margin: 0 auto; }
.rs-cta { max-width: 1080px; margin: clamp(40px, 6vw, 84px) var(--gutter); background: var(--ink); color: #f3ecdf; border-radius: 6px;
  padding: clamp(36px, 6vw, 72px) var(--gutter); text-align: center; }
@media (min-width: 1160px) { .rs-cta { margin-inline: auto; } }
.rs-cta .lc-h { color: #f3ecdf; }
.rs-cta .lede { color: #d9cbb6; margin: 14px auto 0; max-width: 560px; }
.rs-cta .pill { background: #f3ecdf; color: var(--ink); border-color: #f3ecdf; }
.rs-cta .pill:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.rs-cta .pill--ghost { background: transparent; color: #f3ecdf; border-color: #8a7664; }
.rs-cta .pill--ghost:hover { background: #f3ecdf; color: var(--ink); border-color: #f3ecdf; }
@media (max-width: 900px) {
  .rs-hero { grid-template-columns: 1fr; }
  .rs-steps { grid-template-columns: repeat(2, 1fr); }
  .rs-nums { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .rs-num:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 520px) {
  .rs-steps { grid-template-columns: 1fr; }
  .rs-range { grid-template-columns: repeat(2, 1fr); }
}
.rs-hero__text .lede { margin-inline: 0; text-align: start; }
.rs-mosaic { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.rs-step p.rs-step__n { font-size: 42px; line-height: 1; color: var(--copper); margin-bottom: 10px; font-weight: 400; }
.rs-range { --n: 5; --g: clamp(14px, 2vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.rs-range .card { flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width: 0; }
@media (max-width: 900px) { .rs-range { --n: 3; } }
@media (max-width: 520px) { .rs-range { --n: 2; } }

/* detailed furniture drawings in the Dimensions section */
.dimcard svg .art { stroke: rgba(43, 28, 21, .55); stroke-width: .7; stroke-linejoin: round; }
.dimcard svg .art-no { stroke: none; }
.dimcard svg .art-ln { stroke: rgba(43, 28, 21, .45); stroke-width: .6; fill: none; }

/* ---------------- bedroom showcase: baroque ornament around the collection name (richer with the finish tier) ---------------- */
.coll-orn { position: absolute; left: 3vw; right: 3vw; top: calc(var(--hdr-h) + 10px); bottom: 14px; pointer-events: none; z-index: 1;
  --cw: clamp(96px, 15vw, 240px); --u: calc(var(--cw) / 200);
  --oc: rgba(255, 255, 255, .8); --of: rgba(255, 255, 255, .8); --frame: rgba(255, 255, 255, .6); }
.coll-orn--t2 { --oc: #f4e4c8; --of: #f4e4c8; --frame: rgba(244, 228, 200, .8); }
.coll-orn--t3 { --oc: url(#orn-gold); --of: url(#orn-gold); --frame: #e6c48a; }
.coll-orn::before { content: ""; position: absolute; inset: -4px; opacity: 0; transition: opacity 2.4s ease .3s; }
.coll-orn--t2::before { background: radial-gradient(ellipse 34% 40% at 0 0, rgba(244, 228, 200, .16), transparent), radial-gradient(ellipse 34% 40% at 100% 0, rgba(244, 228, 200, .16), transparent),
  radial-gradient(ellipse 34% 40% at 0 100%, rgba(244, 228, 200, .16), transparent), radial-gradient(ellipse 34% 40% at 100% 100%, rgba(244, 228, 200, .16), transparent); }
.coll-orn--t3::before { background: radial-gradient(ellipse 38% 46% at 0 0, rgba(226, 184, 120, .34), transparent), radial-gradient(ellipse 38% 46% at 100% 0, rgba(226, 184, 120, .34), transparent),
  radial-gradient(ellipse 38% 46% at 0 100%, rgba(226, 184, 120, .34), transparent), radial-gradient(ellipse 38% 46% at 100% 100%, rgba(226, 184, 120, .34), transparent); }
.coll-orn.is-in::before { opacity: 1; }
.of { position: absolute; display: block; background: var(--frame); opacity: 0; }
.of--t { left: var(--cw); right: var(--cw); top: calc(var(--u) * var(--k)); height: 1px; }
.of--b { left: var(--cw); right: var(--cw); bottom: calc(var(--u) * var(--k)); height: 1px; }
.of--l { top: var(--cw); bottom: var(--cw); left: calc(var(--u) * var(--k)); width: 1px; }
.of--r { top: var(--cw); bottom: var(--cw); right: calc(var(--u) * var(--k)); width: 1px; }
.of-strip { position: absolute; left: var(--cw); right: var(--cw); height: calc(var(--u) * 4); opacity: 0; }
.of-strip--t { top: calc(var(--u) * 1.5); } .of-strip--b { bottom: calc(var(--u) * 1.5); }
.coll-orn--t2 .of-strip { background: radial-gradient(circle, var(--frame) 0 1.3px, transparent 1.6px) 0 50% / 9px 100% repeat-x; }
.coll-orn--t3 .of-strip { background: repeating-linear-gradient(90deg, var(--frame) 0 3px, transparent 3px 7px); height: calc(var(--u) * 4.4); top: calc(var(--u) * 1.3); }
.coll-orn--t3 .of-strip--b { top: auto; bottom: calc(var(--u) * 1.3); }
.orn { position: absolute; display: block; width: var(--cw); height: auto; overflow: visible; opacity: 0; }
.orn--tl { left: 0; top: 0; } .orn--tr { right: 0; top: 0; transform: scaleX(-1); }
.orn--bl { left: 0; bottom: 0; transform: scaleY(-1); } .orn--br { right: 0; bottom: 0; transform: scale(-1, -1); }
.orn--m { width: clamp(160px, 25vw, 380px); left: 50%; margin-left: calc(clamp(160px, 25vw, 380px) / -2); }
.orn--mt { top: clamp(14px, 4vh, 34px); }
.orn--mb { bottom: clamp(64px, 11vh, 104px); transform: scaleY(-1); }
.os { fill: none; stroke: var(--oc); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.op { fill: var(--of); fill-opacity: .3; stroke: var(--oc); stroke-width: 1.1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.oc { fill: var(--oc); }
.ov { stroke-width: .7px; opacity: .8; }
.coll-orn--t3 .orn { filter: drop-shadow(0 0 5px rgba(226, 184, 120, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.coll-orn--t2 .orn { filter: drop-shadow(0 0 3px rgba(244, 228, 200, .35)) drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.coll-orn--t1 .orn { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.coll-orn.is-in .of, .coll-orn.is-in .of-strip { animation: ofIn 1.5s ease forwards; }
.coll-orn.is-in .of[style*="--k:7"] { animation-delay: .25s; } .coll-orn.is-in .of[style*="--k:14"] { animation-delay: .5s; }
.coll-orn.is-in .orn--c { animation: unfurl 1.7s cubic-bezier(.2, .7, .2, 1) .4s forwards; }
.coll-orn.is-in .orn--m { animation: unfold 1.7s cubic-bezier(.2, .7, .2, 1) .9s forwards; }
.coll-orn--t3.is-in .orn--c { animation-duration: 2.6s; animation-delay: .6s; }
.coll-orn--t3.is-in .orn--m { animation-duration: 2.6s; animation-delay: 1.5s; }
@keyframes ofIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes unfurl { from { opacity: 0; clip-path: inset(0 100% 100% 0); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); } }
@keyframes unfold { from { opacity: 0; clip-path: inset(0 50% 0 50%); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); } }
@media (prefers-reduced-motion: reduce) { .coll-orn .of, .coll-orn .of-strip, .coll-orn .orn { opacity: 1 !important; animation: none !important; } .coll-orn::before { opacity: 1; transition: none; } }
@media (max-width: 600px) { .coll-orn { left: 10px; right: 10px; --cw: 28vw; } .orn--m { width: 52vw; margin-left: -26vw; } .of-strip { display: none; } }

/* the first (soft) ornament design: inset frame lines, no gold wash, scaled strokes */
.coll-orn--soft::before { display: none; }
.coll-orn--soft .of { background: none; border: 1px solid var(--frame); }
.coll-orn--soft .of1 { inset: 0; } .coll-orn--soft .of2 { inset: 7px; } .coll-orn--soft .of3 { inset: 14px; }
.coll-orn--soft.is-in .of { animation: ofIn 1.5s ease forwards; }
.coll-orn--soft.is-in .of2 { animation-delay: .25s; } .coll-orn--soft.is-in .of3 { animation-delay: .5s; }
.os.sf { stroke-width: 1.15; vector-effect: none; }
.op.sf { fill-opacity: .16; stroke-width: 1; vector-effect: none; }
.coll-orn--soft .orn { filter: drop-shadow(0 0 4px rgba(226, 184, 120, .0)); }
.coll-orn--t3.coll-orn--soft .orn { filter: drop-shadow(0 0 6px rgba(226, 184, 120, .5)); }
.coll-orn--t2.coll-orn--soft .orn { filter: drop-shadow(0 0 3px rgba(244, 228, 200, .35)); }

/* ---------------- style 3: a carved plaque (cartouche) around the collection name ---------------- */
.cart { position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * clamp(26px, 5.5vh, 60px)); bottom: calc(-1 * clamp(22px, 4.5vh, 52px));
  left: calc(var(--gutter) - clamp(30px, 5vw, 84px)); right: calc(var(--gutter) - clamp(30px, 5vw, 84px));
  --cc: clamp(40px, 5.2vw, 86px); --cu: calc(var(--cc) / 120);
  --oc: rgba(255, 255, 255, .85); --of: rgba(255, 255, 255, .85); --frame: rgba(255, 255, 255, .7); }
.cart--t2 { --oc: #f4e4c8; --of: #f4e4c8; --frame: rgba(244, 228, 200, .85); }
.cart--t3 { --oc: url(#orn-gold); --of: url(#orn-gold); --frame: #e6c48a; }
.cart__fill { position: absolute; inset: 0; opacity: 0; }
.cart--t2 .cart__fill { background: rgba(18, 11, 7, .22); }
.cart--t3 .cart__fill { background: radial-gradient(ellipse at 50% 50%, rgba(226, 184, 120, .16), rgba(18, 11, 7, .3) 75%); }
.ce { position: absolute; display: block; background: var(--frame); opacity: 0; }
.ce--t { left: var(--cc); right: var(--cc); top: calc(var(--cu) * var(--k)); height: 1px; }
.ce--b { left: var(--cc); right: var(--cc); bottom: calc(var(--cu) * var(--k)); height: 1px; }
.ce--l { top: var(--cc); bottom: var(--cc); left: calc(var(--cu) * var(--k)); width: 1px; }
.ce--r { top: var(--cc); bottom: var(--cc); right: calc(var(--cu) * var(--k)); width: 1px; }
.cc { position: absolute; width: var(--cc); height: var(--cc); overflow: visible; opacity: 0; }
.cc--tl { left: 0; top: 0; } .cc--tr { right: 0; top: 0; transform: scaleX(-1); }
.cc--bl { left: 0; bottom: 0; transform: scaleY(-1); } .cc--br { right: 0; bottom: 0; transform: scale(-1, -1); }
.ck { position: absolute; left: 50%; overflow: visible; opacity: 0; }
.ck--t { bottom: calc(100% - 1px); width: clamp(120px, 16vw, 250px); margin-left: calc(clamp(120px, 16vw, 250px) / -2); }
.ck--b { top: calc(100% - 1px); width: clamp(90px, 11vw, 170px); margin-left: calc(clamp(90px, 11vw, 170px) / -2); transform: scaleY(-1); }
.ce2 { position: absolute; top: 50%; width: clamp(24px, 3.4vw, 54px); margin-top: calc(-1 * clamp(24px, 3.4vw, 54px)); overflow: visible; opacity: 0; }
.ce2--l { right: calc(100% - 1px); } .ce2--r { left: calc(100% - 1px); transform: scaleX(-1); }
.cart--t3 svg { filter: drop-shadow(0 0 5px rgba(226, 184, 120, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.cart--t2 svg { filter: drop-shadow(0 0 3px rgba(244, 228, 200, .35)) drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.cart--t1 svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.cart.is-in .cart__fill { animation: ofIn 1.6s ease forwards; }
.cart.is-in .ce--t, .cart.is-in .ce--b { animation: ceX 1.3s cubic-bezier(.2, .7, .2, 1) .2s forwards; }
.cart.is-in .ce--l, .cart.is-in .ce--r { animation: ceY 1.3s cubic-bezier(.2, .7, .2, 1) .2s forwards; }
.cart.is-in .cc { animation: unfurl 1.6s cubic-bezier(.2, .7, .2, 1) .6s forwards; }
.cart.is-in .ck, .cart.is-in .ce2 { animation: unfold 1.6s cubic-bezier(.2, .7, .2, 1) 1s forwards; }
.cart--t3.is-in .cc { animation-duration: 2.2s; } .cart--t3.is-in .ck, .cart--t3.is-in .ce2 { animation-duration: 2.4s; animation-delay: 1.2s; }
@keyframes ceX { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes ceY { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cart .ce, .cart .cc, .cart .ck, .cart .ce2, .cart .cart__fill { opacity: 1 !important; animation: none !important; } }
.coll-hero__name[style*="--len"] { font-size: min(clamp(64px, 13vw, 190px), calc(72vw / (var(--len) * 1.05))); }
.coll-orn--light .orn { width: clamp(70px, 10vw, 160px); }
@media (max-width: 600px) { .cart { left: calc(var(--gutter) - 12px); right: calc(var(--gutter) - 12px); } .ce2 { display: none; } }

/* ---------------- normal footer: brand + social icons, three link columns, copyright ---------------- */
.ftr__in--2 { grid-template-columns: minmax(200px, 1fr) 2.6fr; align-items: start; }
.ftr__brand .logo--ftr { display: inline-block; }
.ftr__brand .logo--ftr img { height: 78px; width: auto; display: block; }
.ftr__soc { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.ftr__soc a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.ftr__soc a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ftr__soc svg { width: 17px; height: 17px; }
.ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ftr__col a bdi { white-space: nowrap; }
@media (max-width: 900px) { .ftr__in--2 { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr__col:last-child { grid-column: 1 / -1; } }

/* projects: pictures open full screen; the caption shows under the picture */
.masonry .pj img { cursor: zoom-in; }
.lb__slide { position: relative; }
.lb__slide--cap .lb__img { max-height: 78vh; }
.lb__cap { position: absolute; left: 0; right: 0; bottom: clamp(46px, 7vh, 64px); text-align: center; color: #e9dfcd; font-size: 14px; letter-spacing: .04em; padding: 0 64px; }
.rs-more { text-align: center; margin-top: clamp(30px, 4vw, 52px); }

/* resellers: the warranty, centred under the four numbers */
.rs-hero__text .lede { max-width: 540px; }
.rs-warranty { padding-top: clamp(26px, 3.5vw, 48px); padding-bottom: clamp(10px, 2vw, 24px); }
.rs-warranty__label { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.rs-warranty__big { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(44px, 6vw, 84px); line-height: 1.05; color: var(--copper); margin-top: 10px; }
.rs-warranty__line { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); color: #4a372d; margin-top: 8px; }

/* technical drawings with dimensions in millimetres (Kare) */
.dimcard svg .t-f { fill: #fffdf8; } .dimcard svg .t-l { fill: #ece3d3; } .dimcard svg .t-t { fill: #f7f1e5; }
.dimcard svg .t-g { fill: #d9e1e2; } .dimcard svg .t-p { fill: #f1e9dc; }
.dimcard svg .t-ln { stroke: var(--ink); stroke-width: 1; stroke-linecap: round; fill: none; }
.dimcard svg .t-thin { stroke-width: .6; opacity: .7; }
.dimcard svg .t-ext { stroke: var(--muted); stroke-width: .6; stroke-dasharray: 2 2; }
.dimcard svg .t-dim { stroke: var(--ink); stroke-width: .9; }
.dimcard svg polygon.t-arr { fill: var(--ink); stroke: none; }
.dimcard svg .t-txt { font-family: var(--sans); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.dimcard svg .t-num { font-size: 12px; font-weight: 500; fill: var(--ink); }
.dimcard svg .t-unit { font-size: 9px; fill: var(--muted); }

/* the Dimensions group is always open: no folding, no arrow, no pointer */
.dimgroup__sum { cursor: default; padding-bottom: 8px; }
.dimgroup__sum:hover .dimgroup__title { color: inherit; }
.dimgroup { border-bottom: 0; }
.dimcard svg .t-b { fill: #d6c1ab; }