/* The display face: Inter Tight, self-hosted (OFL, see fonts/InterTight-OFL.txt).
   Served from our own origin rather than Google Fonts, so no visitor data goes
   to a third party for a typeface. Variable, so one file covers every weight.
   unicode-range means the extended set only downloads if a page needs it. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-wght-normal.f5af7a761c2b.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: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext-wght-normal.496654ac82a3.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;
}

/* ==========================================================================
   Lamar Ceramics
   Tokens first, then layout, then components.
   ========================================================================== */

:root {
  /* A near-monochrome stone palette with one deep accent. Deliberately not
     the cream-and-terracotta that every tile site defaults to - the product
     photography carries the warmth, so the interface stays cool and quiet. */
  --ink:        #17181b;
  --ink-soft:   #5a5d66;
  --ink-faint:  #8b8e97;
  /* Black and white. The ground is pure white and the bands are --night;
     nothing in between is tinted warm. */
  --paper:      #ffffff;
  --surface:    #ffffff;
  --line:       #e2e2e2;
  --line-soft:  #f1f1f1;
  --accent:     #1f4d46;
  --accent-ink: #133431;
  --focus:      #1f4d46;

  /* Brand orange, sampled from the logo. Used for navigation hover states so
     the header echoes the mark rather than the interface accent. */
  --brand:      #ec7324;
  --brand-deep: #c95c16;
  /* Fills in the logo orange. The label on them is ink, never white: white on
     #ec7324 is 2.98:1 and fails WCAG AA; ink is 5.96:1. Hover lightens the
     fill (ink on it: 7.28:1) rather than darkening it, which would drag the
     ink label below 4.5:1. */
  /* Design pages sit on warm stone rather than paper: the product photography
     is the brightest thing on the page, as on the Neolith model pages. */
  /* Was a warm stone ground for design pages. Now white like every other
     page; the names stay so the design-page rules need no rewrite. */
  --stone:      #ffffff;
  --stone-line: #e2e2e2;
  /* A serif for display type on those pages. System faces only: no webfont
     request, no Google Fonts call, nothing to consent to. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --brand-hover: #f28c45;
  /* A damped orange for hover states on the dark footer. */
  --brand-soft:  #d9905c;
  --on-brand:   var(--ink);

  /* Two heights, and body padding is pinned to the tall one for good.
     The header is position:fixed, so it is out of flow - shrinking it on
     scroll moves nothing. What would cause layout shift is the *reserved*
     space changing, and that never does. The spec's constraint is about CLS,
     and CLS stays at zero. */
  --header-h: 84px;           /* one row: mark, navigation, actions */
  --header-h-compact: 82px;   /* the floating capsule, after scrolling */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 68ch;

  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.88rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.42vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.95vw, 2.25rem);
  --step-3:  clamp(2rem, 1.55rem + 2.1vw, 3.4rem);
  --step-4:  clamp(2.5rem, 1.6rem + 4vw, 5rem);

  --sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Arial, sans-serif;
  /* Headlines. A tight neo-grotesk set heavy and large, after Margraf. */
  --display: "Inter Tight", var(--sans);

  /* The black of the dark bands. A shade off pure black, so photography
     and the orange do not vibrate against it. */
  --night:      #0f1012;
  --night-line: rgb(251 251 249 / 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Reserves the header's space once, at a fixed value. The header never
     changes height, so this never shifts. */
  padding-top: var(--header-h);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 650; margin: 0 0 0.5em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }

a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }

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

.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 200;
  transition: transform 0.16s ease;
}
.skip-link:focus { transform: translateY(0); }

.wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7vw, 6.5rem); }
.section__head { max-width: var(--measure); margin-bottom: 2.5rem; }
.eyebrow {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.75rem;
}

/* ==========================================================================
   Header
   Both bars live inside one fixed-height shell and cross-fade. The shell's
   height never changes, so switching states cannot cause layout shift.
   ========================================================================== */

.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header[data-state="collapsed"] { height: var(--header-h-compact); }

.bar {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--gutter);
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
}

/* One row in both states: mark, navigation, then search and the contact
   button pushed to the far side by .nav__actions' margin-left:auto. */
.bar--expanded .nav--primary { min-width: 0; }
.bar--expanded .nav__list { flex-wrap: nowrap; }

/* ---- collapsed: the floating capsule ----
   The bar itself carries nothing: no background, no rule. The mark sits on
   the page at the left and the capsule floats in the middle, so what scrolls
   underneath shows through on either side. */
.site-header[data-state="collapsed"] { background: transparent; border-bottom-color: transparent; }
.bar--collapsed { justify-content: space-between; gap: 1rem; }
.bar--collapsed .nav--compact {
  position: absolute; left: 50%; transform: translateX(-50%);
}

.nav__list.navpill {
  align-items: stretch;
  /* The nav gap would otherwise show as white seams between the bands. */
  gap: 0;
  border-radius: 999px;
  /* No overflow:hidden here: it would clip the menus that hang below the
     capsule. The bands round themselves at the two ends instead. */
  background: rgb(216 214 206 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 38px -22px rgb(23 24 27 / 0.5);
}
/* The ends of the capsule, rounded band by band. */
.nav__list.navpill > li:first-child > a,
.nav__list.navpill > li:first-child > .nav__trigger {
  border-radius: 999px 0 0 999px; padding-left: 1.5rem;
}
.nav__list.navpill > li:last-child { border-radius: 0 999px 999px 0; }
.nav__list.navpill > li:last-child > a,
.nav__list.navpill > li:last-child > .nav__trigger {
  border-radius: 0 999px 999px 0; padding-right: 1.5rem;
}
.nav__list.navpill > li { display: flex; align-items: stretch; }
/* Inside the capsule the links are bands, not pills: square corners, full
   height, and the whole band lights up. The extra class is deliberate - the
   pill-shaped nav link rules come later in this file and would otherwise win
   on source order. */
.nav__list.navpill > li > a,
.nav__list.navpill .nav__trigger,
.nav__list.navpill .search-toggle {
  display: inline-flex; align-items: center;
  padding: 1.15rem 1.35rem;
  border-radius: 0;
  font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.nav__list.navpill > li > a:hover,
.nav__list.navpill > li > a[aria-current="page"],
.nav__list.navpill .nav__trigger:hover,
.nav__list.navpill > li > [aria-expanded="true"] { background: var(--brand); color: var(--on-brand); }

/* The contact band, in the logo orange. */
.nav__list.navpill .navpill__brandband > a { background: var(--brand); color: var(--on-brand); font-weight: 500; }
.nav__list.navpill .navpill__brandband > a:hover { background: var(--brand-hover); }

/* The dark band: search and More. Slightly see-through, like the rest. */
.nav__list.navpill .navpill__dark { background: rgb(23 24 27 / 0.9); }
.nav__list.navpill .navpill__dark > a,
.nav__list.navpill .navpill__dark .nav__trigger,
.nav__list.navpill .navpill__dark .search-toggle { color: var(--paper); border: 0; }
.nav__list.navpill .navpill__dark .search-toggle:hover,
.nav__list.navpill .navpill__dark .nav__trigger:hover,
.nav__list.navpill .navpill__dark > [aria-expanded="true"] { background: var(--brand); color: var(--on-brand); }

/* visibility:hidden, not opacity alone. Opacity 0 would leave these links in
   the tab order, dropping a keyboard user into an invisible bar. */
.site-header[data-state="expanded"] .bar--collapsed,
.site-header[data-state="collapsed"] .bar--expanded {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}

.brand {
  font-weight: 600; letter-spacing: -0.03em; font-size: var(--step-1);
  text-decoration: none; white-space: nowrap;
}
.brand__mark { color: var(--ink-faint); font-weight: 400; margin-left: 0.35em; }

/* The logo. Height is set from the admin via --logo-h on the <a>, because the
   right height depends entirely on the lockup: a wide horizontal mark can sit
   at 30px where a stacked one has to drop to 22 and stops being readable.
   width:auto keeps whatever aspect ratio the file has. */
.brand { display: inline-flex; align-items: center; }
.brand__logo {
  height: var(--logo-h, 48px);
  width: auto;
  max-width: 15rem;
  display: block;
}
/* The collapsed bar is a single 64px row, so the mark comes down to fit it -
   the same logo, not a second file to maintain. */
.bar--collapsed .brand__logo { height: calc(var(--logo-h, 48px) * 0.7); }
/* Both variants ship in the HTML; exactly one is ever displayed. */
.brand__logo--light { display: none; }

.nav { flex: 1; }
.nav__list {
  display: flex; align-items: center; gap: clamp(0.15rem, 0.8vw, 0.75rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__list a, .nav__trigger {
  font-size: var(--step-0); text-decoration: none; color: inherit;
  white-space: nowrap;
}

/* Nav links: a pill that fills with the logo orange on hover, on keyboard
   focus, while a menu is open, and on the page you are on. Applied to links
   and the mega/More triggers alike so "Collection" behaves like its
   neighbours. Ink label on orange, as on the buttons. */
.nav__list > li > a,
.nav--primary .nav__trigger,
.nav--compact .nav__trigger {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__list > li > a:hover,
.nav__list > li > a:focus-visible,
.nav__list > li > a[aria-current="page"],
.nav--primary .nav__trigger:hover,
.nav--compact .nav__trigger:hover,
.nav__list > li > [aria-expanded="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

.nav__trigger {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit;
}
.nav__trigger:hover { color: var(--on-brand); }

.chev {
  width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-0.1em);
  transition: transform 0.18s ease;
}
[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-0.1em); }

.nav__cta { margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.4rem; font-size: var(--step-0); font-weight: 500;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
/* Outline: orange rule, fills orange on hover. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--step--1); }

/* Transparent over imagery. backdrop-filter is progressive: without support
   the translucent background alone still keeps the label readable. */
.btn--glass {
  background: rgb(251 251 249 / 0.14); color: var(--paper);
  border-color: rgb(251 251 249 / 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--glass:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* ---------------------------------------------------------------- mega menu */

.has-mega, .has-more { position: static; }

/* top:100% rather than a fixed value: .has-mega is position:static, so the
   containing block is .site-header itself and the panel tracks whatever height
   the header currently has, in both states, with no second rule to keep in
   step. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -32px rgb(23 24 27 / 0.28);
}
.mega.is-open { animation: fade-in 0.16s ease both; }

.mega__inner {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1400px; margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem) var(--gutter);
}
.mega__heading {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin-bottom: 1.5rem;
}
.mega__families, .mega__applications { list-style: none; margin: 0; padding: 0; }
.mega__families { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
.mega__families > li { break-inside: avoid; margin-bottom: 1.5rem; }
.mega__families > li > a { font-size: var(--step-1); font-weight: 500; text-decoration: none; }
.mega__families > li > a:hover { color: var(--brand); }

.mega__sizes { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.mega__sizes a { color: var(--ink-soft); text-decoration: none; font-size: var(--step-0); }
.mega__sizes a:hover { color: var(--brand); }

.mega__applications li { margin-bottom: 0.9rem; }
.mega__applications a { font-size: var(--step-1); font-weight: 500; text-decoration: none; }
.mega__applications a:hover { color: var(--brand); }

.mega__all {
  display: inline-block; margin-top: 1.5rem; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand);
}

.dropdown {
  position: absolute; right: var(--gutter); top: 100%;
  min-width: 12rem; background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -28px rgb(23 24 27 / 0.3);
}
.dropdown.is-open { animation: fade-in 0.14s ease both; }
/* Inside the capsule it belongs under the More band, not at the page edge. */
.navpill .has-more { position: relative; }
.navpill .dropdown {
  right: 0; top: calc(100% + 0.6rem);
  border-radius: 0.7rem; overflow: hidden;
}
/* A menu on the full bar (Resources) hangs under its own button. */
.has-dropdown { position: relative; }
.nav--primary .dropdown {
  left: 0; right: auto; top: calc(100% + 0.6rem);
  border-radius: 0.7rem; overflow: hidden;
  color: var(--ink);
}
.dropdown ul { list-style: none; margin: 0; padding: 0.5rem 0; }
/* Children of an entry inside More: indented, smaller, no extra padding. */
.dropdown .dropdown__sub { padding: 0 0 0.25rem; }
/* A group name inside More that is not itself a page. */
.dropdown__label { display: block; padding: 0.55rem 1.15rem; color: var(--ink); }
.dropdown .dropdown__sub a { padding: 0.35rem 1.15rem 0.35rem 2rem; font-size: var(--step--1); color: var(--ink-soft); }
.dropdown a { display: block; padding: 0.55rem 1.15rem; text-decoration: none; }
.dropdown a:hover { background: var(--line-soft); color: var(--brand); }

@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero runs edge to edge and full height, with the header floating over
   it. The media is absolutely positioned so the slide's own min-height, not an
   aspect ratio, decides how tall the section is. */
.hero { position: relative; background: var(--ink); color: var(--paper); }
.hero__slides { position: relative; }
.hero__slide { position: relative; display: none; min-height: 100vh; min-height: 100svh; }
.hero__slide[data-active="true"] { display: block; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* A scrim under the header as well as under the copy: white nav links sitting
   on an unknown photograph need guaranteed contrast at the top of the frame. */
.hero__slide::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 30vh;
  background: linear-gradient(to bottom, rgb(10 11 13 / 0.5), rgb(10 11 13 / 0.18) 55%, transparent);
  pointer-events: none; z-index: 1;
}
.hero__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(4rem, 12vw, 9rem) 0 clamp(5.5rem, 10vw, 8rem);
  background: linear-gradient(to top, rgb(10 11 13 / 0.74), transparent);
}
.hero__headline { font-size: var(--step-4); max-width: 16ch; margin-bottom: 0.35em; }
.hero__subhead { max-width: 46ch; color: rgb(251 251 249 / 0.86); }
.hero__controls {
  position: absolute; inset: auto 0 clamp(1.5rem, 4vw, 3rem) 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hero__dots { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hero__dot {
  width: 2.25rem; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgb(251 251 249 / 0.35); transition: background 0.2s ease;
}
.hero__dot[aria-selected="true"] { background: var(--paper); }
.hero__dot:hover { background: rgb(251 251 249 / 0.7); }
.hero__pause {
  background: rgb(251 251 249 / 0.16); border: 1px solid rgb(251 251 249 / 0.34);
  color: var(--paper); padding: 0.5rem 0.9rem; font: inherit; font-size: var(--step--1);
  cursor: pointer;
}

/* ==========================================================================
   Grids and cards
   ========================================================================== */

.grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.grid--tiles   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--designs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid--three   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card__link { text-decoration: none; display: block; }
.card__media { aspect-ratio: 4 / 3; background: var(--line-soft); overflow: hidden; margin-bottom: 0.9rem; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card__link:hover .card__media img { transform: scale(1.03); }
.card__placeholder { display: block; width: 100%; height: 100%; background: var(--line-soft); }
.card__title { font-size: var(--step-0); font-weight: 500; margin: 0 0 0.15rem; }
.card__meta { font-size: var(--step--1); color: var(--ink-faint); margin: 0; }

.tile { position: relative; display: block; text-decoration: none; overflow: hidden; background: var(--line-soft); }
.tile__media { aspect-ratio: 3 / 4; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__label {
  position: absolute; inset: auto 0 0 0; padding: 1.25rem;
  color: var(--paper); font-size: var(--step-1); font-weight: 500;
  background: linear-gradient(to top, rgb(10 11 13 / 0.68), transparent);
}

/* ==========================================================================
   Breadcrumbs, spec block, filters, forms
   ========================================================================== */

.breadcrumb { font-size: var(--step--1); color: var(--ink-soft); padding-block: 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.5rem; color: var(--ink-faint); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.spec { border-top: 1px solid var(--line); margin-top: 2rem; }
.spec__row { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.spec__key { color: var(--ink-faint); font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; }

.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; padding-block: 1.5rem; }
.filters label { display: block; font-size: var(--step--1); color: var(--ink-faint); margin-bottom: 0.3rem; }
.filters select, .field input, .field textarea, .field select {
  font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: 0;
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.35rem; }
.field input, .field textarea, .field select { width: 100%; }
.form { max-width: 34rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* The required mark. Brand orange would fail contrast on white at this size;
   the error red is already the form's colour for "needs attention". */
.req { color: #b42318; }
.site-footer .req { color: var(--brand); }
.form__note { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 1rem; }
.errorlist { color: #b42318; font-size: var(--step--1); list-style: none; margin: 0.25rem 0 0; padding: 0; }

.messages { padding: 1rem var(--gutter); }
.message { max-width: 1400px; margin-inline: auto; padding: 0.85rem 1.1rem; background: var(--line-soft); }
.message--error { background: #fde8e6; }

.trust { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); padding-block: 2.5rem; border-block: 1px solid var(--line); }
.trust__item { flex: 1 1 12rem; }
.trust__value { font-size: var(--step-2); font-weight: 600; display: block; }
.trust__label { font-size: var(--step--1); color: var(--ink-faint); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }

.empty { color: var(--ink-faint); padding-block: 2rem; }

/* ==========================================================================
   Catalog: filter rail + results grid
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-head {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: end;
  justify-content: space-between;
  padding-block: 1rem clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.page-head__text { max-width: var(--measure); }
.page-head h1 { margin-bottom: 0.35em; }
.lede { color: var(--ink-soft); margin: 0; }

/* ---- black title band ----
   Collection, family, size, application and search pages open on a black
   band holding the breadcrumb and the page head, then turn white for the
   content: the same black/white alternation as the homepage. The elements sit
   inside .wrap, so the band is bled to the screen edge with a shadow rather
   than by restructuring six templates. */
.breadcrumb:has(+ .page-head), .page-head {
  background: var(--night);
  box-shadow: 0 0 0 100vmax var(--night);
  clip-path: inset(0 -100vmax);
}
/* One pixel of overlap: two separately clipped bands otherwise show a
   hairline seam between them at fractional heights. */
.breadcrumb:has(+ .page-head) { color: rgb(251 251 249 / 0.6); margin-bottom: -1px; padding-bottom: calc(1.5rem + 1px); }
.breadcrumb:has(+ .page-head) li + li::before { color: rgb(251 251 249 / 0.4); }
.breadcrumb:has(+ .page-head) a:hover { color: var(--paper); }
.breadcrumb:has(+ .page-head) [aria-current] { color: var(--paper); }
.page-head { color: rgb(251 251 249 / 0.86); border-bottom: 0; }
.page-head:first-child { padding-top: clamp(2rem, 4vw, 3rem); }
.page-head h1 { color: var(--paper); }
.page-head .lede { color: rgb(251 251 249 / 0.7); }
.page-head .formats__label { color: rgb(251 251 249 / 0.5); }
.page-head .format { background: transparent; border-color: rgb(251 251 249 / 0.32); color: var(--paper); }
.page-head .format:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.page-head :focus-visible { outline-color: var(--paper); }

/* Formats are navigation, not filters: each size is its own indexed page. They
   are styled as buttons rather than chips so they do not read as toggles. */
.formats { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.formats__label {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.formats ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.format {
  display: inline-block; padding: 0.5rem 1rem; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--step-0); white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.format:hover { border-color: var(--ink); color: var(--accent); }

.catalog {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.rail { position: sticky; top: calc(var(--header-h-compact) + 1.5rem); }
.rail__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.rail__title { font-size: var(--step-0); font-weight: 600; margin: 0; }
.rail__clear { font-size: var(--step--1); color: var(--accent); }
.rail__group { margin-bottom: 1.75rem; }
.rail__label {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin: 0 0 0.75rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--step--1); text-decoration: none; color: var(--ink-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.swatch { display: block; padding: 3px; border-radius: 50%; border: 1.5px solid transparent; }
.swatch__chip {
  display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid rgb(23 24 27 / 0.14);
}
.swatch:hover { border-color: var(--line); }
.swatch.is-active { border-color: var(--ink); }

.results__count {
  font-size: var(--step--1); color: var(--ink-faint);
  margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft);
}
.tech-sheet { margin-top: 2.5rem; }

@media (max-width: 60rem) {
  .catalog { grid-template-columns: 1fr; }
  .rail {
    position: static;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
  }
  .rail__group { margin-bottom: 1.25rem; }
  .page-head { align-items: start; }
}


/* ==========================================================================
   Search
   ========================================================================== */

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.search-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.75rem; text-decoration: none; color: inherit;
  font-size: var(--step-0); border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.search-toggle:hover { color: var(--brand); border-color: currentColor; }
.search-toggle__icon { width: 1.15em; height: 1.15em; flex: none; }
.search-toggle--compact { padding: 0.5rem; }

.site-search {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99;
  transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px -32px rgb(23 24 27 / 0.3);
}
/* The panel is a sibling of the header, so it cannot inherit the current
   height - the general sibling combinator reaches it instead. */
.site-header[data-state="collapsed"] ~ .site-search { top: var(--header-h-compact); }
.site-search.is-open { animation: fade-in 0.16s ease both; }
/* The search box on the results page itself. Same shape as the header
   panel's, so the two read as one control in two places. */
.page-search {
  display: flex; gap: 0.75rem; align-items: center;
  max-width: 44rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-search__input {
  flex: 1; font: inherit; font-size: var(--step-1);
  padding: 0.65rem 0.25rem;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); border-radius: 0;
}
.page-search__input:focus {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 1px 0 0 var(--brand);
}
.page-search__input::placeholder { color: var(--ink-faint); }

.site-search__form {
  display: flex; gap: 0.75rem; align-items: center;
  max-width: 1400px; margin-inline: auto; padding: 1.25rem var(--gutter);
}
.site-search__input {
  flex: 1; font: inherit; font-size: var(--step-1);
  padding: 0.65rem 0.25rem; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); border-radius: 0;
}
.site-search__input:focus { outline: none; border-bottom-color: var(--accent); }
.site-search__close {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--ink-faint); cursor: pointer; padding: 0 0.35rem;
}
.site-search__close:hover { color: var(--ink); }

.search-group { padding-block: 1.5rem; border-bottom: 1px solid var(--line-soft); }
.search-group__title {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin-bottom: 1rem;
}
.search-group__title span { color: var(--ink-faint); opacity: 0.7; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.search-result {
  display: flex; align-items: center; gap: 1rem; padding: 0.6rem;
  text-decoration: none; transition: background 0.15s ease;
}
.search-result:hover { background: var(--line-soft); }
.search-result__media {
  width: 3.25rem; height: 2.5rem; flex: none; background: var(--line-soft); overflow: hidden;
}
.search-result__media img { width: 100%; height: 100%; object-fit: cover; }
.search-result__text { display: flex; flex-direction: column; }
.search-result__title { font-weight: 500; }
.search-result__meta { font-size: var(--step--1); color: var(--ink-faint); }

/* ==========================================================================
   Application coverflow -- Shop by Application

   Vanilla port of the 21st.dev CoverflowCarousel (React + Tailwind). The
   geometry lives in static/js/coverflow.js; this block owns the box.

   Without JS it is a native scroll-snap strip: swipeable on touch, every link
   reachable. With JS (.is-enhanced) the cards stack at the centre and the
   script writes each one's transform. Both states have the same height, so
   enhancement causes no layout shift.
   ========================================================================== */

.coverflow {
  /* Everything is derived from card width, so the rake scales with it. */
  --cf-card: clamp(13rem, 60vw, 17rem);
  position: relative;
}
@media (min-width: 60.0625rem) {
  .coverflow { --cf-card: clamp(15rem, 21vw, 19rem); }
}

.coverflow__frame {
  /* Vertical padding keeps shadows clear of the clip. */
  padding-block: 1.5rem 2.5rem;
  /* Bleed to the viewport edge on phones so side cards slide in from off-screen. */
  margin-inline: calc(var(--gutter) * -1);
  touch-action: pan-y;         /* horizontal drag is ours, vertical scroll the page's */
}

.coverflow__track { position: relative; }

.coverflow__card {
  position: relative;
  display: block;
  width: var(--cf-card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  background: var(--line-soft);
  box-shadow: 0 18px 40px -18px rgb(10 11 13 / 0.45);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.coverflow__media { position: absolute; inset: 0; }
.coverflow__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.coverflow__label {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 1.25rem;
  color: var(--paper); font-size: var(--step-1); font-weight: 500;
  background: linear-gradient(to top, rgb(10 11 13 / 0.72), transparent);
}
.coverflow__cue {
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85; white-space: nowrap;
  transition: opacity 0.3s ease;
}

.coverflow__card:focus-visible { outline-offset: -4px; outline-color: var(--paper); }

/* ---- no JS: scroll-snap strip ---- */
.coverflow:not(.is-enhanced) .coverflow__frame {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.coverflow:not(.is-enhanced) .coverflow__frame::-webkit-scrollbar { display: none; }
.coverflow:not(.is-enhanced) .coverflow__track { display: flex; gap: 0.75rem; }
.coverflow:not(.is-enhanced) .coverflow__card { flex: 0 0 auto; scroll-snap-align: start; }
.coverflow:not(.is-enhanced) .coverflow__controls { visibility: hidden; } /* keeps the height: no shift when JS lands */

/* ---- enhanced: 3D coverflow ---- */
.coverflow.is-enhanced .coverflow__frame {
  overflow: hidden;
  overflow: clip;              /* clip, not a scroll box: focus cannot scroll it */
  perspective: calc(var(--cf-card) * 3);
  cursor: grab;
}
.coverflow.is-dragging .coverflow__frame { cursor: grabbing; }
.coverflow.is-enhanced .coverflow__track {
  height: calc(var(--cf-card) * 4 / 3);
  transform-style: preserve-3d;
}
.coverflow.is-enhanced .coverflow__card {
  position: absolute; top: 0; left: 50%;
  will-change: transform, opacity;
}
/* Only the centre card carries the cue and the hover zoom. */
.coverflow.is-enhanced .coverflow__card:not(.is-active) .coverflow__cue { opacity: 0; }
.coverflow.is-enhanced .coverflow__card.is-active:hover .coverflow__media img { transform: scale(1.04); }

.coverflow__controls {
  display: flex; justify-content: center; gap: 0.75rem;
  margin-top: 0.25rem;
}
.coverflow__btn {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;     /* 44px touch target */
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.coverflow__btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ==========================================================================
   Dark bands -- the black half of the black-and-white rhythm

   .section--dark runs full bleed; its content sits in a .wrap inside it.
   Everything in it re-tones for the dark ground through the tokens below,
   so a component dropped into a dark band needs no special case beyond
   its own colours.
   ========================================================================== */

.section--dark {
  background: var(--night);
  color: rgb(251 251 249 / 0.86);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .btn--ghost { color: var(--paper); }
/* White caption panels keep ink text; the band's light text colour must not
   inherit into them. */
.section--dark .project-card { color: var(--ink); }
.section--dark :focus-visible { outline-color: var(--paper); }
.section--dark .eyebrow { color: rgb(251 251 249 / 0.5); }

/* The oversized headline. Heavy, tight, short line-height: it is a single
   statement and should read as one block, not as a paragraph. */
.display-xl {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.1rem + 5.4vw, 6.4rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.038em;
  margin: 0;
  text-wrap: balance;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 600;
  font-size: var(--step-0); letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.2rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.link-arrow:hover { color: var(--brand-soft); gap: 0.75rem; }

/* ---- family section ---- */
.family-head {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
@media (min-width: 60.0625rem) {
  .family-head { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.family-head__intro p {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  color: rgb(251 251 249 / 0.72);
  max-width: 42ch;
  margin-bottom: 1.5rem;
}
/* The intro is set as a quotation: hang the opening mark so the text edge
   stays straight. */
.family-head__quote { text-indent: -0.45em; }

/* Three figures on a hairline, the way a spec sheet leads. */
.family-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(0.25rem, 1.5vw, 1rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--night-line);
}
.family-facts dt {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.3rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--paper);
}
.family-facts dd {
  margin: 0.35rem 0 0;
  font-size: 0.82rem; color: rgb(251 251 249 / 0.55);
}
@media (max-width: 40rem) {
  .family-facts { grid-template-columns: 1fr; gap: 1rem; }
  .family-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .family-facts dd { margin: 0; text-align: right; }
}

/* ---- the carousel on black ---- */
.coverflow__label {
  flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
.coverflow__name {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
}
.coverflow__tagline {
  font-size: 0.8rem; line-height: 1.45; font-weight: 400;
  color: rgb(251 251 249 / 0.82);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
/* The tagline belongs to the card in front; side cards show the name only.
   Without JS every card shows it, since there is no front. */
.coverflow:not(.is-enhanced) .coverflow__tagline,
.coverflow.is-enhanced .coverflow__card.is-active .coverflow__tagline {
  max-height: 5em; opacity: 1;
}
.coverflow__label { background: linear-gradient(to top, rgb(10 11 13 / 0.85), rgb(10 11 13 / 0.35) 60%, transparent); }

.section--dark .coverflow__btn {
  background: transparent; border-color: rgb(251 251 249 / 0.32); color: var(--paper);
}
.section--dark .coverflow__btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.section--dark .coverflow__card { background: #24262a; }

/* ==========================================================================
   Editorial type -- About page and the homepage About block

   Two roles, both in Inter Tight. The display line is set very large at a
   medium weight with tight tracking: at this size a heavy weight shouts, and
   the lighter cut is what gives studio and about pages their calm. The
   statement is a sentence, not a heading - large enough to be read first,
   regular weight, short measure. Body copy underneath stays small and quiet
   so the three sizes read as three clear steps.
   ========================================================================== */

.type-display {
  font-family: var(--display);
  font-size: clamp(2.9rem, 1.5rem + 5.6vw, 6.75rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.048em;
  margin: 0;
}
.type-statement {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.12rem + 1.45vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

/* ==========================================================================
   About Lamar -- homepage

   A white panel with large rounded corners on the black, after Margraf's
   "The Company" block. The section itself is black so the corners show
   against the family band above and the projects band below. Photograph
   left, text right; stacks on narrow screens, photograph first.
   ========================================================================== */

.about-band { background: var(--night); }
.about-band__panel {
  background: var(--paper);
  border-radius: clamp(1.5rem, 3.2vw, 3rem);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}
.about-band__grid {
  display: grid; gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
@media (min-width: 60.0625rem) {
  .about-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
/* The ratio is reserved here, so the lazy image causes no layout shift. */
.about-band__media {
  aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: clamp(0.9rem, 1.6vw, 1.5rem);
  background: var(--line-soft);
  display: grid; place-items: center;
}
.about-band__media img { width: 100%; height: 100%; object-fit: cover; }
.about-band__missing { margin: 0; padding: 1.5rem; text-align: center; font-size: var(--step--1); color: var(--ink-soft); }
.about-band__title { margin-bottom: 0.45em; }
.about-band__text .type-statement { color: var(--ink); max-width: 24em; margin-bottom: 1.1em; }
.about-band__text p:not(.type-statement) {
  max-width: 58ch; color: var(--ink-soft);
  font-size: 1.0125rem; line-height: 1.7; margin-bottom: 1.2em;
}
.about-band__text strong { color: var(--ink); font-weight: 600; }
.about-band__text .btn { margin-top: 0.75rem; }

/* ==========================================================================
   About page

   Black opening, white rounded panel for what Lamar makes, black for mission
   and vision, white for the values. Each block is a two-column row: the
   heading holds the left column, the copy the right, so the headings line up
   down the page like the margin of a book.
   ========================================================================== */

.about { background: var(--night); }
.about__open {
  color: rgb(251 251 249 / 0.86);
  padding-block: 0 clamp(3rem, 7vw, 6rem);
}
.about__open .breadcrumb { color: rgb(251 251 249 / 0.6); margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.about__open .breadcrumb li + li::before { color: rgb(251 251 249 / 0.4); }
.about__open .breadcrumb a:hover, .about__open .breadcrumb [aria-current] { color: var(--paper); }
.about__open h1 { color: var(--paper); }
.about__statement { max-width: 26em; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.about :focus-visible { outline-offset: 3px; }
.about__open :focus-visible, .about__purpose :focus-visible { outline-color: var(--paper); }

.about__panel, .about__values {
  background: var(--paper);
  border-radius: clamp(1.5rem, 3.2vw, 3rem);
  padding-block: clamp(3rem, 7vw, 6rem);
}
/* The last panel runs into the footer gap, so only its top is rounded. */
.about__values { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* These pages end on the article's own black ground, so the footer follows
   it directly. The footer is a sibling of <main>, not of the article, which
   is why this goes through main:has(). */
main:has(> .about) + .site-footer { margin-top: 0; }

/* One block per About section: photograph and text side by side, the sides
   swapping on every second block. Source order is always photograph then
   text, so phones stack them photograph first; the swap is visual only and
   happens on wide screens. */
.about__feature {
  display: grid; gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  padding-block: clamp(2rem, 4.5vw, 4.5rem);
}
.about__feature:first-child { padding-top: 0; }
.about__feature:last-child { padding-bottom: 0; }
@media (min-width: 60.0625rem) {
  .about__feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__feature:nth-child(even) .about__feature-media { order: 2; }
  .about__feature--text { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
}
.about__feature-media {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: clamp(0.9rem, 1.6vw, 1.5rem);
  background: var(--line-soft);
}
.about__feature-media img { width: 100%; height: 100%; object-fit: cover; }
.about__feature-media--empty { display: grid; place-items: center; }
.about__feature-media--empty p { margin: 0; padding: 1.5rem; text-align: center; font-size: var(--step--1); color: var(--ink-soft); }
.about__feature-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.4rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  margin: 0 0 0.7em; text-wrap: balance;
}

.about__h {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 550; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0;
}
.about__body .type-statement { color: var(--ink); max-width: 24em; margin: 0 0 1.1em; }
.about__body p:not(.type-statement) {
  max-width: 62ch; color: var(--ink-soft);
  font-size: 1.0625rem; line-height: 1.72; margin: 0 0 1.15em;
}
.about__body p:last-child { margin-bottom: 0; }

.about__purpose { color: rgb(251 251 249 / 0.7); padding-block: clamp(3.5rem, 8vw, 7rem); }
.about__purpose-grid { display: grid; gap: clamp(2.5rem, 5vw, 6rem); }
@media (min-width: 48rem) {
  .about__purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* "Mission" and "Vision" in brand orange at feature-title size, so the two
   words head their columns rather than label them. */
.about__purpose .about__h {
  color: var(--brand);
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.4rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 0.7em;
}
.about__purpose .type-statement { color: var(--paper); margin: 0 0 1.1em; }
.about__purpose p:not(.type-statement) { max-width: 56ch; font-size: 1.0625rem; line-height: 1.72; margin: 0; }

/* The values are five words. Set at display size they are the content and
   the decoration both; nothing is added to them. */
.about__value-list {
  list-style: none; padding: 0;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}
.about__value-list li {
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.75rem);
  font-weight: 500; letter-spacing: -0.042em; line-height: 1.02;
  padding-block: clamp(0.75rem, 1.6vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.about__value-list li:last-child { border-bottom: 1px solid var(--line); }
.about__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(2rem, 4vw, 3.5rem) 0 0; }

/* ==========================================================================
   Media section -- advertisements, social media, blog, exhibitions

   All four use the About parts: black opening, white rounded panel. The
   last panel on each page runs into the black footer, so it keeps its full
   rounding and the article's black shows in the corners.
   ========================================================================== */

.mediapage__panel { padding-block: clamp(2.5rem, 6vw, 5rem); }
.mediapage__gap { height: clamp(1rem, 2vw, 1.5rem); }
.mediapage__label {
  font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 550; letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}

/* ---- advertisements ---- */
.video-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.video-card { display: block; text-decoration: none; color: inherit; }
.video-card__frame {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 0.9rem; background: var(--night);
}
.video-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s ease; opacity: 0.92; }
.video-card:hover .video-card__frame img { transform: scale(1.03); opacity: 1; }
.video-card__play {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
  transition: transform 0.2s ease;
}
.video-card__play svg { margin-left: 3px; }
.video-card:hover .video-card__play, .video-card:focus-visible .video-card__play { transform: scale(1.08); }
.video-card__title {
  display: block; margin-top: 0.85rem;
  font-family: var(--display); font-size: 1.2rem; font-weight: 550; letter-spacing: -0.02em; line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) {
  .video-card__frame img, .video-card__play { transition: none; }
  .video-card:hover .video-card__frame img, .video-card:hover .video-card__play { transform: none; }
}

.video-dialog {
  width: min(92vw, 68rem); max-height: 92vh; padding: 0; border: 0; border-radius: 1rem;
  background: var(--night); color: var(--paper); overflow: hidden;
}
.video-dialog::backdrop { background: rgb(10 11 13 / 0.85); }
.video-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.6rem 0.6rem 1.25rem; }
.video-dialog__bar h2 { margin: 0; font-size: var(--step-0); font-weight: 500; letter-spacing: 0; color: var(--paper); }
.video-dialog__close {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(251 251 249 / 0.3); border-radius: 50%;
  background: transparent; color: var(--paper); cursor: pointer;
}
.video-dialog__close:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.video-dialog :focus-visible { outline-color: var(--paper); }
.video-dialog__stage { aspect-ratio: 16 / 9; max-height: calc(92vh - 4rem); background: #000; }
.video-dialog__stage iframe, .video-dialog__stage video { display: block; width: 100%; height: 100%; border: 0; }

/* ---- social media ---- */
.social-grid {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: start;
  /* 326px is the narrowest Instagram's embed will draw itself. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20.5rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.social-grid li { min-width: 0; }
/* Before Instagram's script replaces it, each post is a plain bordered link. */
.social-grid .instagram-media {
  margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 0.9rem;
  min-height: 8rem; display: grid; place-items: center; text-align: center;
}
.social-grid iframe.instagram-media { padding: 0; min-width: 0 !important; width: 100% !important; margin: 0 !important; }

/* ---- exhibitions ---- */
.show-facts { margin: 0 0 1.5rem; border-top: 1px solid var(--line); max-width: 32rem; }
.show-facts > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.show-facts dt { color: var(--ink-soft); }
.show-facts dd { margin: 0; font-weight: 500; text-align: right; }

/* ---- blog ---- */
.post-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0.9rem; background: var(--line-soft); margin-bottom: 1rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__date { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.35rem; }
.post-card__title {
  font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 550; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance;
}
.post-card:hover .post-card__title { text-decoration: underline; text-underline-offset: 0.18em; }
.post-card__excerpt { margin-top: 0.5rem; color: var(--ink-soft); line-height: 1.6; }

.post__date { color: rgb(251 251 249 / 0.6); margin: 0 0 0.75rem; }
/* A post title is a sentence, not a single word: smaller than the section
   display size, and allowed to wrap. */
.post__title {
  font-family: var(--display); font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1.02;
  color: var(--paper); margin: 0; max-width: 22em; text-wrap: balance;
}
.post__layout { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 60.0625rem) {
  .post__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .post__aside { position: sticky; top: calc(var(--header-h-compact) + 1.5rem); }
}
.post__main { min-width: 0; max-width: 46rem; }
.post__hero { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: clamp(0.9rem, 1.6vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); background: var(--line-soft); }
.post__body { font-size: 1.125rem; line-height: 1.75; color: #33353b; }
.post__body > * { margin: 0 0 1.15em; }
.post__body > :last-child { margin-bottom: 0; }
.post__body h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); font-weight: 550; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin: 1.8em 0 0.6em; }
.post__body h3 { font-size: 1.25rem; font-weight: 550; letter-spacing: -0.02em; color: var(--ink); margin: 1.6em 0 0.5em; }
.post__body > h2:first-child, .post__body > h3:first-child { margin-top: 0; }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li { margin-bottom: 0.6em; }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body a { color: var(--ink); text-decoration-color: var(--brand); text-decoration-thickness: 2px; }

.post__aside .about__h { margin-bottom: 1rem; }
.recent { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--line); }
.recent__item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.recent__media { display: block; aspect-ratio: 1; border-radius: 0.6rem; overflow: hidden; background: var(--line-soft); }
.recent__media img { width: 100%; height: 100%; object-fit: cover; }
.recent__title { display: block; font-weight: 500; line-height: 1.3; }
.recent__item:hover .recent__title { text-decoration: underline; text-underline-offset: 0.18em; }
.recent__date { display: block; margin-top: 0.2rem; font-size: var(--step--1); color: var(--ink-soft); }
.post__aside .link-arrow:hover { color: var(--brand-deep); }

/* ==========================================================================
   Warranty page

   Built from the About and Contact parts: black opening, white rounded panel
   holding the registration form. The form is long, so it is cut into groups;
   each group is a two-column row - its name on the left, its fields on the
   right - like the rows of the About page.
   ========================================================================== */

.warranty__terms { max-width: 62ch; margin: 1.5rem 0 0; color: rgb(251 251 249 / 0.7); font-size: 1.0625rem; line-height: 1.7; }
.warranty .resources__jump { margin-top: 1.75rem; }

.warranty__head {
  display: grid; gap: 0.5rem clamp(2rem, 5vw, 6rem);
  align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48rem) {
  .warranty__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.warranty__head h2 { margin: 0; }
.warranty__head p { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; }

.warranty__small { font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); max-width: 70ch; margin: 0.25rem 0 1.25rem; }
.field__hint { display: block; margin-top: 0.35rem; font-size: var(--step--1); color: var(--ink-soft); }

/* ---- the registration form ----
   Boxed fields here, not the underlined ones of the contact form. This form
   is long and is filled in by householders once in 25 years: every field
   should look unmistakably like a place to type, with a generous target. */
.warranty__form { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (min-width: 60.0625rem) {
  .warranty__form.is-stepped { grid-template-columns: minmax(0, 17rem) minmax(0, 44rem); }
}
.warranty__form > .errorlist { grid-column: 1 / -1; }
.warranty__steps { min-width: 0; max-width: 44rem; }

/* Progress. A row of three on a phone, a column beside the form on desktop. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; }
.steps[hidden] { display: none; }
.steps li { flex: 1; min-width: 0; }
.steps button {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.7rem 0.8rem; border: 0; border-radius: 0.8rem;
  background: none; font: inherit; color: var(--ink-soft); text-align: left; cursor: pointer;
}
.steps button:disabled { cursor: default; }
.steps button:not(:disabled):hover { background: var(--line-soft); }
.steps__n {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid var(--ink-faint); font-family: var(--display); font-weight: 600; font-size: 0.95rem;
}
.steps__t { font-size: var(--step-0); line-height: 1.25; }
.steps [data-state="current"] button { color: var(--ink); background: var(--line-soft); font-weight: 550; }
.steps [data-state="current"] .steps__n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.steps [data-state="done"] button { color: var(--ink); }
.steps [data-state="done"] .steps__n { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (min-width: 60.0625rem) {
  .steps { flex-direction: column; position: sticky; top: calc(var(--header-h-compact) + 1.5rem); }
}
@media (max-width: 40rem) {
  /* Three labels do not fit a phone; the number carries it and the step's
     own heading names it. */
  .steps button { justify-content: center; }
  .steps__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.step { min-width: 0; }
.step[hidden] { display: none; }
/* Without the script the three steps stack; a rule and some air part them. */
.warranty__form:not(.is-stepped) .step + .step {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
}
.step__title {
  font-family: var(--display); font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  font-weight: 550; letter-spacing: -0.03em; line-height: 1.1;
  margin: 0 0 1.5rem; outline: 0;
}
.step__count { display: block; font-family: var(--sans); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; color: var(--ink-soft); margin-bottom: 0.4rem; }
.step__nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.step__nav[hidden] { display: none; }
.step__nav .btn { padding: 0.9rem 1.6rem; }
.step__nav .btn--outline { text-transform: none; letter-spacing: 0; font-size: var(--step-0); border-radius: 0; }
.warranty__captcha { margin-top: 1.5rem; min-height: 65px; }
.warranty__captcha .errorlist { margin-top: 0.6rem; }
.warranty__agree { margin-top: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.warranty__form .form__row { gap: 1rem; }
.warranty__form .field { margin-bottom: 1.15rem; }
.warranty__form .field label, .warranty__form .choices legend {
  font-size: var(--step-0); font-weight: 500; color: var(--ink); margin-bottom: 0.4rem;
}
.warranty__form .field input:not([type="file"]),
.warranty__form .field select,
.warranty__form .field textarea {
  width: 100%; min-height: 3rem;
  border: 1px solid var(--ink-faint); border-radius: 0.6rem;
  background: var(--surface); color: var(--ink);
  padding: 0.7rem 0.9rem; font: inherit; font-size: 1.0625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.warranty__form .field textarea { min-height: 5.5rem; resize: vertical; }
.warranty__form .field input:not([type="file"]):hover,
.warranty__form .field select:hover,
.warranty__form .field textarea:hover { border-color: var(--ink); }
.warranty__form .field input:not([type="file"]):focus-visible,
.warranty__form .field select:focus-visible,
.warranty__form .field textarea:focus-visible {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(23 24 27 / 0.16);
}
/* A field the server sent back: red edge, and its message right under it. */
.warranty__form .field:has(.errorlist) input,
.warranty__form .field:has(.errorlist) select,
.warranty__form .field:has(.errorlist) textarea { border-color: #b42318; }
.warranty__form .errorlist { font-size: var(--step--1); margin-top: 0.4rem; }

/* Barcodes: a box each, a remove button beside every box but the first, and
   an "add another" button under the list. */
.barcodes__list { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.warranty__form .barcodes__row { display: flex; gap: 0.5rem; margin: 0; }
.barcodes__row input { flex: 1; min-width: 0; }
.barcodes__remove {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 1px solid var(--ink-faint); border-radius: 0.6rem;
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.barcodes__remove[hidden] { display: none; }
.barcodes__remove:hover { border-color: #b42318; color: #b42318; }
.barcodes__add {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.55rem 1.05rem;
  border: 1.5px dashed var(--ink-faint); border-radius: 0.6rem;
  background: none; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.barcodes__add[hidden] { display: none; }
.barcodes__add:hover:not(:disabled) { border-color: var(--ink); background: var(--line-soft); }
.barcodes__add:disabled { opacity: 0.45; cursor: not-allowed; }
.barcodes .field__hint { margin-top: 0.6rem; }

/* The receipt picker: a dashed drop area with a proper button in it. */
.warranty__form .field--file input[type="file"] {
  width: 100%; padding: 1rem; font: inherit; font-size: var(--step--1); color: var(--ink-soft);
  border: 1.5px dashed var(--ink-faint); border-radius: 0.8rem; background: var(--line-soft);
  cursor: pointer;
}
.warranty__form .field--file input[type="file"]:hover { border-color: var(--ink); }
.warranty__form .field--file input[type="file"]::file-selector-button {
  margin-right: 0.9rem; padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink); border-radius: 0.5rem;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.warranty__form .field--file strong { color: var(--ink); font-weight: 500; }
.warranty__form .choice { min-height: 2.75rem; padding: 0.55rem 1.05rem; border-color: var(--ink-faint); }
.warranty__form .choices { margin-bottom: 1.15rem; }
@media (max-width: 34rem) {
  .warranty__form .form__row { grid-template-columns: 1fr; gap: 0; }
  .step__nav .btn { flex: 1; }
}

/* The design picker, underlined like the text fields beside it. */
.contact .about__panel .field select {
  border: 0; border-bottom: 1px solid var(--ink-faint); border-radius: 0;
  background: transparent; color: var(--ink);
  padding: 0.55rem 0; font: inherit; font-size: 1.0625rem;
}
.contact .about__panel .field select:hover { border-bottom-color: var(--ink); }
.contact .about__panel .field select:focus-visible { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }

/* Radio groups and tick-boxes. Each option is a pill-shaped label, so the
   whole pill is the click target rather than the 13px control inside it. */
.choices { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.choices legend { padding: 0; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.6rem; }
.choices__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: var(--step-0);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--line-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice input { accent-color: var(--ink); margin: 0; flex: none; }
/* A tick-box with a sentence beside it: no pill, text wraps. */
.choice--block {
  display: flex; align-items: flex-start; border: 0; border-radius: 0; padding: 0;
  margin-bottom: 0.75rem; max-width: 70ch; line-height: 1.5;
}
.choice--block:has(input:checked) { background: none; }
.choice--block input { margin-top: 0.3em; width: 1.05rem; height: 1.05rem; }

/* ---- the email step ---- */
.verify { max-width: 44rem; }
.verify__form { max-width: 24rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* The code is six digits read off another screen: set large and widely
   spaced so each digit can be checked at a glance. */
.contact .about__panel .field input.verify__code:not([type="file"]) {
  font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 500; letter-spacing: 0.32em; padding: 0.35rem 0;
  font-variant-numeric: tabular-nums;
}
.verify__resend { padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); margin-bottom: 1.5rem; }
.verify__note { color: var(--ink-soft); max-width: 56ch; }
.verify .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.verify__summary { margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.verify__summary > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.verify__summary dt { color: var(--ink-soft); }
.verify__summary dd { margin: 0; font-weight: 500; text-align: right; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Resources page

   Black opening, then three sections on alternating white and black. The
   white ones are rounded panels on the page's black ground, as on About.
   Each PDF is a card with a portrait cover - the shape of the document.
   ========================================================================== */

.resources__jump {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.resources__jump a {
  display: inline-block; padding: 0.55rem 1.1rem;
  border: 1px solid rgb(251 251 249 / 0.32); border-radius: 999px;
  color: var(--paper); text-decoration: none; font-size: var(--step-0);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.resources__jump a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* The fixed header would otherwise cover a section's heading after a jump. */
.resources__section { padding-block: clamp(3rem, 7vw, 6rem); scroll-margin-top: var(--header-h); }
.resources__section--light {
  background: var(--paper);
  border-radius: clamp(1.5rem, 3.2vw, 3rem);
}
.resources__section--dark { color: rgb(251 251 249 / 0.7); }
.resources__section--dark h2 { color: var(--paper); }
.resources__section--dark :focus-visible { outline-color: var(--paper); }
/* The last white panel runs into the footer, so only its top is rounded. */
.resources__section--light:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.resources__head {
  display: grid; gap: 0.5rem clamp(2rem, 5vw, 6rem);
  align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 48rem) {
  .resources__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.resources__head h2 { margin: 0; }
.resources__head p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.resources__section--dark .resources__head p { color: inherit; }

.resources__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.resources__empty { margin: 0; color: var(--ink-soft); }
.resources__section--dark .resources__empty { color: inherit; }
.resources__section--dark .resources__empty a { color: var(--paper); }
.resources__empty span { font-size: var(--step--1); opacity: 0.8; }

.resource-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.resource-card__cover {
  position: relative; display: block;
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 0.9rem;
  background: var(--line-soft);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-card:hover .resource-card__cover,
.resource-card:focus-visible .resource-card__cover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgb(23 24 27 / 0.55);
}
.resource-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.resource-card__auto { position: absolute; inset: 0; background: var(--paper); }
/* No cover image: a plain black cover with the title set on it. */
.resource-card__cover--plain {
  display: flex; align-items: flex-end;
  background: var(--night); border-color: var(--night);
  padding: 1.1rem;
}
.resources__section--dark .resource-card__cover { border-color: var(--night-line); }
.resources__section--dark .resource-card__cover--plain { background: var(--paper); border-color: var(--paper); }
.resource-card__cover-title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--paper); text-wrap: balance;
}
.resources__section--dark .resource-card__cover-title { color: var(--ink); }
.resource-card__badge {
  position: absolute; top: 0.8rem; left: 0.8rem;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
}
.resource-card__title {
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 550; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink);
}
.resources__section--dark .resource-card__title { color: var(--paper); }
.resource-card__desc { margin-top: 0.3rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.resources__section--dark .resource-card__desc { color: rgb(251 251 249 / 0.65); }
.resource-card__action {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.7rem; font-size: var(--step--1); font-weight: 500;
  color: var(--ink);
}
.resources__section--dark .resource-card__action { color: var(--paper); }
.resource-card:hover .resource-card__action { color: var(--brand-deep); }
.resources__section--dark .resource-card:hover .resource-card__action { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .resource-card__cover { transition: none; }
  .resource-card:hover .resource-card__cover { transform: none; }
}

/* ==========================================================================
   Contact page

   Built from the About page's parts (.about, .about__open, .about__panel) so
   the two read as a pair: black opening with the direct details, white
   rounded panel with the form, black band with the map.
   ========================================================================== */

.contact__direct {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--night-line);
}
@media (min-width: 48rem) {
  .contact__direct { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact__direct dt {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--step-0); color: rgb(251 251 249 / 0.7); margin-bottom: 0.8rem;
}
/* Brand orange, as on the navigation: 6.6:1 on the black band. */
.contact__icon { flex: none; color: var(--brand); }
.contact__direct dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 450; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.contact__direct address { font-style: normal; }
.contact__direct a { text-decoration-color: rgb(251 251 249 / 0.3); }
.contact__direct a:hover { text-decoration-color: currentColor; }
/* The note that says what the second address is for. Both addresses are
   set at the same size; only this line between them is small. */
.contact__direct .contact__sub {
  margin: 1rem 0 0.2rem;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400; letter-spacing: 0;
  color: rgb(251 251 249 / 0.6);
}

.contact__form-grid { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
@media (min-width: 60.0625rem) {
  .contact__form-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
}
.contact__lead { max-width: 40ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; margin: 0; }

/* Underlined fields, as in the footer form, in ink on white. */
.contact .about__panel .form { max-width: none; }
.contact .about__panel .form__row { gap: clamp(1rem, 2.5vw, 2rem); }
.contact .about__panel .field { margin-bottom: 1.6rem; }
.contact .about__panel .field label { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.15rem; }
.contact .about__panel .field input:not([type="file"]),
.contact .about__panel .field textarea {
  border: 0; border-bottom: 1px solid var(--ink-faint); border-radius: 0;
  background: transparent; color: var(--ink);
  padding: 0.55rem 0; font: inherit; font-size: 1.0625rem;
}
.contact .about__panel .field textarea { resize: vertical; min-height: 7rem; }
.contact .about__panel .field input:not([type="file"]):hover,
.contact .about__panel .field textarea:hover { border-bottom-color: var(--ink); }
.contact .about__panel .field input:not([type="file"]):focus-visible,
.contact .about__panel .field textarea:focus-visible {
  outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink);
}
.contact .about__panel .field input[type="file"] { padding-block: 0.5rem; font-size: var(--step--1); }
.contact .about__panel .btn { margin-top: 0.5rem; }

.contact__map { padding-block: clamp(3rem, 7vw, 6rem); color: rgb(251 251 249 / 0.7); }
.contact__map-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.contact__map-head h2 { color: var(--paper); margin: 0; }
.contact__map-head p { margin: 0; }
.contact__map-head a { color: var(--paper); }
.contact__map :focus-visible { outline-color: var(--paper); }
.contact__map-frame {
  display: block; width: 100%; height: clamp(20rem, 46vw, 32rem);
  border: 0; border-radius: clamp(0.9rem, 1.6vw, 1.5rem);
  background: #24262a;
}

/* Black outline button: ink on white, inverts on hover. */
.btn--outline {
  background: transparent; color: var(--ink); border-color: var(--ink);
  border-radius: 0.45rem;
  gap: 0.9rem; padding: 0.85rem 1.6rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--step--1);
}
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ==========================================================================
   Project row -- homepage Projects teaser

   Product-rail cards: a tall image over a white caption panel (name, then
   country), soft shadow, square corners. A native horizontal scroller, so
   touch swipe, trackpad and keyboard all work with no script. rail.js adds
   the arrows (only when the row overflows) and the slide-in from the right.
   ========================================================================== */

.project-row { position: relative; }

.project-row__track {
  --rail-gap: clamp(1rem, 2.4vw, 2.5rem);
  display: flex; gap: var(--rail-gap);
  list-style: none; margin: 0;
  /* Room for the panel shadow, which the scroller would otherwise clip. */
  padding: 0.5rem var(--gutter) 2.5rem;
  /* Bleed to the screen edge so the next card peeks in from off-screen. */
  margin-inline: calc(var(--gutter) * -1);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.project-row__track::-webkit-scrollbar { display: none; }

.project-row__item {
  flex: 0 0 auto;
  width: min(78vw, 21rem);          /* phone: one card and a peek of the next */
  scroll-snap-align: start;
}
@media (min-width: 60.0625rem) {
  /* Desktop: three across, capped so the row never gets tall. */
  .project-row__item { width: min(calc((100% - 2 * var(--rail-gap)) / 3), 24rem); }
}

.project-card {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
  background: var(--surface);
  box-shadow: 0 14px 34px -14px rgb(23 24 27 / 0.16);
  transition: box-shadow 0.35s ease;
}
.project-card:hover { box-shadow: 0 20px 44px -14px rgb(23 24 27 / 0.24); }

.project-card__media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--line-soft);
}
.project-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .project-card__media img { transform: scale(1.03); }

.project-card__body {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 1.35rem 1.5rem 1.75rem;
}
.project-card__title { font-size: var(--step-1); font-weight: 500; line-height: 1.2; }
.project-card__meta  { font-size: var(--step-0); color: var(--ink-soft); }

/* Circular outline arrows over the image, as on the reference. */
.project-row__btn {
  position: absolute; top: var(--rail-media-mid, 40%);
  z-index: 2;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border: 1px solid rgb(23 24 27 / 0.45); border-radius: 50%;
  background: rgb(255 255 255 / 0.72); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.project-row__btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.project-row__btn[hidden] { display: none; }
.project-row__btn:disabled { opacity: 0; pointer-events: none; }
.project-row__btn--prev { left: 0.75rem; }
.project-row__btn--next { right: 0.75rem; }
/* Touch users swipe; the arrows are for mouse and keyboard. */
@media (hover: none) { .project-row__btn { display: none; } }

/* ---- entrance: slide in from the right ----
   .is-armed is added by rail.js only, so without JS (or with reduced motion)
   the cards are simply there. */
.project-row.is-armed .project-row__item {
  opacity: 0;
  transform: translateX(min(40vw, 26rem));
}
.project-row.is-armed .project-row__btn { opacity: 0; pointer-events: none; }
.project-row.is-in .project-row__item {
  opacity: 1; transform: none;
  transition:
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.14s),
    opacity 0.6s ease calc(var(--i, 0) * 0.14s);
}

/* ==========================================================================
   Design page

   Two columns: the slab holds still on the left while the panel scrolls.
   Every block is a card on stone, so a design with three specification rows
   still reads as a finished page. Serif display type and generous spacing do
   the rest -- the calm comes from the restraint, not from more ornament.
   ========================================================================== */

.design-page {
  background: var(--stone);
  padding-block: 2rem clamp(3rem, 6vw, 5rem);
  /* The page background, not just the section's: the band would otherwise
     stop at the last card. */
  box-shadow: 0 0 0 100vmax var(--stone);
  clip-path: inset(0 -100vmax);
}
.design-page .breadcrumb { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.design-layout {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60.0625rem) {
  /* The panel gets the wider share: it carries the reading, and a photograph
     that outgrows the window cannot be seen whole. */
  .design-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  /* Sticky, not fixed: it releases at the end of the column on its own. */
  .design-layout__media { position: sticky; top: calc(var(--header-h-compact) + 1.5rem); }
}

/* ---- the card ---- */
.card-panel {
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 1rem;
  box-shadow: 0 20px 40px -32px rgb(23 24 27 / 0.4);
}
/* Small caps over a hairline, as on the reference: the heading names the
   block without competing with the values under it. */
.card-panel__title {
  font-family: var(--serif);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line-soft);
}
.spec-card, .char-panel { padding: 0.9rem 1rem 1rem; }

/* Specification and Characteristics sit side by side once the column is wide
   enough for both to stay readable; below that they stack. */
.design-facts { display: grid; gap: 0.9rem; margin-top: 1.25rem; align-items: start; }
@media (min-width: 78rem) {
  .design-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.card-panel--form { padding: clamp(1.25rem, 3vw, 2.25rem); }

/* ---- gallery ---- */
.design-gallery { position: relative; margin: 0; padding: 0.5rem; overflow: hidden; }

/* Magnifier, top right of the photograph. */
.design-gallery__zoom {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
  border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: rgb(251 251 249 / 0.82); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px -14px rgb(23 24 27 / 0.6);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.design-gallery__zoom[hidden] { display: none; }
.design-gallery__zoom:hover {
  background: var(--brand); color: var(--on-brand); transform: scale(1.05);
}

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 11 13 / 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade-in 0.18s ease both;
}
.lightbox[hidden] { display: none; }
/* Room at the sides for the arrows, so they sit beside the photograph rather
   than on it wherever the screen is wide enough to spare the space. */
@media (min-width: 48rem) { .lightbox { padding-inline: 5.5rem; } }
.lightbox__image {
  /* Measured against the window, not the grid cell: a percentage height has
     nothing definite to resolve against here, and a tall slab would run off
     the bottom of the screen. */
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(1rem, 4vw, 3rem));
  max-height: calc(100dvh - 2 * clamp(1rem, 4vw, 3rem));
  object-fit: contain; border-radius: 0.4rem;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
.lightbox__close {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(251 251 249 / 0.4); border-radius: 50%;
  background: transparent; color: var(--paper); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lightbox__close:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* Previous and next, at the edges and level with the middle of the photograph. */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgb(251 251 249 / 0.4); border-radius: 50%;
  background: rgb(10 11 13 / 0.55); color: var(--paper); cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lightbox__nav[hidden], .lightbox__count[hidden] { display: none; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.lightbox__count {
  position: absolute; bottom: clamp(0.5rem, 1.5vw, 1rem); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0.25rem 0.75rem; border-radius: 1rem;
  background: rgb(10 11 13 / 0.55); color: var(--paper);
  font-size: 0.8rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
}
/* The page behind must not scroll while the overlay is up. */
body.has-lightbox { overflow: hidden; }
.design-gallery__main,
.design-gallery__empty {
  display: block; width: 100%; aspect-ratio: 1;
  /* Capped so the photograph, its thumbnails and the top of the panel all sit
     inside one window: the card never grows taller than the screen allows.
     The full view is where the whole slab is looked at. */
  max-height: min(32rem, calc(100vh - var(--header-h-compact) - 11rem));
  min-height: 16rem;
  object-fit: cover; border-radius: 0.6rem; background: var(--line-soft);
}

.design-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 4.5rem));
  gap: 0.6rem; list-style: none; margin: 0.6rem 0 0; padding: 0;
}
.design-thumbs__item {
  display: block; padding: 0.3rem; overflow: hidden;
  cursor: pointer; transition: border-color 0.2s ease;
}
.design-thumbs__item img { aspect-ratio: 1; object-fit: cover; border-radius: 0.45rem; }
.design-thumbs__item:hover { border-color: var(--brand); }
.design-thumbs__item.is-current { border-color: var(--brand); border-width: 2px; padding: calc(0.3rem - 1px); }

/* ---- panel ---- */
.design-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  font-weight: 400; letter-spacing: -0.015em; line-height: 1.05;
  margin: 0.35rem 0 1rem;
}
.design-lede {
  font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft);
  max-width: 46ch; margin-bottom: 2rem;
}

.spec-list { margin: 0; }
/* Label above value: the pair of cards is too narrow for two columns, and
   stacking keeps long values such as a size list on one line. */
.spec-list__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec-list__row:first-child { padding-top: 0; }
.spec-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
/* Label left, value right on one line - a specification reads as a table,
   and at this width the pairs still fit. */
.spec-list dt {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); flex: none;
}
.spec-list dd { margin: 0; font-size: 0.82rem; text-align: right; }
@media (max-width: 26rem) {
  .spec-list__row { flex-direction: column; gap: 0.05rem; }
  .spec-list dd { text-align: left; }
}

/* ---- characteristics ---- */
.char-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.15rem 0.9rem; list-style: none; margin: 0; padding: 0;
}
/* Icon and label on a rule, not in a box: fewer edges, less height. */
.char-card {
  display: flex; gap: 0.55rem; align-items: center;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.char-card:hover .char-card__name { color: var(--brand-deep); }
/* One box whether the icon is an uploaded PNG or the drawn fallback. */
.char-card__icon {
  flex: none; width: 1.15rem; height: 1.15rem;
  object-fit: contain; color: var(--brand-deep);
}
.char-card__name { font-size: 0.8rem; font-weight: 400; line-height: 1.3; transition: color 0.2s ease; }

.design-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 1.35rem;
}

/* The tail of the page keeps the serif, so it reads as one piece. */
.design-page h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.design-page .card { background: var(--surface); border-radius: 0.75rem; overflow: hidden; }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.section--quiet { background: var(--surface); border-block: 1px solid var(--line); }
/* The quiet band is the last thing before the footer; it does not need the
   full section rhythm underneath it. */
.section--quiet + .site-footer, .section--quiet:last-of-type { margin-top: 0; }
.section--quiet { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ---- Testimonial marquee ----
   Two identical groups side by side, each at least a viewport wide, both
   sliding left by their own width. When the first has gone, the second is
   exactly where the first began, so the loop never shows a seam. */
.marquee { --gap: 1rem; --duration: 40s; position: relative; }

.marquee__viewport {
  display: flex;
  padding-block: 0.75rem 1rem;          /* room for the hover lift */
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-inline: var(--gutter);
}
.marquee__viewport::-webkit-scrollbar { display: none; }

.marquee__group {
  display: flex; flex-shrink: 0; gap: var(--gap);
  list-style: none; margin: 0; padding: 0;
}
.marquee__item { flex: 0 0 auto; scroll-snap-align: start; }

/* Enhanced: hide the scroller, fade the edges, run the loop. */
.marquee.is-running .marquee__viewport {
  overflow: hidden; padding-inline: 0; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee.is-running .marquee__group {
  min-width: 100%;
  padding-right: var(--gap);            /* the gap between the two groups */
  animation: marquee-left var(--duration) linear infinite;
  will-change: transform;
}
.marquee.is-running .marquee__viewport:hover .marquee__group,
.marquee.is-running .marquee__viewport:focus-within .marquee__group,
.marquee.is-paused .marquee__group { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.t-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  width: min(80vw, 22rem); height: 100%;
  margin: 0; padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.t-card:hover {
  transform: translateY(-4px);
  background: var(--surface);
  box-shadow: 0 18px 36px -18px rgb(23 24 27 / 0.22);
}
.t-card__quote {
  margin: 0;
  font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.t-card__quote::before { content: "\201C"; }
.t-card__quote::after  { content: "\201D"; }

.t-card__by { display: flex; align-items: center; gap: 0.75rem; }
.t-card__avatar {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
}
.t-card__who { display: flex; flex-direction: column; min-width: 0; }
.t-card__name { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.t-card__detail, .t-card__project { font-size: var(--step--1); color: var(--ink-faint); }
.t-card__project { text-decoration: underline; text-underline-offset: 0.2em; }
.t-card__project:hover { color: var(--brand-deep); }

.marquee__controls { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.marquee__toggle {
  font: inherit; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1rem; min-height: 2.75rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.marquee__toggle:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.marquee__toggle[hidden] { display: none; }

.section__more { margin-top: 2.5rem; }

/* ==========================================================================
   Empty-section notice (development only)
   ========================================================================== */

.section-empty {
  border: 1px dashed var(--line);
  padding: 1.5rem;
  background: var(--surface);
}
.section-empty__title {
  font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.4rem;
}
.section-empty__hint { margin: 0 0 0.6rem; color: var(--ink-soft); max-width: 60ch; }
.section-empty__cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--1); background: var(--line-soft); padding: 0.3rem 0.55rem;
}

/* Hero with no uploaded media: a typographic panel on a tonal ground. */
.hero__media--empty {
  background:
    radial-gradient(120% 90% at 25% 15%, #33363b 0%, transparent 60%),
    linear-gradient(160deg, #1e2023 0%, #2c2f33 55%, #191a1d 100%);
}

/* ==========================================================================
   Footer -- condensed
   ========================================================================== */

.site-footer {
  background: var(--night); color: rgb(251 251 249 / 0.72);
  margin-top: clamp(3rem, 6vw, 5rem);
  font-size: 0.82rem;
}

/* ---- masthead: mark and social ribbon ---- */
.footer__masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  max-width: 1400px; margin-inline: auto;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) var(--gutter) 0;
}
.footer__brand { display: inline-flex; text-decoration: none; }
.footer__brand img { height: clamp(2rem, 3.4vw, 2.6rem); width: auto; }
.footer__wordmark { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
.footer__wordmark span { color: rgb(251 251 249 / 0.45); font-weight: 400; margin-left: 0.35em; }

/* One strip with hairline dividers, not five loose links. */
.social-ribbon {
  display: flex; flex-wrap: wrap; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
  background: rgb(251 251 249 / 0.06);
  border-radius: 0.6rem;
  overflow: hidden;
}
.social-ribbon li + li { border-left: 1px solid rgb(251 251 249 / 0.12); }
.social-ribbon a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  text-decoration: none; color: rgb(251 251 249 / 0.78);
  /* Brand names in their own casing - Instagram, LinkedIn, Pinterest -
     rather than forced capitals. */
  font-size: 0.85rem; letter-spacing: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.social-ribbon a:hover { background: var(--brand); color: var(--on-brand); }
.social-ribbon svg { width: 1.1rem; height: 1.1rem; flex: none; }

.footer__top {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1400px; margin-inline: auto;
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
}
.footer__heading {
  font-size: var(--step-1); color: var(--paper);
  margin-bottom: 0.3rem; letter-spacing: -0.015em; font-weight: 500;
}
.footer__note {
  color: rgb(251 251 249 / 0.55); max-width: 40ch;
  margin-bottom: 1.1rem; font-size: 0.8rem;
}

/* ---- the enquiry form: rules, not boxes ----
   Each field is a label in small caps over a hairline. Only the footer's copy
   changes; the same form on the contact page keeps its boxes. */
.footer__form .form { max-width: none; }
/* Four short fields in two rows, then the message: the whole form is six
   lines tall so the footer stays under a screenful. */
.footer__form .form__row { gap: 1.25rem; }
.footer__form .field { margin-bottom: 0.8rem; }
.footer__form label {
  color: rgb(251 251 249 / 0.45);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.footer__form input, .footer__form textarea, .footer__form select {
  background: transparent;
  border: 0; border-bottom: 1px solid rgb(251 251 249 / 0.22);
  border-radius: 0;
  color: var(--paper);
  padding: 0.1rem 0 0.4rem; font-size: var(--step--1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer__form select option { color: var(--ink); }
.footer__form textarea { min-height: 2.6rem; resize: vertical; }
.footer__form input::placeholder, .footer__form textarea::placeholder { color: rgb(251 251 249 / 0.3); }
/* The rule itself is the focus ring: it thickens and turns orange, which is
   visible against the dark ground without a box appearing from nowhere. */
.footer__form input:hover, .footer__form textarea:hover, .footer__form select:hover {
  border-bottom-color: rgb(251 251 249 / 0.45);
}
.footer__form input:focus, .footer__form textarea:focus, .footer__form select:focus,
.footer__form input:focus-visible, .footer__form textarea:focus-visible, .footer__form select:focus-visible {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 1px 0 0 var(--brand);
}
.footer__form input[type="file"] { font-size: var(--step--1); color: rgb(251 251 249 / 0.6); padding-block: 0.6rem; }

/* Outlined, with the arrow the reference uses. */
.footer__form .btn {
  margin-top: 0.15rem;
  gap: 0.8rem;
  padding: 0.65rem 1.25rem;
  background: transparent; border-color: rgb(251 251 249 / 0.45); color: var(--paper);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.footer__form .btn::after { content: "\2197"; font-size: 1.1em; line-height: 1; }
.footer__form .btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.footer__cta { display: none; margin-bottom: 0.5rem; }

.footer__links {
  display: grid;
  /* Three columns since applications moved out; contact needs the most room. */
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 1.5rem;
}
.footer__col h3 {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(251 251 249 / 0.4); font-weight: 500; margin: 0 0 0.75rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.15rem; line-height: 1.45; }
/* Footer links rest in the footer's own off-white and warm towards the logo
   orange on hover and on keyboard focus. The hover colour is a softened
   orange rather than the full brand tone: at this size, against near-black,
   the pure colour shouts. It reads 6.84:1, well clear of the minimum. */
.footer__col a {
  text-decoration: none;
  color: rgb(251 251 249 / 0.8);
  transition: color 0.25s ease;
}
.footer__col a:hover,
.footer__col a:focus-visible { color: var(--brand-soft); }
.footer__col address {
  font-style: normal; line-height: 1.5; margin: 0 0 0.5rem;
  color: rgb(251 251 249 / 0.6);
}
.footer__social { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.footer__social li { margin-bottom: 0; }

/* One thin strip rather than three stacked bars. */
.footer__strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
  max-width: 1400px; margin-inline: auto;
  padding: 0.7rem var(--gutter);
  border-top: 1px solid rgb(251 251 249 / 0.12);
  font-size: 0.78rem;
}
.footer__regions, .footer__legal-links {
  display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0;
}
.footer__legal-links { margin-left: auto; }
.footer__regions span { color: rgb(251 251 249 / 0.4); letter-spacing: 0.1em; text-transform: uppercase; }
.footer__strip a { text-decoration: none; color: rgb(251 251 249 / 0.72); }
.footer__strip a:hover { color: var(--paper); }

/* ==========================================================================
   Responsive and motion
   ========================================================================== */

.nav__search-compact { display: flex; align-items: center; }

@media (max-width: 60rem) {
  :root { --header-h: 62px; --header-h-compact: 62px; }

  /* One bar on a phone. The desktop menus are replaced wholesale by the
     drawer, so the compact bar has nothing left to do and the expanded bar
     stays visible at every scroll position. */
  .bar--collapsed { display: none; }
  /* Back to a single row: the drawer carries navigation on a phone, so the
     nav row has nothing to show and the bar behaves as it did before. */
  .bar--expanded { align-items: center; padding-block: 0; }
  .site-header[data-state="collapsed"] .bar--expanded {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .bar { gap: 0.5rem; }
  .bar .nav { display: none; }
  .nav__cta { display: none; }
  .nav__actions { margin-left: auto; gap: 0.15rem; }
  .search-toggle span { position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .search-toggle { padding: 0.6rem; }
  .search-toggle__icon { width: 1.3em; height: 1.3em; }
  .brand { font-size: var(--step-0); }
  /* 62px bar: the logo scales with it rather than crowding the hamburger. */
  .brand__logo { height: calc(var(--logo-h, 48px) * 0.62); max-width: 9rem; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__legal-links { margin-left: 0; }
  .mega__inner { grid-template-columns: 1fr; }
  .mega__families { columns: 1; }
  .form__row { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 0.15rem; }

  .hero__headline { max-width: 100%; }
  .hero__body { padding-bottom: clamp(5rem, 18vw, 7rem); }
}

/* ==========================================================================
   Transparent header

   On pages that open with a full-bleed hero the header floats over the image:
   no background, no rule, white type. It turns solid on three occasions, each
   of which puts a panel or a page behind the links where transparency would
   leave them unreadable:

     * the page has been scrolled past the hero's first screen (data-state),
     * a mega menu or dropdown is open (data-solid, set by nav.js),
     * the mobile drawer is open (data-drawer).

   Colour is inherited rather than reassigned per element: the shell owns the
   colour and every link, trigger and icon inside it uses currentColor, so one
   declaration flips the whole bar.
   ========================================================================== */

body.has-transparent-header { padding-top: 0; }

.site-header[data-transparent="true"][data-state="expanded"]:not([data-solid="true"]):not([data-drawer="open"]) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
}

/* The Enquire button is solid logo orange in every header state, over the
   hero photograph included -- it is the one call to action in the bar. */
.site-header[data-transparent="true"][data-state="expanded"]:not([data-solid="true"]):not([data-drawer="open"]) .brand__mark {
  color: rgb(251 251 249 / 0.66);
}

/* Over the hero photograph, the light lockup. Everywhere else, the default.
   If no light variant was uploaded the template renders the same file twice,
   so this swap is a no-op rather than a missing logo. */
.site-header[data-transparent="true"][data-state="expanded"]:not([data-solid="true"]):not([data-drawer="open"]) .brand__logo {
  display: none;
}
.site-header[data-transparent="true"][data-state="expanded"]:not([data-solid="true"]):not([data-drawer="open"]) .brand__logo--light {
  display: block;
}

/* Solid states get a hairline so the bar reads as a layer above the page.
   Collapsed is not one of them: there the capsule is the only surface and
   the bar behind it stays clear. */
.site-header[data-solid="true"]:not([data-state="collapsed"]),
.site-header[data-drawer="open"] {
  background: var(--paper);
  border-bottom-color: var(--line);
  color: var(--ink);
}
/* The mark beside the capsule sits straight on the page, so it takes the
   page's own ink colour rather than the hero's white. */
.site-header[data-state="collapsed"] .brand--compact { color: var(--ink); }
.site-header[data-state="collapsed"] .brand--compact .brand__logo { display: block; }
.site-header[data-state="collapsed"] .brand--compact .brand__logo--light { display: none; }
/* The uploaded logo stands on the page with nothing behind it: it is orange
   and reads on black and on white alike. The frosted chip is kept only for
   the text wordmark, shown when no logo has been uploaded - that is dark ink,
   and would vanish whenever a black band scrolled under it. */
.site-header[data-state="collapsed"] .brand--compact:not(:has(.brand__logo)) {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgb(216 214 206 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 38px -22px rgb(23 24 27 / 0.5);
}

/* ---- phones: the footer must stay under a screenful ----
   The link lists run as wrapped inline rows rather than tall stacks, the
   form keeps its two-column rows, and the ribbon drops to icons. Every link
   is still here - nothing is hidden behind a tap. */
@media (max-width: 48rem) {
  .footer__masthead { padding-top: 1.1rem; gap: 0.85rem; }
  .site-footer .social-ribbon a { padding: 0.55rem 0.7rem; gap: 0; }
  .social-ribbon a span,
  .site-footer .social-ribbon a { font-size: 0; }          /* label off, icon stays */
  .social-ribbon svg { width: 1.15rem; height: 1.15rem; }

  .footer__top { padding-top: 1rem; gap: 1.25rem; }
  .footer__heading { font-size: var(--step-0); }
  /* The form gives way to a button through to the contact page. */
  .footer__form .form { display: none; }
  .footer__cta { display: inline-flex; }
  .footer__note { display: block; margin-bottom: 0.9rem; }

  .site-footer .footer__links { grid-template-columns: 1fr; gap: 0.9rem; }
  .footer__col h3 { margin-bottom: 0.35rem; }
  /* Wrapped inline rows, divided by a hairline pipe so two adjacent links
     never read as one phrase: Ext Pavements | Large Porcelain Slabs */
  .footer__col ul {
    display: flex; flex-wrap: wrap; gap: 0.15rem 0;
  }
  .footer__col li { margin-bottom: 0; white-space: nowrap; }
  /* The divider trails its own link rather than leading the next one: a
     wrapped row would otherwise begin with a stray pipe. The contact block
     stays one item per line, so it takes no dividers. */
  .footer__col:not(.footer__col--contact) li:not(:last-child)::after {
    content: "|";
    margin-inline: 0.55rem;
    color: rgb(251 251 249 / 0.25);
  }
  .footer__col--contact ul { display: block; }
  .footer__col address { margin-bottom: 0.35rem; }

  .footer__strip { padding-block: 0.6rem; gap: 0.35rem 1rem; }
  .footer__regions, .footer__legal-links { gap: 0.35rem 0.75rem; }
}

/* ==========================================================================
   Mobile: hamburger and drawer

   The drawer is a single fixed panel below the header, not a stack of nested
   overlays. Every link inside it is in the HTML at page load, exactly as on
   the desktop bar - the accordions hide their panels with the hidden
   attribute, they do not create them on tap.
   ========================================================================== */

.nav-toggle {
  display: none;                 /* shown by the <=60rem query */
  align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  margin-left: 0.1rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* The show rule sits here, immediately after the default, rather than in the
   responsive block far above: both selectors have the same specificity, so
   whichever is declared last wins and the distant one silently lost. */
@media (max-width: 60rem) { .nav-toggle { display: inline-flex; } }

.nav-toggle__box {
  position: relative; display: block; width: 22px; height: 14px;
}
.nav-toggle__bar {
  position: absolute; left: 0; width: 100%; height: 1.6px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease, top 0.2s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6.2px; }
.nav-toggle__bar:nth-child(3) { top: 12.4px; }

/* Hamburger to close, without a second icon to keep in sync. */
[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 6.2px; transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 6.2px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* visibility, not opacity alone: an invisible panel must leave the tab
     order too, or a keyboard user falls into it. */
  visibility: hidden; opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}
.drawer[data-open="true"] { visibility: visible; opacity: 1; transform: none; }

/* display:flex above would otherwise beat the user-agent's [hidden] rule and
   paint the panel anyway. The drawer is hidden until nav.js opens it, so a
   stylesheet that never arrives leaves the links in the document without
   spilling them over the page. */
.drawer[hidden] { display: none; }

/* The drawer is a phone affordance; above the breakpoint the desktop bar is
   back and the panel must never appear, whatever state JS last left it in. */
@media (min-width: 60.0625rem) { .drawer { display: none; } }

body.drawer-open { overflow: hidden; }

.drawer__inner {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  min-height: 100%;
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li { border-bottom: 1px solid var(--line-soft); }

.drawer__link, .drawer__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 1rem;
  padding: 0.95rem 0.1rem;
  font: inherit; font-size: var(--step-1); font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; text-align: left; cursor: pointer;
  transition: color 0.15s ease;
}
.drawer__link:active, .drawer__trigger:active,
.drawer__link:hover, .drawer__trigger:hover,
.drawer__trigger[aria-expanded="true"] { color: var(--brand); }

/* Generous hit areas: 44px minimum on every tappable row. */
.drawer__panel { padding-bottom: 0.85rem; }
.drawer__sub { list-style: none; margin: 0; padding: 0; }
.drawer__sub > li { margin-bottom: 0.15rem; }
.drawer__sub a {
  display: block; padding: 0.6rem 0.1rem;
  font-size: var(--step-0); color: var(--ink-soft); text-decoration: none;
}
.drawer__sub a:hover { color: var(--brand); }
.drawer__sizes { list-style: none; margin: 0 0 0.4rem; padding-left: 0.9rem; }
.drawer__sizes a { font-size: var(--step--1); color: var(--ink-faint); padding: 0.45rem 0.1rem; }
.drawer__all {
  display: inline-block; margin-top: 0.4rem; padding: 0.5rem 0.1rem;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); text-decoration: none;
}
.drawer__cta { width: 100%; padding-block: 0.95rem; }
.drawer__cta:hover { background: var(--brand); border-color: var(--brand); }
.drawer__meta {
  margin-top: auto; padding-top: 1.25rem;
  font-size: var(--step--1); color: var(--ink-faint);
}
.drawer__meta a { display: inline-block; padding: 0.7rem 0.1rem; color: inherit; }

/* ==========================================================================
   Design page: the black band

   The page is black from edge to edge and from the top of the window down to
   the footer. The photograph, the name and the two fact cards sit straight on
   it; the cards stay white, so the specification is the brightest thing after
   the photograph. "More in this family" follows in a white panel with rounded
   corners - the same shape as the About panel on the homepage.

   Type on this page is the site's display face, Inter Tight, not the serif
   the page used to carry: one voice from the homepage headline down to the
   name of a slab. Sizes step from one scale - name, lede, card heading,
   value, label - and nothing is set in capitals, because a row of small
   capitals is harder to read than the same words in sentence case.

   Scoped to .design-band so each rule outranks the older design-page rule it
   replaces without that rule having to be found and edited.
   ========================================================================== */

.design-page {
  background: var(--night);
  /* The older rule bled a white ground sideways with a shadow; black needs
     no such help, it is simply the element's own background. */
  box-shadow: none; clip-path: none;
  padding-block: 0 clamp(1.5rem, 3vw, 3rem);
}
/* The black meets the footer's black: no white strip between them. */
main:has(> .design-page) + .site-footer { margin-top: 0; }

.design-band {
  padding-block: 0.5rem clamp(2.5rem, 5vw, 4.5rem);
  color: rgb(251 251 249 / 0.86);
}

/* The white panel that follows. */
.design-tail {
  background: var(--paper); color: var(--ink);
  border-radius: clamp(1.5rem, 3.2vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.design-band :focus-visible { outline-color: var(--paper); }

.design-band .breadcrumb { color: rgb(251 251 249 / 0.55); }
.design-band .breadcrumb li + li::before { color: rgb(251 251 249 / 0.35); }
.design-band .breadcrumb a:hover,
.design-band .breadcrumb [aria-current] { color: var(--paper); }

/* ---- the name ---- */
.design-kicker {
  margin: 0 0 0.9rem;
  font-family: var(--display); font-size: var(--step-0); font-weight: 500;
  letter-spacing: 0.005em; color: rgb(251 251 249 / 0.6);
}
.design-kicker a { text-decoration: none; border-bottom: 1px solid rgb(251 251 249 / 0.25); padding-bottom: 0.1em; }
.design-kicker a:hover { color: var(--paper); border-bottom-color: var(--brand); }

.design-band .design-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  font-weight: 650; letter-spacing: -0.032em; line-height: 0.98;
  color: var(--paper);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.design-band .design-lede {
  font-size: var(--step-1); line-height: 1.45; letter-spacing: -0.008em;
  color: rgb(251 251 249 / 0.72);
  max-width: 40ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: pretty;
}

/* ---- the white cards ---- */
.design-band .card-panel {
  border-color: transparent; color: var(--ink);
  border-radius: 1.25rem;
  box-shadow: none;
}
.design-band .card-panel :focus-visible { outline-color: var(--focus); }
.design-band .design-gallery { border-radius: 1.5rem; }
.design-band .design-gallery__main,
.design-band .design-gallery__empty { border-radius: 1.1rem; }
.design-band .spec-card,
.design-band .char-panel { padding: 1.15rem 1.25rem 1.2rem; }

.design-band .card-panel__title {
  font-family: var(--display);
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; text-transform: none;
  color: var(--ink);
  margin: 0 0 0.7rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.design-band .spec-list__row { padding: 0.55rem 0; }
.design-band .spec-list__row:first-child { padding-top: 0; }
.design-band .spec-list__row:last-child { padding-bottom: 0; }
.design-band .spec-list dt {
  font-size: 0.8125rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
}
.design-band .spec-list dd {
  font-size: 0.9375rem; font-weight: 500; line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
}
.design-band .spec-list dd a { text-decoration-color: var(--brand); text-decoration-thickness: 1px; }

.design-band .char-card { padding: 0.55rem 0; gap: 0.65rem; }
.design-band .char-card__icon { width: 1.25rem; height: 1.25rem; }
.design-band .char-card__name { font-size: 0.875rem; font-weight: 500; line-height: 1.3; }

/* ---- thumbnails and actions on black ---- */
.design-band .design-thumbs__item { border-radius: 0.9rem; border: 2px solid transparent; padding: 0.2rem; }
.design-band .design-thumbs__item img { border-radius: 0.6rem; }
.design-band .design-thumbs__item:hover { border-color: rgb(251 251 249 / 0.6); }
.design-band .design-thumbs__item.is-current { border-color: var(--brand); padding: 0.2rem; }

.design-band .design-actions { margin-top: 1.75rem; }
.design-band .btn { padding: 0.9rem 1.6rem; font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; border-radius: 999px; }
.design-band .btn--ghost { color: var(--paper); border-color: rgb(251 251 249 / 0.4); }
.design-band .btn--ghost:hover { color: var(--on-brand); border-color: var(--brand); }

/* ---- the white tail ---- */
.design-page .design-related h2 {
  font-family: var(--display); font-weight: 650; letter-spacing: -0.03em;
}


/* ==========================================================================
   Bricks: series sections and the specification table

   Bricks is the one family with series (Venus, Mars) and the one whose
   specification is a table - several formats, each with a size, a weight and
   test figures. Both are driven by data: a family with no series and a design
   with no specification rows render exactly as before.
   ========================================================================== */

/* ---- family page: one section per series ---- */
.series-jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.series + .series { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* A jump link lands the heading below the floating header, not under it. */
.series { scroll-margin-top: calc(var(--header-h) + 1rem); }
.series__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem;
  margin-bottom: 1.5rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.series__title { margin: 0; font-size: var(--step-2); }
.series__lede { margin: 0; color: var(--ink-soft); }

/* ---- design page: the two cards stack, the table takes the width ---- */
.design-band .design-facts--stacked { grid-template-columns: minmax(0, 1fr); }

.spec-table__scroll { overflow-x: auto; margin-bottom: 0.2rem; }
.spec-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem; line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
}
.spec-table th, .spec-table td {
  padding: 0.4rem 0.75rem 0.4rem 0; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.spec-table th:last-child, .spec-table td:last-child { padding-right: 0; }
.spec-table thead th {
  padding-top: 0; font-weight: 500; color: var(--ink-soft);
  border-bottom-color: var(--line);
}
.spec-table tbody th { font-weight: 600; color: var(--ink); }
.spec-table tbody td { font-weight: 500; }
/* The cladding cut of the row above: set in under it and a tone lighter, so
   the pair reads as one format in two thicknesses. */
.spec-table .spec-table__sub th { padding-left: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.spec-table .spec-table__sub td { font-weight: 400; color: var(--ink-soft); }

/* Under a table the remaining facts run two to a line: label and value are
   short, and a full-width row each would waste the width the table needs. */
.design-band .spec-list--inline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  column-gap: 2rem;
}
.design-band .spec-list--inline .spec-list__row { padding: 0.4rem 0; }
.design-band .spec-list--inline .spec-list__row:first-child { padding-top: 0.4rem; }
.design-band .spec-list--inline .spec-list__row:last-child { padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); }

/* Stacked, the characteristics card has the full width too: three to a line
   keeps six of them to two rows. */
.design-band .design-facts--stacked .char-grid { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); column-gap: 1.5rem; }
.design-band .design-facts--stacked .spec-card,
.design-band .design-facts--stacked .char-panel { padding: 0.95rem 1.15rem 1rem; }
.design-band .design-facts--stacked .card-panel__title { margin-bottom: 0.55rem; padding-bottom: 0.55rem; }
.design-band .design-facts--stacked .char-card { padding: 0.42rem 0; }

/* A shipped icon: the PNG is only a shape. It masks a block of the brand
   colour, so the same file is orange here and could be white on black. */
.char-card__icon--art {
  display: block;
  background: var(--brand-deep);
  -webkit-mask: var(--art) center / contain no-repeat;
          mask: var(--art) center / contain no-repeat;
}
.design-band .char-card__icon--art { width: 1.6rem; height: 1.6rem; }

/* Two links in the line above the name: family, then series. */
.design-kicker a + a { margin-left: 0.75rem; }

/* ==========================================================================
   The capsule at the top of the page

   Every page but the homepage opens on the capsule (data-pinned="compact" in
   nav.html), so the header no longer paints a white bar across the top. The
   space it reserves is still there - the body padding has not changed, and
   nothing shifts - but on a page that opens black that space would show as a
   white strip above the black. These rules run the black up behind the
   capsule instead.

   Wide screens only: on a phone there is no capsule, the plain bar stays, and
   it needs its own solid ground to be read against.
   ========================================================================== */

@media (min-width: 60.0625rem) {
  /* Collection, family, size, application and search: the band is a shadow
     clipped to the element's own height, so letting the clip reach up by the
     header's height is all it takes. */
  .breadcrumb:has(+ .page-head),
  .page-head:first-child {
    clip-path: inset(calc(-1 * var(--header-h)) -100vmax 0);
  }
  /* The design page, and About, Contact and Resources (which share .about),
     are black in their own right: pull them up under the header and give the
     height back as padding. */
  .design-page,
  main > .about {
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
  }
}
@media (max-width: 60rem) {
  .site-header[data-pinned="compact"] { background: var(--paper); border-bottom-color: var(--line); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Mobile menu: black, centred, orange

   The phone drawer restyled. It overrides the drawer rules further up rather
   than editing them, so the two can be compared and this block removed in
   one piece. What changes:

   * Black ground, and the header bar above it turns black with it, so the
     open menu is one surface from the top of the screen down.
   * The destinations are centred and set large in white, at a medium
     weight - the same quiet display type as the page headlines. Orange is
     kept for the things that respond: the plus, a pressed or open row, and
     the Enquire button.
   * No rules between the rows. On black, spacing separates them well enough
     and the list reads as one calm column rather than a table.
   * A row that opens a list carries a plus, which turns to a minus while it
     is open. It replaces the chevron: a plus says "there is more in here".
   * The opening is damped - it arrives quickly and settles slowly, with the
     rows following a beat apart - instead of a short linear fade.
   ========================================================================== */

#site-header[data-drawer="open"] {
  background: var(--night);
  border-bottom-color: var(--night-line);
  color: var(--paper);
}
#site-header[data-drawer="open"] .brand,
#site-header[data-drawer="open"] .brand--compact { color: var(--paper); }
#site-header[data-drawer="open"] :focus-visible { outline-color: var(--paper); }

.drawer {
  background: var(--night);
  color: var(--paper);
  transform: translateY(-1.5rem);
  /* The curve does the damping: most of the distance in the first third of
     the time, then a long ease into place. Closing is quicker than opening. */
  transition: opacity 0.22s ease, transform 0.26s ease, visibility 0.26s;
}
.drawer[data-open="true"] {
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.drawer :focus-visible { outline-color: var(--paper); }

.drawer__inner { padding-top: clamp(1.5rem, 5vh, 3rem); gap: 1.75rem; }
/* The list floats in the middle of the screen when there is room, and simply
   scrolls when a section is open and there is not. */
.drawer__inner > nav { margin-block: auto; }
.drawer__list > li {
  border-bottom: 0;
  /* Each row rises into place a little after the one above it. */
  opacity: 0; transform: translateY(0.9rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.drawer[data-open="true"] .drawer__list > li {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.05s + var(--row, 0) * 0.045s);
}
.drawer__list > li:nth-child(2) { --row: 1; }
.drawer__list > li:nth-child(3) { --row: 2; }
.drawer__list > li:nth-child(4) { --row: 3; }
.drawer__list > li:nth-child(5) { --row: 4; }
.drawer__list > li:nth-child(6) { --row: 5; }
.drawer__list > li:nth-child(7) { --row: 6; }
.drawer__list > li:nth-child(n + 8) { --row: 7; }

.drawer__link, .drawer__trigger {
  justify-content: center; gap: 0.6rem;
  padding: 0.62rem 0.5rem;
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.15;
  color: var(--paper); text-align: center;
  transition: color 0.2s ease;
}
.drawer__link:active, .drawer__trigger:active,
.drawer__link:hover, .drawer__trigger:hover,
.drawer__trigger[aria-expanded="true"] { color: var(--brand); }

/* The plus, in orange. Two bars; open, the upright one turns flat and the
   plus reads as a minus. */
.drawer__trigger .chev,
.drawer__trigger[aria-expanded="true"] .chev {
  position: relative; flex: none;
  width: 0.5em; height: 0.5em;
  border: 0; transform: none;
  color: var(--brand);
}
.drawer__trigger .chev::before,
.drawer__trigger .chev::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 0.08em; margin-top: -0.04em;
  background: currentColor; border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer__trigger .chev::after { transform: rotate(90deg); }
.drawer__trigger[aria-expanded="true"] .chev::after { transform: rotate(0deg); }

.drawer__panel { padding: 0.35rem 0 1.1rem; text-align: center; }
.drawer__sub a {
  padding: 0.5rem 0.5rem;
  font-size: 1.0625rem; color: rgb(251 251 249 / 0.7);
}
.drawer__sub a:hover { color: var(--paper); }
.drawer__sizes { padding-left: 0; margin-bottom: 0.4rem; }
.drawer__sizes a { font-size: var(--step--1); color: rgb(251 251 249 / 0.5); padding: 0.35rem 0.5rem; }
.drawer__all {
  margin-top: 0.5rem; padding-inline: 0.5rem;
  color: var(--brand); letter-spacing: 0.02em; text-transform: none; font-size: var(--step--1);
}

/* A pill, like the navigation capsule on wider screens, and no wider than a
   button needs to be: a full-width slab was the loudest thing on the screen. */
.drawer__cta {
  align-self: center; width: auto; min-width: 12.5rem;
  padding: 0.9rem 2.25rem; border-radius: 999px;
  font-weight: 600;
}
.drawer__meta { margin-top: 0; padding-top: 0; text-align: center; color: rgb(251 251 249 / 0.55); }
.drawer__meta a { text-decoration-color: rgb(251 251 249 / 0.25); }
.drawer__meta a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer__list > li { transform: none; }
  .drawer[data-open="true"] .drawer__list > li { transition-delay: 0s; }
}

/* ==========================================================================
   Homepage: family cards larger, projects and testimonials as panels

   * The coverflow cards are bigger, most of all on a phone, where a card now
     takes most of the width instead of about half of it.
   * Projects and testimonials sit in white rounded panels on the black, like
     About Lamar: three white cards stacked down the page with black showing
     at their corners and in the gaps between them.
   * Project cards are smaller, so four fit across on desktop.
   * The testimonials no longer scroll by themselves; it is the projects rail,
     moved by swipe, trackpad, mouse drag or the arrows.
   ========================================================================== */

.coverflow { --cf-card: clamp(16rem, 74vw, 21rem); }
@media (min-width: 60.0625rem) {
  .coverflow { --cf-card: clamp(17.5rem, 24vw, 23rem); }
}

/* Panels after the first are separated from it by a strip of black. */
.about-band + .about-band { padding-top: clamp(0.75rem, 1.6vw, 1.25rem); }
.home-panel .about-band__panel { padding-block: clamp(2.75rem, 6vw, 5.5rem); }
/* The last panel on the homepage runs into the black footer. */
main:has(> .about-band:last-child) + .site-footer { margin-top: 0; }
main:has(> .about-band:last-child) > .about-band:last-child { padding-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }

.home-panel__head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.home-panel__title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem);
  font-weight: 500; letter-spacing: -0.045em; line-height: 0.98;
  margin: 0;
}
/* The subheading in the serif, in italic: a real italic, where the display
   face would only be slanted by the browser. */
.home-panel__sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem); letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}

/* Smaller project cards: a phone shows one and a good part of the next,
   desktop shows four. */
.home-panel .project-row__item { width: min(64vw, 16.5rem); }
@media (min-width: 60.0625rem) {
  .home-panel .project-row__item { width: min(calc((100% - 3 * var(--rail-gap)) / 4), 19rem); }
}
.home-panel .project-card__body { padding: 1rem 1.15rem 1.25rem; gap: 0.3rem; }
.home-panel .project-card__title { font-size: 1.1rem; }
.home-panel .project-card__meta { font-size: var(--step--1); }
.home-panel .section__more { margin-top: 1.5rem; }

/* Testimonial cards in the rail: equal heights, a little wider than a project. */
.quote-row__item { width: min(80vw, 21rem); display: flex; }
.quote-row__item .t-card { width: 100%; }
.quote-row .project-row__btn { top: 50%; }

/* Mouse dragging (rail.js). Touch never sees these. */
@media (hover: hover) and (pointer: fine) {
  [data-rail-track] { cursor: grab; }
}
[data-rail-track].is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
[data-rail-track].is-dragging a { pointer-events: none; }

/* Selected Projects on black: same heading, subheading and cards, but the
   panel takes the page's black, so the homepage alternates again - About
   white, Projects black, testimonials white. The project cards keep their
   white caption panels, which now stand out against the black. */
#projects .about-band__panel { background: var(--night); color: var(--paper); }
#projects .home-panel__title { color: var(--paper); }
#projects .home-panel__sub { color: rgb(251 251 249 / 0.65); }
#projects .project-card { color: var(--ink); }
#projects .btn--ghost { color: var(--paper); }
#projects :focus-visible { outline-color: var(--paper); }

/* ==========================================================================
   Projects index

   Black opening with the heading and filters, white rounded panel with the
   cards. Filters are re-toned for the black: light labels, outlined boxes.
   Cards are the homepage project cards at a smaller size - four across on
   desktop, three on a tablet, two on a phone.
   ========================================================================== */

.projects-page__sub { color: rgb(251 251 249 / 0.65); margin-top: 0.9rem; }

.filters--dark { padding-block: clamp(2rem, 4vw, 3rem) 0; gap: 0.75rem 1rem; }
.filters--dark label { color: rgb(251 251 249 / 0.6); }
.filters--dark select {
  min-width: 10rem; min-height: 2.9rem;
  background: transparent; color: var(--paper);
  border: 1px solid rgb(251 251 249 / 0.35); border-radius: 0.5rem;
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
}
.filters--dark select:hover { border-color: var(--paper); }
.filters--dark select:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* The open list is drawn by the system, usually light: keep its text dark. */
.filters--dark option { color: var(--ink); background: var(--paper); }
.filters--dark .btn--ghost { color: var(--paper); min-height: 2.9rem; border-radius: 0.5rem; }
@media (max-width: 34rem) {
  .filters--dark > div { flex: 1 1 calc(50% - 0.5rem); }
  .filters--dark select { min-width: 0; width: 100%; }
  .filters--dark .btn--ghost { flex: 1 1 100%; }
}

.projects-grid {
  display: grid; gap: clamp(0.85rem, 2.2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 40rem) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.projects-grid .project-card__body { padding: 0.9rem 1rem 1.1rem; gap: 0.25rem; }
.projects-grid .project-card__title { font-size: 1.05rem; line-height: 1.25; }
.projects-grid .project-card__meta { font-size: var(--step--1); }
@media (max-width: 40rem) {
  /* Two to a row on a phone: a squarer photo and a tighter caption. */
  .projects-grid .project-card__media { aspect-ratio: 1 / 1; }
  .projects-grid .project-card__body { padding: 0.65rem 0.75rem 0.8rem; }
  .projects-grid .project-card__title { font-size: 0.95rem; }
}

/* ==========================================================================
   Collection menu: a compact card

   Was a full-width panel with large type that filled most of the screen.
   Now a card about 46rem wide, centred under the bar, with rounded corners:

   * Families on the left, one row each - the name, with its sizes as small
     chips on the same line, so a family with two sizes is one row, not three.
   * Applications on the right as a short list.
   * Smaller type throughout, sentence-case section names, a single link at
     the foot of each column.

   Centred with a negative margin rather than translateX: the open animation
   (fade-in) animates transform and would otherwise knock the card sideways.
   ========================================================================== */

.mega {
  --mega-w: min(46rem, calc(100vw - 2 * var(--gutter)));
  left: 50%; right: auto; width: var(--mega-w);
  margin-left: calc(var(--mega-w) / -2);
  top: calc(100% + 0.4rem);
  border: 1px solid var(--line); border-radius: 1.1rem;
  box-shadow: 0 28px 60px -30px rgb(23 24 27 / 0.35);
  overflow: hidden;
}
.mega__inner {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0; max-width: none;
  padding: 0;
}
.mega__col { padding: 1.35rem 1.5rem 1.25rem; display: flex; flex-direction: column; }
.mega__col + .mega__col { background: var(--line-soft); }

.mega__heading {
  font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none;
  color: var(--ink-soft); font-weight: 500; margin: 0 0 0.6rem;
}

.mega__families { columns: 1; }
.mega__families > li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0 -0.6rem; padding: 0.42rem 0.6rem; border-radius: 0.55rem;
  transition: background 0.15s ease;
}
.mega__families > li:hover { background: var(--line-soft); }
.mega__families > li > a { font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; }

.mega__sizes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; margin: 0; }
.mega__sizes a {
  display: inline-block; padding: 0.18rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mega__sizes a:hover { border-color: var(--brand); color: var(--brand-deep); }

.mega__applications li { margin: 0; }
.mega__applications a {
  display: block; margin: 0 -0.6rem; padding: 0.42rem 0.6rem; border-radius: 0.55rem;
  font-size: 1rem; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.mega__applications a:hover { background: var(--surface); color: var(--brand-deep); }

.mega__all {
  margin-top: auto; padding-top: 0.9rem;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink); text-decoration: none;
}
.mega__all::after { content: " \2192"; color: var(--brand); }
.mega__all:hover { color: var(--brand-deep); }

@media (max-width: 48rem) {
  .mega__inner { grid-template-columns: 1fr; }
}

/* Catalogues, split by product line: a small heading over each group's cards,
   with a hairline between groups. */
.resources__group + .resources__group {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.resources__section--dark .resources__group + .resources__group { border-top-color: var(--night-line); }
.resources__group-title {
  font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 550; letter-spacing: -0.02em; margin: 0 0 1.25rem;
}
.resources__section--dark .resources__group-title { color: var(--paper); }
.resources__group { scroll-margin-top: var(--header-h); }

/* ==========================================================================
   Resources on a phone: one sideways row per group

   Below 40rem each group of PDF cards - each catalogue product line, the
   technical sheets, the installation guides - is a single row that scrolls
   sideways with a swipe, instead of a column that makes the page long.
   Cards are smaller, about two and a half to a screen, so the next one
   peeking in at the edge shows there is more. The row bleeds to the screen
   edge and snaps a card to the left after each swipe.
   ========================================================================== */
@media (max-width: 40rem) {
  .resources__grid {
    display: flex; gap: 0.85rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 1rem;
    scrollbar-width: none;
  }
  .resources__grid::-webkit-scrollbar { display: none; }
  /* position:relative keeps each card's screen-reader-only text positioned
     inside the row; otherwise it is placed against the page and stretches
     the whole page sideways. */
  .resources__grid > li { flex: 0 0 9.75rem; scroll-snap-align: start; position: relative; }

  .resource-card__cover { margin-bottom: 0.65rem; border-radius: 0.75rem; }
  .resource-card__cover--plain { padding: 0.8rem; }
  .resource-card__cover-title { font-size: 1.05rem; }
  .resource-card__badge { top: 0.55rem; left: 0.55rem; font-size: 0.66rem; }
  .resource-card__title { font-size: 0.98rem; }
  .resource-card__desc { font-size: 0.8rem; }
  .resource-card__action { margin-top: 0.45rem; font-size: 0.8rem; }
  .resources__group-title { margin-bottom: 0.85rem; }
}

/* ==========================================================================
   Cookie consent banner (templates/partials/cookie_banner.html)
   Fixed to the bottom edge so it never pushes the page down (no layout
   shift). Both buttons share one style: rejecting must be as easy as
   accepting.
   ========================================================================== */

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--night); color: var(--paper);
  border-top: 1px solid var(--night-line);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: 72rem; margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
}
.cookie-banner__text { flex: 1 1 22rem; margin: 0; font-size: var(--step--1); line-height: 1.5; }
.cookie-banner__text a { color: var(--paper); text-decoration-color: var(--brand); }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.cookie-banner__btn { min-width: 7rem; }
.cookie-banner__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* "Cookie settings" in the footer strip: a button, styled as the links beside it. */
.footer__cookie-settings {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: rgb(251 251 249 / 0.72);
}
.footer__cookie-settings:hover { color: var(--paper); }