/* ═══════════════════════════════════════════════════════════════
   G&Y Company · design system
   Monochrome, editorial, image-led — in the spirit of cleaf.it
   ═══════════════════════════════════════════════════════════════ */

/* The ampersand only.
   Archivo's & is flat and fights the elegant one in the gold logo, so a
   single character is served from an italic garamond instead. unicode-range
   means the browser downloads and applies it for U+0026 and nothing else —
   no markup, no spans, works in every string on the site. */
@font-face {
  font-family: 'GYAmp';
  font-style: normal;          /* the file is italic; labelled upright so it matches body text */
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/ebgaramond/v33/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7eOQL99U6g.woff2') format('woff2');
  unicode-range: U+0026;
}

:root {
  --ink: #101010;
  --ink-soft: #4a4a4a;
  --paper: #ffffff;
  --paper-warm: #f4f2ee;
  --line: #e3e0da;
  --black: #0c0c0c;
  --font: 'GYAmp', 'Jost', system-ui, -apple-system, sans-serif;
  --font-exp: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --track: 0.14em;
  --header-h: 48px;          /* main row */
  --util-h: 32px;            /* utility strip above it */
  --header-total: 80px;      /* both, for page offsets */
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gold: #b8912f;          /* G&Y house colour */
  --gold-soft: #d8b75e;
}

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

html { scroll-behavior: smooth; }

body {
  overflow-x: clip;              /* contains the full-bleed bands */
  font-family: var(--font);
  font-weight: 300;
  font-size: 16.5px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography helpers ────────────────────────────────────────── */
.kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2, h3 { font-family: var(--font-exp); font-weight: 600; line-height: 1.06; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.display {
  /* a serif carries more weight per em, so it runs slightly larger with
     almost no negative tracking */
  font-size: clamp(2.8rem, 7.4vw, 6.4rem);
  letter-spacing: -0.005em;
}

.h-section {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  letter-spacing: 0;
}

/* ── Header ────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-total);
  /* Warmed very slightly and graded downward so it hands off to the
     catalogue band below instead of meeting it as a seam of flat black. */
  background:
    radial-gradient(70% 200% at 12% 0%, rgba(184, 145, 47, 0.10), transparent 60%),
    linear-gradient(180deg, #0d0c0a 0%, #141310 100%);
  color: #fff;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease),
              height 0.35s var(--ease);
}
/* Scrolled: the utility strip folds away and only the main row rides along. */
.site-header.scrolled { height: var(--header-h); }
.site-header.over-hero { background: transparent; }
.site-header.over-hero .util-bar { border-bottom-color: rgba(255,255,255,0.16); }
.site-header.scrolled { background: var(--black); }
.site-header.hidden { transform: translateY(-100%); }

.site-header .inner {
  position: relative;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ── Utility strip ─────────────────────────────────────────────── */
.util-bar {
  height: var(--util-h);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: height 0.35s var(--ease), opacity 0.25s var(--ease);
}
.site-header.scrolled .util-bar { height: 0; opacity: 0; border-bottom-color: transparent; }
.util-inner {
  height: var(--util-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
.util-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
  transition: color 0.22s var(--ease);
}
.util-tel svg { width: 13px; height: 13px; opacity: 0.8; }
.util-tel:hover { color: var(--gold-soft); }
.util-hours { opacity: 0.8; }
.util-inner .lang-switch { margin-left: auto; }

/* ── Search + call to action ───────────────────────────────────── */
.hsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: border-color 0.25s var(--ease);
}
.hsearch:focus-within { border-bottom-color: var(--gold-soft); }
.hsearch button {
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer; opacity: 0.75;
}
.hsearch button:hover { opacity: 1; color: var(--gold-soft); }
.hsearch svg { width: 15px; height: 15px; }
.hsearch input {
  width: 116px;
  background: none;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  padding: 2px 0;
  transition: width 0.3s var(--ease);
}
.hsearch input::placeholder { color: rgba(255, 255, 255, 0.4); }
.hsearch input:focus { outline: none; width: 180px; }
.hsearch input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }

.hcta {
  flex: none;
  border: 1px solid var(--gold-soft);
  color: var(--gold-soft);
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.hcta:hover { background: var(--gold-soft); color: var(--black); }

.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-img { height: 32px; width: auto; display: block; }
.logo-img-wide { height: 62px; width: auto; display: block; }
.logo-mark {
  font-family: var(--font-exp);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.logo-mark em { font-style: normal; font-weight: 300; color: var(--gold-soft); opacity: 1; }
.logo-word {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  opacity: 0.75;
}

/* Optically centred rather than pushed right: the old layout left a wide
   dead gap in the middle of every page. */
@media (min-width: 901px) {
  .main-nav { position: absolute; left: 50%; transform: translateX(-50%); }
}
.header-tools { margin-left: auto; }
.main-nav ul { display: flex; gap: 28px; }
.main-nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
  opacity: 0.85;
  transition: opacity 0.25s;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.main-nav a:hover, .main-nav .active a { opacity: 1; }
.main-nav a:hover::after, .main-nav .active a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-tools { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  font-size: 11px;
  letter-spacing: 0.1em;
  display: flex;
  gap: 6px;
  opacity: 0.7;
}
.lang-switch a.on { font-weight: 600; opacity: 1; }
.lang-switch a:hover { opacity: 1; }

/* Hamburger (mobile) */
.hamburger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 28px; height: 20px;
  position: relative;
}
.hamburger span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: #fff;
  transition: 0.3s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
body.menu-open .hamburger span:nth-child(1) { top: 9px; transform: rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
/* Nested accordion. The label always navigates; the +/- only expands,
   so browsing the tree never costs you the page you wanted. */
.mm-nav { width: 100%; max-height: 68svh; overflow-y: auto; }

/* The collapsing row lives on the <li>, not on the child <ul>.
   Putting 0fr on a multi-child grid only ever collapses its FIRST row,
   which left later children visible while the first hid. */
.mm-item.has-kids {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.mm-item.has-kids.open { grid-template-rows: auto 1fr; }
.mm-kids { overflow: hidden; min-height: 0; }

.mm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* parents are buttons that only expand — tapping the label never navigates,
   which is what made the two behaviours on one row confusing */
button.mm-row {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.mm-row > span:first-child {
  flex: 1;
  min-width: 0;
  font-family: var(--font-exp);
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  padding: 13px 0;
  color: #fff;
}
.mm-row a {
  flex: 1;
  min-width: 0;
  display: block;
  font-family: var(--font-exp);
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  padding: 13px 0;
  color: #fff;
}

/* Top level reads as the section it is, not as a peer of its own children */
.mm-nav > .mm-item > .mm-row a { letter-spacing: -0.01em; }
.mm-nav > .mm-item.has-kids > .mm-row { border-bottom-color: rgba(255,255,255,0.28); }

/* the +/- : small, thin, unobtrusive */
.mm-plus {
  flex: none;
  position: relative;
  display: block;
  width: 26px; height: 26px;
  opacity: 0.75;
  transition: opacity 0.2s var(--ease);
}
button.mm-row:hover .mm-plus { opacity: 1; }
.mm-plus i {
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease), background 0.2s;
}
.mm-plus i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.mm-item.open > .mm-row .mm-plus i:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.mm-item.open > .mm-row .mm-plus i { background: var(--gold); }

/* ── Tree lines ────────────────────────────────────────────────── */
/* A spine down each open branch, with a tick out to every child. */
.mm-kids > .mm-item { position: relative; padding-left: 20px; }
.mm-kids > .mm-item::before {          /* the spine */
  content: '';
  position: absolute;
  left: 5px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.20);
}
.mm-kids > .mm-item:last-child::before { bottom: auto; height: 22px; }  /* stop at the elbow */
.mm-kids > .mm-item::after {           /* the tick across to the label */
  content: '';
  position: absolute;
  left: 5px; top: 22px;
  width: 11px; height: 1px;
  background: rgba(255, 255, 255, 0.20);
}
.mm-kids > .mm-item.open::before,
.mm-kids > .mm-item.open::after { background: rgba(201, 162, 39, 0.55); }

.mm-kids .mm-row { border-bottom-color: rgba(255,255,255,0.07); }
.mm-kids .mm-row a,
.mm-kids button.mm-row > span:first-child { font-size: clamp(1.05rem, 4vw, 1.45rem); opacity: 0.85; padding: 10px 0; }
.mm-kids .mm-kids > .mm-item::after { top: 18px; }
.mm-kids .mm-kids .mm-row a,
.mm-kids .mm-kids button.mm-row > span:first-child { font-size: clamp(0.92rem, 3.3vw, 1.1rem); opacity: 0.7; padding: 8px 0; }

.mobile-lang { margin-top: 40px; display: flex; gap: 24px; }
.mobile-lang a {
  font-size: 12px; letter-spacing: var(--track); text-transform: uppercase;
  opacity: 0.6;
}
.mobile-lang a.on { opacity: 1; border-bottom: 1px solid #fff; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #23272b;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* darkened enough that the headline holds against any frame */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.78) 100%);
}
.hero::before {
  display: none;
  /* woodgrain overlay retired — the building photo carries the hero now */
  content: '';
  position: absolute; inset: -50%;
  background:
    repeating-linear-gradient(97deg,
      rgba(255,255,255,0.028) 0 2px, transparent 2px 7px,
      rgba(0,0,0,0.05) 7px 9px, transparent 9px 18px),
    repeating-linear-gradient(94deg,
      rgba(255,255,255,0.02) 0 1px, transparent 1px 12px);
  animation: grain-drift 40s linear infinite alternate;
}
@keyframes grain-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(6%); }
}
.hero .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: calc(var(--pad) * 1.4) var(--pad);
}
.hero .kicker { color: rgba(255,255,255,0.75); margin-bottom: 24px; }
.hero h1 span {
  display: block;
  overflow: hidden;
}
.hero h1 span i {
  font-style: normal;
  display: block;
  transform: translateY(110%);
  animation: rise 1s var(--ease) forwards;
}
.hero h1 span:nth-child(2) i { animation-delay: 0.12s; }
@keyframes rise { to { transform: translateY(0); } }
.hero .sub {
  max-width: 520px;
  margin-top: 28px;
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  opacity: 0;
  animation: fade 1s 0.5s forwards;
}
@keyframes fade { to { opacity: 1; } }
.hero .cta-row { margin-top: 40px; opacity: 0; animation: fade 1s 0.7s forwards; }

.scroll-hint {
  position: absolute;
  right: var(--pad);
  bottom: 40px;
  z-index: 2;
  width: 1px; height: 70px;
  background: rgba(255,255,255,0.35);
  overflow: hidden;
}
.scroll-hint::after {
  content: '';
  position: absolute; top: -50%;
  width: 100%; height: 50%;
  background: #fff;
  animation: scroll-line 2s var(--ease) infinite;
}
@keyframes scroll-line { to { top: 110%; } }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid currentColor;
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease);
  z-index: 1;
  cursor: pointer;
  background: none;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  /* Explicit per-variant fill — never currentColor, or the hover colour
     change would repaint the fill to match the text and hide it. */
  background: #fff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: scaleY(1); }
.btn.light::before { background: #fff; }
.btn.light:hover { color: var(--ink); }
.btn.dark::before { background: var(--black); }
.btn.dark:hover { color: #fff; }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.text-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: opacity 0.25s;
}
.text-link:hover { opacity: 0.55; }

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding: clamp(70px, 10vw, 140px) var(--pad); }
.section.warm { background: var(--paper-warm); }
.section.dark { background: var(--black); color: #fff; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(36px, 5vw, 70px);
}
.section-head .kicker { margin-bottom: 14px; }
.section-head p.sub { color: var(--ink-soft); margin-top: 12px; max-width: 440px; }
.section.dark .kicker, .section.dark p.sub { color: rgba(255,255,255,0.6); }

/* ── Header submenu ────────────────────────────────────────────── */
.main-nav .has-sub { position: relative; }
.main-nav .submenu {
  position: absolute;
  top: 100%; left: -22px;
  min-width: 250px;
  background: var(--black);
  padding: 14px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: 0.3s var(--ease);
}
.main-nav .has-sub:hover .submenu,
.main-nav .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav .submenu ul { display: block; }
.main-nav .submenu a {
  display: block;
  padding: 9px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.7;
}
.main-nav .submenu a::after { display: none; }
.main-nav .submenu a:hover { opacity: 1; background: rgba(255,255,255,0.06); }

/* ── Family grid (homepage) ────────────────────────────────────── */
.grid-families {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card-family {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.card-family:hover { background: var(--black); color: #fff; }
.card-family .fam-n {
  font-size: 11px;
  letter-spacing: var(--track);
  color: var(--ink-soft);
  transition: color 0.35s;
}
.card-family:hover .fam-n { color: rgba(255,255,255,0.55); }
.card-family h3 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  margin: 16px 0 12px;
}
.card-family p {
  font-size: 13.5px;
  color: var(--ink-soft);
  flex: 1;
  transition: color 0.35s;
}
.card-family:hover p { color: rgba(255,255,255,0.72); }
.card-family .fam-cnt {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-family .fam-cnt .arrow {
  transform: translateX(-6px);
  opacity: 0;
  transition: 0.35s var(--ease);
}
.card-family:hover .fam-cnt .arrow { transform: translateX(0); opacity: 1; }

/* -- Product browser ----------------------------------------------- */
.page-head.slim { padding-bottom: clamp(20px, 2.5vw, 32px); }

.browse { padding: 0 var(--pad) clamp(60px, 9vw, 120px); }

/* One calm header band instead of a giant title plus a bordered strip.
   Four stacked rules in a row read as stripes, not structure. */
.mtoolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(26px, 4vw, 46px) 0 20px;
}
.mt-id { min-width: 0; }
.mt-title {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  letter-spacing: 0;
  margin-top: 6px;
}
.mt-lead {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px;
  max-width: 520px;
}

.filter-open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 9px 15px;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: 0.2s var(--ease);
}
.filter-open svg { width: 16px; height: 16px; }
.filter-open:hover { background: var(--ink); color: #fff; }
.filter-n {
  min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  font-size: 10px;
}

/* distributors */
.dist-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.dist {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-soft);
  transition: 0.22s var(--ease);
}
.dist:hover { border-color: var(--brand); color: var(--ink); }
.dist.on {
  border-color: var(--brand); color: var(--ink); font-weight: 500;
  background: color-mix(in srgb, var(--brand) 10%, var(--paper));
}
.dist-box {
  flex: none; width: 16px; height: 16px;
  border: 1.5px solid var(--line); border-radius: 3px;
  background: var(--paper); position: relative;
  transition: 0.22s var(--ease);
}
.dist:hover .dist-box { border-color: var(--brand); }
.dist.on .dist-box { background: var(--brand); border-color: var(--brand); }
.dist.on .dist-box::after {
  content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.dist-n { font-size: 10.5px; color: #a9a49b; font-variant-numeric: tabular-nums; }
.dist.on .dist-n { color: var(--ink-soft); }

/* -- Filter rows: full width, expand in place ----------------------- */
.filter-rows { display: grid; gap: 0; padding-bottom: 20px; }
body.filters-hidden .filter-rows { display: none; }

.frow-f {
  border-bottom: 1px solid var(--line);
  background: none;
}
.frow-f summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 34px 15px 0;
  position: relative;
}
.frow-f summary::-webkit-details-marker { display: none; }
.ff-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink);
  flex: none;
}
.ff-value {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ff-value.set {
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  padding: 3px 10px;
  border-radius: 3px;
}
.frow-f summary::after {
  content: "";
  position: absolute; right: 20px;
  width: 8px; height: 8px;
  border-right: 1.4px solid var(--ink-soft);
  border-bottom: 1.4px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s var(--ease);
}
.frow-f[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.frow-f ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 24px;
  padding: 2px 0 16px;
}
.frow-f li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: color 0.18s var(--ease);
}
.frow-f li a:hover { color: var(--ink); }
.frow-f li a.on { color: var(--ink); font-weight: 500; }
.ff-mark {
  flex: none; width: 12px; height: 12px;
  border: 1px solid var(--line); border-radius: 2px;
  transition: 0.18s var(--ease);
}
.frow-f li a:hover .ff-mark { border-color: var(--ink-soft); }
.frow-f li a.on .ff-mark {
  background: var(--ink); border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.ff-name { flex: 1; }
.ff-n { flex: none; font-size: 10.5px; color: #a9a49b; font-variant-numeric: tabular-nums; }

/* results */
.results {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brand) 4%, transparent),
      color-mix(in srgb, var(--brand) 4%, transparent)),
    var(--paper);
  transition: background 0.4s var(--ease);
  /* flush with the toolbar, distributors and filter rows above it */
  padding: 0 0 22px;
}
.results-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 18px;
  padding: 0 0 20px;
  margin-bottom: 4px;
}
.rcount { font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 20px;
  color: var(--ink);
  transition: 0.2s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip .x { color: var(--ink-soft); font-size: 13px; line-height: 1; }
.chip.clear {
  border-style: dashed; color: var(--ink-soft);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: var(--track);
}
.empty { color: var(--ink-soft); padding: 20px 0; }

@media (max-width: 760px) {
  .frow-f summary { padding: 14px 40px 14px 16px; }
  .frow-f ul { grid-template-columns: 1fr; padding: 4px 16px 14px; }
  .dist { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: 12.5px; }
  .results { background: var(--paper); padding: 0; }
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ── Collection grid ───────────────────────────────────────────── */
.grid-collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}
.card-collection {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #24211e;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.card-collection .img,
.card-collection img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.6s;
}
.card-collection:hover .img,
.card-collection:hover img { transform: scale(1.06); }
.card-collection::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.05) 45%);
}
.card-collection .meta {
  position: relative;
  z-index: 2;
  padding: 26px;
  width: 100%;
}
.card-collection .meta .count {
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  opacity: 0.7;
}
.card-collection .meta h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-collection .meta h3 .arrow {
  font-family: var(--font);
  font-weight: 300;
  transform: translateX(-8px);
  opacity: 0;
  transition: 0.35s var(--ease);
}
.card-collection:hover .meta h3 .arrow { transform: translateX(0); opacity: 1; }

/* ── Product grid ──────────────────────────────────────────────── */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.card-product .frame {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-warm);
  position: relative;
}
.card-product .frame .img,
.card-product .frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.card-product:hover .frame .img,
.card-product:hover .frame img { transform: scale(1.05); }
.card-product .meta { padding: 16px 2px 0; }
.card-product .meta .code {
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-product .meta h3 {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  margin-top: 4px;
}
.section.dark .card-product .meta .code { color: rgba(255,255,255,0.55); }

/* CSS texture placeholders (products without photos yet) */
.ph { background-size: cover; }
.ph-1 { background: linear-gradient(120deg, #8a7561, #b5a08a 55%, #7c6753); }
.ph-2 { background: linear-gradient(120deg, #494540, #6e6a63 55%, #3c3833); }
.ph-3 { background: linear-gradient(120deg, #c9c2b6, #e8e3da 55%, #b3aa9c); }
.ph-4 { background: linear-gradient(120deg, #5d4a3a, #85705c 55%, #4a3a2c); }
.ph-5 { background: linear-gradient(120deg, #9aa0a3, #c4c9cc 55%, #85898c); }
.ph-6 { background: linear-gradient(120deg, #2e2c2a, #4a4744 55%, #232120); }
.ph::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(96deg,
    rgba(255,255,255,0.05) 0 2px, transparent 2px 6px,
    rgba(0,0,0,0.04) 6px 8px, transparent 8px 16px);
}

/* ── Statement / about band ────────────────────────────────────── */
.about-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.about-band .visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #35302b, #55493e 50%, #201c19);
  position: relative;
  overflow: hidden;
}
.about-band .visual::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(93deg,
    rgba(255,255,255,0.04) 0 2px, transparent 2px 8px,
    rgba(0,0,0,0.06) 8px 10px, transparent 10px 20px);
}
.about-band .copy p { color: var(--ink-soft); margin: 22px 0 32px; max-width: 480px; }
.section.dark .about-band .copy p { color: rgba(255,255,255,0.7); }
.about-band .copy h2 { margin-top: 14px; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(50px, 7vw, 90px);
}
.stat {
  padding: 34px 20px 0;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num {
  font-family: var(--font-exp);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
}
.stat .lbl {
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}
.section.dark .stats { border-color: rgba(255,255,255,0.15); }
.section.dark .stat { border-color: rgba(255,255,255,0.15); }
.section.dark .stat .lbl { color: rgba(255,255,255,0.55); }

/* ── Downloads ─────────────────────────────────────────────────── */
.dl-list { border-top: 1px solid var(--line); }
.dl-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease);
}
.dl-row:hover { padding-left: 12px; }
.dl-row .thumb {
  width: 64px; height: 84px;
  background: linear-gradient(140deg, #3a352f, #5c5248);
  flex: none;
  position: relative;
  overflow: hidden;
}
.dl-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.dl-row .info { flex: 1; }
.dl-row .info h3 { font-family: var(--font); font-weight: 500; font-size: 17px; }
.dl-row .info span { font-size: 12px; color: var(--ink-soft); }
.lang-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-soft);
  vertical-align: 1px;
}
.section.dark .lang-tag { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); }
.section.dark .dl-row { border-color: rgba(255,255,255,0.15); }
.section.dark .dl-list { border-color: rgba(255,255,255,0.15); }
.section.dark .dl-row .info span { color: rgba(255,255,255,0.55); }
.section.dark .text-link { border-color: #fff; }

/* ── Page hero (interior pages) ───────────────────────────────── */
.page-head {
  /* The --header-h portion is structural (clears the fixed header);
     only the clamp() is breathing space. */
  padding: calc(var(--header-total) + clamp(9px, 1.6vw, 20px)) var(--pad) clamp(40px, 6vw, 80px);
}
.page-head .kicker { margin-bottom: 16px; }
.page-head p.lead {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 640px;
  margin-top: 20px;
}

/* ── Filter bar (products) ─────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 0 var(--pad) 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(36px, 5vw, 60px);
}
.filter-bar a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 8px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: 0.25s;
}
.filter-bar a:hover { color: var(--ink); }
.filter-bar a.on { color: var(--ink); border-color: var(--ink); }

/* ── Product detail ────────────────────────────────────────────── */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding: calc(var(--header-total) + clamp(30px, 6vw, 70px)) var(--pad) clamp(60px, 9vw, 120px);
}
.product-detail .visual {
  aspect-ratio: 1;
  width: 100%;
  /* The square would otherwise grow with the column and outgrow the
     viewport, forcing a scroll just to see the whole image. Capping the
     width caps the height too, since it stays square. */
  max-width: min(100%, calc(100svh - var(--header-total) - 130px));
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}
.product-detail .visual .img,
.product-detail .visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.product-detail .info { padding-top: clamp(0px, 3vw, 40px); }
.product-detail .info .code {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.product-detail .info h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 14px 0 24px; }
.product-detail .info .desc { color: var(--ink-soft); max-width: 480px; }
.product-detail .specs { margin-top: 40px; border-top: 1px solid var(--line); }
.product-detail .specs .row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.product-detail .specs .row span:first-child {
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
  padding-top: 2px;
}
.product-detail .back { margin-top: 40px; display: inline-block; }

/* ── Contact ───────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-cell { background: var(--paper); padding: 36px 30px; }
.contact-cell h3 {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.contact-cell p, .contact-cell a { font-size: 16px; font-weight: 400; }
.contact-cell a:hover { opacity: 0.6; }

/* ── Partners strip ────────────────────────────────────────────── */
.partners {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  padding: clamp(44px, 6vw, 72px) var(--pad);
}
.partners-inner { text-align: center; }
.partners .kicker { margin-bottom: 30px; }
.partner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 72px);
}
/* Sized so stacked (near-square) and wide wordmark logos read at a
   similar optical weight when the row holds a mix of both. */
.partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  max-width: 170px;
  flex: 0 0 auto;
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
  filter: grayscale(1);
  opacity: 0.55;
}
a.partner:hover { filter: grayscale(0); opacity: 1; }
.partner img {
  /* height, not max-height: an SVG with only a viewBox has no intrinsic
     size, so width:auto collapses to nothing unless height is definite. */
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}
/* Fallback shown until the official logo file is uploaded */
.partner-wordmark {
  font-family: var(--font-exp);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 18px;
  background: var(--paper);
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: #fff;
  padding: clamp(56px, 8vw, 100px) var(--pad) 0;
}
.site-footer .inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(46px, 6vw, 80px);
}
.site-footer .f-brand p {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  max-width: 300px;
}
.site-footer h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}
.site-footer .f-col ul li { margin-bottom: 10px; font-size: 14px; color: rgba(255,255,255,0.8); }
.site-footer .f-col a:hover { color: #fff; }
.f-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 22px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

/* ── Reveal on scroll ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 span i { transform: none; }
  .hero .sub, .hero .cta-row { opacity: 1; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: block; }
  .util-hide-sm { display: none; }
  .hsearch { display: none; }
  .hcta { padding: 7px 12px; font-size: 9.5px; }
  .util-inner { gap: 14px; }
  .header-tools { margin-left: auto; }
  .about-band { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr; gap: 34px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  .stat:first-child { border-top: 0; margin-top: 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

.product-detail .specs .spec-link {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.25s;
}
.product-detail .specs .spec-link:hover { border-color: var(--ink); }

/* ── Supplier groups (products landing) ────────────────────────── */
/* Each band is tinted from --brand, sampled from that supplier's logo. */
.suppliers {
  padding: 0 var(--pad) clamp(30px, 4vw, 50px);
  display: grid;
  gap: 2px;
}
.supplier {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 36px);
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brand) 6%, transparent),
      color-mix(in srgb, var(--brand) 6%, transparent)),
    var(--paper);
  border-left: 3px solid color-mix(in srgb, var(--brand) 45%, var(--ink));
  transition: background 0.35s var(--ease);
}
.supplier:hover {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brand) 11%, transparent),
      color-mix(in srgb, var(--brand) 11%, transparent)),
    var(--paper);
}
.supplier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.supplier-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.supplier-name { font-family: var(--font-exp); font-weight: 600; font-size: 20px; }
.supplier-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; max-width: 380px; }
.supplier-all {
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 45%, var(--ink));
  white-space: nowrap;
  padding-top: 6px;
}
.supplier-all .arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.supplier-all:hover .arrow { transform: translateX(5px); }

.supplier-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.supplier-lines li { background: var(--paper); }
.supplier-lines li a,
.supplier-lines li > .ln {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
}
.supplier-lines li a { transition: background 0.2s var(--ease); }
.supplier-lines li a:hover { background: color-mix(in srgb, var(--brand) 9%, var(--paper)); }
.supplier-lines .lc {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.supplier-lines li.soon { opacity: 0.5; }
.supplier-lines li.soon > .ln { display: flex; padding: 14px 16px; }
.supplier-lines li.soon .lc { text-transform: uppercase; letter-spacing: var(--track); }

@media (max-width: 700px) {
  .supplier-head { flex-direction: column; gap: 12px; }
  .supplier-lines { grid-template-columns: 1fr; }
}

/* -- Company video: ambient, no player chrome ---------------------- */
.video-section { padding-bottom: clamp(50px, 7vw, 90px); }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Full bleed: break out of the section padding to span the viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--black);
  overflow: hidden;
}
.video-frame iframe,
.video-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* A whisper of vignette so the clip sits in the page rather than on it. */
.video-frame::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.34);
}

.video-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  background:
    repeating-linear-gradient(97deg,
      rgba(255,255,255,0.03) 0 2px, transparent 2px 8px);
}

@media (max-width: 700px) {
  .video-frame { aspect-ratio: 4 / 3; }
}

/* ── Distributor bar (horizontal, checkbox-style) ──────────────── */
/* Selecting a distributor tints the whole results surface with that
   brand's colour, so you always know whose catalogue you are inside. */
.results {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brand) 4%, transparent),
      color-mix(in srgb, var(--brand) 4%, transparent)),
    var(--paper);
  transition: background 0.4s var(--ease);
}

.dist {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-soft);
  transition: 0.22s var(--ease);
}
.dist:hover { border-color: var(--brand); color: var(--ink); }
.dist.on {
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 500;
  background: color-mix(in srgb, var(--brand) 10%, var(--paper));
}

/* the checkbox itself */
.dist-box {
  flex: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  position: relative;
  transition: 0.22s var(--ease);
}
.dist:hover .dist-box { border-color: var(--brand); }
.dist.on .dist-box { background: var(--brand); border-color: var(--brand); }
.dist.on .dist-box::after {
  content: '';
  position: absolute;
  left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.dist-n {
  font-size: 10.5px;
  color: #a9a49b;
  font-variant-numeric: tabular-nums;
}
.dist.on .dist-n { color: var(--ink-soft); }

.results-head, .results .grid-products, .results .empty { padding-left: 18px; padding-right: 18px; }
.results .grid-products { padding-bottom: 22px; }

/* ── Mobile toolbar ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .mtoolbar {
    align-items: center;
    gap: 14px;
    padding: 12px 0 10px;
  }
  .mt-title { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
  .mt-lead { display: none; }

  /* compact, right-aligned — not a full-width slab */
  .filter-open {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding: 9px 14px;
    background: none;
    color: var(--ink);
    border: 1px solid var(--ink);
    gap: 8px;
    flex: none;
  }
  .filter-n { background: var(--gold); }

  .dist-bar { padding: 14px 0 12px; }
  .dist { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: 12.5px; }
  .results-head, .results .grid-products, .results .empty { padding-left: 0; padding-right: 0; }
  .results { background: var(--paper); }   /* tint reads as dirt on a small screen */
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Distributor logo inside the checkbox chip */
.dist-logo {
  height: 26px;
  width: auto;
  max-width: 108px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.dist:hover .dist-logo { filter: grayscale(0.4); opacity: 0.85; }
.dist.on .dist-logo { filter: grayscale(0); opacity: 1; }
.dist { padding: 9px 16px 9px 12px; }
@media (max-width: 760px) { .dist-logo { height: 22px; max-width: 84px; } }

/* ── Distributor cards (homepage entry point) ──────────────────── */
.dist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  border: 1px solid var(--line);
  background: var(--line);
}
.dist-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 28px;
  min-height: 250px;
  background: var(--paper);
  border-top: 3px solid color-mix(in srgb, var(--brand) 45%, var(--ink));
  transition: background 0.35s var(--ease);
}
.dist-card:hover { background: color-mix(in srgb, var(--brand) 7%, var(--paper)); }

.dc-logo { height: 52px; display: flex; align-items: center; }
.dc-logo img {
  max-height: 52px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}
.dist-card:hover .dc-logo img { filter: grayscale(0); opacity: 1; }
.dc-logo span { font-family: var(--font-exp); font-weight: 600; font-size: 20px; }

.dc-note {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 20px;
  flex: 1;
}
.dc-meta {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dc-meta strong { color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.dc-meta .arrow { transform: translateX(-6px); opacity: 0; transition: 0.35s var(--ease); }
.dist-card:hover .dc-meta .arrow { transform: translateX(0); opacity: 1; }

/* ── Company page ──────────────────────────────────────────────── */
.co-hero {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--black);
  overflow: hidden;
}
.co-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.co-hero-fallback {
  background:
    linear-gradient(150deg, #35302b, #55493e 50%, #201c19);
}
/* darkened enough for the title to hold against any frame of the clip */
.co-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.34) 40%, rgba(0,0,0,0.80) 100%);
}
.co-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: calc(var(--header-total) + clamp(60px, 9vw, 110px)) var(--pad) clamp(40px, 6vw, 70px);
}
.co-hero-inner .kicker { color: rgba(255,255,255,0.75); margin-bottom: 18px; }
.co-hero-inner .sub {
  max-width: 560px;
  margin-top: 22px;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
}
.co-hero-inner.no-title .kicker { margin-bottom: 10px; }
.co-hero-inner.no-title .sub { margin-top: 0; }

.co-intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.co-copy .lead {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--ink);
  margin-bottom: 20px;
}
.co-copy p { color: var(--ink-soft); }
.co-stats { margin-top: 0; grid-template-columns: 1fr; border-top: 0; }
.co-stats .stat {
  border-left: 0;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 20px;
}
.co-stats .stat:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* ── Location ──────────────────────────────────────────────────── */
.co-map-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border: 1px solid var(--line);
  min-height: 420px;
}
/* Full colour: the desaturation suited the old roadmap view, but it turns
   satellite imagery muddy. */
.co-map { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.co-place {
  padding: clamp(26px, 3vw, 38px);
  border-left: 1px solid var(--line);
  background: var(--paper-warm);
}
.co-place h3 { font-size: 1.3rem; margin-bottom: 22px; }
.co-place dl { margin-bottom: 26px; }
.co-place dt {
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 16px;
}
.co-place dt:first-child { margin-top: 0; }
.co-place dd { font-size: 14px; margin-top: 5px; }
.co-place dd a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .co-intro { grid-template-columns: 1fr; }
  .co-map-wrap { grid-template-columns: 1fr; min-height: 0; }
  .co-map-solo .co-map { min-height: 300px; }
  .co-map { min-height: 320px; }
  .co-place { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Search box (products toolbar) ─────────────────────────────── */
.psearch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  min-width: 0;
  border: 1px solid var(--line);
  padding: 7px 12px;
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}
.psearch:focus-within { border-color: var(--ink); }
.psearch svg { width: 15px; height: 15px; flex: none; color: var(--ink-soft); }
.psearch input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 13px; font-weight: 300;
  border: 0; background: none; color: var(--ink);
  padding: 2px 0;
}
.psearch input:focus { outline: none; }
.psearch input::-webkit-search-cancel-button { display: none; }
.psearch-x { flex: none; color: var(--ink-soft); font-size: 17px; line-height: 1; padding: 0 2px; }
.psearch-x:hover { color: var(--ink); }

/* ── Quick view ────────────────────────────────────────────────── */
.card-product { position: relative; }
.cp-link { display: block; }

.qv-btn {
  position: absolute;
  left: 10px; right: 10px; bottom: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.qv-btn svg { width: 15px; height: 15px; }
.card-product:hover .qv-btn,
.qv-btn:focus-visible { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .qv-btn { opacity: 1; transform: none; }   /* touch has no hover to reveal it */
}

.qv-modal { position: fixed; inset: 0; z-index: 200; }
.qv-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
body.qv-open { overflow: hidden; }

.qv-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 900px);
  max-height: 88vh;
  overflow: auto;
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.qv-close {
  position: absolute; top: 10px; right: 14px;
  z-index: 2;
  background: none; border: 0;
  font-size: 30px; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.qv-close:hover { color: var(--ink); }

.qv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.qv-visual { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-warm); }
.qv-visual .img, .qv-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qv-info { padding: clamp(24px, 3vw, 40px); border-left: 3px solid color-mix(in srgb, var(--brand) 45%, var(--ink)); }
.qv-code { font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); }
.qv-info h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 10px 0 8px; }
.qv-brand {
  display: inline-block;
  font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 45%, var(--ink)); margin-bottom: 16px;
}
.qv-desc { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; }
.qv-specs { border-top: 1px solid var(--line); margin-bottom: 22px; }
.qv-specs dt {
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft); margin-top: 12px;
}
.qv-specs dd { font-size: 13.5px; margin-top: 3px; }
.qv-load { display: grid; place-items: center; min-height: 300px; }
.qv-load i {
  width: 30px; height: 30px;
  border: 2px solid var(--line); border-top-color: var(--ink);
  border-radius: 50%;
  animation: qv-rot 0.9s linear infinite;
}
@keyframes qv-rot { to { transform: rotate(360deg); } }
.qv-err { padding: 40px; text-align: center; color: var(--ink-soft); }

@media (max-width: 700px) {
  .qv-grid { grid-template-columns: 1fr; }
  .qv-info { border-left: 0; border-top: 3px solid color-mix(in srgb, var(--brand) 45%, var(--ink)); }
}

/* ── Carousel ──────────────────────────────────────────────────── */
.carousel { position: relative; }
.car-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.car-rail::-webkit-scrollbar { display: none; }
.car-item { scroll-snap-align: start; }

.car-btn {
  position: absolute;
  top: calc(50% - 40px);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  transition: 0.2s var(--ease);
}
.car-btn svg { width: 18px; height: 18px; }
.car-btn:hover:not(:disabled) { border-color: var(--ink); }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.car-prev { left: -20px; }
.car-next { right: -20px; }
@media (max-width: 900px) {
  .car-prev { left: -6px; }
  .car-next { right: -6px; }
}

/* ── Image + text bands (company page) ─────────────────────────── */
.co-band .cb-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.co-band.flip .cb-media { order: 2; }
.cb-media { aspect-ratio: 4 / 3; overflow: hidden; }
.cb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-copy p { color: var(--ink-soft); margin: 18px 0 26px; max-width: 480px; }
.cb-copy .kicker { margin-bottom: 12px; }
@media (max-width: 860px) {
  .co-band .cb-inner { grid-template-columns: 1fr; }
  .co-band.flip .cb-media { order: 0; }
}

/* Wide dropdown: a column per distributor */
.submenu-wide {
  display: flex;
  gap: 34px;
  min-width: 0;
  padding: 20px 24px;
  left: -24px;
}
.sm-col { min-width: 148px; }
.sm-head {
  display: block;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase !important;
  padding: 0 0 9px !important;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  opacity: 1 !important;
}
.submenu-wide ul { display: block; }
.submenu-wide li a { padding: 7px 0 !important; }

/* ── Product catalogue · materials-library layout ──────────────── */
.browse {
  max-width: 1680px;
  margin-inline: auto;
  padding-top: 4px;
}

.mtoolbar {
  align-items: center;
  padding: clamp(10px, 1.3vw, 16px) 0 10px;
}
.mt-title { font-size: clamp(1.15rem, 1.7vw, 1.55rem); }
.mt-lead { max-width: 620px; font-size: 12.5px; margin-top: 4px; }
.filter-open { display: none; }

/* Suppliers are navigation tabs, not checkbox filters. */
.dist-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  border: 1px solid var(--line);
  background: var(--line);
}
.dist {
  position: relative;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  background: var(--paper);
  color: var(--ink-soft);
}
.dist::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.28s var(--ease);
}
.dist:hover,
.dist.on { background: var(--paper); color: var(--ink); }
.dist:hover::after,
.dist.on::after { transform: scaleX(1); }
.dist-box { display: none; }
.dist-logo { height: 32px; max-width: 132px; }
.dist-n {
  position: absolute;
  top: 10px; right: 12px;
  min-width: 24px;
  padding: 3px 6px;
  border-radius: 20px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-size: 9px;
  text-align: center;
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(220px, 258px) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 58px);
  align-items: start;
}

.catalog-panel {
  position: sticky;
  /* --header-total, not --header-h: the bar is 80px tall while the utility
     strip is showing, and offsetting by the 48px main row alone tucked the
     top of the panel underneath it. The strip collapses on scroll, which
     just leaves a slightly larger gap -- harmless, and never hidden. */
  top: calc(var(--header-total) + 16px);
  /* A sticky column taller than the screen strands its own bottom: once it
     sticks, page scrolling moves everything except it, and the filters below
     the fold can never be reached. Bound the height and let the panel itself
     scroll. */
  /* Deliberately short of the viewport bottom. The filters run to ~1900px
     and scroll internally either way, so height buys nothing -- a panel that
     reaches the floor just reads as a wall beside the grid. */
  max-height: min(calc(100vh - var(--header-total) - 120px), 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 8px 0 0;
  background: var(--paper);
  z-index: 2;
}
.catalog-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.catalog-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.catalog-panel-head h2 {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 500;
}
.filter-close { display: none; }
.filter-scrim { display: none; }

.catalog-panel .psearch {
  width: 100%;
  max-width: none;
  margin: 18px 0 8px;
  padding: 11px 12px;
  flex-basis: auto;
}
.catalog-panel .filter-rows { padding: 0; }
.catalog-panel .frow-f { border-bottom-color: var(--line); }
.catalog-panel .frow-f summary { padding: 16px 25px 16px 0; }
.catalog-panel .frow-f summary::after { right: 4px; }
.catalog-panel .frow-f ul {
  grid-template-columns: 1fr;
  /* One scroll region for the whole panel rather than a separate little one
     per section: nested scrollbars trap the pointer and hide how much list
     is left. */
  max-height: none;
  overflow: visible;
  padding: 0 4px 13px 0;
}
.catalog-panel .frow-f li a { padding: 8px 0; }

body.filters-hidden .catalog-panel { display: none; }
body.filters-hidden .catalog-layout { grid-template-columns: minmax(0, 1fr); }

.results {
  min-width: 0;
  padding: 0 0 32px;
  background: var(--paper);
}
.results-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  padding: 0 0 9px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.result-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.rcount strong { color: var(--ink); font-weight: 600; }
.chips { gap: 6px; }
.chip { padding: 5px 10px; background: var(--paper); }

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.sort-control select {
  min-width: 150px;
  padding: 7px 26px 7px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  letter-spacing: .04em;
  cursor: pointer;
}
.sort-control select:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.results .grid-products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 46px) clamp(12px, 1.7vw, 24px);
  padding: 0 0 8px;
}
.card-product { min-width: 0; }
.card-product .frame {
  aspect-ratio: 1;
  background: #efede8;
}
.card-product .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(25, 23, 20, .08);
  pointer-events: none;
}
.card-product .frame .img,
.card-product .frame img { transition: transform .7s var(--ease), filter .35s var(--ease); }
.card-product:hover .frame .img,
.card-product:hover .frame img { transform: scale(1.035); }
.card-product .meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 13px 1px 0;
}
.card-product .meta .line {
  overflow: hidden;
  color: #9b7a2d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-product .meta .code {
  grid-column: 2;
  grid-row: 1;
  font-size: 9px;
  text-align: right;
}
.card-product .meta h3 {
  grid-column: 1 / -1;
  margin-top: 2px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qv-btn { bottom: 66px; }

.catalog-hidden { display: none !important; }
.load-more-wrap { display: flex; justify-content: center; padding-top: 44px; }
.load-more {
  min-width: 220px;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.load-more:hover { background: var(--ink); color: #fff; }
.load-more small {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: none;
}
.load-more:hover small { color: rgba(255,255,255,.68); }
.load-more[hidden], .load-more-wrap:has(.load-more[hidden]) { display: none; }

@media (max-width: 1180px) {
  .catalog-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }
  .results .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mtoolbar { align-items: flex-end; }

  /* The button used to sit in the header band, which scrolls away: once you
     were a few rows into 79 products there was no way back to the filters
     short of scrolling to the top. Anchor it to the viewport instead. */
  .filter-open {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 200;
    gap: 10px;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  }
  .filter-open svg { width: 15px; height: 15px; }
  /* Out of the way while the drawer itself is open. */
  body.catalog-filter-open .filter-open { display: none; }
  .catalog-layout { display: block; }
  .results .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Closed by default in CSS rather than waiting for JS to add
     .filters-hidden. Without this the drawer is painted over the whole page
     on first render and only disappears once the script runs -- which on
     this host can be a visible moment. */
  .catalog-panel { display: none; }
  body.catalog-filter-open .catalog-panel { display: block; }

  .catalog-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw);
    padding: 26px 24px 34px;
    max-height: none;          /* the drawer is already full height */
    overflow-y: auto;
    background: var(--paper);
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    z-index: 220;
  }
  body.filters-hidden .catalog-panel { display: none; }
  body.catalog-filter-open { overflow: hidden; }
  body.catalog-filter-open .filter-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
    border: 0;
    background: rgba(20,18,15,.55);
  }
  .filter-close {
    display: block;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font: 300 30px/1 var(--font);
    cursor: pointer;
  }
  .catalog-panel .frow-f ul { max-height: none; }
}

@media (max-width: 680px) {
  .mtoolbar { padding-top: 24px; }
  .mt-title { font-size: clamp(2rem, 12vw, 3.2rem); }
  .mt-lead { font-size: 13.5px; }
  .dist-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 26px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dist-bar::-webkit-scrollbar { display: none; }
  .dist { flex: 0 0 148px; min-height: 62px; scroll-snap-align: start; }
  .dist-logo { height: 25px; max-width: 98px; }
  .results-head { align-items: stretch; margin-bottom: 18px; }
  .result-summary { width: 100%; }
  .sort-control { justify-content: space-between; width: 100%; }
  .sort-control select { flex: 1; max-width: 190px; }
  .results .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .card-product .meta { gap: 2px 8px; padding-top: 10px; }
  .card-product .meta .line,
  .card-product .meta .code { font-size: 8px; }
  .card-product .meta h3 { font-size: 12.5px; }
  .qv-btn { left: 7px; right: 7px; bottom: 58px; padding: 8px; }
  .qv-btn span { display: none; }
  .load-more-wrap { padding-top: 34px; }
  .load-more { width: 100%; }
}

/* ── Page continuity: homepage → catalogue ─────────────────────── */
html { background: var(--black); }

@view-transition { navigation: none; }
::view-transition-old(root) { animation: gy-page-out .16s ease both; }
::view-transition-new(root) { animation: gy-page-in .32s var(--ease) both; }
@keyframes gy-page-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes gy-page-in { from { opacity: 0; transform: translateY(5px); } }
/* Fade only, no transform. An element animating transform becomes the
   containing block for its position:fixed descendants, which strands the
   filter drawer and the quick-view panel at the bottom of the page instead
   of the screen. The view transitions below keep their motion; only <main>
   gives it up, and the difference is a 5px rise nobody will miss. */
@keyframes gy-page-fade { from { opacity: 0; } }
main { animation: gy-page-fade .42s var(--ease) both; }

/* Homepage → company: the same film is the transition. Its frame resizes
   smoothly from the full-height home hero into the shorter company hero. */
.company-hero-media { view-transition-name: gy-company-film; }
html.company-video-navigation { view-transition-name: none; }
::view-transition-group(gy-company-film) {
  animation-duration: .82s;
  animation-timing-function: var(--ease);
}
::view-transition-old(gy-company-film),
::view-transition-new(gy-company-film) {
  animation-duration: .82s;
  mix-blend-mode: normal;
}
.co-hero-inner {
  animation: gy-company-copy-in .72s var(--ease) .14s both;
}
@keyframes gy-company-copy-in {
  from { opacity: 0; transform: translateY(18px); }
}
body.company-video-leaving .hero .inner {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .42s ease, transform .58s var(--ease);
}
body.company-video-leaving .hero-bg {
  transform: scale(1.035);
  filter: brightness(.72);
  transition: transform .9s var(--ease), filter .55s ease;
}
body.company-video-arriving .co-hero {
  animation: gy-company-hero-settle .9s var(--ease) both;
}
@keyframes gy-company-hero-settle {
  from { min-height: 100svh; }
  to { min-height: 72svh; }
}

/* Continue the homepage's dark first impression into Produktet, then move
   into a clean white materials library without the previous colour wash. */
.browse {
  padding-top: 0;
  background: #fff;
}
/* Full bleed. .browse is capped at 1680px and centred, so pulling out by
   --pad only ever reached that box's edge: on a wider screen the page
   showed through as pale strips down both sides, and the dark header looked
   like a floating slab. 50% - 50vw reaches the viewport whatever the cap,
   and the inline padding puts the text back in line with the content. */
.browse .mtoolbar,
.browse .dist-bar {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--pad), calc((100vw - 1680px) / 2 + var(--pad)));
}

.browse .mtoolbar {
  padding-block: clamp(42px, 6vw, 78px) 28px;
  /* Wide, low-opacity pools of warm light. At this size a radial reads as a
     blurred glow, which gives the band some depth instead of flat black. */
  background:
    radial-gradient(62% 130% at 10% -20%, rgba(184, 145, 47, 0.16), transparent 62%),
    radial-gradient(46% 100% at 88% -10%, rgba(196, 132, 72, 0.11), transparent 60%),
    radial-gradient(90% 60% at 50% 130%, rgba(255, 255, 255, 0.05), transparent 70%),
    #141310;
  color: #fff;
}
.browse .mt-title { color: #fff; }
.browse .mt-lead { color: rgba(255,255,255,.66); }
.browse .filter-open {
  border-color: rgba(255,255,255,.72);
  color: #fff;
}
.browse .filter-open:hover { background: #fff; color: var(--black); }

.browse .dist-bar {
  margin-bottom: clamp(34px, 4vw, 58px);
  padding-block: 0 clamp(30px, 4vw, 48px);
  border: 0;
  /* Starts on the same tone the header ends on, so the two bands read as one
     surface, then settles darker before it meets the page. */
  background:
    radial-gradient(80% 180% at 50% -60%, rgba(184, 145, 47, 0.07), transparent 62%),
    linear-gradient(180deg, #141310 0%, #100f0d 100%);
}
.browse .dist {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.62);
}
.browse .dist:hover { background: rgba(255,255,255,.07); color: #fff; }

/* The active tab used to be a white slab, which punched a hole in the dark
   bar. A slightly raised panel reads as selected without leaving the palette. */
.browse .dist.on {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  color: #fff;
}

/* One accent for every distributor. Each partner's own colour was being used
   here, so the bar showed Alfawood red next to Starwood green next to the
   site's gold -- three unrelated hues competing in one strip. */
.browse .dist::after { background: var(--gold); }

/* brightness() multiplies, so it could never lift a black logo: Akritas was
   nearly invisible against the dark bar. Flattening to a white silhouette
   makes every logo legible and keeps the strip one colour. */
.browse .dist-logo {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .5;
  transition: opacity .25s var(--ease);
}
/* The filter has to be repeated here. `.dist.on .dist-logo` is three classes
   and beats the two-class `.browse .dist-logo` above, so on click the older
   rule restored the logo's own colours -- and Starwood's artwork is #231F20,
   near-black, which vanished against the dark tab. */
.browse .dist:hover .dist-logo {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .8;
}
.browse .dist.on .dist-logo {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 1;
}

.browse .dist-n { background: rgba(255,255,255,.09); color: rgba(255,255,255,.55); }
.browse .dist.on .dist-n { background: var(--gold); color: #171613; font-weight: 600; }

.browse .catalog-layout,
.browse .catalog-panel,
.browse .results { background: #fff; }
.browse .catalog-layout { padding-bottom: clamp(70px, 9vw, 120px); }

/* Facets replace only the catalogue fragment. Keep the surrounding page
   perfectly still while the affected controls and results settle in. */
.browse .mtoolbar,
.browse .dist-bar,
.browse .catalog-layout {
  transition: opacity .18s ease, transform .24s var(--ease);
}
.browse.catalog-fetching .dist-bar,
.browse.catalog-fetching .catalog-layout {
  opacity: .46;
  transform: translateY(3px);
  pointer-events: none;
}
.browse.catalog-entering .dist-bar,
.browse.catalog-entering .catalog-layout {
  animation: gy-catalog-partial-in .34s var(--ease) both;
}
@keyframes gy-catalog-partial-in {
  from { opacity: .36; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .browse .mtoolbar { padding-top: 30px; }
  .browse .catalog-panel { background: #fff; }
}

@media (max-width: 680px) {
  .browse .mtoolbar { padding-bottom: 22px; }
  .browse .dist-bar { margin-bottom: 28px; padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  ::view-transition-group(gy-company-film),
  ::view-transition-old(gy-company-film),
  ::view-transition-new(gy-company-film),
  .co-hero-inner,
  body.company-video-arriving .co-hero,
  main,
  .browse.catalog-entering .dist-bar,
  .browse.catalog-entering .catalog-layout { animation: none; }
  body.company-video-leaving .hero .inner,
  body.company-video-leaving .hero-bg { transition: none; }
}

/* Map actions: one button, directions. */
.co-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.co-actions-center { justify-content: center; margin-top: 26px; }

/* Contact page: the map stands alone, with no side panel beside it. */
.co-map-solo { border: 1px solid var(--line); }
.co-map-solo .co-map { min-height: 380px; }

/* ── Enquiry form ──────────────────────────────────────────────── */
.enquiry-section { scroll-margin-top: calc(var(--header-total) + 12px); }

.enq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}
.enq-wide { grid-column: 1 / -1; }

.enq-f { display: block; }
.enq-f > span {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.enq-f > span i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.6; }
.enq-f input,
.enq-f textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 13px 14px;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.enq-f textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.enq-f input:focus,
.enq-f textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper-warm);
}
.enq-f input[readonly] { background: var(--paper-warm); color: var(--ink-soft); }
.enq-f.has-err input,
.enq-f.has-err textarea { border-color: #b3261e; }
.enq-f em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #b3261e;
  margin-top: 7px;
}

.enq-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

.enq-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 62ch;
  cursor: pointer;
}
.enq-consent input { margin-top: 3px; flex: none; accent-color: var(--ink); }
.enq-consent.has-err span { color: #b3261e; }

.enq-err-top {
  border-left: 3px solid #b3261e;
  background: rgba(179, 38, 30, 0.06);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 24px;
}

.enq-send { margin-top: 28px; }

/* Off-screen rather than display:none, so automated fillers still meet it. */
.enq-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.enq-ok {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: var(--paper-warm);
  padding: clamp(28px, 4vw, 46px);
  max-width: 62ch;
}
.enq-ok h3 { font-size: 1.35rem; margin-bottom: 12px; }
.enq-ok p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.enq-ok-tel { margin-top: 18px; }
.enq-ok-tel a {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line);
}
.enq-ok-tel a:hover { border-bottom-color: var(--gold); color: var(--gold); }

@media (max-width: 700px) {
  .enq-grid { grid-template-columns: 1fr; gap: 18px; }
}

.pd-quote { margin: 30px 0 26px; }

/* ── WhatsApp ──────────────────────────────────────────────────────
   Straddles the top edge of the footer, so it is the last thing on the
   page without being a badge that follows you down every screen. Paper
   rather than WhatsApp green: the mark carries the recognition, and a
   saturated green would fight the charcoal and gold everywhere else. */
.wa-strip {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--pad);
  margin-bottom: -28px;
}
.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 26px 10px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wa-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}
.wa-ico {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}
.wa-ico svg { width: 26px; height: 26px; }
.wa-txt { display: flex; flex-direction: column; line-height: 1.15; }
.wa-lbl {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wa-txt strong {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

@media (max-width: 560px) {
  .wa-strip { justify-content: center; margin-bottom: -24px; }
  .wa-pill { padding: 8px 20px 8px 8px; gap: 11px; }
  .wa-ico { width: 40px; height: 40px; }
  .wa-ico svg { width: 22px; height: 22px; }
  .wa-txt strong { font-size: 15px; }
}

/* Home, first in the mobile drawer. */
.mm-home a { display: flex; align-items: center; gap: 12px; }
.mm-home svg { width: 19px; height: 19px; flex: none; opacity: 0.75; }
.mm-home.is-current a { color: var(--gold-soft); }
.mm-home.is-current svg { opacity: 1; }