/* ==========================================================================
   Luxentte — lighting in the dark
   Palette is taken from the catalogue: graphite rooms, linen walls,
   brass fittings, and the aubergine of the 2025–2026 cover.
   ========================================================================== */

:root {
  /* Light gallery: white walls, warm grey floors, ink type, brass fittings.
     (Token names are historical: --graphite is the page ground, --linen the ink.) */
  --graphite: #ffffff;
  --smoke: #f5f4f1;
  --smoke-2: #ebe8e2;
  --linen: #1b1a18;
  --ash: #5e5952;
  --ash-2: #8a847b;
  --brass: #c4a067;
  --brass-2: #8a6a37;
  --plum: #3d1630;
  --line: rgb(27 26 24 / 0.1);
  --line-2: rgb(27 26 24 / 0.24);
  --btn-hover: #3a3733;
  --chip-count: rgb(255 255 255 / 0.62);

  /* Motion tokens (Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Type scale */
  --font: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --fs-display: clamp(3.1rem, 8.6vw, 8.8rem);
  --fs-h1: clamp(2.6rem, 6.2vw, 5.6rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.6rem);
  --fs-h3: clamp(1.75rem, 3vw, 2.75rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1440px;
  --header-h: 76px;
  --radius: 4px;

  color-scheme: light;
}

/* Photos and dark panels keep the original night palette */
.hero, .lightbox__close, .on-dark {
  --graphite: #1d1b19; --smoke: #2a2724; --smoke-2: #34302c;
  --linen: #f4efe6; --ash: #cfc7bb; --ash-2: #a39b90;
  --brass: #c9a46a; --brass-2: #e3c48e;
  --line: rgb(255 255 255 / 0.18); --line-2: rgb(255 255 255 / 0.34);
  --btn-hover: #ffffff; --chip-count: #6e675e;
  color-scheme: dark; color: var(--linen);
}

/* ---------- Fonts (self-hosted, Urbanist variable 100–900) ---------- */
@font-face {
  font-family: "Urbanist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/urbanist-latin-wght-normal.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: "Urbanist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/urbanist-latin-ext-wght-normal.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: "Bodoni Moda"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/bodoni-moda-latin-wght-normal.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: "Bodoni Moda"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("../fonts/bodoni-moda-latin-ext-wght-normal.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;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--graphite);
  color: var(--linen);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--brass); color: var(--graphite); }
:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--linen); color: var(--graphite); border-radius: var(--radius); transform: translateY(-160%); transition: transform 200ms var(--ease-out); }
.skip:focus { transform: translateY(0); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--light { background: var(--linen); color: var(--graphite); }
.btn--brass { background: var(--linen); color: var(--graphite); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--linen); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover, .btn--brass:hover { background: var(--btn-hover); }
  .btn--ghost:hover { border-color: var(--linen); }
}

.link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; color: var(--linen);
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.link .i { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover .i { transform: translateX(4px); }
  .link:hover { color: var(--brass-2); }
}

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: transform 160ms var(--ease-out), border-color 200ms ease, background-color 200ms ease;
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { border-color: var(--line-2); background: rgb(127 120 110 / 0.08); }
}

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.chip span { color: var(--ash-2); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.chip:active { transform: scale(0.97); }
.chip[aria-current="true"] { background: var(--linen); color: var(--graphite); border-color: var(--linen); }
.chip[aria-current="true"] span { color: var(--chip-count); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-current="true"]):hover { border-color: var(--line-2); }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.site-header.is-solid { border-color: var(--line); box-shadow: 0 10px 30px -24px rgb(40 30 20 / 0.4); }
main { padding-top: var(--header-h); }

.site-header__inner {
  height: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.brand { display: block; color: var(--linen); line-height: 0; }
.brand__mark { width: 132px; height: auto; display: block; }

/* desktop nav */
.nav { display: flex; justify-content: center; gap: 4px; height: 100%; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 100%;
  padding: 0 16px; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ash); transition: color 200ms ease;
}
.nav__link span { position: relative; }
.nav__link span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--linen);
  transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--linen); }
.nav__link[aria-current="page"] span::after { transform: scaleX(1); }
.nav__chev { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--linen); }
  .nav__link:hover span::after { transform: scaleX(1); transform-origin: left; }
}

/* mega menu: drops from the header bar, opens on hover/focus */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgb(40 30 20 / 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.nav__item--mega:focus-within .mega,
.nav__item--mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__item--mega:focus-within .nav__chev,
.nav__item--mega.is-open .nav__chev { transform: rotate(180deg); }
.mega__inner {
  max-width: var(--max); margin-inline: auto; padding: 40px var(--gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 48px; align-items: start;
}
.mega__title { font-family: var(--display); font-size: 2rem; line-height: 1.1; margin-bottom: 12px; }
.mega__text { color: var(--ash); font-size: 0.95rem; margin-bottom: 20px; max-width: 32ch; }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; }
.mega__list a {
  display: block; padding: 9px 0; font-size: 0.98rem; color: var(--ash);
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, padding-left 0s;
}
.mega__list a:focus-visible, .mega__list a.is-active { color: var(--linen); }
@media (hover: hover) and (pointer: fine) { .mega__list a:hover { color: var(--linen); } }
.mega__preview { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--smoke); }
.mega__preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease; }
.mega__preview img.is-swapping { opacity: 0.2; }

/* tools */
.header-tools { display: flex; align-items: center; gap: 14px; justify-self: end; }
.search-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 14px; min-width: 168px;
  border-radius: 999px; background: var(--smoke); color: var(--ash-2);
  font-size: 0.88rem; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.search-pill .i { width: 18px; height: 18px; color: var(--ash); }
.search-pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .search-pill:hover { background: var(--smoke-2); color: var(--linen); } }
.lang { display: flex; gap: 2px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; }
.lang a { padding: 6px 7px; color: var(--ash-2); border-radius: 4px; transition: color 200ms ease; }
.lang a[aria-current="true"] { color: var(--linen); }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--linen); } }
.btn--sm { min-height: 40px; padding: 0 20px; font-size: 0.88rem; }

.menu-btn { display: none; width: 44px; height: 44px; margin-left: -10px; place-items: center; border-radius: 50%; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.menu-btn:active { transform: scale(0.94); background: var(--smoke); }
.menu-btn__lines { display: grid; gap: 7px; width: 22px; }
.menu-btn__lines i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease-out), width 300ms var(--ease-out); }
.menu-btn__lines i:last-child { width: 14px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { width: 22px; transform: translateY(-4.25px) rotate(-45deg); }

/* Mobile menu: a full white sheet under the header */
.menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49;
  background: var(--graphite);
  padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 420ms var(--ease-drawer);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu.is-closing { transition-duration: 260ms; }
.menu__nav { display: grid; }
.menu__link {
  font-family: var(--display); font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 400; line-height: 1.25;
  padding: 4px 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out), color 200ms ease;
}
.menu__link[aria-current="page"] { color: var(--brass-2); }
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 40ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 120ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 160ms; }
.menu__cats { opacity: 0; transition: opacity 400ms ease 180ms; }
.menu.is-open .menu__cats { opacity: 1; }
.menu__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash-2); margin-bottom: 6px; }
.menu__cats a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--linen); font-size: 1rem; }
.menu__cats a .i { width: 16px; height: 16px; color: var(--ash-2); }
.menu__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.menu__foot .btn { flex: 1; }
body.menu-open { overflow: hidden; }

/* ---------- Hero: the dimmer ---------- */
.hero {
  position: relative; isolation: isolate;
  height: calc(100svh - var(--header-h)); min-height: 560px; max-height: 1000px;
  overflow: hidden; overflow: clip;
  display: grid; align-content: end;
}
.hero__stage { position: absolute; inset: 0; z-index: -1; background: #0f0d0b; }
.hero__slide { position: absolute; inset: 0; opacity: 0; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transform: scale(1.06);
}
.hero__slide.is-active img { animation: drift 9s linear forwards; }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }

/* The "room light": an overlay whose opacity is the dimmer. */
.hero__dark {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 60% 30%, #120c06 0%, #080604 100%);
  opacity: 0.96;
  will-change: opacity;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(15 13 11 / 0.55) 0%, rgb(15 13 11 / 0) 22%),
    linear-gradient(0deg, rgb(15 13 11 / 0.94) 0%, rgb(15 13 11 / 0.5) 40%, rgb(15 13 11 / 0) 66%),
    linear-gradient(90deg, rgb(15 13 11 / 0.72) 0%, rgb(15 13 11 / 0.25) 45%, rgb(15 13 11 / 0) 65%);
}

.hero__content {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) clamp(28px, 4vh, 44px);
  padding-right: calc(var(--gutter) + 72px);
}
.hero__title {
  font-family: var(--display); font-size: var(--fs-display); font-weight: 400; line-height: 0.94; letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: block; }
.hero__sub { margin-top: 24px; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: rgb(236 229 216 / 0.82); font-weight: 300; }
.hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Page-load sequence: lines rise, then the copy, while the light comes on. */
.js .hero__title .line > span { transform: translateY(105%); }
.js .hero__sub, .js .hero__ctas, .js .hero__bar, .js .dimmer { opacity: 0; transform: translateY(12px); }
.hero.is-lit .hero__title .line > span { transform: none; transition: transform 1100ms var(--ease-out) calc(250ms + var(--i) * 90ms); }
.hero.is-lit .hero__sub { opacity: 1; transform: none; transition: opacity 800ms ease 650ms, transform 900ms var(--ease-out) 650ms; }
.hero.is-lit .hero__ctas { opacity: 1; transform: none; transition: opacity 800ms ease 760ms, transform 900ms var(--ease-out) 760ms; }
.hero.is-lit .hero__bar, .hero.is-lit .dimmer { opacity: 1; transform: none; transition: opacity 800ms ease 950ms, transform 900ms var(--ease-out) 950ms; }

.hero__bar {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 18px var(--gutter) 22px;
  display: flex; align-items: center; gap: 24px;
  border-top: 1px solid var(--line);
}
.hero__scene { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--linen); min-width: 0; }
.hero__scene-name { display: inline-block; transition: opacity 300ms ease, filter 300ms ease; }
.hero__scene.is-swapping .hero__scene-name { opacity: 0; filter: blur(4px); }
@media (hover: hover) and (pointer: fine) { .hero__scene:hover { color: var(--brass-2); } }
.hero__dots { margin-left: auto; display: flex; gap: 6px; }
.hero__dot { width: 44px; height: 32px; display: grid; align-items: center; }
.hero__dot i { display: block; height: 2px; background: rgb(236 229 216 / 0.22); border-radius: 2px; overflow: hidden; position: relative; }
.hero__dot i::after {
  content: ""; position: absolute; inset: 0; background: var(--linen);
  transform: scaleX(0); transform-origin: left;
}
.hero__dot[aria-selected="true"] i::after { animation: progress var(--slide-ms, 7000ms) linear forwards; }
.hero.is-paused .hero__dot[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
@keyframes progress { to { transform: scaleX(1); } }

/* Dimmer control */
.dimmer {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 10px;
  padding: 14px 8px; border-radius: 999px;
  background: rgb(15 13 11 / 0.38);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dimmer__icon { color: var(--brass-2); display: grid; }
.dimmer__value { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--ash); min-width: 3ch; text-align: center; }
.dimmer__hint {
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%;
  font-size: 0.8rem; color: var(--ash); white-space: nowrap;
  opacity: 0; transform: translateX(6px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .dimmer:hover .dimmer__hint { opacity: 1; transform: none; }
}
.dimmer__range {
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 150px; margin: 0;
  background: transparent; cursor: ns-resize;
  --p: 100%;
}
.dimmer__range::-webkit-slider-runnable-track {
  width: 2px; border-radius: 2px;
  background: linear-gradient(to top, var(--brass) var(--p), rgb(236 229 216 / 0.2) var(--p));
}
.dimmer__range::-moz-range-track { width: 2px; background: rgb(236 229 216 / 0.2); border-radius: 2px; }
.dimmer__range::-moz-range-progress { width: 2px; background: var(--brass); border-radius: 2px; }
.dimmer__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--linen); margin-left: -7px; border: 0;
  box-shadow: 0 0 0 4px rgb(201 164 106 / 0.25), 0 0 18px 2px rgb(227 196 142 / var(--glow, 0.6));
  transition: transform 160ms var(--ease-out);
}
.dimmer__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--linen);
  box-shadow: 0 0 0 4px rgb(201 164 106 / 0.25), 0 0 18px 2px rgb(227 196 142 / 0.6);
}
.dimmer__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.dimmer__range:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 4px; }

/* ---------- Sections ---------- */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-title { font-family: var(--display); font-size: var(--fs-h2); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.sec-title--sm { font-size: var(--fs-h3); }

.intro { padding-block: clamp(96px, 14vw, 200px) clamp(72px, 10vw, 140px); }
.intro__text {
  font-size: clamp(1.7rem, 3.6vw, 3.1rem); font-weight: 300; line-height: 1.22; letter-spacing: -0.012em;
  max-width: 26ch; margin-bottom: 36px;
}

/* Words that light up as you scroll past them */
[data-reveal="words"] .w { transition: opacity 600ms ease; }
.js [data-reveal="words"] .w { opacity: 0.18; }
.js [data-reveal="words"].is-in .w { opacity: 1; transition-delay: calc(var(--i) * 28ms); }
@supports (animation-timeline: view()) {
  .js [data-reveal="words"] .w,
  .js [data-reveal="words"].is-in .w {
    opacity: 0.18; transition: none;
    animation: word-on linear both;
    animation-timeline: view();
    animation-range: cover calc(10% + var(--p) * 30%) cover calc(18% + var(--p) * 30%);
  }
  @keyframes word-on { to { opacity: 1; } }
}

/* Collections — alternating rows, like the catalogue's spreads */
.families { padding-bottom: clamp(80px, 10vw, 140px); }
.family {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
  padding-block: clamp(28px, 4vw, 56px);
}
.family--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.family--flip .family__media { order: 2; }
.family__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.family__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .family:hover .family__media img { transform: scale(1.035); }
}
.family__count { color: var(--brass); font-size: var(--fs-sm); font-weight: 500; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.family__name { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 16px; }
.family__desc { color: var(--ash); max-width: 36ch; margin-bottom: 24px; font-size: 1.05rem; }
.family-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 48px); }

/* Clip reveal for large images (marketing tier: longer is fine) */
.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); }
.js [data-reveal="clip"] img { transform: scale(1.12); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
.js [data-reveal="clip"].is-in img { transform: scale(1); transition: transform 1600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .js .family:hover [data-reveal="clip"].is-in img { transform: scale(1.035); transition-duration: 1200ms; }
}

/* ---------- Cards & rail ---------- */
.card { display: grid; gap: 4px; }
.card__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); margin-bottom: 12px; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 400ms ease; }
.card__title { font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.card__cat { color: var(--ash-2); font-size: var(--fs-sm); }
.card:active .card__media img { transform: scale(0.985); transition-duration: 160ms; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { transform: scale(1.045); }
  .card:hover .card__title { color: var(--brass-2); }
}

.rail-sec { padding-block: clamp(64px, 8vw, 120px); border-top: 1px solid var(--line); }
.rail-nav { display: flex; align-items: center; gap: 8px; }
.rail-hint { color: var(--ash-2); font-size: var(--fs-sm); margin-right: 8px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 380px);
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }
.rail__item { scroll-snap-align: start; }

/* ---------- Catalogue band ---------- */
.cat-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 80% at 25% 40%, rgb(196 160 103 / 0.22), transparent 70%),
    var(--smoke);
  padding-block: clamp(80px, 10vw, 150px);
}
.cat-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cat-band__text p { color: var(--ash); max-width: 40ch; margin-top: 20px; font-size: 1.1rem; }
.cat-band__meta { display: flex; gap: clamp(24px, 4vw, 48px); margin: 36px 0 40px; }
.cat-band__meta dt { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.cat-band__meta dd { color: var(--ash-2); font-size: var(--fs-sm); margin-top: 6px; }

.book {
  position: relative; display: block; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto;
  perspective: 1600px;
}
.book > span { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; transform-origin: left center; }
.book img { width: 100%; height: 100%; object-fit: cover; }
.book__cover {
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 4deg));
  box-shadow: 30px 40px 70px -24px rgb(40 30 20 / 0.45);
  transition: transform 600ms var(--ease-out);
}
.book__page { box-shadow: 10px 20px 40px -14px rgb(40 30 20 / 0.35); transition: transform 700ms var(--ease-out); }
.book__page--2 { transform: translate(6%, -3%) rotate(3deg); filter: brightness(0.7); }
.book__page--3 { transform: translate(11%, -6%) rotate(6deg); filter: brightness(0.5); }
.book.is-tilting .book__cover { transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .book:hover .book__page--2 { transform: translate(18%, -6%) rotate(7deg); }
  .book:hover .book__page--3 { transform: translate(34%, -10%) rotate(13deg); }
}

/* ---------- About strip & CTA ---------- */
.about-strip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(96px, 12vw, 180px); }
.about-strip__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
.about-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.about-strip__title { font-family: var(--display); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 24px; }
.about-strip__text p { color: var(--ash); font-size: 1.1rem; max-width: 46ch; margin-bottom: 28px; }

.cta {
  position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(100px, 13vw, 190px);
  border-top: 1px solid var(--line);
}
/* a cone of light falling from a pendant above */
.cta::before {
  content: ""; position: absolute; left: 50%; top: -10%; width: min(1100px, 140vw); aspect-ratio: 1.4;
  translate: -50% 0;
  background: radial-gradient(50% 60% at 50% 0%, rgb(196 160 103 / 0.22), rgb(196 160 103 / 0.06) 55%, transparent 75%);
  pointer-events: none;
}
.cta::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(40px, 6vw, 80px); background: linear-gradient(var(--line-2), transparent);
}
.cta__inner { position: relative; display: grid; justify-items: center; }
.cta__title { font-family: var(--display); font-size: var(--fs-h1); font-weight: 400; letter-spacing: -0.025em; line-height: 1; }
.cta__text { color: var(--ash); max-width: 46ch; margin: 24px 0 36px; font-size: 1.1rem; }

/* ---------- Page heads ---------- */
.page-head { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-title { font-family: var(--display); font-size: var(--fs-h1); font-weight: 400; line-height: 1; letter-spacing: -0.025em; }
.page-lead { margin-top: 18px; color: var(--ash); max-width: 52ch; font-size: var(--fs-lead); font-weight: 300; }
.page-title, .page-lead { animation: rise 900ms var(--ease-out) both; }
.page-lead { animation-delay: 80ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Products ---------- */
.filters-wrap {
  position: sticky; top: 0; z-index: 30;
  background: rgb(245 244 241 / 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
  transform: translateY(var(--header-h));
  transition: transform 360ms var(--ease-drawer);
  margin-top: calc(-1 * var(--header-h));
}
body.header-hidden .filters-wrap { transform: none; }
.filters { display: flex; gap: 16px; align-items: center; padding-block: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 24px; }
.chips::-webkit-scrollbar { display: none; }
.search { position: relative; flex: 0 0 280px; color: var(--ash); }
.search .i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; pointer-events: none; }
.search input {
  width: 100%; height: 40px; padding: 0 14px 0 42px;
  background: var(--graphite); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); color: var(--linen);
  transition: border-color 200ms ease;
}
.search input::placeholder { color: var(--ash-2); }
.search input:focus { outline: none; border-color: var(--brass); }

.results { box-shadow: 0 0 0 100vmax var(--smoke); clip-path: inset(0 -100vmax); background: var(--smoke); padding-top: calc(var(--header-h) + 28px); padding-bottom: clamp(80px, 10vw, 140px); }
.results__count { color: var(--ash-2); font-size: var(--fs-sm); margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.grid__item.is-new { animation: card-in 500ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.empty { text-align: center; padding: 80px 0; color: var(--ash); display: grid; justify-items: center; gap: 24px; }
.more { display: flex; justify-content: center; margin-top: 56px; }

/* ---------- Product detail ---------- */
.crumbs { display: flex; gap: 10px; padding-top: 28px; color: var(--ash-2); font-size: var(--fs-sm); }
.crumbs a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--linen); } }
.pd {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
  padding-top: 24px; padding-bottom: clamp(72px, 9vw, 120px);
}
.pd__media { position: sticky; top: calc(var(--header-h) + 20px); }
.pd__zoom { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.pd__zoom > img { width: 100%; height: 100%; object-fit: cover; }
.pd__zoom-hint {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / 0.85); color: #1b1a18;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pd__lens {
  position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgb(236 229 216 / 0.5);
  box-shadow: 0 20px 50px rgb(40 30 20 / 0.35);
  background-repeat: no-repeat; background-size: 280%;
  pointer-events: none; opacity: 0; scale: 0.9;
  transition: opacity 180ms ease, scale 220ms var(--ease-out);
}
.pd__zoom.is-lensing .pd__lens { opacity: 1; scale: 1; }
@media not ((hover: hover) and (pointer: fine)) { .pd__lens { display: none; } }

.pd__cat { color: var(--brass); font-size: var(--fs-sm); font-weight: 500; margin-bottom: 14px; }
.pd__title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd__desc { color: var(--ash); margin-top: 18px; font-size: 1.1rem; max-width: 40ch; }
.pd__h { font-size: 1rem; font-weight: 600; margin: 40px 0 14px; color: var(--linen); }
.models { border-top: 1px solid var(--line); }
.model { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.model__code { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.model__specs { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ash); font-size: var(--fs-sm); }
.pd__note { color: var(--ash-2); font-size: var(--fs-sm); margin-top: 14px; }
.pd__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pd__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 20px; }
.pd__pager a { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); min-width: 0; padding: 8px 0; }
.pd__pager a span { display: grid; min-width: 0; }
.pd__pager small { color: var(--ash-2); font-size: 0.78rem; }
.pd__pager a.is-next { justify-content: end; text-align: right; }
@media (hover: hover) and (pointer: fine) { .pd__pager a:hover { color: var(--brass-2); } }

/* Lightbox (modal: stays centered) */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
  display: grid; place-items: center;
  opacity: 1; transition: opacity 240ms ease, display 240ms allow-discrete, overlay 240ms allow-discrete;
}
.lightbox:not([open]) { display: none; opacity: 0; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: rgb(255 255 255 / 0.96); transition: opacity 240ms ease; }
.lightbox img { max-width: min(94vw, 94vh); max-height: 94vh; border-radius: var(--radius); transform: scale(1); transition: transform 300ms var(--ease-out); cursor: zoom-out; }
@starting-style { .lightbox[open] img { transform: scale(0.96); } }
.lightbox__close { position: fixed; top: 16px; right: 16px; background: rgb(29 27 25 / 0.85); color: #fff; }

/* ---------- Catalogue viewer ---------- */
.viewer { padding-bottom: 64px; }
.viewer__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; padding-top: clamp(28px, 4vw, 48px); padding-bottom: 20px; }
.viewer__title { font-family: var(--display); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.viewer__lead { color: var(--ash-2); font-size: var(--fs-sm); }
.viewer__stage { position: relative; display: grid; place-items: center; padding-inline: var(--gutter); touch-action: pan-y; }
.viewer__spread {
  width: min(100%, calc(100svh - var(--header-h) - 250px)); min-width: min(100%, 320px);
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--smoke);
  box-shadow: 0 30px 60px -30px rgb(40 30 20 / 0.45);
}
.viewer__img { width: 100%; height: 100%; object-fit: cover; }
.viewer__img.is-turning { animation: turn 260ms var(--ease-out) both; }
@keyframes turn { from { opacity: 0; filter: blur(3px); transform: translateX(calc(var(--dir, 1) * 14px)); } }
.viewer__arrow { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; }
.viewer__arrow--prev { left: max(var(--gutter), calc(50% - min(50vw, (100svh - var(--header-h) - 250px) / 2) - 76px)); }
.viewer__arrow--next { right: max(var(--gutter), calc(50% - min(50vw, (100svh - var(--header-h) - 250px) / 2) - 76px)); }
.viewer__arrow:disabled { opacity: 0.3; cursor: default; }
.viewer__bar { display: flex; align-items: center; gap: 20px; padding-top: 22px; }
.viewer__num { font-size: var(--fs-sm); color: var(--ash); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viewer__num b { color: var(--linen); font-weight: 600; }
.viewer__scrub { flex: 1; accent-color: var(--brass); }
.thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76px; gap: 8px;
  overflow-x: auto; padding: 20px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--smoke-2) transparent;
}
.thumbs button { position: relative; display: block; width: 76px; aspect-ratio: 1; border-radius: 3px; overflow: hidden; opacity: 0.55; transition: opacity 200ms ease, transform 160ms var(--ease-out); }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button span { position: absolute; left: 4px; bottom: 2px; font-size: 0.66rem; color: var(--linen); text-shadow: 0 1px 3px #000; }
.thumbs button:active { transform: scale(0.96); }
.thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid var(--brass); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .thumbs button:hover { opacity: 1; } }

/* ---------- About page ---------- */
.about-hero { position: relative; min-height: min(82svh, 820px); display: grid; align-items: end; overflow: hidden; }
.about-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: light-on 1800ms var(--ease-out) both; }
@keyframes light-on { from { filter: brightness(0.15); transform: scale(1.05); } }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--graphite) 0%, rgb(255 255 255 / 0.55) 40%, rgb(255 255 255 / 0) 75%); }
.about-hero__text { position: relative; z-index: 1; padding-bottom: clamp(40px, 6vw, 80px); }
.prose { padding-block: clamp(80px, 10vw, 150px) clamp(48px, 6vw, 80px); }
.prose__big { font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; max-width: 28ch; }
.prose__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); color: var(--ash); font-size: 1.1rem; max-width: 1000px; margin-left: auto; }
.mosaic { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 18vw, 260px); gap: clamp(10px, 1.4vw, 18px); }
.mosaic__item { overflow: hidden; border-radius: var(--radius); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__item--tall { grid-row: span 2; }
.mosaic__item--wide { grid-column: span 2; grid-row: span 2; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); padding-block: clamp(64px, 8vw, 120px); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ash); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(80px, 10vw, 140px); }
.direct { display: grid; gap: 12px; }
.direct li { display: flex; gap: 12px; align-items: center; color: var(--ash); }
.direct a { color: var(--linen); }
.contact__img { margin-top: 48px; border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 420px; }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ash); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--smoke); color: var(--linen);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: var(--smoke-2); }
.field.has-error input, .field.has-error textarea { border-color: #d8836f; }
.form__err { color: #e79b88; font-size: var(--fs-sm); }
.form__err--top { padding: 12px 16px; border: 1px solid #d8836f; border-radius: var(--radius); }
.form__submit { justify-self: start; min-width: 200px; }
.form__submit span { transition: filter 200ms ease, opacity 200ms ease; }
.form__submit.is-sending span { filter: blur(2px); opacity: 0.6; }
.field.shake { animation: shake 320ms var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.sent { position: relative; padding: 48px 32px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 20px; font-size: 1.25rem; font-weight: 300; overflow: hidden; outline: none; }
.sent__glow { position: absolute; inset: -40% -10% auto auto; width: 300px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(227 196 142 / 0.35), transparent 65%); animation: light-on 1600ms var(--ease-out) both; }

/* ---------- 404 ---------- */
.nf { min-height: 70svh; display: grid; align-content: center; justify-items: start; gap: 24px; padding-block: 80px; }
.nf .page-lead { margin-top: 0; }
.nf__bulb { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line-2); box-shadow: inset 0 -10px 30px rgb(40 30 20 / 0.12); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--smoke); border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 110px); }
.footer-top { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 40px; align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer-logo { display: inline-grid; gap: 10px; }
.footer-logo__mark { width: 180px; height: auto; color: var(--linen); }
.footer-logo__tag { color: var(--ash); font-weight: 300; font-size: 1.15rem; }
.news__label { font-weight: 600; display: block; }
.news__text { color: var(--ash); font-size: var(--fs-sm); margin: 6px 0 14px; }
.news__row { display: flex; gap: 8px; }
.news__row input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--graphite); }
.news__row input:focus { outline: none; border-color: var(--brass); }
.news__msg { min-height: 1.5em; margin-top: 10px; font-size: var(--fs-sm); color: var(--brass-2); }
.footer-cols { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; padding-block: 48px; }
.footer-h { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 16px; color: var(--linen); }
.footer-cols ul { display: grid; gap: 8px; color: var(--ash); font-size: 0.95rem; }
.footer-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.footer-cols a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .footer-cols a:hover { color: var(--linen); } }
.footer-base { display: flex; justify-content: space-between; gap: 16px; padding-block: 24px 32px; border-top: 1px solid var(--line); color: var(--ash-2); font-size: 0.82rem; position: relative; z-index: 1; }
.footer-glow { pointer-events: none; padding-inline: var(--gutter); margin-bottom: -4.2vw; }
.footer-glow__mark {
  width: 100%; height: auto; display: block;
  color: rgb(27 26 24 / 0.05);
}

/* ---------- Cross-document view transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms ease both; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: var(--ease-in-out); }
::view-transition-group(root) { animation-duration: 320ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) { .header-cta { display: none; } }
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .site-header__inner { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .brand { justify-self: center; }
  .header-tools .lang, .header-cta { display: none; }
  .search-pill { min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center; margin-right: -10px; background: none; }
  .search-pill span { display: none; }
  .search-pill .i { width: 22px; height: 22px; color: var(--linen); }
  .search { flex-basis: 220px; }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .brand__mark { width: 116px; }
  .family, .family--flip { grid-template-columns: 1fr; gap: 24px; }
  .family--flip .family__media { order: 0; }
  .cat-band__inner, .about-strip, .pd, .contact, .facts { grid-template-columns: 1fr; }
  .pd__media { position: static; }
  .contact__img { display: none; }
  .prose__cols { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols__wide { grid-column: 1 / -1; order: -1; }
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .search { flex-basis: auto; }
  .results { padding-top: calc(var(--header-h) + 20px); }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic__item--wide { grid-column: span 2; grid-row: span 1; }
  .rail-hint { display: none; }
}
@media (max-width: 640px) {
  .hero { min-height: 560px; }
  .hero__vignette { background: linear-gradient(180deg, rgb(15 13 11 / 0.5) 0%, rgb(15 13 11 / 0) 20%), linear-gradient(0deg, rgb(15 13 11 / 0.96) 0%, rgb(15 13 11 / 0.78) 42%, rgb(15 13 11 / 0) 75%); }
  .hero__title { font-weight: 300; }
  .hero__dots { gap: 2px; }
  .hero__content { padding-right: var(--gutter); }
  .hero__ctas .btn { flex: 1 1 auto; }
  .dimmer { top: auto; bottom: 74px; right: var(--gutter); translate: none; grid-auto-flow: column; padding: 6px 14px; }
  .dimmer__range { writing-mode: horizontal-tb; direction: ltr; width: 110px; height: 28px; cursor: ew-resize; }
  .dimmer__range::-webkit-slider-runnable-track { width: auto; height: 2px; background: linear-gradient(to right, var(--brass) var(--p), rgb(236 229 216 / 0.2) var(--p)); }
  .dimmer__range::-webkit-slider-thumb { margin-left: 0; margin-top: -7px; }
  .dimmer__range::-moz-range-track { width: auto; height: 2px; }
  .dimmer__range::-moz-range-progress { width: auto; height: 2px; }
  .dimmer__hint { display: none; }
  .hero__content { padding-bottom: 76px; }
  .hero__dot { width: 28px; }
  .sec-head { flex-wrap: wrap; align-items: start; }
  .cat-band__meta { gap: 20px; }
  .news__row { flex-direction: column; }
  .news__row .btn { width: 100%; }
  .footer-base { flex-direction: column; }
  .pd__actions .btn { width: 100%; }
  .pd__pager { grid-template-columns: 1fr; }
  .pd__pager a.is-next { justify-content: start; text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
  .viewer__arrow { display: none; }
  .viewer__bar { flex-wrap: wrap; }
  .viewer__scrub { order: 3; flex-basis: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .card__title { font-size: 0.9rem; }
}

/* ---------- Reduced motion: fewer and gentler, not zero ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .hero__slide.is-active img, .hero__slide img { animation: none; transform: none; }
  .js .hero__title .line > span { transform: none; opacity: 0; }
  .hero.is-lit .hero__title .line > span { opacity: 1; transition: opacity 600ms ease; }
  .js .hero__sub, .js .hero__ctas, .js .hero__bar, .js .dimmer { transform: none; }
  .js [data-reveal="clip"], .js [data-reveal="clip"].is-in { clip-path: none; opacity: 0; transition: opacity 600ms ease; }
  .js [data-reveal="clip"].is-in { opacity: 1; }
  .js [data-reveal="clip"] img, .js [data-reveal="clip"].is-in img { transform: none; }
  .menu, .menu.is-open { clip-path: none; transition: opacity 200ms ease; opacity: 0; }
  .menu.is-open { opacity: 1; }
  .menu__link { transform: none; }
  .page-title, .page-lead, .grid__item.is-new { animation-name: fade; }
  @keyframes fade { from { opacity: 0; } }
  .about-hero__img { animation: none; }
  .viewer__img.is-turning { animation: fade 200ms ease both; }
  .book__cover, .book__page { transition: none; }
  .hero__dot[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
  ::view-transition-group(*) { animation-duration: 0s; }
}

/* ---------- Product family tabs (products page) ---------- */
.filters .chips { gap: clamp(18px, 3vw, 36px); }
.filters .chip {
  min-height: 48px; padding: 0 2px; border: 0; border-radius: 0;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 500;
  color: var(--ash-2); background: none;
  background-image: linear-gradient(var(--linen), var(--linen)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 2px;
  transition: color 200ms ease, background-size 300ms var(--ease-out);
}
.filters .chip span { letter-spacing: 0; font-size: 0.72rem; }
.filters .chip[aria-current="true"] { background-color: transparent; color: var(--linen); background-size: 100% 2px; }
.filters .chip[aria-current="true"] span { color: var(--ash-2); }
@media (hover: hover) and (pointer: fine) {
  .filters .chip:not([aria-current="true"]):hover { color: var(--linen); }
}
.card__title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-band__text .btn { margin-top: 32px; }

/* =====================================================================
   Home: premium layer
   ===================================================================== */
.sec-lead { color: var(--ash); max-width: 46ch; margin-top: 14px; font-size: 1.05rem; }
.sec-head--center { justify-content: center; text-align: center; }
.sec-head--center .sec-lead { margin-inline: auto; }

/* ---------- Page loader (home, once per session) ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--graphite);
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--ease-in-out);
}
.js .loader.is-skip { display: none; }
.loader__logo { width: min(320px, 62vw); height: auto; color: var(--linen); display: block; }
.loader__mark { clip-path: inset(0 100% 0 0); animation: lx-draw 1100ms var(--ease-in-out) 150ms forwards; }
.loader__line { width: min(320px, 62vw); height: 1px; background: var(--line); overflow: hidden; }
.loader__line i { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; animation: lx-line 1500ms var(--ease-in-out) 200ms forwards; }
.loader__tag { font-weight: 300; letter-spacing: 0.02em; color: var(--ash); opacity: 0; transform: translateY(6px); animation: lx-tag 700ms var(--ease-out) 900ms forwards; }
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader.is-done .loader__mark, .loader.is-done .loader__tag { transform: translateY(-24px); opacity: 0; transition: transform 700ms var(--ease-in-out), opacity 500ms ease; }
@keyframes lx-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes lx-line { to { transform: scaleX(1); } }
@keyframes lx-tag { to { opacity: 1; transform: none; } }
body.is-loading { overflow: hidden; }

/* ---------- Category bento ---------- */
.cats { padding-bottom: clamp(72px, 9vw, 130px); }
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 21vw, 330px); gap: clamp(10px, 1.2vw, 16px);
}
.tile {
  position: relative; overflow: hidden; border-radius: 6px; isolation: isolate;
  display: block; color: #fff;
}
.tile--xl { grid-column: span 2; grid-row: span 2; }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1400ms var(--ease-out), filter 600ms ease; }
.tile__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(12 10 8 / 0.78) 0%, rgb(12 10 8 / 0.25) 42%, rgb(12 10 8 / 0) 70%); transition: opacity 500ms ease; }
.tile__body { position: absolute; left: clamp(18px, 2vw, 28px); right: 72px; bottom: clamp(18px, 2vw, 26px); display: grid; gap: 8px; }
.tile__name { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.05; }
.tile--xl .tile__name { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.tile__desc {
  font-size: 0.92rem; color: rgb(255 255 255 / 0.82); max-width: 38ch; line-height: 1.45;
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 500ms var(--ease-out), opacity 400ms ease;
}
.tile__go {
  position: absolute; right: clamp(16px, 1.8vw, 24px); bottom: clamp(16px, 1.8vw, 24px);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.16); border: 1px solid rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 400ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.tile__go .i { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform 400ms var(--ease-out); }
.tile--xl .tile__desc, .tile--wide .tile__desc { grid-template-rows: 1fr; opacity: 1; }
.tile:active img { transform: scale(1); transition-duration: 300ms; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.07); }
  .tile:hover .tile__desc { grid-template-rows: 1fr; opacity: 1; }
  .tile:hover .tile__go { background: #fff; color: #1b1a18; }
  .tile:hover .tile__go .i { transform: rotate(0deg); }
}
/* staggered curtain reveal when the grid enters */
.js .bento .tile { clip-path: inset(100% 0 0 0); }
.js .bento.is-in .tile { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out) var(--d); }
.js .bento .tile img { transform: scale(1.18); }
.js .bento.is-in .tile img { transform: scale(1.02); transition: transform 1600ms var(--ease-out) var(--d); }
@media (hover: hover) and (pointer: fine) {
  .js .bento.is-in .tile:hover img { transform: scale(1.07); transition: transform 1400ms var(--ease-out); }
}

/* ---------- Materials marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 30px); background: var(--graphite); }
.marquee__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content; animation: marquee 48s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.8rem); white-space: nowrap; color: var(--linen); }
.marquee__track i { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__track { animation-play-state: paused; } }

/* ---------- Stacked scenes ---------- */
.spaces { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 80px); background: var(--smoke); }
.stack { display: grid; gap: clamp(20px, 3vw, 40px); }
.stack__card {
  position: sticky; top: calc(var(--header-h) + 20px + var(--i) * 14px);
  height: min(78svh, 760px); border-radius: 8px; overflow: hidden; isolation: isolate;
  box-shadow: 0 -20px 60px -40px rgb(40 30 20 / 0.5);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 10 8 / 0.72) 0%, rgb(12 10 8 / 0.25) 45%, rgb(12 10 8 / 0) 70%), linear-gradient(0deg, rgb(12 10 8 / 0.5), transparent 40%); }
.stack__body { position: absolute; left: clamp(22px, 4vw, 64px); bottom: clamp(24px, 4vw, 64px); right: 22px; display: grid; justify-items: start; gap: 14px; color: var(--linen); background: none; }
.stack__cat { color: var(--brass-2); font-weight: 500; font-size: 0.95rem; }
.stack__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 1.02; max-width: 12ch; }
.stack__codes { color: rgb(255 255 255 / 0.78); font-size: 0.95rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; margin-bottom: 12px; }

/* ---------- Series index with floating preview ---------- */
.series { position: relative; padding-block: clamp(80px, 10vw, 150px); }
.series__list { border-top: 1px solid var(--line); }
.series__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 32px;
  padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line);
}
.series__thumb { display: none; }
.series__name { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1.05; transition: transform 500ms var(--ease-out), color 300ms ease; }
.series__desc { color: var(--ash); font-size: 0.98rem; max-width: 44ch; transition: color 300ms ease; }
.series__go { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background-color 300ms ease, color 300ms ease, transform 400ms var(--ease-out); }
.series__go .i { width: 18px; height: 18px; }
.series__row:active .series__go { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .series__list:hover .series__name { color: var(--ash-2); }
  .series__row:hover .series__name { color: var(--linen); transform: translateX(14px); }
  .series__row:hover .series__go { background: var(--linen); color: var(--graphite); }
}
.series__float {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: clamp(220px, 22vw, 320px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(40 30 20 / 0.55);
  opacity: 0; scale: 0.92; transition: opacity 250ms ease, scale 350ms var(--ease-out);
}
.series__float.is-on { opacity: 1; scale: 1; }
.series__float img { width: 100%; height: 100%; object-fit: cover; }
@media not ((hover: hover) and (pointer: fine)) { .series__float { display: none; } }

/* ---------- Catalogue book: five pages that fan out with scroll ---------- */
.cat-band { --fan: 0; }
.book__page--2 { transform: translate(calc(6% + var(--fan) * 10%), calc(-3% - var(--fan) * 2%)) rotate(calc(3deg + var(--fan) * 4deg)); filter: brightness(0.8); }
.book__page--3 { transform: translate(calc(11% + var(--fan) * 22%), calc(-6% - var(--fan) * 4%)) rotate(calc(6deg + var(--fan) * 8deg)); filter: brightness(0.7); }
.book__page--4 { transform: translate(calc(15% + var(--fan) * 34%), calc(-8% - var(--fan) * 5%)) rotate(calc(9deg + var(--fan) * 12deg)); filter: brightness(0.6); }
.book__page--5 { transform: translate(calc(18% + var(--fan) * 46%), calc(-10% - var(--fan) * 6%)) rotate(calc(12deg + var(--fan) * 16deg)); filter: brightness(0.5); }
.book .book__page { transition: transform 200ms linear; }
@media (hover: hover) and (pointer: fine) {
  .book:hover .book__page--2 { transform: translate(18%, -6%) rotate(8deg); }
  .book:hover .book__page--3 { transform: translate(36%, -10%) rotate(15deg); }
  .book:hover .book__page--4 { transform: translate(52%, -13%) rotate(22deg); }
  .book:hover .book__page--5 { transform: translate(66%, -16%) rotate(29deg); }
  .book:hover .book__page { transition: transform 700ms var(--ease-out); }
}

/* ---------- Mega menu: curtain reveal + page scrim ---------- */
.mega { clip-path: inset(0 0 100% 0); transform: none; opacity: 1; transition: clip-path 420ms var(--ease-drawer), visibility 0s linear 420ms; }
.nav__item--mega:focus-within .mega, .nav__item--mega.is-open .mega { clip-path: inset(0 0 -60px 0); transition: clip-path 520ms var(--ease-drawer), visibility 0s; }
.mega__intro, .mega__list li, .mega__preview { opacity: 0; transform: translateY(10px); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.mega__preview img { transform: scale(1.08); transition: transform 1200ms var(--ease-out), opacity 200ms ease; }
.nav__item--mega.is-open .mega__intro, .nav__item--mega:focus-within .mega__intro,
.nav__item--mega.is-open .mega__list li, .nav__item--mega:focus-within .mega__list li,
.nav__item--mega.is-open .mega__preview, .nav__item--mega:focus-within .mega__preview { opacity: 1; transform: none; }
.nav__item--mega.is-open .mega__preview img, .nav__item--mega:focus-within .mega__preview img { transform: scale(1); }
.nav__item--mega.is-open .mega__intro { transition-delay: 80ms; }
.nav__item--mega.is-open .mega__preview { transition-delay: 160ms; }
.mega__list li:nth-child(n) { transition-delay: calc(100ms + var(--n, 0) * 22ms); }
.mega__list a { position: relative; }
.mega__list a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--linen); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
.mega__list a.is-active::after { transform: scaleX(1); }
.scrim { position: fixed; inset: var(--header-h) 0 0; z-index: 40; background: rgb(27 26 24 / 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
body.mega-open .scrim { opacity: 1; }

/* ---------- Mobile menu: masked lines + image rows ---------- */
.menu__link { opacity: 1; transform: none; overflow: hidden; display: block; }
.menu__link > span { display: block; transform: translateY(110%); transition: transform 650ms var(--ease-out); }
.menu.is-open .menu__link > span { transform: none; }
.menu.is-open .menu__link:nth-child(1) > span { transition-delay: 120ms; }
.menu.is-open .menu__link:nth-child(2) > span { transition-delay: 170ms; }
.menu.is-open .menu__link:nth-child(3) > span { transition-delay: 220ms; }
.menu.is-open .menu__link:nth-child(4) > span { transition-delay: 270ms; }
.menu.is-open .menu__link:nth-child(5) > span { transition-delay: 320ms; }
.menu__cats a { justify-content: flex-start; gap: 14px; padding: 10px 0; }
.menu__cats a > span:not(.menu__thumb) { flex: 1; }
.menu__thumb { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex: none; background: var(--smoke); }
.menu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu__cats li { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.menu.is-open .menu__cats li { opacity: 1; transform: none; transition-delay: calc(300ms + var(--n, 0) * 30ms); }
.menu__cats { opacity: 1; }

/* ---------- Responsive for the new home sections ---------- */
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46vw; }
  .tile--xl { grid-column: span 2; grid-row: span 2; }
  .tile--tall { grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
  .tile__desc { display: none; }
  .tile--xl .tile__desc { display: grid; }
  .tile__go { width: 36px; height: 36px; }
  .tile:not(.tile--xl):not(.tile--wide) .tile__go { display: none; }
  .tile__body { right: 16px; left: 16px; bottom: 16px; }
  .tile--xl .tile__body, .tile--wide .tile__body { right: 60px; }
  .tile__name { font-size: 1.3rem; }
  .tile--xl .tile__name { font-size: 2.1rem; }
  .stack__card { height: 72svh; top: calc(var(--header-h) + 12px + var(--i) * 10px); }
  .stack__shade { background: linear-gradient(0deg, rgb(12 10 8 / 0.82) 0%, rgb(12 10 8 / 0.3) 50%, rgb(12 10 8 / 0) 75%); }
  .series__row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; }
  .series__thumb { display: block; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; }
  .series__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .series__desc { display: none; }
  .series__name { font-size: 1.6rem; }
  .series__go { width: 40px; height: 40px; }
  .book__page--4, .book__page--5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader__mark, .loader__line i, .loader__tag { animation-duration: 1ms; animation-delay: 0ms; }
  .js .loader { transition: opacity 300ms ease; }
  .loader.is-done { clip-path: none; opacity: 0; }
  .js .bento .tile, .js .bento.is-in .tile { clip-path: none; }
  .js .bento .tile img, .js .bento.is-in .tile img { transform: none; }
  .marquee__track { animation: none; }
  .stack__card { transform: none !important; }
  .menu__link > span { transform: none; }
  .mega, .nav__item--mega.is-open .mega { clip-path: none; }
}

/* ---------- In focus: product cards that catch the light ---------- */
.feat { padding-bottom: clamp(72px, 9vw, 130px); }
.feat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); }
.pcard { display: grid; gap: 14px; perspective: 900px; }
.pcard__media {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
  transform-style: preserve-3d; transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
  box-shadow: 0 30px 60px -45px rgb(40 30 20 / 0.6);
}
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transform: none; transition: transform 1200ms var(--ease-out); }
.pcard__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgb(255 244 220 / 0.9), rgb(255 244 220 / 0) 55%);
  transition: opacity 400ms ease;
}
.pcard__meta { display: grid; gap: 4px; }
.pcard__cat { color: var(--brass-2); font-size: 0.85rem; font-weight: 500; }
.pcard__title { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; overflow-wrap: anywhere; }
.pcard__go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--ash); transition: color 200ms ease; }
.pcard__go .i { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.pcard:active .pcard__media { transform: scale(0.985); transition-duration: 160ms; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__media { box-shadow: 0 50px 80px -45px rgb(40 30 20 / 0.7); }
  .pcard:hover .pcard__media img { transform: scale(1.03); }
  .pcard:hover .pcard__glare { opacity: 1; }
  .pcard:hover .pcard__go { color: var(--linen); }
  .pcard:hover .pcard__go .i { transform: translateX(4px); }
}
/* curtain reveal, same language as the rest of the home page */
.js .feat__grid li { clip-path: inset(100% 0 0 0); }
.js .feat__grid.is-in li { clip-path: inset(0 0 -40px 0); transition: clip-path 1100ms var(--ease-in-out) var(--d); }

/* ---------- Statement: a framed photo opens to full screen ---------- */
.stmt { position: relative; height: 230svh; background: var(--graphite); }
.stmt__pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; overflow: clip; display: grid; place-items: center; }
.stmt__media {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(var(--ci, 16%) var(--cx, 24%) round var(--cr, 14px));
  will-change: clip-path;
}
.stmt__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cs, 1.18)); will-change: transform; }
.stmt__shade { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 52%, rgb(8 10 10 / 0.78), rgb(8 10 10 / 0.35) 70%, rgb(8 10 10 / 0.2)); opacity: var(--co, 0); }
.stmt__body {
  position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 22px;
  padding-inline: var(--gutter); max-width: 900px; background: none;
  opacity: var(--bo, 0); transform: translateY(calc((1 - var(--bo, 0)) * 30px));
}
.stmt__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.stmt__text { color: rgb(255 255 255 / 0.85); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 52ch; }

/* ---------- Hero: depth + flashlight ---------- */
.hero__stage { transform: scale(1.04); will-change: transform; }
.hero__dark { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

@media (max-width: 1080px) {
  .feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .feat__grid { gap: 26px 12px; }
  .pcard__media { aspect-ratio: 1; }
  .pcard__title { font-size: 1.05rem; }
  .pcard__go { display: none; }
  .stmt { height: 200svh; }
  .stmt__media { clip-path: inset(var(--ci, 12%) var(--cx, 8%) round var(--cr, 12px)); }
}
@media (prefers-reduced-motion: reduce) {
  .stmt { height: auto; }
  .stmt__pin { position: relative; top: 0; min-height: 80svh; }
  .stmt__media { clip-path: none; }
  .stmt__media img { transform: none; }
  .stmt__shade { opacity: 1; }
  .stmt__body { opacity: 1; transform: none; }
  .js .feat__grid li, .js .feat__grid.is-in li { clip-path: none; }
  .hero__stage { transform: none; }
}

/* ---------- Hero pictures ---------- */
.hero__slide picture { position: absolute; inset: 0; display: block; }

/* ---------- About: two scenes in parallax + rotating badge ---------- */
.about-strip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.duo { position: relative; aspect-ratio: 1 / 1.05; }
.duo__big, .duo__small { position: absolute; margin: 0; overflow: hidden; border-radius: 6px; }
.duo__big { left: 0; top: 0; width: 74%; height: 86%; box-shadow: 0 40px 80px -50px rgb(40 30 20 / 0.6); }
.duo__small { right: 0; bottom: 0; width: 48%; height: 46%; outline: 10px solid var(--graphite); box-shadow: 0 40px 80px -40px rgb(40 30 20 / 0.55); }
.duo img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; will-change: transform; }
.duo__badge { position: absolute; left: 66%; top: 6%; width: clamp(96px, 10vw, 136px); aspect-ratio: 1; border-radius: 50%; background: var(--graphite); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgb(40 30 20 / 0.45); }
.duo__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.duo__ring text { font-family: var(--font); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--linen); }
.duo__dot { width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6df 0%, var(--brass) 60%, rgb(196 160 103 / 0) 100%); box-shadow: 0 0 24px 6px rgb(227 196 142 / 0.6); animation: glow 3.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { box-shadow: 0 0 10px 2px rgb(227 196 142 / 0.35); transform: scale(0.88); } }
.js .duo__small[data-reveal="clip"].is-in { transition-delay: 250ms; }
@media (max-width: 860px) {
  .about-strip { grid-template-columns: 1fr; }
  .duo { aspect-ratio: 1 / 1.1; }
}
@media (prefers-reduced-motion: reduce) {
  .duo__ring, .duo__dot { animation: none; }
}

/* ---------- Home cards: one-line names ---------- */
.pcard__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack__codes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Product: model cards with real finishes ---------- */
.models { border-top: 0; display: grid; gap: 12px; }
.model {
  display: grid; justify-content: stretch; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--graphite);
  animation: model-in 600ms var(--ease-out) both; animation-delay: calc(150ms + var(--k) * 70ms);
  transition: border-color 200ms ease, box-shadow 300ms ease;
}
@keyframes model-in { from { opacity: 0; transform: translateY(10px); } }
@media (hover: hover) and (pointer: fine) { .model:hover { border-color: var(--line-2); box-shadow: 0 20px 40px -30px rgb(40 30 20 / 0.35); } }
.model__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.model__code { font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.swatches { display: flex; gap: 6px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 3px var(--graphite), 0 0 0 4px var(--line);
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .swatch:hover { transform: scale(1.12); } }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0; background: var(--smoke); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.specs > div { padding: 12px 14px; display: grid; gap: 4px; box-shadow: inset -1px -1px 0 var(--line); }
.specs dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-2); }
.specs dd { font-weight: 600; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.specs:empty { display: none; }
.feats { display: flex; flex-wrap: wrap; gap: 8px; }
.feats li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--smoke); font-size: 0.82rem; color: var(--ash); }
.feats .i { width: 15px; height: 15px; color: var(--brass-2); }
@media (prefers-reduced-motion: reduce) { .model { animation-name: fade; } }

/* =====================================================================
   No-crop pass: catalogue photos are square and are always shown whole.
   Wide frames get the photo's own edge colour as ground, with a soft fade.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero__slide { background: var(--tone, #111); }
.hero__slide picture {
  position: absolute; inset: 0 0 0 auto; left: auto; height: 100%; width: auto; aspect-ratio: 1; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  transform-origin: 100% 50%;
}
.hero__slide img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.hero__slide.is-active img { animation: none; }
.hero__slide.is-active picture { animation: drift-pic 9s linear forwards; }
@keyframes drift-pic { from { transform: scale(1.04); } to { transform: scale(1); } }
.hero__stage { transform: none; }
.hero__vignette {
  background:
    linear-gradient(180deg, rgb(10 9 8 / 0.35) 0%, rgb(10 9 8 / 0) 18%),
    linear-gradient(0deg, rgb(10 9 8 / 0.8) 0%, rgb(10 9 8 / 0.25) 34%, rgb(10 9 8 / 0) 55%),
    linear-gradient(90deg, rgb(10 9 8 / 0.45) 0%, rgb(10 9 8 / 0.1) 45%, rgb(10 9 8 / 0) 60%);
}

/* ---------- Stacked scenes ---------- */
.stack__card { background: var(--tone, #2a2724); }
.stack__card > img {
  inset: 0 0 0 auto; left: auto; width: auto; height: 100%; aspect-ratio: 1; max-width: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.stack__shade { background: linear-gradient(90deg, rgb(12 10 8 / 0.55) 0%, rgb(12 10 8 / 0.15) 40%, rgb(12 10 8 / 0) 60%); }

/* ---------- Statement ---------- */
.stmt__media { background: var(--tone, #0a3838); display: grid; place-items: center; }
.stmt__media img { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; }

/* ---------- Home: in-focus cards are square ---------- */
.pcard__media { aspect-ratio: 1; }

/* ---------- About duo: two squares ---------- */
.duo { aspect-ratio: 1 / 0.98; }
.duo__big { width: 70%; height: auto; aspect-ratio: 1; }
.duo__small { width: 46%; height: auto; aspect-ratio: 1; }
.duo img { height: 100%; margin-top: 0; }
.duo__badge { left: 62%; top: 4%; }

/* ---------- About page ---------- */
.about-hero { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--tone); overflow: hidden; }
.about-hero::after { display: none; }
.about-hero__pic { order: 2; position: relative; display: block; aspect-ratio: 1; max-height: calc(100svh - var(--header-h)); justify-self: end; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%); mask-image: linear-gradient(90deg, transparent 0%, #000 25%); }
.about-hero__img { position: static; width: 100%; height: 100%; object-fit: contain; }
.about-hero__text { order: 1; padding-block: 48px; }
.about-hero .page-lead { color: rgb(255 255 255 / 0.78); }
.mosaic { grid-auto-rows: auto; }
.mosaic__item { aspect-ratio: 1; }

/* ---------- Series gallery: vertical scroll drives a horizontal reel ---------- */
.sgal { position: relative; background: var(--smoke); }
.sgal__pin { padding-block: clamp(72px, 8vw, 110px) 40px; overflow: hidden; overflow: clip; }
.js .sgal.is-pinned .sgal__pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.sgal__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(18px, 3vh, 40px); }
.sgal__viewport { overflow-x: auto; scrollbar-width: none; perspective: 1400px; }
.sgal__viewport::-webkit-scrollbar { display: none; }
.js .sgal.is-pinned .sgal__viewport { overflow: visible; }
.sgal__track {
  display: flex; gap: clamp(16px, 2vw, 32px); width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  transform-style: preserve-3d; will-change: transform;
}
.scard { --size: min(28vw, 40svh, 420px); width: var(--size); flex: none; transform-style: preserve-3d; will-change: transform; }
.scard__link { display: grid; gap: 16px; }
.scard__media { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 70px -45px rgb(40 30 20 / 0.7); }
.scard__media img { width: 100%; height: 100%; object-fit: contain; transition: filter 600ms ease; }
.scard__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 248 230 / 0.35) 48%, transparent 66%); transform: translateX(-120%); }
.scard.is-center .scard__sheen { animation: sheen 1400ms var(--ease-out) 1; }
@keyframes sheen { to { transform: translateX(120%); } }
.scard__text { display: grid; gap: 6px; transition: opacity 400ms ease; }
.scard__name { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; }
.scard__desc { color: var(--ash); font-size: 0.92rem; max-width: 40ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard__go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 500; margin-top: 4px; }
.scard__go .i { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .scard__link:hover .scard__go .i { transform: translateX(4px); } }
.sgal__bar { margin-top: clamp(16px, 2.5vh, 30px); }
.sgal__progress { display: block; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.sgal__progress i { display: block; height: 100%; background: var(--linen); transform: scaleX(0); transform-origin: left; }
/* entrance: cards rise in one after another */
.js .sgal .scard { opacity: 0; translate: 0 60px; }
.js .sgal.is-in .scard { opacity: 1; translate: 0 0; transition: opacity 700ms ease calc(var(--gi) * 70ms), translate 1000ms var(--ease-out) calc(var(--gi) * 70ms); }

@media (max-width: 860px) {
  .hero__slide picture { inset: 0 0 auto 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); transform-origin: 50% 0; }
  .hero__vignette { background: linear-gradient(0deg, rgb(10 9 8 / 0.92) 0%, rgb(10 9 8 / 0.78) 45%, rgb(10 9 8 / 0.35) 62%, rgb(10 9 8 / 0) 78%); }
  .stack__card { height: auto; display: grid; }
  .stack__card > img { position: relative; inset: auto; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .stack__shade { display: none; }
  .stack__body { position: relative; inset: auto; padding: 0 22px 26px; margin-top: -40px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero__pic { order: 0; width: 100%; height: auto; max-height: none; justify-self: stretch; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 75%, transparent 100%); }
  .about-hero__text { padding-block: 0 40px; margin-top: -30px; position: relative; }
  .scard { --size: 72vw; }
  .sgal__head { flex-wrap: wrap; align-items: start; }
}
@media (max-width: 860px) and (max-height: 760px) { .scard { --size: min(72vw, 46svh); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active picture { animation: none; }
  .js .sgal .scard { opacity: 1; translate: none; }
  .scard__sheen { display: none; }
}

.stmt__body { text-shadow: 0 2px 24px rgb(0 0 0 / 0.45); }

/* ---------- Series gallery: premium layer ---------- */
.sgal__pin { position: relative; }
.sgal__bar { display: flex; align-items: center; gap: 24px; }
.sgal__progress { flex: 1; }
.sgal__now { flex: none; min-width: 12ch; text-align: right; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.2; color: var(--linen); }
.sgal__now span { display: inline-block; }

.scard__media { transition: box-shadow 700ms var(--ease-out); }
.scard.is-center .scard__media { box-shadow: 0 50px 90px -40px rgb(40 30 20 / 0.55), 0 0 0 1px rgb(196 160 103 / 0.35), 0 0 70px -10px rgb(214 176 112 / 0.55); }
.scard__name { display: block; overflow: hidden; padding-bottom: 0.08em; }
.scard__name .ch { display: inline-block; transform: translateY(0); transition: transform 600ms var(--ease-out); transition-delay: calc(var(--ci) * 18ms); }
@media (min-width: 861px) { .js .sgal.is-pinned .scard:not(.is-center) .scard__name .ch { transform: translateY(105%); transition-duration: 300ms; transition-delay: 0ms; } }
@media (max-width: 860px) { .hero__title { text-shadow: 0 2px 28px rgb(0 0 0 / 0.7), 0 0 2px rgb(0 0 0 / 0.4); } }
@media (prefers-reduced-motion: reduce) {
  .js .sgal.is-pinned .scard:not(.is-center) .scard__name .ch { transform: none; }
}

/* ---------- Gallery: two reels that react to scroll speed ---------- */
.gal { padding-block: clamp(80px, 9vw, 130px); overflow: hidden; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.gal .sec-head { margin-bottom: clamp(16px, 2vw, 28px); }
.gal__row { overflow: hidden; overflow: clip; }
.gal__track { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; will-change: transform; }
.gal__item {
  position: relative; display: block; width: clamp(150px, 17vw, 270px); aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  transform: perspective(800px) rotateX(var(--tilt, 0deg)); transition: transform 400ms var(--ease-out);
}
.gal__item img { width: 100%; height: 100%; object-fit: contain; transition: filter 400ms ease, scale 700ms var(--ease-out); }
.gal__cap {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px;
  background: rgb(255 255 255 / 0.9); color: #1b1a18; font-size: 0.78rem; font-weight: 500;
  opacity: 0; translate: 0 6px; transition: opacity 250ms ease, translate 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gal__row:hover .gal__item img { filter: brightness(0.75) saturate(0.85); }
  .gal__row .gal__item:hover img { filter: none; scale: 1.04; }
  .gal__item:hover .gal__cap { opacity: 1; translate: 0 0; }
}
.gal__item:focus-visible .gal__cap { opacity: 1; translate: 0 0; }

/* ---------- Light switch banner ---------- */
.lswitch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--tone); overflow: hidden; overflow: clip; color: var(--linen); }
.lswitch__pic { order: 2; position: relative; aspect-ratio: 1; justify-self: end; width: 100%; height: auto; max-width: 92svh;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.lswitch__pic img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0.16) saturate(0.4) contrast(1.1); transition: filter 1200ms var(--ease-out); }
.lswitch__glow {
  position: absolute; left: 27%; top: 22%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 214 140 / 0.75) 0%, rgb(255 190 100 / 0.25) 30%, rgb(255 180 90 / 0) 65%);
  mix-blend-mode: screen; opacity: 0; scale: 0.6; transition: opacity 900ms ease, scale 1400ms var(--ease-out);
}
.lswitch__text { order: 1; position: relative; z-index: 1; display: grid; justify-items: start; gap: 22px; padding-block: 64px; }
.lswitch__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1; transition: color 900ms ease, text-shadow 900ms ease; color: rgb(255 255 255 / 0.55); }
.lswitch__lead { max-width: 40ch; color: rgb(255 255 255 / 0.72); font-size: 1.08rem; }
.lswitch::before { content: ""; position: absolute; inset: 0; background: rgb(8 8 10 / 0.72); transition: opacity 1200ms var(--ease-out); pointer-events: none; }
.lswitch.is-on::before { opacity: 0.18; }
.lswitch.is-on .lswitch__pic img { filter: none; animation: flicker 900ms steps(1) 1; }
.lswitch.is-on .lswitch__glow { opacity: 1; scale: 1; }
.lswitch.is-on .lswitch__title { color: #fff; text-shadow: 0 0 40px rgb(255 214 140 / 0.45); }
@keyframes flicker { 0% { filter: brightness(0.2); } 12% { filter: brightness(0.9); } 20% { filter: brightness(0.3); } 32% { filter: brightness(1); } 40% { filter: brightness(0.55); } 55%, 100% { filter: none; } }
.toggle { display: inline-flex; align-items: center; gap: 14px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.25); color: #fff; font-weight: 500; transition: background-color 300ms ease, transform 160ms var(--ease-out); }
.toggle:active { transform: scale(0.97); }
.toggle__track { position: relative; width: 64px; height: 36px; border-radius: 999px; background: rgb(255 255 255 / 0.18); transition: background-color 400ms ease, box-shadow 600ms ease; }
.toggle__knob { position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform 450ms var(--ease-drawer); box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.toggle[aria-checked="true"] .toggle__track { background: var(--brass); box-shadow: 0 0 24px rgb(255 200 120 / 0.65); }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(28px); }
.toggle__label { display: grid; }
.toggle__label > span { grid-area: 1 / 1; transition: opacity 250ms ease; }
.toggle [data-on] { opacity: 0; }
.toggle[aria-checked="true"] [data-on] { opacity: 1; }
.toggle[aria-checked="true"] [data-off] { opacity: 0; }

/* ---------- Section titles rise word by word ---------- */
.sec-title .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.sec-title .wd > span { display: inline-block; }
.js .sec-title.is-split .wd > span { transform: translateY(110%); }
.js .sec-title.is-split.is-in .wd > span { transform: none; transition: transform 1000ms var(--ease-out) calc(var(--w) * 80ms); }

/* ---------- Category reel: horizontal drag affordance ---------- */
.js .sgal.is-pinned .sgal__viewport { cursor: grab; touch-action: pan-y; }
.js .sgal.is-pinned .sgal__viewport.is-dragging { cursor: grabbing; }
.sgal__viewport.is-dragging a { pointer-events: none; }
.hero__title { max-width: 18ch; }

@media (max-width: 860px) {
  .lswitch { grid-template-columns: 1fr; }
  .lswitch__pic { order: 0; max-height: none; max-width: none; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .lswitch__text { padding-block: 0 56px; margin-top: -40px; }
  .gal__item { width: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  .lswitch.is-on .lswitch__pic img { animation: none; }
  .js .sec-title.is-split .wd > span { transform: none; }
}

/* ---------- Calm gallery wall ---------- */
.gal.wrap { overflow: visible; display: block; }
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.wall__cell { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--smoke); }
.wall__item { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1600ms ease, filter 1600ms ease; filter: blur(6px); pointer-events: none; }
.wall__item.is-shown { opacity: 1; filter: none; pointer-events: auto; }
.wall__item img { width: 100%; height: 100%; object-fit: contain; }
.wall__cap { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: #1b1a18; font-size: 0.76rem; font-weight: 500; opacity: 0; translate: 0 6px; transition: opacity 250ms ease, translate 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wall__item:hover .wall__cap { opacity: 1; translate: 0 0; }
}
.wall__item:focus-visible .wall__cap { opacity: 1; translate: 0 0; }
/* one gentle entrance: tiles fade up in a soft diagonal */
.js .wall__cell { opacity: 0; translate: 0 18px; }
.js .wall.is-in .wall__cell { opacity: 1; translate: 0 0; transition: opacity 900ms ease calc((var(--gi) % 6 + (var(--gi) - var(--gi) % 6) / 6) * 90ms), translate 1100ms var(--ease-out) calc((var(--gi) % 6 + (var(--gi) - var(--gi) % 6) / 6) * 90ms); }
@media (max-width: 1080px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wall__cell:nth-child(n+9) { display: none; } }
@media (max-width: 640px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall__cell:nth-child(n+7) { display: none; } }

/* ---------- Light switch: brand mark + colour temperature ---------- */
.lswitch { --glow: 255 196 120; --tint: 255 160 70; --tint-a: 0.16; }
.lswitch[data-temp="neutral"] { --glow: 255 240 220; --tint: 255 245 230; --tint-a: 0; }
.lswitch[data-temp="cool"] { --glow: 200 225 255; --tint: 150 190 255; --tint-a: 0.2; }
.lswitch__glow { background: radial-gradient(circle, rgb(var(--glow) / 0.75) 0%, rgb(var(--glow) / 0.25) 30%, rgb(var(--glow) / 0) 65%); transition: opacity 900ms ease, scale 1400ms var(--ease-out), background 800ms ease; }
.lswitch__tint { position: absolute; inset: 0; background: rgb(var(--tint) / var(--tint-a)); mix-blend-mode: soft-light; opacity: 0; transition: opacity 900ms ease, background-color 800ms ease; pointer-events: none; }
.lswitch.is-on .lswitch__tint { opacity: 1; }
.lswitch.is-on .lswitch__title { text-shadow: 0 0 40px rgb(var(--glow) / 0.45); }
.lswitch__logo { position: absolute; z-index: 2; top: clamp(20px, 3vw, 40px); left: var(--gutter); color: #fff; opacity: 0.35; transition: opacity 900ms ease, filter 900ms ease; }
.lswitch__mark { width: clamp(104px, 10vw, 150px); height: auto; display: block; }
.lswitch.is-on .lswitch__logo { opacity: 1; filter: drop-shadow(0 0 18px rgb(var(--glow) / 0.55)); }
.cct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; opacity: 0.35; pointer-events: none; transition: opacity 600ms ease; }
.lswitch.is-on .cct { opacity: 1; pointer-events: auto; }
.cct__label { width: 100%; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); margin-bottom: 2px; }
.cct__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.25); color: #fff; font-size: 0.88rem; transition: background-color 250ms ease, border-color 250ms ease, transform 160ms var(--ease-out); }
.cct__btn small { color: rgb(255 255 255 / 0.55); font-size: 0.74rem; }
.cct__btn i { width: 12px; height: 12px; border-radius: 50%; }
.cct__btn--warm i { background: #ffc46e; box-shadow: 0 0 10px #ffc46e; }
.cct__btn--neutral i { background: #fff3df; box-shadow: 0 0 10px #fff3df; }
.cct__btn--cool i { background: #c8e0ff; box-shadow: 0 0 10px #c8e0ff; }
.cct__btn[aria-checked="true"] { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.7); }
.cct__btn:active { transform: scale(0.96); }
@media (max-width: 860px) { .lswitch__logo { top: 18px; } }
@media (prefers-reduced-motion: reduce) { .js .wall__cell { opacity: 1; translate: none; } }
.lswitch.is-on .lswitch__pic img { transition: filter 900ms ease; }
.lswitch.is-on[data-temp="warm"] .lswitch__pic img { filter: sepia(0.28) saturate(1.25) hue-rotate(-6deg) brightness(1.02); }
.lswitch.is-on[data-temp="neutral"] .lswitch__pic img { filter: saturate(0.9) brightness(1.06); }
.lswitch.is-on[data-temp="cool"] .lswitch__pic img { filter: saturate(0.55) hue-rotate(175deg) sepia(0.12) hue-rotate(-170deg) brightness(1.08) contrast(1.04); }
.lswitch[data-temp="cool"] { --tint-a: 0.32; }
.lswitch[data-temp="warm"] { --tint-a: 0.22; }

/* ---------- Products: image category nav ---------- */
.catnav { padding-block: 4px 28px; }
.catnav__track { position: relative; display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-block: 8px 6px; }
.catnav__track::-webkit-scrollbar { display: none; }
.catcard { flex: none; width: clamp(108px, 9.5vw, 148px); display: grid; gap: 10px; justify-items: start; scroll-snap-align: start; border: 0; padding: 0; min-height: 0; border-radius: 0; background: none; white-space: normal; }
.catcard__img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 300ms ease, transform 400ms var(--ease-out); }
.catcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease-out); }
.catcard__img--all { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--graphite); }
.catcard__img--all img { object-fit: cover; }
.catcard__name { font-size: 0.92rem; font-weight: 500; line-height: 1.25; color: var(--ash); transition: color 200ms ease; }
.catcard[aria-current="true"] { background: none; color: inherit; }
.catcard[aria-current="true"] .catcard__img { box-shadow: 0 0 0 2px var(--graphite), 0 0 0 4px var(--linen); }
.catcard[aria-current="true"] .catcard__name { color: var(--linen); font-weight: 600; }
.catcard:active .catcard__img { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .catcard:hover .catcard__img { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgb(40 30 20 / 0.55), 0 0 0 1px var(--line-2); }
  .catcard:hover .catcard__img img { transform: scale(1.06); }
  .catcard:hover .catcard__name { color: var(--linen); }
}
.catcard { animation: catcard-in 700ms var(--ease-out) both; animation-delay: calc(var(--ci, 0) * 45ms); }
@keyframes catcard-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- B2B ---------- */
.b2b-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--brass); color: #1b1a18; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; }
.b2b-band, .b2b-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--tone); color: var(--linen); overflow: hidden; overflow: clip; }
.b2b-band__pic, .b2b-hero__pic { order: 2; position: relative; display: block; aspect-ratio: 1; width: 100%; max-width: 90svh; justify-self: end; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%); mask-image: linear-gradient(90deg, transparent 0%, #000 25%); }
.b2b-band__pic img, .b2b-hero__pic img { width: 100%; height: 100%; object-fit: contain; }
.b2b-band__text, .b2b-hero__text { order: 1; position: relative; z-index: 1; display: grid; justify-items: start; gap: 20px; padding-block: 64px; }
.b2b-band__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1.04; max-width: 15ch; text-wrap: balance; }
.b2b-band__lead { color: rgb(255 255 255 / 0.75); max-width: 46ch; font-size: 1.05rem; }
.b2b-list { display: grid; gap: 0; width: min(100%, 520px); border-top: 1px solid rgb(255 255 255 / 0.16); }
.b2b-list li { display: grid; gap: 2px; padding: 14px 0 14px 28px; border-bottom: 1px solid rgb(255 255 255 / 0.16); position: relative; }
.b2b-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 14px rgb(214 176 112 / 0.8); }
.b2b-list strong { font-weight: 600; }
.b2b-list span { color: rgb(255 255 255 / 0.65); font-size: 0.92rem; }
.js .b2b-list li { opacity: 0; translate: -12px 0; }
.js .b2b-band.is-in .b2b-list li { opacity: 1; translate: 0 0; transition: opacity 600ms ease calc(var(--k) * 120ms), translate 700ms var(--ease-out) calc(var(--k) * 120ms); }
.b2b-band__ctas, .b2b-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.b2b-hero .page-lead { color: rgb(255 255 255 / 0.78); }
.b2b-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding-block: clamp(56px, 7vw, 100px) 0; }
.perk { padding: 28px; border-radius: 10px; background: var(--smoke); display: grid; gap: 10px; align-content: start; }
.perk__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--graphite); color: var(--brass-2); }
.perk__title { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.perk p { color: var(--ash); }
.b2b-apply { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); padding-block: clamp(64px, 8vw, 120px); scroll-margin-top: calc(var(--header-h) + 20px); }
.steps { display: grid; gap: 18px; margin-top: 28px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; color: var(--ash); font-size: 1.05rem; }
.steps li span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--linen); font-weight: 600; font-variant-numeric: tabular-nums; }
.b2b-have { margin-top: 32px; color: var(--ash); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.field select { width: 100%; padding: 14px 16px; background: var(--smoke); color: var(--linen); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
.field select:focus { outline: none; border-color: var(--brass); }
.header-cta .i { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .b2b-band, .b2b-hero { grid-template-columns: 1fr; }
  .b2b-band__pic, .b2b-hero__pic { order: 0; max-width: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .b2b-band__text, .b2b-hero__text { padding-block: 0 56px; margin-top: -40px; }
  .b2b-perks, .b2b-apply, .form__grid { grid-template-columns: 1fr; }
  .catcard { width: 96px; }
  .catcard__name { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) { .catcard { animation: none; } .js .b2b-list li { opacity: 1; translate: none; } }

/* ---------- Location + map ---------- */
.loc { padding-block: clamp(80px, 9vw, 130px); background: var(--smoke); }
.loc__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.loc__info { display: grid; align-content: start; gap: 18px; }
.loc__label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash-2); margin-top: 10px; }
.loc__hq { display: grid; gap: 10px; justify-items: start; padding: 24px; border-radius: 10px; background: var(--graphite); box-shadow: 0 20px 40px -32px rgb(40 30 20 / 0.5); }
.loc__hq .loc__label { margin-top: 0; }
.loc__addr { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
.loc__lines { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 6px; }
.loc__lines a { display: inline-flex; align-items: center; gap: 8px; color: var(--ash); transition: color 200ms ease; }
.loc__lines .i { width: 18px; height: 18px; color: var(--brass-2); }
.loc__hq .btn--light { background: var(--linen); color: var(--graphite); }
.loc__list { border-top: 1px solid var(--line); }
.loc__list li { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.loc__city { font-weight: 600; }
.loc__city small { font-weight: 400; color: var(--ash-2); margin-left: 6px; font-size: 0.88rem; }
.loc__list a { font-variant-numeric: tabular-nums; color: var(--ash); }
.loc__go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background-color 200ms ease, color 200ms ease; }
.loc__go .i { width: 16px; height: 16px; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .loc__lines a:hover, .loc__list a:hover { color: var(--linen); }
  .loc__go:hover { background: var(--linen); color: var(--graphite) !important; }
}
.loc__map { position: relative; min-height: 420px; border-radius: 12px; overflow: hidden; background: var(--smoke-2); box-shadow: 0 30px 60px -40px rgb(40 30 20 / 0.55); }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.02); }
.is-contact .loc { margin-top: 0; }
@media (max-width: 860px) {
  .loc__inner { grid-template-columns: 1fr; }
  .loc__map { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Header logo a touch larger on desktop ---------- */
@media (min-width: 1081px) {
  .brand__mark { width: 158px; }
  :root { --header-h: 80px; }
}

/* ---------- Catalogue book: the fan stays in its own column ---------- */
.cat-band { overflow: hidden; overflow: clip; }
.cat-band__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.book { width: min(78%, 400px); margin-inline: 0 auto; }
@media (max-width: 860px) {
  .cat-band__inner { grid-template-columns: minmax(0, 1fr); }
  .book { width: min(62%, 300px); margin-inline: auto; margin-block: 8px 24px; }
}
.cat-band__text { position: relative; z-index: 2; }
.book__page--2 { transform: translate(calc(5% + var(--fan) * 6%), calc(-2% - var(--fan) * 2%)) rotate(calc(2deg + var(--fan) * 3deg)); }
.book__page--3 { transform: translate(calc(9% + var(--fan) * 12%), calc(-4% - var(--fan) * 3%)) rotate(calc(4deg + var(--fan) * 6deg)); }
.book__page--4 { transform: translate(calc(12% + var(--fan) * 17%), calc(-6% - var(--fan) * 4%)) rotate(calc(6deg + var(--fan) * 9deg)); }
.book__page--5 { transform: translate(calc(14% + var(--fan) * 21%), calc(-7% - var(--fan) * 5%)) rotate(calc(8deg + var(--fan) * 12deg)); }
@media (hover: hover) and (pointer: fine) {
  .book:hover .book__page--2 { transform: translate(12%, -4%) rotate(6deg); }
  .book:hover .book__page--3 { transform: translate(21%, -7%) rotate(11deg); }
  .book:hover .book__page--4 { transform: translate(29%, -10%) rotate(16deg); }
  .book:hover .book__page--5 { transform: translate(36%, -12%) rotate(21deg); }
}

/* ---------- Performance & smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* dimming is an overlay's opacity (cheap), not a filter on a big image */
.stack__card::after, .scard__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #0c0a08; opacity: var(--dim, 0); z-index: 3;
}
.scard__media img { transition: none; }
.stack__card { contain: layout paint; }
.scard__media { transform: translateZ(0); }
/* below-the-fold sections skip rendering work until they come near */

@media (hover: hover) and (pointer: fine) {
  .site-header { background: rgb(255 255 255 / 0.96); }
}

/* ---------- Category strip (products page) ---------- */
.catnav { position: relative; padding-block: 0 clamp(24px, 3vw, 36px); }
.catnav__track { scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; padding-block: 10px 8px; overscroll-behavior-x: contain; }
.catcard { justify-items: center; text-align: center; scroll-snap-align: start; width: clamp(112px, 9.6vw, 150px); }
.catcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; padding-inline: 2px; }
.catcard__img { border-radius: 14px; }
.catcard[aria-current="true"] .catcard__img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brass), 0 16px 28px -18px rgb(60 40 15 / 0.55); }
.catcard[aria-current="true"] .catcard__name { color: var(--linen); }
.catcard[aria-current="true"] .catcard__name::after { content: ""; display: block; width: 18px; height: 2px; margin: 6px auto 0; background: var(--brass); border-radius: 2px; }
.catcard[aria-current="true"] .catcard__name { -webkit-line-clamp: 3; }
/* the strip unfolds outward from the chosen category */
.catcard { animation: catcard-in 620ms var(--ease-out) both; animation-delay: calc(min(var(--ci, 0), 8) * 40ms); }
@keyframes catcard-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
/* soft fade at the edges that can still scroll */
.catnav__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
.catnav.can-left .catnav__track { --fl: 48px; }
.catnav.can-right .catnav__track { --fr: 48px; }
.catnav__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .catnav__arrow {
    display: grid; place-items: center; position: absolute; top: calc(10px + clamp(112px, 9.6vw, 150px) / 2); translate: 0 -50%;
    width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--linen); z-index: 2;
    box-shadow: 0 10px 24px -12px rgb(40 30 20 / 0.45), 0 0 0 1px var(--line);
    opacity: 0; pointer-events: none; transition: opacity 250ms ease, transform 160ms var(--ease-out);
  }
  .catnav__arrow .i { width: 18px; height: 18px; }
  .catnav__arrow--prev { left: max(10px, calc((100vw - var(--max)) / 2 + 10px)); }
  .catnav__arrow--next { right: max(10px, calc((100vw - var(--max)) / 2 + 10px)); }
  .catnav.can-left .catnav__arrow--prev, .catnav.can-right .catnav__arrow--next { opacity: 1; pointer-events: auto; }
  .catnav__arrow:active { transform: scale(0.94); }
}
@media (max-width: 640px) {
  .catcard { width: 100px; gap: 8px; }
  .catcard__img { border-radius: 12px; }
  .catcard__name { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .catcard { animation: none; } }
.filters .chips { position: relative; }
@media (max-width: 860px) { .filters .chips { display: none; } .filters { padding-block: 10px; } }

/* ---------- Spacing pass ---------- */
.hero { grid-template-columns: minmax(0, 1fr); }
.hero__scene { overflow: hidden; }
.hero__scene-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .hero__bar { gap: 14px; }
  .hero__dot { width: 22px; }
  .hero__ctas .btn { padding-inline: 18px; }
}
.feat { padding-top: clamp(72px, 9vw, 130px); }
@media (min-width: 1100px) { .search { flex-basis: 340px; } }

/* ---------- Header search (type in place, suggestions below) ---------- */
.hs { position: relative; }
.hs__btn { display: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--linen); margin-right: -10px; }
.hs__btn .i { width: 22px; height: 22px; }
.hs__field { position: relative; display: flex; align-items: center; width: 220px; height: 42px; border-radius: 999px; background: var(--smoke); box-shadow: inset 0 0 0 1px transparent; transition: width 420ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease; }
.hs__icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--ash); display: grid; pointer-events: none; }
.hs__icon .i { width: 18px; height: 18px; }
.hs__input { width: 100%; height: 100%; border: 0; background: none; padding: 0 40px 0 42px; font: inherit; font-size: 0.92rem; color: var(--linen); outline: none; border-radius: inherit; }
.hs__input::placeholder { color: var(--ash-2); }
.hs__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hs__close { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ash); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.hs__close .i { width: 16px; height: 16px; }
.site-header.hs-open .hs__field { width: min(400px, 34vw); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px -18px rgb(40 30 20 / 0.45); }
.site-header.hs-open .hs__close { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .hs__field:hover { background: var(--smoke-2); } .site-header.hs-open .hs__field:hover { background: #fff; } }

.hs__drop {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(560px, 92vw); max-height: min(70svh, 620px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 18px; padding: 18px; z-index: 60;
  box-shadow: 0 30px 70px -30px rgb(20 16 12 / 0.45), 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-6px) scale(0.985); transform-origin: top right;
  transition: opacity 180ms ease, transform 260ms var(--ease-out);
}
.hs__drop.is-open { opacity: 1; transform: none; }
.hs__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash-2); margin: 2px 6px 10px; }
.hs__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 16px; }
.hs__cats a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; font-size: 0.9rem; line-height: 1.2; color: var(--linen); }
.hs__thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--smoke); }
.hs__thumb img { width: 100%; height: 100%; object-fit: contain; }
.hs__pop { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 6px; }
.hs__pop button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: inherit; font-size: 0.86rem; color: var(--linen); background: #fff; }
.hs__list { display: grid; gap: 2px; }
.hs__list a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 12px; color: var(--linen); }
.hs__list .hs__thumb { width: 54px; height: 54px; border-radius: 9px; }
.hs__txt { display: grid; gap: 2px; min-width: 0; }
.hs__txt b { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs__txt small { font-size: 0.8rem; color: var(--ash-2); }
.hs__txt mark { background: none; color: var(--brass-2); }
.hs__list li[aria-selected="true"] a { background: var(--smoke); }
.hs__list li { animation: hs-in 300ms var(--ease-out) both; }
@keyframes hs-in { from { opacity: 0; transform: translateY(4px); } }
.hs__empty { padding: 10px 8px; color: var(--ash); font-size: 0.95rem; }
.hs__all { display: flex; justify-content: center; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--smoke); font-weight: 600; font-size: 0.9rem; color: var(--linen); }
.hs__all[hidden], .hs__list[hidden], .hs__empty[hidden], .hs__idle[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hs__cats a:hover, .hs__list a:hover { background: var(--smoke); }
  .hs__pop button:hover { background: var(--smoke); }
  .hs__all:hover { background: var(--smoke-2); }
}
@media (max-width: 1080px) {
  .hs { position: static; }
  .hs__btn { display: inline-grid; }
  .hs__field { display: none; }
  /* the whole header row turns into the search field */
  .site-header.hs-open .hs__field {
    display: flex; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: #fff; box-shadow: none;
    padding-inline: var(--gutter); z-index: 3; animation: hs-bar 260ms var(--ease-out);
  }
  .site-header.hs-open .hs__icon { left: var(--gutter); }
  .site-header.hs-open .hs__input { font-size: 1.05rem; padding-left: 34px; padding-right: 48px; }
  .site-header.hs-open .hs__close { right: calc(var(--gutter) - 8px); width: 42px; height: 42px; background: var(--smoke); }
  .hs__drop { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; padding: 18px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: inset 0 1px 0 var(--line); transform: translateY(8px); }
  .hs__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes hs-bar { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hs__drop, .hs__field { transition-duration: 1ms; } .hs__list li { animation: none; } }

/* ---------- Language menu ---------- */
.lxl { position: relative; }
.lxl__btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--linen); transition: background-color 200ms ease; }
.lxl__btn .i { width: 16px; height: 16px; transition: transform 250ms var(--ease-out); }
.lxl.is-open .lxl__btn .i { transform: rotate(180deg); }
.lxl__list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; padding: 6px; background: #fff; border-radius: 14px; z-index: 60; box-shadow: 0 24px 60px -24px rgb(20 16 12 / 0.45), 0 0 0 1px var(--line); animation: hs-in 220ms var(--ease-out); }
.lxl__list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 0.92rem; color: var(--linen); text-align: left; }
.lxl__list b { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ash-2); font-weight: 600; }
.lxl__list button[aria-current="true"] { background: var(--smoke); }
.lxl__list button[aria-current="true"] b { color: var(--brass-2); }
@media (hover: hover) and (pointer: fine) { .lxl__btn:hover, .lxl__list button:hover { background: var(--smoke); } }
@media (max-width: 1080px) { .lxl { display: none; } }
.lxl-m { display: flex; flex-wrap: wrap; gap: 6px; }
.lxl-m button { min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ash); }
.lxl-m button[aria-current="true"] { background: var(--linen); border-color: var(--linen); color: #fff; }

/* ---------- Translation service: keep every trace of it out of sight ---------- */
#gt-el, .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame, .goog-te-menu-frame, .goog-te-gadget, .goog-te-spinner-pos, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, .VIpgJd-yAWNEb-L7lbkb, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-xl07Ob-OEVmcd { display: none !important; visibility: hidden !important; }
html.is-translated, html.is-translated body { top: 0 !important; position: static; }
html.is-translated body { position: relative; }
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }
font { background: none !important; box-shadow: none !important; }
.site-header.hs-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; transform: none !important; }