/* ==========================================================================
   Express Acoustics: the site layer (the child-theme layer)
   Loaded last on every page, after main.css (shared base) and pages.css
   (shared inner-page kit). It holds:
   1. the Acoustics tokens (they replace the Group defaults in main.css);
   2. type and colour adjustments of shared components;
   3. the components only this site has: the homepage hero, the product range,
      "by space" navigation, finish swatches, the sound-decay motif, the
      product specification panel and the enquiry form routes.
   Shape rule (same family): buttons and chips are pills; photos and panels
   28 to 32px; cards 20 to 24px; swatches 14px or round; inputs 12px.
   ========================================================================== */

/* 1. Tokens: warm neutrals (oat, sand, timber) with the blue of the logo's "o"
   ----------------------------------------------------------------------- */
:root {
  --c-bg: #F3EFE8;            /* oat: page background */
  --c-surface: #FFFDF9;       /* warm white: cards, forms */
  --c-surface-2: #EAE3D7;     /* oat, deeper: tags, tinted panels (muted text 4.9:1) */
  --c-sand: #DED2BF;          /* sand: swatch rims, decorative bands (no small text on it) */
  --c-timber: #A87C52;        /* timber: decoration only, never text */
  --c-ink: #1E2327;           /* charcoal with a cool cast: text, primary buttons (13.8:1) */
  --c-ink-2: #2F363B;
  --c-text-2: #464B4E;        /* secondary body text (7.7:1 on oat) */
  --c-muted: #5F615E;         /* labels and captions (5.5:1 on oat) */
  --c-line: #E2DACD;
  --c-line-2: #CFC4B2;
  --c-field: #8B8475;         /* form field borders (3.7:1 on warm white) */
  --c-accent: #50A8E8;        /* the blue "o" of the logo: fills behind ink only */
  --c-accent-hover: #6BB5EC;
  --c-accent-ink: #1E6699;    /* blue for text and links on light (5.4:1 on oat) */
  --c-accent-soft: #DFEBF4;
  --c-accent-line: #B9D3E8;
  --c-accent-glow: rgba(80, 168, 232, 0.24);
  --c-dark: #1F2A33;          /* midnight: footer, dark cards (on-dark text 12.5:1) */
  --c-dark-2: #283540;
  --c-on-dark: #F1EDE6;
  --c-on-dark-muted: #AEB4B8; /* 7:1 on midnight */
  --focus-ring: 0 0 0 3px rgba(80, 168, 232, 0.5);

  --f-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --track: 0.55;              /* Figtree needs about half the Group's negative tracking */
  --accent-size: 1.02em;      /* Newsreader italic is wider than Instrument Serif */
  --fs-display: clamp(2.5rem, 1.45rem + 3.6vw, 5rem);               /* 40 to 80px */

  --r-xl: 30px;
  --shadow-soft: 0 1px 2px rgba(48, 38, 26, 0.05), 0 12px 32px -16px rgba(48, 38, 26, 0.18);
  --shadow-lift: 0 2px 4px rgba(48, 38, 26, 0.06), 0 24px 48px -24px rgba(48, 38, 26, 0.3);
}

/* 2. Shared components, adjusted to this site
   ----------------------------------------------------------------------- */
body { font-feature-settings: "ss01" off; }
.accent { font-weight: 400; letter-spacing: -0.005em; font-variation-settings: "opsz" 72; }
.section-title,
.page-hero__title,
.cta-band__title,
.flagship__title { font-weight: 600; }
.section-title { line-height: 1.06; }
.page-hero__title { line-height: 1.04; }
.page-hero__title .accent,
.section-title .accent,
.cta-band__title .accent { line-height: 1.12; padding-bottom: 0.04em; }

.eyebrow { color: var(--c-ink-2); letter-spacing: 0.01em; }
.eyebrow::before { width: 9px; height: 9px; }

.btn { font-weight: 600; letter-spacing: 0; }
.btn--primary .btn__icon { background: var(--c-accent); color: var(--c-ink); }
.btn--accent { background: var(--c-accent); color: var(--c-ink); }
.btn--accent .btn__icon { background: var(--c-ink); color: #fff; }
.btn--outline { border-color: rgba(30, 35, 39, 0.22); }
.btn--outline .btn__icon { background: var(--c-ink); color: #fff; }
.btn--sand { background: var(--c-surface-2); color: var(--c-ink); border-color: transparent; }
.btn--sand .btn__icon { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-2); }
.btn--sand:hover { background: var(--c-sand); }

.text-link { text-decoration-color: rgba(30, 35, 39, 0.28); }

.site-header__bar {
  background: rgba(255, 253, 249, 0.9);
  border-color: rgba(48, 38, 26, 0.08);
  box-shadow: 0 1px 2px rgba(48, 38, 26, 0.04), 0 10px 30px -14px rgba(48, 38, 26, 0.2);
}
.site-header.is-compact .site-header__bar { background: rgba(255, 253, 249, 0.96); }
@media (prefers-reduced-transparency: reduce) {
  .site-header__bar { background: var(--c-surface); }
}

/* Brand: the official logo (assets/img/brand, T-022) */
.brand { gap: 0; }
.brand__logo { display: block; width: auto; height: 21px; }
.brand--light .brand__logo { height: 24px; }
@media (min-width: 380px) { .brand__logo { height: 23px; } }
@media (min-width: 1200px) { .brand__logo { height: 26px; } }
.menu__top .brand__logo { height: 24px; }

.primary-nav__link { letter-spacing: 0.12em; font-weight: 600; }
.primary-nav__link::after { background: var(--c-accent); height: 3px; border-radius: 3px; }
.primary-nav__item + .primary-nav__item::before { color: var(--c-line-2); }
.header-phone:hover { color: var(--c-accent-ink); }

.menu { background: var(--c-bg); }
.menu__lead a { letter-spacing: -0.02em; }

.chip .icon { color: var(--c-accent-ink); }
.tag { background: var(--c-surface-2); color: var(--c-ink-2); }

.status--complete { background: var(--c-surface-2); }

.site-footer { background: var(--c-dark); }
.site-footer__social .icon { color: var(--c-accent); }
.site-footer__col a:hover,
.site-footer__social:hover { color: var(--c-accent); }

.mobile-bar { background: rgba(243, 239, 232, 0.94); }

.toast { background: var(--c-ink); }

/* Seals are used on the About page for the group ISO certificates */
.badge__seal { background: var(--c-surface); box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 5px var(--c-line-2); }

/* The facts list on cards: four facts in two columns reads calmer than three. Since T-057 a card has three at most
   (no "Products"): the last odd one takes the full row, so no row ends in an empty cell. */
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts:not(.facts--3) > .facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 480px) { .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 3. Sound motif: decay bars. A row of thin bars whose heights fall away like a
   sound dying in a room. Used with restraint: the hero panel, the advice demo
   and the footer. Heights come from --h on each bar (0 to 1).
   ----------------------------------------------------------------------- */
.decay {
  --bar: 3px;
  --gap: 4px;
  --tall: 44px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: var(--tall);
}
.decay__bar {
  flex: none;
  width: var(--bar);
  height: calc(var(--tall) * var(--h, 0.5));
  min-height: 3px;
  border-radius: 3px;
  background: var(--c-accent);
  transform-origin: 50% 50%;
}
.decay--muted .decay__bar { background: var(--c-line-2); }
.decay--small { --bar: 2px; --gap: 3px; --tall: 22px; }

/* 4. Home: the hero (T-075, the user, 20 Oct: "50/50 hero section for image and text block on the left, and show
   different projectds and materials we offer"; they chose option C, the material index, of
   docs/design/acoustics-home-hero-split-options.jpg). From 1024px two equal columns: the text on the left, vertically
   centred, and on the right a rounded photo panel with our project photos changing by themselves, the materials listed
   under it as buttons (each shows its photo; the current one is in ink with its progress line) and the caption, which
   names the material and the project with their links (src/partials/hero-reel.html; assets/js/acoustics-reel.js, the
   Express Facades reel of T-063 in this site's look). Below 1024px stacked, the photo first (CSS order: the text stays
   first in the page); on phones the list is one row that scrolls sideways. The hero no longer runs under the floating
   header (the Quiet room hero of T-032 did). The sound motif stays as a thin decay line under the title.
   ----------------------------------------------------------------------- */
.home-hero {
  --hdr: 72px;                      /* the sticky header's height in the flow (10 + 62px) */
  position: relative;
  padding-block: 12px clamp(24px, 3vw, 40px);
}
.home-hero__inner { display: grid; gap: 22px; }
.home-hero__text { order: 2; min-width: 0; }
.home-hero .hreel { order: 1; min-width: 0; }
.home-hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: calc(-0.045em * var(--track));
  text-wrap: balance;
}
/* Top-aligned, so the line does not move when the web fonts replace the fallbacks */
.home-hero__title .accent { display: inline-block; vertical-align: top; font-size: 1.04em; line-height: 1.1; padding-bottom: 0.06em; }
.home-hero__line { --bar: 2px; --gap: 4px; --tall: 22px; max-width: 100%; margin-top: 18px; overflow: hidden; }
.home-hero__lead {
  max-width: 31em;
  margin-top: 16px;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.home-hero__actions .btn { flex: 1 1 100%; }

@media (min-width: 640px) {
  .home-hero__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) {
  .home-hero { --hdr: 80px; }      /* 12 + 68px */
}
@media (min-width: 1024px) {
  .home-hero { padding-block: clamp(8px, 1vw, 16px) clamp(28px, 3vw, 44px); }
  .home-hero__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 4.4vw, 72px);
    min-height: clamp(520px, calc(100svh - 236px), 700px);
  }
  .home-hero__text,
  .home-hero .hreel { order: 0; }
  .home-hero__text { align-self: center; padding-block: 12px; }
  /* Half the width: the title keeps its two lines ("as good as they look" never breaks) */
  .home-hero__title { font-size: clamp(2.75rem, 0.35rem + 4.6vw, 4.75rem); }
}
/* Without photos (none chosen in WordPress) the text keeps the left half */
.home-hero__inner:not(:has(.hreel)) { min-height: 0; }

.js .home-hero__title { animation: rise 1s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}

/* The photos. The list of materials and the pause button show with html.js; acoustics-reel.js adds .js-reel (motion
   on), .is-auto (autoplay wanted) and .is-running (not held by the pointer or keyboard focus on the controls, off
   screen, a hidden tab or the page still loading). Without JS the first photo and its caption show, with no controls. */
.hreel {
  --hreel-fade: 1.2s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "frame frame" "steps steps" "cap toggle";
  align-items: center;
  gap: 8px 12px;
}
.hreel__frame {
  grid-area: frame;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
  touch-action: pan-y;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hreel__frame { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .hreel { grid-template-rows: minmax(0, 1fr) auto auto; }
  .hreel__frame { aspect-ratio: auto; min-height: 0; }
}
.hreel__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--hreel-fade) cubic-bezier(0.45, 0, 0.55, 1), visibility 0s linear var(--hreel-fade);
}
.hreel__slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition: opacity var(--hreel-fade) cubic-bezier(0.45, 0, 0.55, 1), visibility 0s;
}
.hreel__slide.is-leaving { z-index: 1; visibility: visible; opacity: 1; transition: none; }
.hreel__slide picture { display: contents; }
.hreel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-m, 50% 50%);
  transform-origin: 50% 50%;
}
@media (min-width: 1024px) {
  .hreel__img { object-position: var(--focus, 50% 50%); }
}
/* Motion: a very slow zoom on the current photo (and the one fading out); it stops while the reel is held */
@keyframes hreel-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes hreel-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .js-reel .hreel__slide:is(.is-active, .is-leaving) .hreel__img {
    animation: hreel-zoom calc(var(--hreel-dur) + 2 * var(--hreel-fade)) cubic-bezier(0.33, 0, 0.4, 1) both;
  }
  .hreel:not(.is-running) .hreel__img { animation-play-state: paused; }
}

/* The materials: one button per photo, its name under a hairline; the current one is in ink and its line fills in the
   accent blue while the photo shows. Three to a row from 640px; on phones one row that scrolls sideways (the reel
   keeps the current one in view). Shown with html.js. */
.hreel__steps { display: none; }
.js .hreel__steps {
  grid-area: steps;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0 18px;
  margin: 6px calc(-1 * var(--gutter)) 0;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hreel__steps::-webkit-scrollbar { display: none; }
.hreel__steps > li { display: flex; }
.hreel__step {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 12px 0 6px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hreel__step::before,
.hreel__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 2px;
}
/* The hairline only draws the row (each button is named in text); the current one is told by its ink and its fill */
.hreel__step::before { background: rgba(30, 35, 39, 0.16); transition: background-color 0.2s ease; }
.hreel__step:hover::before { background: rgba(30, 35, 39, 0.4); }
.hreel__fill { background: var(--c-accent-ink); transform: scaleX(0); transform-origin: 0 50%; }
.hreel__step[data-fill="full"] .hreel__fill { transform: scaleX(1); }
.hreel__step[data-fill="timed"] .hreel__fill { animation: hreel-fill var(--hreel-dur) linear both; }
.hreel:not(.is-running) .hreel__fill { animation-play-state: paused; }
.hreel__step:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; border-radius: 4px; }
.hreel__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--c-muted);
  transition: color 0.2s ease;
}
.hreel__step:hover .hreel__label,
.hreel__step[aria-current="true"] .hreel__label { color: var(--c-ink); }
@media (min-width: 640px) {
  .js .hreel__steps {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 2px 14px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .hreel__label { font-size: 0.9375rem; white-space: normal; }
}

/* The caption: the material, then the project, each linked to its page where there is one. Every caption shares one
   grid cell, so the row keeps the height of the longest and nothing moves; the old one is gone (0.2 s) before the new
   one fades in. */
.hreel__captions { grid-area: cap; display: grid; align-self: center; min-width: 0; }
.hreel__cap {
  grid-area: 1 / 1;
  align-self: center;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-text-2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.hreel__cap.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease 0.2s, visibility 0s linear 0.2s;
}
.hreel__material { font-weight: 500; color: var(--c-text-2); }
.hreel__sep { color: var(--c-muted); }
.hreel__project { color: var(--c-text-2); }
a.hreel__material,
a.hreel__project {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 35, 39, 0.28);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
a.hreel__material:hover,
a.hreel__project:hover { color: var(--c-ink); text-decoration-color: currentColor; }

/* Pause and play (WCAG 2.2.2): a round warm-white button at the end of the caption row */
.hreel__toggle {
  grid-area: toggle;
  display: none;
  place-items: center;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(30, 35, 39, 0.12);
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 8px 24px -14px rgba(30, 35, 39, 0.45);
  color: var(--c-ink);
  transition: transform 0.3s var(--ease), background-color 0.2s ease;
}
.js .hreel__toggle { display: grid; }
.hreel__toggle .icon { width: 15px; height: 15px; }
.hreel__toggle .hreel__icon-play { margin-left: 2px; }
.hreel__toggle[data-state="playing"] .hreel__icon-play,
.hreel__toggle:not([data-state="playing"]) .hreel__icon-pause { display: none; }
.hreel__toggle:hover { transform: scale(1.05); }
.hreel__toggle:active { transform: scale(0.96); }
.hreel__toggle:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.hreel--single .hreel__steps,
.hreel--single .hreel__toggle { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hreel { --hreel-fade: 0.2s; }
  .hreel__cap, .hreel__cap.is-active { transition-duration: 0.15s, 0s; transition-delay: 0s; }
  .hreel__toggle, .hreel__step::before, .hreel__label { transition: none; }
}

/* Quick facts under the hero: what a buyer checks first */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.quick-fact {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px 12px 18px 0;
}
.quick-fact:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--c-line); }
.quick-fact:nth-child(n + 3) { border-top: 1px solid var(--c-line); }
.quick-fact__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-accent-ink);
}
.quick-fact__icon .icon { width: 18px; height: 18px; }
.quick-fact__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.quick-fact__text { margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); }
@media (max-width: 519.98px) {
  .quick-facts { grid-template-columns: minmax(0, 1fr); }
  .quick-fact:nth-child(even) { padding-left: 0; border-left: 0; }
  .quick-fact:nth-child(n + 2) { border-top: 1px solid var(--c-line); }
}
@media (min-width: 1024px) {
  .quick-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-fact { padding: 22px 20px; border-top: 0 !important; }
  .quick-fact + .quick-fact { border-left: 1px solid var(--c-line); }
  .quick-fact:first-child { padding-left: 0; }
  .quick-fact:nth-child(even) { padding-left: 20px; }
}

/* 5. Product range (home, products hub, related products)
   ----------------------------------------------------------------------- */
.range { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.prod-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.prod-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: 8px 8px 0;
  border-radius: 18px;
  background: var(--c-surface-2);
}
.prod-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prod-card:hover .prod-card__media > img,
.prod-card:hover .mosaic img { transform: scale(1.04); }
.prod-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(16px, 1.8vw, 24px); }
.prod-card__family { font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); }
.prod-card__title {
  font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: calc(-0.025em * var(--track));
}
.prod-card__title a { color: var(--c-ink); text-decoration: none; }
.prod-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod-card__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.prod-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}
.prod-card__specs dt { font-size: 0.75rem; font-weight: 500; color: var(--c-muted); }
.prod-card__specs dd { margin-top: 1px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.prod-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 8px;
}
.prod-card__doc { position: relative; z-index: 2; font-size: var(--fs-xs); min-height: 44px; }
.prod-card__doc .icon { width: 18px; height: 18px; }
.maker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink-2);
}
.maker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.maker--third::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-ink-2); }
.prod-card__more {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  color: var(--c-ink);
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease);
}
.prod-card__more .icon { width: 17px; height: 17px; }
.prod-card:hover .prod-card__more { transform: translate(2px, -2px); background: var(--c-accent); }

@media (min-width: 640px) {
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range > .prod-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .range { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .range > .prod-card { grid-column: span 2; }
  .range > .prod-card:nth-child(-n + 2) { grid-column: span 3; }
  .range > .prod-card:last-child:nth-child(odd) { grid-column: span 2; }
  .range > .prod-card:nth-child(-n + 2) .prod-card__media { aspect-ratio: 16 / 9; }
  .range--even > .prod-card,
  .range--even > .prod-card:nth-child(-n + 2) { grid-column: span 2; }
}

/* Material mosaic: a grid of real swatches standing in for a product photo */
.mosaic {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: 100%;
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaic--round {
  --cols: 5;
  align-items: center;
  gap: 8%;
  padding: 10% 7%;
  background: var(--c-surface-2);
}
.mosaic--round img { aspect-ratio: 1; height: auto; border-radius: 50%; box-shadow: 0 6px 18px -8px rgba(48, 38, 26, 0.45); }
.mosaic--chips { --cols: 4; gap: 0; }

/* Placeholder when a product has no photography yet (never stock): a perforation
   or strand texture in CSS, clearly labelled "Photography to follow". */
.material-ph {
  position: relative;
  display: grid;
  place-items: end start;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 16px;
  background-color: #C9A77F;
  color: var(--c-ink);
}
.material-ph--perforated {
  background-image:
    radial-gradient(circle, rgba(42, 30, 18, 0.55) 1.6px, transparent 2.2px),
    linear-gradient(115deg, #D2B48D, #BF9A6D 60%, #C8A57B);
  background-size: 14px 14px, 100% 100%;
}
.material-ph--wool {
  background-color: #D9CDB2;
  background-image:
    repeating-linear-gradient(35deg, rgba(120, 98, 62, 0.22) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(80deg, rgba(90, 72, 44, 0.18) 0 1px, transparent 1px 11px);
}
.material-ph__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 253, 249, 0.92);
  font-size: 0.8125rem;
  font-weight: 600;
}
.material-ph__label .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--c-surface-2); }

/* 6. By space: the four spaces as a bento of real photographs
   ----------------------------------------------------------------------- */
.spaces { display: grid; gap: 12px; }
.space-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: #fff;
}
.space-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.space-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 24, 28, 0) 30%, rgba(20, 24, 28, 0.5) 62%, rgba(20, 24, 28, 0.88) 100%);
}
.space-tile:hover .space-tile__img { transform: scale(1.04); }
.space-tile__body { width: 100%; padding: clamp(18px, 2vw, 28px); }
.space-tile__count { font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.86); }
.space-tile__title {
  margin-top: 4px;
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.375rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: calc(-0.035em * var(--track));
}
.space-tile__title a { color: #fff; text-decoration: none; }
.space-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.space-tile__text { max-width: 30em; margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.space-tile__arrow {
  position: absolute;
  right: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
  transition: transform 0.5s var(--ease);
}
.space-tile__arrow .icon { width: 18px; height: 18px; }
.space-tile:hover .space-tile__arrow { transform: translate(2px, -2px) scale(1.05); }
.space-tile--ph { background: var(--c-dark-2); }
.space-tile__ph {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #8F7354;
  background-image:
    repeating-linear-gradient(90deg, rgba(30, 20, 10, 0.32) 0 6px, transparent 6px 22px),
    linear-gradient(160deg, #B08A60, #7D6045);
}

@media (min-width: 640px) {
  .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .space-tile { min-height: 340px; }
}
@media (min-width: 1024px) {
  .spaces {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
    grid-template-rows: repeat(2, minmax(300px, auto));
  }
  .space-tile:nth-child(1) { grid-row: span 2; min-height: 640px; }
  .space-tile:nth-child(2) { grid-column: span 2; }
  .space-tile { min-height: 0; }
}

/* 7. Finishes: real swatches from the data sheets
   ----------------------------------------------------------------------- */
.finishes {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(22px, 3.4vw, 52px);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.finishes__intro .section-title { max-width: 14ch; }
.finishes__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.finishes__groups { display: grid; gap: 22px; align-content: start; }
.finish-group__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}
.finish-group__title a { font-size: 0.8125rem; color: var(--c-ink-2); text-underline-offset: 3px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  position: relative;
  display: grid;
  gap: 6px;
  width: 76px;
  margin: 0;
  text-decoration: none;
  color: var(--c-ink);
}
.swatch__chip {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--sw, var(--c-sand));
  box-shadow: inset 0 0 0 1px rgba(48, 38, 26, 0.12), 0 4px 12px -8px rgba(48, 38, 26, 0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.swatch__chip img { width: 100%; height: 100%; object-fit: cover; }
.swatch--round .swatch__chip { aspect-ratio: 1; border-radius: 50%; }
.swatch__name { font-size: 0.75rem; font-weight: 600; line-height: 1.25; color: var(--c-ink-2); }
.swatch__code { font-variant-numeric: tabular-nums; }
a.swatch:hover .swatch__chip,
a.swatch:focus-visible .swatch__chip { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(48, 38, 26, 0.18), 0 12px 22px -10px rgba(48, 38, 26, 0.55); }
a.swatch:focus-visible { outline: none; }
a.swatch:focus-visible .swatch__chip { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }
.swatches--lg .swatch { width: 104px; }
.swatches--fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 10px; }
.swatches--fill .swatch { width: auto; }
.finish-note { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }

@media (min-width: 1024px) {
  .finishes { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}

/* 8. Advice teaser: the decay demo and the four steps
   ----------------------------------------------------------------------- */
.advice-home { display: grid; gap: clamp(28px, 4vw, 64px); }
.decay-demo {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.decay-demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.decay-demo__title { font-size: 1.0625rem; font-weight: 600; }
.decay-demo__toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
}
.decay-demo__toggle button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-on-dark);
}
.decay-demo__toggle button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-ink); }
.decay-demo__toggle button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.decay-demo__graph {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: clamp(120px, 14vw, 170px);
  padding: 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.decay-demo__graph .decay__bar {
  width: auto;
  flex: 1 1 0;
  max-width: 6px;
  height: calc(100% * var(--h));
  background: var(--c-accent);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
  transition-delay: calc(var(--i) * 12ms);
}
.decay-demo[data-state="after"] .decay__bar { transform: scaleY(var(--t, 0.4)); opacity: var(--o, 1); }   /* main.js 12c sets "after" (was "treated", so the bars never moved; fixed T-032) */
.decay-demo__axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--c-on-dark-muted); }
.decay-demo__caption { font-size: var(--fs-small); line-height: 1.55; color: var(--c-on-dark-muted); }
.decay-demo__caption strong { color: var(--c-on-dark); font-weight: 600; }
.decay-demo__note { font-size: 0.75rem; color: var(--c-on-dark-muted); }

.steps-a { display: grid; gap: 0; margin-top: 26px; counter-reset: stepa; border-top: 1px solid var(--c-line); }
.steps-a li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  counter-increment: stepa;
}
.steps-a li::before {
  content: counter(stepa);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  font-size: 0.875rem;
  font-weight: 700;
}
.steps-a strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.steps-a span { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }

.lead-time {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
}
.lead-time__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-accent);
}
.lead-time__icon .icon { width: 22px; height: 22px; }
.lead-time__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.lead-time__text { margin-top: 3px; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }

@media (min-width: 1024px) {
  .advice-home { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
}

/* 9. Projects: who delivered the work, and which product
   ----------------------------------------------------------------------- */
.project-card__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.project-card__by strong { font-weight: 600; color: var(--c-ink-2); }
.project-card__by .tbc { font-size: 0.75rem; }
.project-card__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.project-card__media .media-placeholder { min-height: 100%; }
.home-projects { display: grid; gap: clamp(12px, 1.4vw, 20px); }
@media (min-width: 768px) {
  .home-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-projects { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .home-projects > .project-card { grid-column: span 4; }
  .home-projects > .project-card:first-child { grid-column: span 8; grid-row: span 2; }
  .home-projects > .project-card:first-child .project-card__media { height: auto; flex: 1; min-height: 420px; }
  .home-projects > .project-card:not(:first-child) .project-card__media { height: 200px; }
  .home-projects > .project-card:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .home-projects > .project-card:nth-child(4) .project-card__media { height: 100%; min-height: 240px; }
}

/* 10. Documents: data sheets
   ----------------------------------------------------------------------- */
.doc__kind { font-weight: 600; color: var(--c-ink-2); }
.doc--soon { border-style: dashed; background: transparent; }
.doc--soon .doc__icon { background: var(--c-surface-2); color: var(--c-muted); }
.doc-grid { display: grid; gap: 10px; }
@media (min-width: 900px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.doc__note { margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; color: var(--c-text-2); }

/* 11. Group band
   ----------------------------------------------------------------------- */
.group-a { display: grid; gap: 12px; }
.group-a__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr; /* T-086: cards in one row share a height; the spare space sits above the link */
  gap: 6px 16px;
  align-items: start;
  padding: 22px 22px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.group-a__card:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.group-a__name { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
.group-a__text { grid-column: 1; font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.group-a__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-surface-2);
  transition: background-color 0.3s var(--ease);
}
.group-a__icon .icon { width: 17px; height: 17px; }
.group-a__card:hover .group-a__icon { background: var(--c-accent); }
.group-a__soon { grid-column: 1; justify-self: start; margin-top: 6px; padding: 3px 10px; border: 1px solid var(--c-line-2); border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; color: var(--c-muted); }
@media (min-width: 900px) {
  .group-a { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 12. Enquiry form: route cards ("Get acoustic advice", "Request a quote"; "Ask for documents" when asked for)
   ----------------------------------------------------------------------- */
/* T-078: two routes on Contact (no visit route on this site); the documents route makes it three. */
.route__options--2,
.route__options--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .route__options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route__options--2 .route__text,
  .route__options--3 .route__text { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; }
}
.route__hint { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--c-muted); }
.route__option input:checked + .route__text .route__hint { color: var(--c-ink-2); }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dims .field__label { font-weight: 500; font-size: 0.8125rem; color: var(--c-muted); margin-bottom: 4px; }
.tender-form { background: var(--c-surface); }
.route__text { background: var(--c-bg); }
.dropzone__icon { background: var(--c-ink); color: var(--c-accent); }

/* 13. Footer extras
   ----------------------------------------------------------------------- */
.site-footer__sound { margin-top: 22px; opacity: 0.9; }
.site-footer__group-note { margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--c-on-dark-muted); }

/* 14. Motion additions (all off under reduced motion via main.css)
   ----------------------------------------------------------------------- */
.js .range > [data-reveal]:nth-child(2),
.js .spaces > [data-reveal]:nth-child(2),
.js .home-projects > [data-reveal]:nth-child(2) { transition-delay: 0.06s; }
.js .range > [data-reveal]:nth-child(3),
.js .spaces > [data-reveal]:nth-child(3),
.js .home-projects > [data-reveal]:nth-child(3) { transition-delay: 0.12s; }
.js .spaces > [data-reveal]:nth-child(4),
.js .range > [data-reveal]:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .js .home-hero__title { animation: none; }
  .decay-demo__graph .decay__bar { transition: none; }
}

/* Very narrow phones */
@media (max-width: 379.98px) {
  .finishes { padding: 18px; }
  .swatch { width: 64px; }
  .prod-card__specs { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   15. Homepage and shared additions (resume worker, 13 Oct)
   ========================================================================== */
.section--quick { padding-block: clamp(4px, 1vw, 12px) 0; }
.quick-fact__title,
.quick-fact__text { display: block; }
.quick-fact__title { color: var(--c-ink); }

.section-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.section-head__actions .section-head__action { margin: 0; }

.site-footer__heading--gap { margin-top: 28px; }

/* Footer accreditation logos (T-061), above the bottom bar: each mark as the scheme issues it, on a small white tile
   (a mark drawn for a dark ground on an outlined dark tile), one tile height, even gaps; on phones they wrap and
   centre. The ISO mark keeps its certificate numbers under it, one per line (Forefront: 50px high at least online).
   On this site every logo is TBC (Q113: no scheme names Express Acoustics Ltd yet): staging shows them with the TBC
   marker, WordPress leaves them (and the heading) out of the live site. */
.site-footer__accreditations { margin-top: 48px; }
.accreditations {
  --acc-h: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.accreditation { display: grid; justify-items: center; gap: 8px; }
.accreditation__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: #FFFFFF;
}
.accreditation--dark .accreditation__tile { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.accreditation__tile img {
  display: block;
  width: auto;
  height: calc(var(--acc-h) * var(--s, 1));
  max-width: 100%;
  object-fit: contain;
}
.accreditation__caption {
  display: grid;
  width: 0;
  min-width: 100%;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark-muted);
}
.site-footer .accreditation .tbc {
  position: absolute;
  top: -9px;
  right: -9px;
  padding: 1px 7px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  background: var(--c-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-on-dark);
}
.site-footer .accreditation .tbc abbr { text-decoration: none; cursor: help; }
@media (max-width: 639.98px) {
  .site-footer__accreditations { text-align: center; }
  .accreditations { justify-content: center; }
}

/* Product visuals when there is no photo: real swatches on a calm ground, never drawn larger than
   half their source pixels, so they stay sharp on 2x screens (Eco-PET chips are 240 x 130 px,
   veneer chips 240 x 240 px). */
.mosaic--round { justify-items: center; align-content: center; }
.mosaic--round img { width: min(100%, 64px); }
.mosaic--veneers { --cols: 5; gap: 5%; padding: 8% 8%; }
.mosaic--veneers img { width: min(100%, 112px); }
.prod-card__media > .mosaic,
.prod-card__media > .material-ph { position: absolute; inset: 0; }

/* Decay demo: without JavaScript the toggle is hidden and the "before" state shows */
.no-js .decay-demo__toggle { display: none; }
.decay-demo { margin: 0; }
.decay-demo__caption { margin: 0; }
.advice-home__link { margin-top: 22px; }

/* The featured project on the homepage: the reported figures, with their caveat */
.project-card--feature .project-card__body { gap: 10px; }
.project-card--feature .project-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.rt-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.rt-figure__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-2); }
.rt-figure__values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: calc(-0.03em * var(--track));
  font-variant-numeric: tabular-nums;
}
.rt-figure__values .icon { width: 0.7em; height: 0.7em; color: var(--c-accent-ink); }
.rt-figure__before { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(30, 35, 39, 0.35); }
.rt-figure__note { font-size: 0.8125rem; line-height: 1.45; color: var(--c-text-2); }
.rt-figure__note .tbc { vertical-align: 1px; }

/* Spaces bento on wide screens: Schools tall on the left, Sports and leisure wide below */
@media (min-width: 1024px) {
  .spaces {
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 3.7fr) minmax(0, 3.7fr);
    grid-template-rows: repeat(2, minmax(300px, auto));
  }
  .space-tile:nth-child(1) { grid-row: span 2; grid-column: auto; min-height: 640px; }
  .space-tile:nth-child(2) { grid-column: auto; }
  .space-tile:nth-child(4) { grid-column: 2 / span 2; }
}

/* Finishes panel: the 34 Eco-PET colours as small chips */
.finish-group + .finish-group { margin-top: 4px; }
.swatches--dense { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.swatch--sm { width: auto; }
.swatch--sm .swatch__chip { aspect-ratio: 4 / 3; border-radius: 7px; }

/* Why specifiers use us: a material close-up, then the five points in a row */
.why-a { display: grid; gap: clamp(22px, 3vw, 40px); }
.why-a__media {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.why-a__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.why-a__title { max-width: 16ch; }
.why-a__list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.why-a__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}
.why-a__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-accent-ink);
}
.why-a__icon .icon { width: 19px; height: 19px; }
.why-a__list strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.why-a__list span:last-child { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 768px) {
  .why-a__media { aspect-ratio: 21 / 8; }
}
@media (min-width: 1024px) {
  .why-a { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px); }
  .why-a__media { grid-column: 1 / -1; aspect-ratio: 21 / 7; }
  .why-a__title { align-self: start; position: sticky; top: calc(var(--sticky-top, 96px) + 16px); }
  .why-a__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .why-a__list li { border-top: 1px solid var(--c-line); border-bottom: 0; }
  .why-a__list li:last-child { grid-column: 1 / -1; }
}

/* CTA band: soft blue, with the sound motif above the heading */
.cta-band { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.cta-band__sound { margin-bottom: 18px; }

/* Group cards: the link label sits at the foot of the card */
.group-a__cta {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(30, 35, 39, 0.28);
  text-underline-offset: 4px;
}
.group-a__card:hover .group-a__cta { text-decoration-color: var(--c-accent-ink); }

/* Documents: "being checked" marker */
.doc__check {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-ink-2);
}

/* ==========================================================================
   16. Product pages
   ========================================================================== */
.page-hero--product .page-hero__body { margin-top: clamp(14px, 1.6vw, 22px); }
.page-hero--product .page-hero__title { margin-top: 14px; font-size: clamp(2.375rem, 1.4rem + 3.4vw, 4.5rem); }
.page-hero--product .page-hero__lead { margin-top: 18px; }
.page-hero--product .page-hero__actions { margin-top: 26px; }
.product-hero__maker { flex-wrap: wrap; }
.product-hero__name { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--c-line-2); font-weight: 500; color: var(--c-muted); }
.product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.product-facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.product-facts dd { margin-top: 2px; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.product-hero__visual { position: relative; width: 100%; height: 100%; min-height: 320px; }
.product-hero__visual > .mosaic,
.product-hero__visual > .material-ph { position: absolute; inset: 0; }
@media (min-width: 1024px) {
  .page-hero--product .page-hero__frame { max-height: 600px; min-height: 460px; }
  .product-facts { margin-top: auto; }
  .page-hero--product .page-hero__actions + .product-facts { margin-top: 36px; }
}

/* The product story: text and image splits, alternating sides */
.product-story { display: grid; gap: clamp(48px, 6vw, 96px); }
.product-story .split--text { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.product-story .prose { margin-top: 18px; }
.product-story__link { margin-top: 20px; }
.product-story .split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
  .product-story > .split:nth-child(even):not(.split--text) .split__media { order: -1; }
}

/* Where it works */
.uses { display: grid; gap: 12px; margin-top: 8px; }
.use {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 16px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.use__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.use__icon .icon { width: 20px; height: 20px; }
.use__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.use__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.uses__spaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: var(--fs-small); font-weight: 600; }
.uses__spaces .chip { min-height: 44px; text-decoration: none; color: var(--c-ink); background: var(--c-surface); }
.uses__spaces .chip:hover { border-color: var(--c-ink); }
@media (min-width: 640px) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .uses { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .use { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  .use__icon { grid-row: auto; margin-bottom: 14px; }
}

/* Finishes on a product page */
.finishes--product .finishes__groups { gap: 30px; }
.finish-group__count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-ink-2);
}
.swatches--fill .swatch__chip img { aspect-ratio: inherit; }
.swatches--chips .swatch__chip { aspect-ratio: 3 / 2; }
.swatch__code { font-size: 0.75rem; letter-spacing: 0.02em; }

/* Specification: a data-sheet card, grouped, with sparse dividers */
.spec-layout { display: grid; gap: clamp(24px, 3vw, 48px); }
.spec-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2); }
.spec-check {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--c-accent-ink);
  white-space: nowrap;
  vertical-align: 1px;
}
.spec-fixing { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.spec-fixing__title { margin-bottom: 8px; font-size: 1.0625rem; font-weight: 600; }
.spec-fixing p { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.spec-fixing .tbc { vertical-align: 1px; }
.spec-sheet {
  display: grid;
  gap: 0;
  padding: clamp(8px, 1.4vw, 16px) clamp(20px, 2.6vw, 36px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.spec-sheet__group { padding: clamp(18px, 2vw, 26px) 0; }
.spec-sheet__group + .spec-sheet__group { border-top: 1px solid var(--c-line); }
.spec-sheet__title { margin-bottom: 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.spec-sheet__rows { display: grid; gap: 12px; }
.spec-sheet__row { display: grid; gap: 2px; }
.spec-sheet__row dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.spec-sheet__row dd { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--c-ink); }
.spec-sheet__note { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--c-text-2); }
.spec-sheet__note .tbc { vertical-align: 0; }
.spec-sheet__foot { padding: 0 0 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
@media (min-width: 640px) {
  .spec-sheet__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
@media (min-width: 1024px) {
  .spec-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .spec-layout .section-head { position: sticky; top: calc(var(--sticky-top) + 72px); margin-bottom: 0; }
}

/* More from the range */
.other-products__title { margin-bottom: 16px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: calc(-0.02em * var(--track)); }
.other-products__list { display: grid; gap: 10px; }
.other-product {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: center;
  min-height: 84px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.other-product:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.other-product__media {
  position: relative;
  grid-row: span 2;
  overflow: hidden;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--c-surface-2);
}
.other-product__media > img { width: 100%; height: 100%; object-fit: cover; }
.other-product__media > .mosaic,
.other-product__media > .material-ph { position: absolute; inset: 0; min-height: 0; padding: 0; }
.other-product__media .mosaic--round { --cols: 3; gap: 4px; padding: 6px; }
.other-product__media .mosaic--round img:nth-child(n + 7) { display: none; }
.other-product__media .material-ph__label { display: none; }
.other-product__name { align-self: end; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.other-product__maker { align-self: start; font-size: 0.8125rem; color: var(--c-muted); }
.other-product .icon { grid-row: span 2; width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.other-product:hover .icon { transform: translateX(3px); }
@media (min-width: 640px) {
  .other-products__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .other-products__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.other-product { grid-template-areas: "media name icon" "media maker icon"; }
.other-product__media { grid-area: media; }
.other-product__name { grid-area: name; }
.other-product__maker { grid-area: maker; }
.other-product > .icon { grid-area: icon; }

/* ==========================================================================
   17. Inner-page components (resume worker, 13 Oct)
   ========================================================================== */
/* Header: on narrow phones the phone link is an icon (the wide logo needs the room) */
@media (max-width: 459.98px) {
  .header-phone { width: 44px; padding: 0; border-radius: 50%; }
  .header-phone .icon { display: block; }
  .header-phone__number { display: none; }
}
.finish-group__title a { padding-block: 12px; margin-block: -12px; }

/* Two panels side by side (lead times and visits, finishes and supply) */
.duo { display: grid; gap: 14px; }
.duo__panel {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
  padding: clamp(22px, 3vw, 44px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.duo__panel--tint { background: var(--c-surface-2); border-color: var(--c-surface-2); }
.duo__panel--accent { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.duo__panel .section-intro { margin-top: 0; }
.duo__note { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-2); }
.duo__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.duo__swatches { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 6px 0 8px; }
.duo__swatch { overflow: hidden; aspect-ratio: 1; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(48, 38, 26, 0.12); }
.duo__swatch img { width: 100%; height: 100%; object-fit: cover; }
.duo__swatch:nth-child(n + 25) { display: none; }
.lead-time__icon--light { background: var(--c-surface-2); color: var(--c-ink); }
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Products hub: surface filter and the at-a-glance table */
.surface-filter { grid-template-columns: minmax(0, 1fr); align-items: center; }
.surface-filter .filter-bar__count { color: var(--c-muted); }
@media (min-width: 900px) {
  .surface-filter { grid-template-columns: minmax(0, 1fr) auto; }
}
.range[data-surface-results] > .prod-card[hidden] { display: none; }
@media (min-width: 1024px) {
  .range.is-filtered > .prod-card { grid-column: span 2; }
  .range.is-filtered > .prod-card .prod-card__media { aspect-ratio: 16 / 10; }
}
.compare {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.compare:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }
.compare__table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--fs-small); }
.compare__table th,
.compare__table td { padding: 16px 20px; text-align: left; vertical-align: middle; }
.compare__table thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); background: var(--c-surface-2); }
.compare__table tbody tr + tr th,
.compare__table tbody tr + tr td { border-top: 1px solid var(--c-line); }
.compare__table tbody th { font-weight: 600; }
.compare__table tbody th a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-underline-offset: 4px; text-decoration-color: rgba(30, 35, 39, 0.25); }
.compare__table td:last-child { color: var(--c-text-2); }
.compare__yes,
.compare__no { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.compare__yes::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
.compare__no { color: var(--c-muted); font-weight: 500; }

/* Factors (every room, planning): a quiet row of five */
.factors { display: grid; gap: 10px; }
.factor {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
}
.factor .use__icon { grid-row: span 2; }
.factors__link { margin-top: 18px; }
@media (min-width: 900px) {
  .factors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .factor { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .factor .use__icon { grid-row: auto; margin-bottom: 12px; }
}

/* A note with one action (other spaces, policies, visit) */
.note-panel {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 44px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.note-panel .section-intro { margin-top: 12px; max-width: 46em; }
.note-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) {
  .note-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

/* Solution pages */
.solution-hero__tags { margin-top: 22px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.media-placeholder--space {
  height: 100%;
  min-height: 320px;
  color: #fff;
  background-color: #8F7354;
  background-image: repeating-linear-gradient(90deg, rgba(30, 20, 10, 0.32) 0 6px, transparent 6px 22px), linear-gradient(160deg, #B08A60, #7D6045);
}
.media-placeholder--space .media-placeholder__icon { background: rgba(255, 253, 249, 0.92); color: var(--c-ink); }
.media-placeholder--space .media-placeholder__name,
.media-placeholder--space .media-placeholder__text { color: #fff; }
.problem { display: grid; gap: 20px; }
.problem__text {
  max-width: 30em;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: calc(-0.02em * var(--track));
  color: var(--c-ink);
  text-wrap: pretty;
}
.problem__sound { --tall: 36px; margin-top: 26px; }
@media (min-width: 1024px) {
  .problem { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}
.works { display: grid; gap: 12px; }
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.work .use__icon { margin-bottom: 10px; }
.work__products { display: grid; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.work__product {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
}
.work__product .icon { width: 16px; height: 16px; color: var(--c-accent-ink); transition: transform 0.4s var(--ease); }
.work__product:hover { color: var(--c-accent-ink); }
.work__product:hover .icon { transform: translateX(3px); }
@media (min-width: 640px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .works { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.solution-feature__link { margin-top: 22px; }
.spaces--row { margin-top: 4px; }
@media (min-width: 1024px) {
  .spaces.spaces--row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .spaces--row .space-tile:nth-child(n) { grid-row: auto; grid-column: auto; min-height: 320px; }
}

/* Acoustic advice */
.surface-effects { display: grid; gap: 12px; }
.surface-effect {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.surface-effect__sound { --tall: 56px; --bar: 4px; --gap: 5px; margin-bottom: 18px; align-items: flex-end; }
@media (min-width: 900px) {
  .surface-effects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ratings {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(22px, 3.4vw, 52px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.class-scale { margin: 0; align-self: center; }
.class-scale__caption { margin-bottom: 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-2); }
.class-scale__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; }
.class-scale__item {
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: calc(52px + 120px * var(--k));
  padding: 12px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-accent) calc(var(--k) * 100%), var(--c-surface-2));
  color: var(--c-ink);
}
.class-scale__class { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); font-weight: 600; line-height: 1; }
.class-scale__range { font-size: 0.75rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.class-scale__axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.75rem; color: var(--c-muted); }
@media (min-width: 1024px) {
  .ratings { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}
.matters { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.matters > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.matters dt { font-size: 1.125rem; font-weight: 600; }
.matters dt a { color: var(--c-ink); text-underline-offset: 4px; text-decoration-color: rgba(30, 35, 39, 0.28); }
.matters dt a:hover { color: var(--c-accent-ink); }
.matters dd { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 768px) {
  .matters { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1200px) {
  .matters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.standards { display: grid; gap: 10px; }
.standard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.standard__code {
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-on-dark);
}
.standard strong { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.standard span:last-child { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.standard span strong { color: var(--c-ink); }
.standards__title { margin-bottom: 14px; font-size: var(--fs-h3); font-weight: 600; }
.standards__link { margin-top: 22px; }
@media (min-width: 640px) {
  .standard { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; gap: 18px; }
}

/* Projects */
.catalogue-note {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text-2);
}
.catalogue-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c-accent-ink); }
.filter-bar__controls--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .filter-bar__controls--one { grid-template-columns: minmax(0, 20rem); }
}
.project-card__text { margin-top: -4px; }
.facts-panel__grid--lead { padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
/* T-057: one divider between the lead group and the facts under it (the grid's own top border made a second line),
   and an odd last fact takes the full row, so the grid never ends in an empty cell (the Express Facades rule;
   screen only: print.css lays the grid out in threes). */
.facts-panel__grid--lead + .facts-panel__grid { padding-top: 0; border-top: 0; }
@media screen {
  .facts-panel__grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* T-057: without the note (an Express Group project: the blue note under the hero says it), the print link sits at
   the foot of the panel, as the note does, instead of under the facts with the panel's free space below it. */
@media (min-width: 1024px) {
  .facts-panel > .facts-panel__grid + .print-action { margin-top: auto; }
}
.facts-panel__pending { font-size: var(--fs-small); color: var(--c-text-2); }
.delivered-note {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.delivered-note a { color: var(--c-ink); font-weight: 600; text-underline-offset: 3px; }
.delivered-note__icon .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--c-accent-ink); }
.scope-note { margin-top: 14px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.story { display: grid; gap: 16px; margin-top: 22px; }
.story__item { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.story__item dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-accent-ink); }
.story__item dd { font-size: var(--fs-body); line-height: 1.6; color: var(--c-ink-2); }
.rt-figure--wide { margin-top: 22px; }

/* Downloads */
.downloads { display: grid; gap: clamp(28px, 3vw, 44px); }
.doc-group { scroll-margin-top: calc(var(--sticky-top) + 24px); }
.doc-group__title {
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.doc-group__text { max-width: 46em; font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.doc-group .doc__meta span:nth-child(n + 2) { white-space: normal; }
@media (min-width: 1024px) {
  .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .downloads > .doc-group:first-child { grid-column: 1 / -1; }
  .downloads > .doc-group:first-child .doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Sustainability */
.claims { display: grid; gap: 12px; }
.claim {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.claim .text-link { margin-top: 8px; }
.claim--tbc { background: transparent; border-style: dashed; }
@media (min-width: 900px) {
  .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.checklist { display: grid; gap: 0; padding: 4px clamp(20px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--c-surface); }
.checklist > div { display: grid; gap: 4px; padding: 18px 0; }
.checklist > div + div { border-top: 1px solid var(--c-line); }
.checklist dt { font-size: 1.0625rem; font-weight: 600; }
.checklist dd { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
@media (min-width: 640px) {
  .checklist > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 20px; }
}

/* Samples: the swatch picker beside the request details */
.sample-form { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
.sample-form__picker { display: grid; gap: 18px; min-width: 0; }
.sample-form__picker .section-intro { margin-top: -6px; }
.sample-form__summary {
  margin: 4px 0 18px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-2);
}
.form-grid--single { grid-template-columns: minmax(0, 1fr) !important; }
.pick-group {
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.pick-group.is-highlighted { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-glow); }
.pick-group__legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; float: left; width: 100%; margin-bottom: 14px; padding: 0; }
.pick-group__name { font-size: 1.125rem; font-weight: 600; }
.pick-group__maker { font-size: 0.8125rem; color: var(--c-muted); }
.pick-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; }
.pick { position: relative; display: grid; gap: 5px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__chip {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--sw, var(--c-sand));
  box-shadow: inset 0 0 0 1px rgba(48, 38, 26, 0.14);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pick__chip img { width: 100%; height: 100%; object-fit: cover; }
.pick__chip::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1.5px var(--c-field);
}
.pick input:checked + .pick__chip { box-shadow: inset 0 0 0 1px rgba(48, 38, 26, 0.14), 0 0 0 3px var(--c-accent-ink); }
.pick input:checked + .pick__chip::after {
  background: var(--c-accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: none;
}
.pick input:focus-visible + .pick__chip { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }
.pick:hover .pick__chip { transform: translateY(-2px); }
.pick__name { font-size: 0.75rem; font-weight: 600; line-height: 1.25; color: var(--c-ink-2); }
.pick--product { grid-column: span 2; }
.pick__chip--product { aspect-ratio: auto; height: 100%; min-height: 52px; }
.pick__chip--product > img,
.pick__chip--product > .mosaic,
.pick__chip--product > .material-ph { position: absolute; inset: 0; min-height: 0; padding: 0; }
.pick__chip--product .material-ph__label { display: none; }
.pick__chip--product .mosaic--round { --cols: 5; gap: 6%; padding: 8% 6%; }
.pick-group__note { margin-top: 14px; font-size: var(--fs-xs); }
@media (min-width: 1024px) {
  .sample-form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sample-form__details { position: sticky; top: calc(var(--sticky-top) + 16px); }
}

/* Small parts */
.prose-note { font-size: var(--fs-xs) !important; color: var(--c-muted); }
.map-card__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.map-card__address a { color: var(--c-ink); text-underline-offset: 3px; }
.lead-time--contact { margin-top: 26px; }
.dims__area { margin-top: 12px; }
.thank-you__links { display: grid; justify-items: start; gap: 6px; margin-top: 18px; }
.error-page__sound { --tall: 44px; margin-bottom: 18px; }

/* Legal pages and the thank-you page (from the Group kit's news.css) */
.legal-note {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}
.legal-note .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-accent-ink); }
.legal-details { display: grid; border-top: 1px solid var(--c-line); }
.legal-details > div { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.legal-details dt { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.legal-details dd { color: var(--c-ink-2); overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .legal-details > div { grid-template-columns: 12rem minmax(0, 1fr); }
}
.legal__body { min-width: 0; }
.legal-table { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); }
.legal-table:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.legal-table table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--fs-small); }
.legal-table th,
.legal-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-line); }
.legal-table th { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); background: var(--c-surface-2); }
.legal-table tbody tr:last-child td { border-bottom: 0; color: var(--c-muted); }
.thank-you__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
}
.thank-you__icon .icon { width: 26px; height: 26px; }
.thank-you .page-hero__lead a { color: var(--c-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.thank-you__grid { display: grid; gap: 16px; }
.thank-you__panel { padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.thank-you__panel--tint { background: var(--c-surface-2); border-color: var(--c-surface-2); }
.thank-you__panel .contacts { margin-bottom: 0; }
.thank-you__text { margin-top: 10px; font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
@media (min-width: 1024px) {
  .thank-you__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Very narrow phones (inner components) */
@media (max-width: 379.98px) {
  .class-scale__range { font-size: 0.625rem; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .duo__swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; }
.map-card__address a,
.matters dt a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.finishes--product .swatches--fill { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 12px 8px; }
@media (min-width: 640px) {
  .finishes--product .swatches--fill { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
.header-phone__number { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header-phone { display: inline-grid; place-items: center; width: 44px; padding: 0; }
  .header-phone .icon { display: block; }
  .header-phone__number { display: none; }
}
.consent { min-height: 44px; align-items: center; }
@media (min-width: 1024px) {
  .home-projects > .project-card--feature .project-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 440px; }
}

/* Absorption table by build-up (wood wool product page) and small compare note */
.absorption { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.absorption:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }
.absorption__table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.absorption__table th,
.absorption__table td { padding: 10px 14px; text-align: left; }
.absorption__table thead th { font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); background: var(--c-surface-2); }
.absorption__table tbody tr + tr td { border-top: 1px solid var(--c-line); }
.absorption__class {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  font-weight: 700;
  color: var(--c-accent-ink);
}
.compare__see { font-size: 0.8125rem; color: var(--c-muted); }

/* Eco-PET chips keep their source shape (240 x 130 px), so they are never upscaled */
.swatches--wide .swatch__chip { aspect-ratio: 24 / 13; }

/* ==========================================================================
   18. Complete last rows (layout pass, 13 Oct): in every card or tile grid the last row is
   full at 390, 768, 1024 and 1440. Leftover items widen to fill the row; a single card in a
   row turns into a wide horizontal card. Layout only, the content is unchanged.
   ========================================================================== */
/* Project cards: two columns from 768, three (12-column grid) from 1024 */
@media (min-width: 768px) {
  .project-grid > .project-card:only-child,
  .project-grid--3 > .project-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .project-grid > .project-card:only-child .project-card__media,
  .project-grid--3 > .project-card:last-child:nth-child(odd) .project-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
  }
}
@media (min-width: 1024px) {
  /* reset the two-column rule, then complete the three-column rows */
  .project-grid--3 > .project-card:last-child:nth-child(odd) { grid-column: span 4; display: flex; }
  .project-grid--3 > .project-card:last-child:nth-child(odd) .project-card__media { height: clamp(250px, 23vw, 360px); min-height: 0; }
  /* 3n + 2 cards: the last two share the row */
  .project-grid--3 > .project-card:nth-child(3n + 1):nth-last-child(2),
  .project-grid--3 > .project-card:nth-child(3n + 1):nth-last-child(2) ~ .project-card { grid-column: span 6; }
  /* 3n + 1 cards (4 or more): the last four make two rows of two */
  .project-grid--3 > .project-card:nth-child(3n + 1):nth-last-child(4),
  .project-grid--3 > .project-card:nth-child(3n + 1):nth-last-child(4) ~ .project-card { grid-column: span 6; }
  /* one card on its own: wide and horizontal */
  .project-grid--3 > .project-card:only-child:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; }
  .project-grid--3 > .project-card:only-child:last-child:nth-child(odd) .project-card__media { height: 100%; min-height: 320px; }
}

/* Project galleries: 2 columns on phones (first photo full width), 12 columns from 768
   (first photo 8 wide over two rows, then rows of three) */
.gallery > .gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .gallery > .gallery__item:last-child:nth-child(even) { grid-column: span 4; aspect-ratio: 4 / 3; }
  .gallery--1 .gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .gallery--2 > .gallery__item:first-child,
  .gallery--2 > .gallery__item:last-child:nth-child(even) { grid-column: span 6; aspect-ratio: 4 / 3; }
  /* four photos: the first runs down three rows beside the other three */
  .gallery--4 .gallery__item:first-child:nth-last-child(4) { grid-row: span 3; }
  /* rows after the first two: two left over share a row, one left over makes the last four two rows of two */
  .gallery--4 .gallery__item:nth-child(n + 4):nth-child(3n + 1):nth-last-child(2),
  .gallery--4 .gallery__item:nth-child(n + 4):nth-child(3n + 1):nth-last-child(2) ~ .gallery__item,
  .gallery--4 .gallery__item:nth-child(n + 4):nth-child(3n + 1):nth-last-child(4),
  .gallery--4 .gallery__item:nth-child(n + 4):nth-child(3n + 1):nth-last-child(4) ~ .gallery__item { grid-column: span 6; aspect-ratio: 16 / 9; }
}

/* Where it works (products), other spaces (solutions): odd counts in two columns */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .uses > .use:last-child:nth-child(odd),
  .spaces--row > .space-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Documents in two columns: an odd last row spans both */
@media (min-width: 900px) {
  .doc-grid > .doc:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .downloads > .doc-group:first-child .doc-list > .doc:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Products hub filtered by surface: cards share each row, so a short last row stretches */
@media (min-width: 640px) {
  .range.is-filtered { display: flex; flex-wrap: wrap; }
  .range.is-filtered > .prod-card { flex: 1 1 300px; }
  .range.is-filtered > .prod-card[hidden] { display: none; }
}

/* ==========================================================================
   19. Customer audit follow-up (13 Oct): quote links, performance in the product hero,
   the compare table, price and programme, the phone bars, sustainability claims
   ========================================================================== */
/* The mobile bar waits until main.js knows whether the page's own buttons are on screen,
   so it never flashes over the hero on the first screen */
.js .mobile-bar:not(.is-ready) { transform: translateY(110%); }

/* "Request a quote" under a hero's buttons: one quiet line for supply-only buyers */
.hero-quote { margin-top: 10px; font-size: var(--fs-small); }
.home-hero .hero-quote { margin-top: 12px; }

/* Home: a row of space shortcuts under the quick facts (mainly for phones) */
.space-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 16px;
}
.space-links__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.space-links__list { display: flex; flex-wrap: wrap; gap: 8px; }
.space-links .chip { min-height: 44px; padding-inline: 16px; font-weight: 600; text-decoration: none; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.space-links .chip:hover { border-color: var(--c-accent-ink); background: var(--c-accent-soft); }

/* Product hero: sound absorption and reaction to fire first, with their source */
.product-facts__perf dd { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; }
.product-facts__perf .spec-check { margin-top: 4px; vertical-align: 2px; }
.product-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Products compare table: performance columns; on phones each product becomes a card */
.compare__perf { font-weight: 600; color: var(--c-ink); }
.compare__maker { display: block; margin-top: -6px; font-size: 0.75rem; font-weight: 500; color: var(--c-muted); }
.compare__table { min-width: 52rem; }
.compare__table td:last-child { min-width: 14rem; }
@media (max-width: 767.98px) {
  .compare { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .compare__table { min-width: 0; }
  .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare__table,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td { display: block; }
  .compare__table tbody { display: grid; gap: 10px; }
  .compare__table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 6px 18px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
  }
  .compare__table tbody tr + tr th,
  .compare__table tbody tr + tr td { border-top: 0; }
  .compare__table th,
  .compare__table td { padding: 0; }
  .compare__table tbody th { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 1px solid var(--c-line); }
  .compare__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-muted);
  }
  .compare__table td:last-child { grid-column: 1 / -1; min-width: 0; }
}

/* What affects the price and the programme */
.price-factors { display: grid; gap: clamp(28px, 3.4vw, 52px); }
.price-factors__head .section-intro { max-width: 34em; }
.price-factors__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.price-factors__list { display: grid; gap: 0 clamp(20px, 2.4vw, 36px); }
.price-factor {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  align-content: start;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
}
.price-factor .use__icon { grid-row: span 2; }
.price-steps {
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.price-steps__title { font-size: 1.0625rem; font-weight: 600; }
.price-steps__list { display: grid; gap: 14px; margin-top: 18px; counter-reset: pstep; }
.price-steps__list li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 44px;
  align-content: start;
  counter-increment: pstep;
}
.price-steps__list li::before {
  content: counter(pstep);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-accent-ink);
}
.price-steps__list strong { font-size: var(--fs-small); font-weight: 600; }
.price-steps__list span { font-size: 0.875rem; line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 640px) {
  .price-factors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .price-factors { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  /* The heading block does not stick (T-034 polish, 14 Oct): it sits in the same grid as the steps box below, so
     when stuck it slid under that box while scrolling, and a focused "Request a quote" ended up behind it. */
  .price-factors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-factor { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .price-factor .use__icon { grid-row: auto; margin-bottom: 12px; }
  .price-steps { grid-column: 1 / -1; }
  .price-steps__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .price-steps__list li { padding-left: 0; padding-top: 42px; }
}

/* Samples: on phones and tablets, a bar with the count that jumps to the details */
.sample-jump {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 10px 8px 20px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #fff;
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.sample-jump[hidden] { display: none; }
.sample-jump__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-ink);
  white-space: nowrap;
}
.sample-jump__go .icon { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .sample-jump { display: none !important; }
}
.sample-form__details:focus { outline: none; }

/* Small links added to panels */
.duo__link,
.doc-group__link { margin-top: -4px; font-size: var(--fs-small); }

/* Sustainability: two claims side by side */
@media (min-width: 900px) {
  .claims--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menu: samples and downloads sit with the products, where specifiers look for them */
.menu__specify { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 10px; }
.menu__specify a { font-weight: 600; }

/* Grid items never grow past their track: the absorption table scrolls inside its panel on phones */
.spec-layout > *,
.spec-sheet > * { min-width: 0; }

/* ==========================================================================
   18. The families added in T-035 (14 Oct)
   ========================================================================== */
/* Drawn swatches (our own drawings of a design type, assets/img/swatches/, tools/draw-swatches.py) stand in for a
   photo as round chips, laid out like the veneers: one row of up to five, or rows of five. Thumbnails ("More from
   the range", the samples picker) keep their own columns. */
.mosaic--c4 { --cols: 4; }
.mosaic--c5 { --cols: 5; }
.mosaic--patterns img { background: var(--c-surface); }

/* Two more material placeholders, labelled "Photography to follow" like the others: felt (PET panels) and mineral
   (white baffle and raft faces). */
.material-ph--felt {
  background-color: #B9B2A6;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(60, 52, 42, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #C4BDB1, #ABA396 70%, #B5AEA2);
}
.material-ph--mineral {
  background-color: #EEECE7;
  background-image:
    radial-gradient(circle, rgba(60, 56, 50, 0.10) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.6px),
    linear-gradient(150deg, #F4F2EE, #E2DED6 75%, #EAE7E1);
  background-size: 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 3px 4px, 0 0;
}

/* The menu: twelve families no longer fit the large type, so the products list takes the size of the Company list
   (one column; 44px rows on touch screens, 38px from 1024px). */
.menu__lead--products a { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.15; }
@media (min-width: 1024px) {
  .menu__lead--products a { min-height: 38px; }
}

/* ==========================================================================
   20. Other views of a family (T-035 part 4): the illustrative renders after the overview
   ========================================================================== */
/* Each render is shown whole, at its own proportions (4:3 or 1:1), on the renders' warm ground, with its caption
   ("Illustrative render: …") under it. A plain image: no link, no zoom button, no viewer (T-042, the user, 15 Oct).
   One view sits beside the heading from 1024px; two or more make a grid of two from 640px (three, five or six
   views: rows of three from 1024px), so the relief reads at a glance. A square view is kept to 560px wide, so it
   never stands taller than the hero. */
.product-views__grid { display: grid; gap: clamp(20px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.product-views__item { width: 100%; min-width: 0; }
.product-views__item--square { max-width: 560px; }
.product-views__figure { display: grid; gap: 10px; margin: 0; }
.product-views__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: #F0ECE3; /* the renders' ground (tools/3d/acoustic_web.py) */
}
@media (min-width: 640px) {
  .product-views:not(.product-views--1) .product-views__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-views--1 .product-views__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
  .product-views--1 .product-views__head { margin-bottom: 0; }
  .product-views--1 .product-views__item { justify-self: end; }
  .product-views:is(.product-views--3, .product-views--5, .product-views--6) .product-views__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* T-046 begin: the documents request list, "Your documents" (assets/js/doc-request.js; feature paper S1).
   - "Add to my request" beside each document sent on request (a toggle button, aria-pressed); printed hidden,
     shown by the script, so without JavaScript each row keeps its one "Ask for…" link.
   - The tray at the foot of the screen from 768px; on phones a count in the bottom bar. It steps aside while the
     cookie banner is open, and the page keeps room under it, so it never covers a focused element.
   - The Contact form's list of documents (documents route) and the Downloads page's type chips and search
     (the chips are not used here yet: seven documents in two lists).
   - The documents route's fourth route card and the "Ask for the data sheet" state, which only the WordPress
     theme had (acoustics-wp.css; the same rules). */
.route__options--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .route__options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__options--4 .route__text { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; }
}
.doc__state--request { background: var(--c-accent-soft); color: var(--c-accent-ink); white-space: nowrap; }
.doc--request .doc__link { text-decoration-style: dotted; }
.doc { min-width: 0; } /* a grid item of .doc-list: its automatic minimum would be its title's whole line */
.doc__end { flex-wrap: wrap; justify-content: flex-end; }
.doc-add {
  position: relative;
  z-index: 1; /* above the row's stretched link */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font: 600 0.8125rem/1.2 var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.doc-add[hidden] { display: none; }
.doc-add:hover { border-color: var(--c-ink); }
.doc-add__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
}
.doc-add__mark::before,
.doc-add__mark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.doc-add__mark::after { transform: rotate(90deg); }
.doc-add__mark .icon { display: none; width: 15px; height: 15px; }
.doc-add[aria-pressed="true"] { border-color: var(--c-accent-ink); background: var(--c-accent-soft); }
.doc-add[aria-pressed="true"] .doc-add__mark { background: var(--c-accent); color: var(--c-ink); }
.doc-add[aria-pressed="true"] .doc-add__mark::before,
.doc-add[aria-pressed="true"] .doc-add__mark::after { display: none; }
.doc-add[aria-pressed="true"] .doc-add__mark .icon { display: block; }
.test-card__link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* The tray */
.doc-tray { display: none; }
@media (min-width: 768px) {
  .doc-tray:not([hidden]) {
    position: fixed;
    z-index: var(--z-bar);
    left: 50%;
    bottom: 16px;
    display: block;
    width: min(560px, calc(100% - 32px));
    transform: translateX(-50%);
  }
  /* Room under the tray: the last links and every focused element stay clear of it (WCAG 2.4.11). */
  html.has-doc-tray { scroll-padding-bottom: calc(max(var(--banner-h, 0px), 80px) + 12px); }
  html.has-doc-tray body { padding-bottom: max(var(--banner-h, 0px), 88px); }
}
html.consent-open .doc-tray { visibility: hidden; }
.doc-tray__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-lift);
}
.doc-tray__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font: 600 0.9375rem/1.2 var(--f-sans);
  cursor: pointer;
}
.doc-tray__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-ink); color: var(--c-accent); }
.doc-tray__icon .icon { width: 18px; height: 18px; }
.doc-tray__caret .icon { display: block; width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.3s var(--ease); }
.doc-tray__toggle[aria-expanded="true"] .doc-tray__caret .icon { transform: none; }
.doc-tray__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: min(60vh, 440px);
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
}
.doc-tray__panel[hidden] { display: none; }
.doc-tray__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.doc-tray__title,
.doc-tray__type,
.doc-choice__type {
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.doc-tray__clear {
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: 600 0.8125rem/1.2 var(--f-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.doc-tray__list { display: grid; margin: 0; padding: 0; list-style: none; }
.doc-tray__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--c-line); }
.doc-tray__text { display: grid; gap: 2px; min-width: 0; }
.doc-tray__type { color: var(--c-muted); }
.doc-tray__name { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.doc-tray__remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
}
.doc-tray__remove:hover { border-color: var(--c-ink); }
.doc-tray__remove .icon { width: 14px; height: 14px; }
.doc-tray__note { margin-top: 10px; font-size: 0.75rem; line-height: 1.5; color: var(--c-muted); }

/* Phones: the count in the bottom bar (Call shows as its icon while the count is there) */
.mobile-bar--docs { grid-template-columns: auto auto minmax(0, 1fr); }
.mobile-bar--docs .mobile-bar__call { width: 52px; padding: 0; justify-content: center; }
.mobile-bar--docs .mobile-bar__call .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mobile-bar__docs { gap: 6px; padding: 6px 12px 6px 10px; }
@media (max-width: 359.98px) {
  .mobile-bar--docs .mobile-bar__cta { justify-content: center; }
  .mobile-bar--docs .mobile-bar__cta .btn__icon { display: none; }
}
.mobile-bar__docs[hidden] { display: none; }
.mobile-bar__docs-icon .icon { display: block; width: 19px; height: 19px; }
.mobile-bar__docs-num {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #fff;
  font: 700 0.8125rem/1 var(--f-sans);
}

/* The Contact form's list (documents route) */
.doc-choices__list { display: grid; gap: 8px; }
.doc-choice { display: flex; }
.doc-choice > span { width: 100%; min-height: 48px; padding: 10px 14px; align-items: flex-start; line-height: 1.35; border-radius: 14px; }
.doc-choice > span::before { flex: none; margin-top: 2px; }
.doc-choice__text { display: block; }
.doc-choice__type { display: block; margin-bottom: 2px; }
.doc-choices__note { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 1024px) {
  .doc-choices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Downloads: type chips and search */
.doc-filter { display: grid; gap: 12px 20px; }
.doc-filter[hidden] { display: none; }
.doc-filter__types { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.doc-filter__chip { position: relative; display: inline-flex; }
.doc-filter__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.doc-filter__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.doc-filter__chip span:hover { border-color: var(--c-ink); }
.doc-filter__chip input:checked + span { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.doc-filter__chip input:focus-visible + span { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }
.doc-filter__search { min-width: 0; }
.doc-filter__input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-field);
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
}
.doc-filter__status { min-height: 1.2em; font-size: 0.8125rem; color: var(--c-muted); }
.doc-filter__empty { padding: 20px 22px; border: 1px dashed var(--c-line-2); border-radius: var(--r-md); color: var(--c-text-2); }
.doc-filter__empty[hidden],
.dl-group[hidden],
.doc[hidden] { display: none; }
@media (min-width: 1024px) {
  .doc-filter { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: center; }
  .doc-filter__status { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-add,
  .doc-filter__chip span,
  .doc-tray__caret .icon { transition: none; }
}
@media print {
  .doc-add,
  .doc-tray,
  .doc-filter { display: none !important; }
}
/* T-046 end */
/* Room echo estimator (T-048, Acoustic advice #echo-estimator): the form on the light card, the result on
   the decay illustration (driven by the numbers), the sound and the hand-off. Script: assets/js/echo-estimator.js,
   loaded by main.js 12e only when the estimator comes near the screen. */
.echo-intro { max-width: 760px; }
.echo {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  scroll-margin-top: 140px;
}
.echo__head { display: grid; gap: 10px; max-width: 720px; }
.echo__head .eyebrow { margin: 0; }
.echo__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.12; letter-spacing: calc(-0.02em * var(--track, 1)); }
.echo__intro { color: var(--c-text-2); }
.echo__nojs { display: none; margin: 0; padding: 16px 18px; border-radius: var(--r-sm); background: var(--c-accent-soft); }
.no-js .echo__nojs { display: block; }
.no-js .echo__form, .no-js .echo__listen, .no-js .decay-demo__toggle { display: none; }
.echo__form { display: grid; gap: 20px; min-width: 0; }
.echo__step { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--c-line); }
.echo__step:last-child { padding-bottom: 0; border-bottom: 0; }
.echo__legend { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 0; font-weight: 600; font-size: 1.0625rem; }
.echo__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: 0.875rem;
}
.echo__field { display: grid; gap: 6px; min-width: 0; }
.echo__field .field__label { margin: 0; }
.echo__class-label { margin-top: 8px !important; }
.echo__pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.echo__number { min-height: 48px; padding: 10px 12px; text-align: right; font-variant-numeric: tabular-nums; }
.echo__range { width: 100%; min-height: 44px; margin: 0; accent-color: var(--c-accent-ink); background: transparent; cursor: pointer; }
.echo__result { display: grid; gap: 18px; align-content: start; min-width: 0; }
.echo__graph { margin: 0; }
.echo__bars { overflow: hidden; }
.echo__bars .decay__bar { max-width: none; }   /* the bars fill the width, so the time axis and the target line are true */
.echo__target {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--c-on-dark);
  pointer-events: none;
}
.echo__target-label {
  position: absolute;
  top: 2px;
  left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--c-dark);
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--c-on-dark);
}
.echo__target.is-right .echo__target-label { left: auto; right: 6px; }
.echo__figures { display: grid; gap: 8px; }
.echo__rt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.echo__rt div { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.06); }
.echo__rt dt { font-size: 0.8125rem; color: var(--c-on-dark-muted); }
.echo__rt dd { margin: 2px 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-on-dark); }
.echo__verdict { margin: 0; font-size: var(--fs-small); color: var(--c-on-dark); }
.echo__targets-note { margin: 0; font-size: 0.75rem; color: var(--c-on-dark-muted); }
.echo__listen, .echo__send { display: grid; gap: 10px; }
.echo__listen-title { margin: 0; font-weight: 600; }
.echo__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.echo__play[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-accent-soft); }
.echo__small { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }
.echo__small:empty { display: none; }
.echo__transcript summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--c-accent-ink); }
.echo__transcript p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--c-text-2); }
.echo__send .btn { justify-self: start; }
@media (min-width: 1024px) {
  .echo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 4vw, 64px); }
  .echo__head, .echo__nojs { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .echo__pair { grid-template-columns: minmax(0, 1fr) 84px; }
  .echo__buttons .btn { width: 100%; justify-content: space-between; }
  .echo__send .btn { justify-self: stretch; justify-content: space-between; }
}
@media print {
  .echo__form, .echo__listen, .echo__send, .decay-demo__toggle { display: none !important; }
}

/* A quiet link to the estimator in the call-to-action bands of Home and the space pages */
.cta-band__echo { justify-self: center; min-height: 44px; }

/* Footer on phones (user, 15 Oct): the logo, the line about the company and the social link are centred. */
@media (max-width: 639.98px) {
  .site-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .site-footer__statement { margin-inline: auto; }
}

/* ==========================================================================
   T-066 (19 Oct): product pages modelled on a specialist shop's layout, the colour picker, the order button to FAB
   Supplies (no prices on this site), "Hear the difference", accessories, the cut-to-shape blocks.
   ========================================================================== */
/* The product top: the gallery beside a panel with the name, colours, sizes and the order button */
.pdp__grid { display: grid; gap: clamp(20px, 3vw, 40px); margin-top: clamp(14px, 1.6vw, 22px); }
.pdp__stage { display: grid; gap: 18px; }
.pdp__slide { margin: 0; display: grid; gap: 10px; }
.pdp__gallery.is-ready .pdp__slide:not(.is-active) { display: none; }
/* T-071: with JavaScript the other views are hidden from the first paint, so their lazy images load only when chosen
   (before, the stacked views near the top loaded with the page until product.js ran); without it every view shows */
.js .pdp__gallery .pdp__slide:not(.is-active) { display: none; }
.pdp__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: #F0ECE3;
}
.pdp__frame > img { width: 100%; height: 100%; object-fit: cover; }
.pdp__frame > .product-hero__visual { position: absolute; inset: 0; min-height: 0; }
.pdp__caption { max-width: 60ch; }
.pdp__shown { color: var(--c-ink-2); }
.pdp__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.pdp__thumb {
  display: block;
  width: 76px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #F0ECE3;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-ink); }
.pdp__thumb:hover { border-color: var(--c-line-2); }
.pdp__thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pdp__panel {
  align-self: start;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.pdp .page-hero__title { max-width: none; margin-top: 12px; font-size: clamp(2.125rem, 1.5rem + 2vw, 3.375rem); }
.pdp__summary { margin-top: 14px; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-2); }
.pdp__perf { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.pdp__perf span:first-child { color: var(--c-muted); }
.pdp__option { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.pdp__label { font-size: var(--fs-small); color: var(--c-muted); }
.pdp__label strong { font-weight: 600; color: var(--c-ink); }
.pdp__hint { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
.pdp__hint .text-link { margin-left: 4px; font-weight: 600; color: var(--c-ink); }
.pdp__note { margin-top: 10px; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text-2); }
.pdp__swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pdp__swatches li { width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--c-surface-2); box-shadow: inset 0 0 0 1px rgba(30, 35, 39, 0.12); }
.pdp__swatches img { width: 100%; height: 100%; object-fit: cover; }

/* Colour swatches that recolour the render (buttons with aria-pressed) */
.colour-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.colour-swatch {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--sw, var(--c-surface-2));
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(30, 35, 39, 0.14);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.colour-swatch img { width: 100%; height: 100%; object-fit: cover; }
.colour-swatch:hover { transform: scale(1.08); }
.colour-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-ink); }
.colour-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 5px var(--c-accent); }
@media (pointer: coarse) {
  .colour-swatch { width: 40px; height: 40px; }
}
.pdp__panel .colour-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 8px; }
.pdp__panel .colour-swatch { width: 100%; height: auto; aspect-ratio: 1; max-width: 44px; }
@media (min-width: 1024px) {
  .pdp__panel .colour-pick { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px; }
}
.pdp__print:empty { display: none; }
.pdp__print .print-action { margin: 0; }
.colour-pick--named { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 12px 10px; margin-top: 0; }
.colour-swatch--named {
  width: auto;
  height: auto;
  display: grid;
  gap: 6px;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.colour-swatch--named:hover { transform: none; }
.colour-swatch__chip {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(30, 35, 39, 0.12);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.colour-swatch__chip img { width: 100%; height: 100%; object-fit: cover; }
.colour-swatch--named:hover .colour-swatch__chip { transform: translateY(-2px); }
.colour-swatch--named[aria-pressed="true"] { box-shadow: none; }
.colour-swatch--named[aria-pressed="true"] .colour-swatch__chip { box-shadow: 0 0 0 2px var(--c-surface-2), 0 0 0 4px var(--c-ink); }
.colour-swatch--named:focus-visible { box-shadow: none; }
.colour-swatch--named:focus-visible .colour-swatch__chip { box-shadow: 0 0 0 2px var(--c-surface-2), 0 0 0 5px var(--c-accent); }
.colour-swatch__code { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--c-ink-2); }

/* The colourable render: the neutral felt multiplied by the chosen colour through the felt's mask (our own render) */
.colourable { position: relative; isolation: isolate; }
.colourable__tint {
  position: absolute;
  inset: 0;
  background-color: var(--tint, transparent);
  mix-blend-mode: multiply;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: background-color 0.35s var(--ease);
}
/* T-071: a colour with its own render shows that render as it is (no tint; the mask is not even fetched) */
.colourable.is-rendered .colourable__tint { display: none; }
.colourable > img { transition: opacity 0.2s var(--ease); }
.colourable[aria-busy="true"] > img { opacity: 0.88; }
.colour-studio { margin: 26px 0 0; display: grid; gap: 10px; }
.colour-studio__frame { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: #F0ECE3; }
.colour-studio__frame > img { width: 100%; height: 100%; object-fit: cover; }
.finishes--studio .finishes__intro .section-intro { margin-top: 18px; }

/* Sizes and formats (T-076: the chips sit in rows; a row can carry a small heading, and a chip a round swatch of its own
   render before its name: the embossed wall panels' Design picker) */
.variant-pick { display: grid; gap: 14px; margin-top: 12px; }
.variant-pick__row { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pick__title { flex-basis: 100%; margin-bottom: 2px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.variant-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.variant-chip:hover { border-color: var(--c-ink); }
.variant-chip[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.variant-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* a visual picker (chips with swatches) sits in two even columns, so long names wrap inside their chip, not the row */
.variant-pick--swatched .variant-pick__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-pick--swatched .variant-pick__title { grid-column: 1 / -1; }
.variant-chip--swatch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 14px 6px 6px; text-align: left; }
.pdp__hint .pdp__finishes-link { margin-left: 0; }
.variant-chip__swatch {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-2);
  outline: 1px solid rgba(30, 35, 39, 0.12);
  outline-offset: -1px;
  transition: box-shadow 0.25s var(--ease);
}
.variant-chip--swatch[aria-pressed="true"] .variant-chip__swatch { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
/* T-072: a group shown only with one option of the first group (the relief tile's faces); without JavaScript it shows */
.js .pdp__option[data-variant-for]:not(.is-shown) { display: none; }
/* T-082: a group repeating an earlier one for another lead option (the faces of Baffle after those of Raft) shows once
   without JavaScript */
.no-js .pdp__option[data-variant-twin] { display: none; }

/* The order button: to the product's FAB Supplies listing, in a new tab */
.pdp__buy { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.pdp__shop { width: 100%; white-space: normal; text-align: left; }
.pdp__shop-note { font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
.pdp__more-shop { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.pdp__more-shop a { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(30, 35, 39, 0.28); text-underline-offset: 3px; }
.pdp__more-shop a:hover { text-decoration-color: currentColor; }
.pdp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__actions:empty { display: none; }
.pdp__buy .hero-quote { justify-self: start; margin-top: 2px; }
.pdp .product-facts { margin-top: 24px; }
@media (min-width: 1024px) {
  .pdp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .pdp__gallery { position: sticky; top: calc(var(--sticky-top, 96px) + 8px); }
}
@media (max-width: 479.98px) {
  .pdp__thumb { width: 64px; height: 64px; border-radius: 14px; }
  .pdp__actions .btn { width: 100%; }
}

/* Tabs: Information, Specification, Dimensions, Data sheet (every panel shows without JavaScript) */
.tabs__list {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  scrollbar-width: none;
}
.tabs__list[hidden] { display: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: none;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-soft); }
.tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tabs__panel + .tabs__panel { margin-top: clamp(48px, 5vw, 72px); }
.tabs.is-tabbed .tabs__panel { margin-top: clamp(24px, 3vw, 40px); }
.tabs__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.tabs__heading { margin-bottom: clamp(18px, 2vw, 28px); }
.tabs.is-tabbed .tabs__heading {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Information */
.pdp-info__grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.pdp-info__lead { max-width: 40em; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); }
.pdp-info__block { margin-top: clamp(28px, 3vw, 40px); max-width: 44rem; }
.pdp-info__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: calc(-0.02em * var(--track)); }
.pdp-info__block .prose { margin-top: 10px; }
.pdp-info__block .text-link { display: inline-flex; margin-top: 12px; }
.pdp-info__side { display: grid; gap: 16px; align-content: start; }
.looking-for { padding: 20px 22px; border: 1px solid var(--c-accent-line); border-radius: var(--r-md); background: var(--c-accent-soft); }
.looking-for__title { font-weight: 600; color: var(--c-ink); }
.looking-for__text { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.looking-for .text-link { display: inline-flex; margin-top: 10px; font-weight: 600; }
.capability { padding: 24px; border-radius: var(--r-md); background: var(--c-dark); color: var(--c-on-dark); }
.capability__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-on-dark-muted); }
.capability__title { margin-top: 8px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--c-on-dark); }
.capability__text { margin-top: 10px; font-size: var(--fs-small); line-height: 1.55; color: var(--c-on-dark); }
.capability .text-link { display: inline-flex; margin-top: 12px; font-weight: 600; color: var(--c-on-dark); text-decoration-color: rgba(241, 237, 230, 0.4); }
.capability .text-link:focus-visible { box-shadow: 0 0 0 3px rgba(80, 168, 232, 0.7); }
.pdp-uses { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.pdp-uses__title { font-size: 1.125rem; font-weight: 600; }
.pdp-uses__note { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-2); }
.pdp-uses__list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-2); }
.pdp-uses__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.pdp-uses__list strong { color: var(--c-ink); font-weight: 600; }
.pdp-uses__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent-ink); }
.pdp-uses__icon .icon { width: 17px; height: 17px; }
.pdp-uses .uses__spaces { margin-top: 16px; }
@media (min-width: 1024px) {
  .pdp-info__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Dimensions */
.dims { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.dims:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dims__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-small); }
.dims__table th, .dims__table td { padding: 12px clamp(14px, 1.6vw, 22px); text-align: left; vertical-align: baseline; }
.dims__table thead th { font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); border-bottom: 1px solid var(--c-line); }
.dims__table tbody th { font-weight: 600; color: var(--c-ink); }
.dims__table td { color: var(--c-text-2); }
.dims__table tbody tr + tr > * { border-top: 1px solid var(--c-line); }
.dims__group th { padding-top: 18px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.dims__shop { text-align: right; white-space: nowrap; }
.dims__shop .text-link { font-weight: 600; color: var(--c-ink); }
.pdp-docs__none { display: grid; gap: 16px; justify-items: start; max-width: 40rem; padding: 24px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.pdp-docs__none p { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.pdp-docs__all { display: inline-flex; margin-top: 18px; font-weight: 600; }

/* Inspiration: similar treatments, our own project photos linked to their projects */
.inspiration { display: grid; gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.inspiration__figure { margin: 0; display: grid; gap: 10px; }
.inspiration__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.inspiration__caption { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.inspiration__caption .text-link { font-weight: 600; color: var(--c-ink); }
@media (min-width: 640px) {
  .inspiration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration__item--wide { grid-column: 1 / -1; }
  .inspiration__item--wide img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .inspiration { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .inspiration__item--wide { grid-column: span 2; grid-row: span 2; }
  .inspiration__item--wide .inspiration__figure { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .inspiration__item--wide img { height: 100%; aspect-ratio: auto; }
  .inspiration > :only-child { grid-column: 1 / -1; }
}

/* Related products: equal cards */
@media (min-width: 1024px) {
  .range--related { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .range--related > .prod-card,
  .range--related > .prod-card:nth-child(-n + 2),
  .range--related > .prod-card:last-child:nth-child(odd) { grid-column: auto; }
  .range--related > .prod-card .prod-card__media,
  .range--related > .prod-card:nth-child(-n + 2) .prod-card__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .range--related > .prod-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* Hear the difference */
.hear {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(22px, 3.4vw, 48px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.hear__intro .eyebrow { margin-bottom: 12px; }
.hear__lead { margin-top: 12px; max-width: 34em; font-size: var(--fs-body); line-height: 1.55; color: var(--c-text-2); }
.hear__player { display: grid; gap: 18px; align-content: center; }
.hear__player[hidden], .hear__fallback[hidden] { display: none; }
.hear__switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hear__side { font-size: var(--fs-small); font-weight: 600; color: var(--c-muted); cursor: pointer; transition: color 0.25s var(--ease); }
.hear__side.is-current { color: var(--c-ink); }
.hear__switch {
  position: relative;
  flex: none;
  width: 60px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-line-2);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.hear__switch::before { content: ""; position: absolute; inset: -6px -4px; }
.hear__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 35, 39, 0.3);
  transition: transform 0.3s var(--ease);
}
.hear__switch[aria-checked="true"] { background: var(--c-accent); }
.hear__switch[aria-checked="true"] .hear__knob { transform: translateX(26px); }
.hear__switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hear__deck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; }
.hear__play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.3s var(--ease);
}
.hear__play:hover { background: var(--c-ink-2); }
.hear__play:active { transform: scale(0.96); }
.hear__play:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-accent); }
.hear__icon { width: 24px; height: 24px; }
.hear__icon--play { margin-left: 3px; }
.hear__icon--pause, .hear.is-playing .hear__icon--play { display: none; }
.hear.is-playing .hear__icon--pause { display: block; }
.hear.is-loading .hear__play { cursor: progress; opacity: 0.7; }
.hear__wave { height: clamp(72px, 8vw, 104px); cursor: pointer; }
.hear__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hear__base { fill: var(--c-sand); }
.hear__done { fill: var(--c-ink); }
.hear__bars--treated, .hear.is-treated .hear__bars--untreated { display: none; }
.hear.is-treated .hear__bars--treated { display: inline; }
.hear__head { stroke: var(--c-accent-ink); stroke-width: 2; }
.hear__time { grid-column: 2; justify-self: end; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.hear__fallback { display: grid; gap: 14px; }
.hear__clip { margin: 0; display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 600; }
.hear__clip audio { width: 100%; }
.hear__note { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.hear__transcript summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--c-accent-ink); }
.hear__transcript p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
@media (min-width: 1024px) {
  .hear { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); }
  .hear__note, .hear__transcript { grid-column: 1 / -1; }
  .hear__fallback { grid-column: 2; }
}
@media (max-width: 639.98px) {
  .hear__switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .hear__side { font-size: var(--fs-xs); line-height: 1.3; }
  .hear__side[data-hear-side="off"] { text-align: right; }
}
@media (max-width: 479.98px) {
  .hear__play { width: 56px; height: 56px; }
  .tabs__tab { padding: 10px 14px; }
}

/* Products hub: offices first, the cut-to-shape note, fixings and accessories */
.hub-offices {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-ink);
  transition: box-shadow 0.5s var(--ease);
}
.hub-offices:hover { box-shadow: var(--shadow-lift); }
.hub-offices__media { aspect-ratio: 16 / 9; overflow: hidden; }
.hub-offices__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hub-offices:hover .hub-offices__media img { transform: scale(1.03); }
.hub-offices__body { display: grid; gap: 10px; align-content: center; padding: clamp(22px, 3vw, 40px); }
.hub-offices__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.hub-offices__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
.hub-offices__rooms { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.hub-offices__rooms span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 0.8125rem; font-weight: 600; }
.hub-offices__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hub-offices__go .icon { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.hub-offices:hover .hub-offices__go .icon { transform: translateX(3px); }
@media (min-width: 768px) {
  .hub-offices { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hub-offices__media { aspect-ratio: auto; min-height: 260px; }
}
.hub-cut { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .hub-cut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.accessories-wrap { display: grid; gap: clamp(20px, 3vw, 40px); }
.range.accessories { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: minmax(0, 1fr); }
.range.accessories > .prod-card { grid-column: auto; }
.range.accessories > .prod-card:only-child { grid-column: auto; }   /* T-070: a single accessory keeps a card's width */
.range.accessories > .prod-card:last-child:nth-child(odd) { grid-column: auto; }   /* T-081: an odd last card keeps a card's width */
.range.accessories .prod-card__media,
.range.accessories > .prod-card:nth-child(-n + 2) .prod-card__media { aspect-ratio: 4 / 3; background: #F0ECE3; }
.range.accessories .prod-card__media > img { object-fit: contain; }
/* T-081: an accessory card's parts with their own FAB listings (the 24mm ceiling grid), above the card's own link */
.prod-card__shops { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.prod-card__shops > span { padding-block: 6px; }
.prod-card__shops a { display: inline-block; padding-block: 6px; color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(30, 35, 39, 0.28); text-underline-offset: 3px; }
.prod-card__shops a:hover { text-decoration-color: currentColor; }
@media (min-width: 640px) {
  .range.accessories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* T-081: three accessories; the heading above, the cards three across */
  .range.accessories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   T-083 (user, 21 Oct): the flat product tiles (T-079, our own renders) on the Products and Home ranges, after the
   catalogue cards the user liked on hubox.design: a white card, the name above, the square tile centred, small arrows
   that cycle the family's variants (no autoplay; main.js 12f), then the text, the facts and the data sheet. Even rows:
   one card a row on phones, two from 640px, three from 1024px, four from 1280px. On the product pages the tiles are
   slides after the main image, shown whole on white; a finish preview that a tile names is a picker (finish-pick).
   ========================================================================== */
.range--tiles { grid-template-columns: minmax(0, 1fr); }
.range--tiles > .prod-card,
.range--tiles > .prod-card:nth-child(-n + 2),
.range--tiles > .prod-card:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 640px) {
  .range--tiles,
  .range--tiles.is-filtered { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .range--tiles,
  .range--tiles.is-filtered { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range--tiles > .prod-card,
  .range--tiles > .prod-card:nth-child(-n + 2),
  .range--tiles > .prod-card:last-child:nth-child(odd),
  .range--tiles.is-filtered > .prod-card { grid-column: auto; }
}
@media (min-width: 1280px) {
  .range--tiles,
  .range--tiles.is-filtered { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.prod-card--tiles { background: #fff; }
/* the name, the tile, the arrows and the text line up across a row (a two-line name pushes its row's tiles down
   together): each card takes four rows of the range's grid */
.range--tiles > .prod-card--tiles { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.prod-card__head { display: grid; align-content: start; gap: 6px; padding: clamp(16px, 1.8vw, 24px) 64px 0 clamp(16px, 1.8vw, 24px); }
.prod-card--tiles .prod-card__title { font-size: clamp(1.1875rem, 1.08rem + 0.35vw, 1.375rem); }
.prod-card--tiles .prod-card__more { background: var(--c-bg); }
.prod-card__tile { position: relative; aspect-ratio: 1; margin: 6px clamp(10px, 1.2vw, 18px) 0; }
.prod-card__tile img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.25s var(--ease); }
.prod-card__tile[aria-busy="true"] img { opacity: 0.55; }
.prod-card__cycle { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 clamp(8px, 1vw, 14px); }
.prod-card__variant { flex: 1; min-width: 0; text-align: center; font-size: 0.8125rem; line-height: 1.35; color: var(--c-ink-2); }
.prod-card__count { display: block; margin-top: 1px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.prod-card__arrow {
  position: relative;
  z-index: 2;   /* above the card's own link */
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.prod-card__arrow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.prod-card__arrow .icon { position: relative; width: 15px; height: 15px; }
.prod-card__arrow:hover::before { border-color: var(--c-ink); }
.prod-card__arrow:active::before { transform: scale(0.94); background: var(--c-surface-2); }
.prod-card__arrow:focus-visible { outline: none; }
.prod-card__arrow:focus-visible::before { border-color: var(--c-ink); box-shadow: var(--focus-ring); }
.no-js .prod-card__arrow { visibility: hidden; }   /* without JavaScript the first tile and its name stay */
.prod-card--tiles .prod-card__body { padding-top: 8px; }
@media (max-width: 639.98px) {
  /* one card a row: the tile area is a little wider than tall, so a card is not a whole screen of picture */
  .prod-card__tile { aspect-ratio: 5 / 4; }
}

/* the product page: a tile slide shows the whole tile on white (the other slides fill their frame) */
.pdp__frame--tile { background: #fff; }
.pdp__frame--tile > img { object-fit: contain; }

/* a finish preview that a tile names (the timber veneers, the wood wool colours): round swatch buttons, 44px to tap */
.finish-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 -4px; }
.finish-swatch {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.finish-swatch img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-2);
  outline: 1px solid rgba(30, 35, 39, 0.12);
  outline-offset: -1px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.finish-swatch:hover img { transform: scale(1.06); }
.finish-swatch[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-ink); }
.finish-swatch:focus-visible { outline: none; }
.finish-swatch:focus-visible img { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 5px var(--c-accent); }

@media print {
  .tabs__list, .pdp__thumbs, .colour-pick, .variant-pick, .finish-pick, .prod-card__arrow, .hear__player, .hear__fallback, .pdp__hint { display: none !important; }
  .tabs__panel[hidden] { display: block !important; }
  .tabs.is-tabbed .tabs__heading { position: static !important; width: auto; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; white-space: normal; }
}

/* T-100 begin ===============================================================
   Illustrative images (user, 23 Oct 2026: "make it like * and show the info at the bottom"). A render, an AI picture
   or a 3D model carries one small, low-contrast asterisk: at the end of its caption (.ill-cap: the star is drawn by
   CSS, so the caption's text stays as written and scripts can swap it) or, where the picture has no caption, in a
   corner of its frame (.ill-mark, inside a positioned box). A page with any of them ends its main content with one
   footnote (.ill-note, small type above the footer), written by the build (concept) or by the theme's page filter
   (WordPress, inc/illustrative.php). The alt text is unchanged and still says what the picture is. Real photos get
   no asterisk. One block, the same in the three sites' CSS.
   ========================================================================== */
.ill-cap::after,
.ill-cap--last > :last-child::after {
  content: "*";
  content: "*" / "";
  margin-left: 0.06em;
  font-style: normal;
  font-weight: 400;
  color: inherit;
  opacity: 0.72;
}
.ill-cap--last::after { content: none; }  /* a flex caption: the star follows its last text, not the box */
.ill-mark {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  user-select: none;
}
.ill-note {
  margin-block: 0;
  padding-block: 20px 24px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.ill-note__mark { margin-right: 0.2em; }
@media print {
  .ill-mark { color: #000; }
}
/* Express Acoustics: a render on a white or pale ground (the flat product tiles, the colour studio) takes the ink star;
   the colour studio's frame is positioned for it; a solution tile has its arrow top right, so its star sits top left. */
.ill-mark--ink { color: var(--c-muted); text-shadow: none; opacity: 0.8; }
.colour-studio__frame { position: relative; }
.space-tile__mark { top: 16px; right: auto; bottom: auto; left: 18px; }
.hub-offices__media { position: relative; }
/* T-100 end */