/* ==========================================================================
   Express Facades: 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 Facades tokens (they replace the Group defaults in main.css);
   2. type and colour adjustments of shared components;
   3. the parts only this site has: the hero with its spec strip, the proof
      strip, system cards with section drawings, the SFS band, the buy routes,
      the factory band, drawing sheets, specification tables, test results,
      the bracket table, RAL swatches and the downloads hub.
   Look: an aluminium-grey page, graphite ink, brass from the laurel logo used
   sparingly; Archivo (semi-expanded for headings) with IBM Plex Mono for
   technical labels. Never the Group lime or the Group type pairing.
   Shape rule (same family): buttons and chips are pills; photos and panels
   24 to 28px; cards 20px; drawing sheets 16px; inputs 12px; swatches 10px.
   ========================================================================== */

/* 1. Tokens
   ----------------------------------------------------------------------- */
:root {
  --c-bg: #F2F2EF;            /* aluminium grey: page background */
  --c-surface: #FFFFFF;       /* cards, forms, drawing sheets */
  --c-surface-2: #E7E7E3;     /* tags, tinted panels (muted text 5.1:1) */
  --c-ink: #1C2024;           /* graphite: text and primary buttons (14.6:1) */
  --c-ink-2: #2A2F35;
  --c-text-2: #41464C;        /* secondary body text (8.5:1) */
  --c-muted: #5A6067;         /* labels and captions (5.7:1) */
  --c-line: #DCDCD7;
  --c-line-2: #C7C8C2;
  --c-field: #85898E;         /* form field borders (3.5:1 on white) */
  --c-accent: #C9A54E;        /* brass from the laurel: fills behind graphite only (7:1) */
  --c-accent-hover: #D5B465;
  --c-accent-ink: #7A5D14;    /* brass for text and links on light (5.5:1) */
  --c-accent-soft: #F1EBDA;   /* brass wash: CTA band, success states */
  --c-accent-line: #E2D3A8;
  --c-dark: #1E2226;          /* graphite panels: flagship, SFS band, footer */
  --c-dark-2: #282D32;
  --c-on-dark: #F0F0EC;
  --c-on-dark-muted: #AEB3B8; /* 7.6:1 on graphite */
  --c-error: #B42318;

  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-serif: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wd-head: 112%;            /* Archivo width axis for headings */

  --fs-display: clamp(2.375rem, 1.6rem + 2.4vw, 3.875rem);           /* 38 to 62px */
  --fs-h2: clamp(1.875rem, 1.35rem + 2vw, 3.125rem);                 /* 30 to 50px */

  --r-xl: 26px;
  --r-lg: 22px;
  --r-md: 18px;
  --r-sheet: 16px;
  --shadow-soft: 0 1px 2px rgba(28, 32, 36, 0.05), 0 12px 32px -16px rgba(28, 32, 36, 0.18);
  --shadow-lift: 0 2px 4px rgba(28, 32, 36, 0.06), 0 24px 48px -24px rgba(28, 32, 36, 0.3);
}

/* 2. Type and shared components, adjusted to this site
   ----------------------------------------------------------------------- */
body { font-feature-settings: "ss01" 0; letter-spacing: -0.003em; }
::selection { background: var(--c-accent); color: var(--c-ink); }

.section-title,
.page-hero__title,
.cta-band__title,
.flagship__title,
.f-hero__title,
.menu__lead a,
.project-card__title,
.feature__title,
.sys-card__title {
  font-stretch: var(--wd-head);
}
.section-title { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.page-hero__title { font-weight: 600; letter-spacing: -0.035em; }

/* Accent words: the lighter weight of the same family, in graphite grey (no serif) */
.accent {
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 300;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: -0.03em;
  color: var(--c-muted);
}
.flagship .accent,
.sfs-band .accent,
.route-card--dark .accent { color: var(--c-on-dark-muted); }

/* Mono labels: the technical voice of the site */
.mono { font-family: var(--f-mono); }

.eyebrow {
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.eyebrow::before {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c-accent);
  box-shadow: none;
}
.eyebrow--light { color: var(--c-on-dark); }

.caption { font-size: 0.84375rem; }

.text-link:hover { color: var(--c-accent-ink); }
.text-link--light { color: var(--c-on-dark); text-decoration-color: rgba(255, 255, 255, 0.35); }
.text-link--light:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* Buttons: graphite pill with a brass circle; brass pill with a graphite circle */
.btn { font-weight: 600; letter-spacing: -0.01em; }
.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: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent-hover); }
.btn--outline { border-color: rgba(28, 32, 36, 0.24); }
.btn--outline .btn__icon { background: var(--c-ink); color: #fff; }
.btn--light { background: #fff; color: var(--c-ink); }
.btn--light .btn__icon { background: var(--c-accent); color: var(--c-ink); }
.round-icon { background: var(--c-accent); color: var(--c-ink); }

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

.tbc {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  vertical-align: 0.1em;
}

/* Facts lists: mono labels */
.facts dt,
.flagship .facts dt { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Header (T-063, director 16 Oct): the company's logo lockup, the laurel E over EXPRESS FACADES & MANUFACTURINGS LTD,
   from its own files, never redrawn or recoloured (assets/img/brand/).
   T-088 (director, 21 Oct): on the light inner-page bar the logo read differently from Home, where it lies on the
   photos (the pale gold laurel washed out on white, the name turned black, the logo smaller). The bar is now graphite
   on every page, so the screen always shows the dark-ground logo, gold laurel and white name, at the Home size:
   50px on phones, 66px from 768px, 76px from 1024px (46, 58 and 64 once compact). The light-ground logo is printed
   only. On Home the header still lies transparent over the photos (.site-header--over, section 3). */
.site-header__bar,
.site-header.is-compact .site-header__bar {
  border-color: rgba(255, 255, 255, 0.07);
  background: var(--c-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header__bar { height: 66px; padding-left: 16px; }
.site-header.is-compact .site-header__bar { height: 60px; }
@media (prefers-reduced-transparency: reduce) {
  .site-header__bar { background: var(--c-dark); }
}
.brand--logo { display: grid; flex: none; gap: 0; min-height: 44px; }
.brand__logo {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: 50px;
  transition: height 0.4s var(--ease);
}
@media screen {
  .brand__logo--on-light { display: none; }
}
.site-header.is-compact .brand__logo { height: 46px; }
.primary-nav__item + .primary-nav__item::before { content: ""; width: 1px; height: 14px; margin: 0 14px; background: rgba(255, 255, 255, 0.28); }
.primary-nav__link { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; color: var(--c-on-dark); }
.primary-nav__link::after { background: var(--c-accent); height: 3px; border-radius: 0; bottom: 4px; }
.header-phone { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; color: var(--c-on-dark); border-color: rgba(255, 255, 255, 0.3); }
.header-phone:hover { border-color: #fff; color: #fff; }
.site-header .header-cta,
.site-header .menu-toggle { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.site-header .header-cta:hover,
.site-header .menu-toggle:hover { background: var(--c-dark-2); }
.site-header :focus-visible { outline-color: #fff; }
@media (min-width: 768px) {
  .site-header__bar { height: 84px; padding-left: 18px; }
  .site-header.is-compact .site-header__bar { height: 72px; }
  .brand__logo { height: 66px; }
  .site-header.is-compact .brand__logo { height: 58px; }
}
@media (min-width: 1024px) {
  .site-header__bar { height: 92px; }
  .site-header.is-compact .site-header__bar { height: 80px; }
  .brand__logo { height: 76px; }
  .site-header.is-compact .brand__logo { height: 64px; }
  .site-header__actions::before { background: rgba(255, 255, 255, 0.22); }
  .header-phone, .header-phone:hover { border-color: transparent; }
  .header-phone:hover { color: var(--c-accent); }
}
@media (max-width: 519.98px) {
  .header-phone { width: 44px; padding: 0; border-radius: 50%; }
  .header-phone .icon { display: block; }
  .header-phone__number { display: none; }
}
/* The taller bar: the sticky section nav keeps its gap under the compact header (pages.css sets 76 and 86px) */
.page-inner { --sticky-top: 80px; }
@media (min-width: 768px) {
  .page-inner { --sticky-top: 96px; }
}
@media (min-width: 1024px) {
  .page-inner { --sticky-top: 104px; }
}
/* The menu panel's top (T-088): the header bar again, graphite with the same logo at the same size, lying where the
   header bar lies, so opening the menu leaves the logo where it was */
.menu__panel { padding-top: 10px; }
.menu__top {
  height: 66px;
  margin-inline: calc(max(8px, var(--gutter) - 12px) - var(--gutter));
  padding: 0 8px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-pill);
  background: var(--c-dark);
}
.menu__top .brand__logo { height: 50px; }
.menu__close { border-color: rgba(255, 255, 255, 0.3); background: transparent; color: var(--c-on-dark); }
.menu__close:hover { border-color: #fff; color: #fff; }
.menu__top :focus-visible { outline-color: #fff; }
@media (min-width: 768px) {
  .menu__panel { padding-top: 12px; }
  .menu__top { height: 84px; padding-left: 18px; }
  .menu__top .brand__logo { height: 66px; }
}
@media (min-width: 1024px) {
  .menu__panel { padding-top: 12px; }
  .menu__top { height: 92px; }
  .menu__top .brand__logo { height: 76px; }
}

/* Menu */
.menu__label { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.menu__lead a { font-weight: 600; letter-spacing: -0.035em; }
.menu__small--systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin-top: 14px; }

/* Footer */
.footer-logo { display: inline-block; }
.footer-logo img { width: 200px; height: auto; }
.site-footer__heading { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.site-footer__address { font-size: var(--fs-xs); }

/* 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).
   A TBC logo (staging only; WordPress leaves it out live) carries the TBC marker on its corner. */
.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: 10px;
  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-family: var(--f-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: center;
  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);
  line-height: 1.4;
  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; }
}

.mobile-bar { background: rgba(242, 242, 239, 0.95); }

/* Pills on photos: graphite */
.media-label,
.flagship__label { background: rgba(28, 32, 36, 0.82); }

/* Flagship */
.flagship__kicker { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.flagship__kicker::before { border-radius: 2px; }
.flagship__subtitle { font-family: var(--f-sans); font-style: normal; font-weight: 300; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.flagship__status { font-family: var(--f-sans); letter-spacing: 0; text-transform: none; }

/* Choice and check marks recoloured for this site */
.choice input:checked + span::before {
  background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23C9A54E' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.section--flush-bottom { padding-bottom: 0; }
.section--tint { background: var(--c-surface-2); }

/* 3. Home hero (T-063, director 16 Oct: "big images, swapping", as on the old site and the Group's full-bleed hero)
   Our project photos fill a full-bleed stage, min(100svh, 940px) high (the screen above the phone bar below 768px),
   and cross-fade by themselves (section 31). The header lies transparent over the stage with the dark-ground logo and
   white links, and turns back into the light bar once the stage has scrolled under it (.is-solid, set by the script in
   the head). The eyebrow, H1, lead and buttons sit bottom left in white; the caption, steps and pause bottom right
   from 1024px, under the text below that. Contrast: a soft shade lies behind each block of text only (solid to the
   stage's edge, eased out above and beside the text), one at the top behind the header, and an even 8% veil, so the
   rest of each photo stays bright; every text passes WCAG AA on every photo (tasks/T-063, Log). The proof figures and
   "Trusted by" follow under the stage. Without JavaScript: the first photo and its caption, the light header bar.
   ----------------------------------------------------------------------- */
.f-hero {
  --hero-head: 76px;          /* the header over the stage: 10px + the 66px bar (12px + 84px from 768, + 92px from 1024) */
  --hero-shade: 13 13 12;     /* the shades' colour, as RGB channels */
  --hero-veil: 0.08;          /* the even veil over every photo, under the shades */
  --bottom-ui: 0px;           /* the phone bar under the stage, below 768px */
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
.f-hero__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(calc(100vh - var(--bottom-ui)), 940px);
  min-height: min(calc(100svh - var(--bottom-ui)), 940px);
  padding: calc(var(--hero-head) + clamp(28px, 6vh, 72px)) 0 clamp(14px, 2.4vw, 34px);
  background: #2A2E33;
  color: #fff;
  touch-action: pan-y;
}
.f-hero__grid { display: grid; gap: clamp(18px, 3vh, 30px); align-items: end; }
.f-hero__title {
  font-size: clamp(2.375rem, 1.55rem + 2.75vw, 4.125rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: #fff;
}
/* "made in Rainham" on its own line at every width (as it falls with Archivo anyway), so the headline keeps its line
   count while the web font swaps in: the text block sits at the stage's foot, and one line more or less would move it */
.f-hero__title .accent { display: block; color: #fff; }
.f-hero__lead {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 31em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: #fff;
}
.f-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.6vw, 30px); }
/* The old site's line above the H1 (director audit S-07) */
.f-hero__eyebrow { margin-bottom: clamp(14px, 1.6vw, 22px); color: #fff; }
.f-hero__content { max-width: 48rem; }
.f-hero__content,
.f-hero .hreel__captions { text-shadow: 0 1px 2px rgb(var(--hero-shade) / 0.18); }
.f-hero__actions .btn { text-shadow: none; }
/* Buttons on the photos: the graphite one keeps a white hairline; the outline one is white glass */
.f-hero .btn--primary { border-color: rgba(255, 255, 255, 0.22); }
.f-hero .btn--outline {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.f-hero .btn--outline .btn__icon { background: #fff; color: var(--c-ink); }
.f-hero .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.f-hero__stage :focus-visible { outline-color: #fff; }

/* The photos: the frame lies on the stage (its ancestors up to the stage stay static), behind everything else */
.f-hero__media,
.f-hero .hreel { position: static; min-width: 0; }
.f-hero__content,
.f-hero .hreel > :not(.hreel__frame) { position: relative; z-index: 1; }

/* The shades. One at the top behind the header's links (solid to the top edge, eased out below the bar); one behind
   the text (solid to the left and bottom edges, eased out above the eyebrow and right of the widest line); one behind
   the caption, steps and button (solid to the right and bottom edges, eased out above and to the left). The ramps are
   eased (smoothstep), so no edge shows. */
.f-hero__stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(var(--hero-head) + clamp(90px, 14vh, 150px));
  pointer-events: none;
  --t: calc(var(--hero-head) - 6px);
  background: linear-gradient(to bottom,
    rgb(var(--hero-shade) / var(--hero-top-a, 0.6)) 0,
    rgb(var(--hero-shade) / var(--hero-top-a, 0.6)) var(--t),
    rgb(var(--hero-shade) / calc(var(--hero-top-a, 0.6) * 0.84)) calc(var(--t) + (100% - var(--t)) * 0.25),
    rgb(var(--hero-shade) / calc(var(--hero-top-a, 0.6) * 0.5)) calc(var(--t) + (100% - var(--t)) * 0.5),
    rgb(var(--hero-shade) / calc(var(--hero-top-a, 0.6) * 0.16)) calc(var(--t) + (100% - var(--t)) * 0.75),
    rgb(var(--hero-shade) / 0) 100%);
}
.f-hero__content::before,
.f-hero .hreel__captions::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: rgb(var(--hero-shade) / var(--hero-shade-a, 0.58));
  -webkit-mask-image: var(--hero-mask-x), var(--hero-mask-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--hero-mask-x), var(--hero-mask-y);
  mask-composite: intersect;
}
.f-hero__content::before {
  --fx: clamp(120px, 18vw, 300px);
  --fy: clamp(90px, 14vh, 160px);
  top: calc(-1 * var(--fy));
  right: calc(-1 * var(--fx));
  bottom: -240px;
  left: -50vw;
  --hero-mask-x: linear-gradient(to left, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.16) calc(var(--fx) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fx) * 0.5), rgb(0 0 0 / 0.84) calc(var(--fx) * 0.75), #000 var(--fx));
  --hero-mask-y: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.16) calc(var(--fy) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fy) * 0.5), rgb(0 0 0 / 0.84) calc(var(--fy) * 0.75), #000 var(--fy));
}
.f-hero .hreel__captions::before {
  --hero-shade-a: 0.66;       /* a little more: the step hairlines need 3:1 too */
  --fx: clamp(90px, 12vw, 200px);
  --fy: clamp(70px, 10vh, 130px);
  top: calc(-1 * var(--fy));
  right: -50vw;
  bottom: -240px;
  left: calc(-1 * var(--fx));
  --hero-mask-x: linear-gradient(to right, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.16) calc(var(--fx) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fx) * 0.5), rgb(0 0 0 / 0.84) calc(var(--fx) * 0.75), #000 var(--fx));
  --hero-mask-y: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.16) calc(var(--fy) * 0.25), rgb(0 0 0 / 0.5) calc(var(--fy) * 0.5), rgb(0 0 0 / 0.84) calc(var(--fy) * 0.75), #000 var(--fy));
}

/* Phones and tablets: the caption and the button side by side under the text, the steps under them */
@media (max-width: 1023.98px) {
  .f-hero__content { max-width: 40rem; }
  /* below 1024 the text and the controls are one column: one shade behind both, full width; the step hairlines are
     a little brighter on it (3:1 against the shade) */
  .f-hero__content::before { right: -50vw; --hero-mask-x: linear-gradient(#000, #000); }
  .f-hero .hreel__captions::before { display: none; }
  .f-hero .hreel__step::before { background: rgba(255, 255, 255, 0.68); }
}
@media (max-width: 767.98px) {
  /* Phones: the stage ends where the phone bar starts; the header's shade is lighter (only its round buttons and the
     logo lie on it, no text) */
  .f-hero { --bottom-ui: calc(76px + env(safe-area-inset-bottom)); --hero-top-a: 0.44; }
}
@media (max-width: 639.98px) {
  .f-hero .hreel__by { display: none; }
}
/* Very narrow phones: the headline a size down (four lines, not five) and the eyebrow on one line */
@media (max-width: 379.98px) {
  .f-hero__title { font-size: 2rem; }
  .f-hero__eyebrow { font-size: 0.6875rem; letter-spacing: 0.06em; }
}
@media (min-width: 768px) {
  .f-hero { --hero-head: 96px; }
}
@media (min-width: 1024px) {
  .f-hero { --hero-head: 104px; }
  .f-hero__grid {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 22rem);
    gap: clamp(32px, 5vw, 96px);
  }
}

/* The header over the stage (Home, with JavaScript): no bar, the dark-ground logo, white links. Fixed, so the header
   changing back into the light bar never moves the page. Without JavaScript it stays the light bar. */
.site-header--over { position: fixed; top: 0; left: 0; right: 0; }
.js .site-header--over:not(.is-solid) .site-header__bar {
  height: 66px;
  /* the logo's left edge on the text's left edge (the page gutter) */
  padding-left: calc(var(--gutter) - max(8px, var(--gutter) - 12px));
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.js .site-header--over:not(.is-solid) .primary-nav__link,
.js .site-header--over:not(.is-solid) .header-phone { color: #fff; }
.js .site-header--over:not(.is-solid) .primary-nav__item + .primary-nav__item::before { background: rgba(255, 255, 255, 0.4); }
.js .site-header--over:not(.is-solid) .header-phone { border-color: rgba(255, 255, 255, 0.55); }
.js .site-header--over:not(.is-solid) .header-phone:hover { border-color: #fff; color: #fff; }
.js .site-header--over:not(.is-solid) .site-header__actions::before { background: rgba(255, 255, 255, 0.4); }
.js .site-header--over:not(.is-solid) .header-cta,
.js .site-header--over:not(.is-solid) .menu-toggle { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.js .site-header--over:not(.is-solid) :focus-visible { outline-color: #fff; }
@media (min-width: 768px) {
  .js .site-header--over:not(.is-solid) .site-header__bar { height: 84px; }
}
@media (min-width: 1024px) {
  .js .site-header--over:not(.is-solid) .site-header__bar { height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand__logo { transition: none; }
}
@media print {
  .site-header--over { position: static; }
  .brand__logo--on-dark { display: none !important; }
  .f-hero__stage { min-height: 0; padding: 0; background: none; color: inherit; }
  .f-hero__stage::before, .f-hero__content::before, .f-hero .hreel__captions::before,
  .hreel__frame, .hreel__steps, .hreel__toggle { display: none !important; }
  .f-hero__title, .f-hero__title .accent, .f-hero__eyebrow, .f-hero__lead, .hreel__captions, .hreel__name {
    color: #000 !important;
    text-shadow: none !important;
  }
}
/* Proof strip: four facts under the hero */
.proof { padding-bottom: clamp(36px, 4vw, 56px); }
.proof + .section { padding-top: 0; }
.proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-ink);
}
.proof__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 14px 4px 0;
}
.proof__item + .proof__item { border-left: 0; }
.proof__value {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  font-weight: 600;
  font-stretch: var(--wd-head);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.proof__plus { font-weight: 300; color: var(--c-muted); }
.proof__label {
  max-width: 26ch;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-muted);
}
@media (min-width: 900px) {
  .proof__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof__item { padding: 20px 24px 4px 0; }
  .proof__item + .proof__item { padding-left: 24px; border-left: 1px solid var(--c-line); }
}
@media (max-width: 899.98px) {
  .proof__item:nth-child(n + 3) { margin-top: 10px; border-top: 1px solid var(--c-line); }
  .proof__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--c-line); }
}

/* "Trusted by" (T-061): the clients' own logos at the same optical height (each file's --s, from its proportions:
   tools/logos/make_logos.py), never stretched; since T-094 in the firms' own colours, as each firm issues its logo,
   at full strength (no ink, opacity or filter). Below 1280px they wrap and centre at their own size (1024 to 1279px:
   two rows of four); from 1280px one row beside the label. */
.proof:has(+ .clients) { padding-bottom: 0; }
.clients { padding: 4px 0 clamp(36px, 4vw, 56px); }
.clients + .section { padding-top: 0; }
.clients__inner {
  display: grid;
  gap: 14px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--c-line);
}
.clients__label {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-muted);
}
.clients__list {
  --logo-h: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 32px;
}
.clients__item {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}
.clients__item img {
  display: block;
  width: auto;
  height: calc(var(--logo-h) * var(--s, 1));
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 640px) {
  .clients__list { --logo-h: 28px; gap: 14px 44px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .clients__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 18px 32px; }
}
@media (min-width: 1280px) {
  .clients__inner { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 0; }
  .clients__label { text-align: left; }
  .clients__list { --logo-h: 30px; flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
}

/* 4. System cards
   ----------------------------------------------------------------------- */
.sys-grid { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.sys-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), border-color 0.4s var(--ease);
}
.sys-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--c-line-2); }
.sys-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: 8px 8px 0;
  border-radius: 14px;
  background: var(--c-surface-2);
}
.sys-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sys-card:hover .sys-card__media img { transform: scale(1.04); }
/* Drawing cards: the CAD sheet on white, cropped to a detail */
.sys-card--drawing .sys-card__media {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.sys-card--drawing .sys-card__media img {
  mix-blend-mode: multiply;
  transform: scale(var(--zoom, 1.8));
  transform-origin: var(--focus, 50% 50%);
}
.sys-card--drawing:hover .sys-card__media img { transform: scale(calc(var(--zoom, 1.8) * 1.04)); }
.sys-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.sys-card__family {
  font-family: var(--f-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.sys-card__title { font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.sys-card__title a { color: var(--c-ink); text-decoration: none; }
.sys-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sys-card__text { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.sys-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.sys-card__specs dt {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sys-card__specs dd { margin-top: 2px; font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.sys-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.sys-card__more .round-icon { width: 34px; height: 34px; transition: transform 0.5s var(--ease); }
.sys-card:hover .sys-card__more .round-icon { transform: rotate(45deg); }
@media (min-width: 640px) {
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 5. Drawing sheet: a company CAD detail on white with a mono title block
   ----------------------------------------------------------------------- */
.drawing-sheet { display: grid; gap: 0; }
.drawing-sheet__paper {
  position: relative;
  padding: clamp(14px, 2vw, 28px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: #fff;
  background-image:
    linear-gradient(rgba(28, 32, 36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 32, 36, 0.045) 1px, transparent 1px);
  background-size: 20px 20px;
}
.drawing-sheet__paper img { width: 100%; height: auto; mix-blend-mode: multiply; }
.drawing-sheet__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--c-line);
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.drawing-sheet__ref {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.drawing-sheet--bordered .drawing-sheet__paper,
.drawing-sheet--bordered .drawing-sheet__caption { box-shadow: inset 0 0 0 1px var(--c-line); }
.drawing-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 260px;
  padding: 28px;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-sheet);
  background:
    linear-gradient(rgba(28, 32, 36, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(28, 32, 36, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--c-surface);
  text-align: center;
  color: var(--c-muted);
}
.drawing-placeholder .icon { width: 28px; height: 28px; color: var(--c-ink-2); }
.drawing-placeholder p { max-width: 34ch; font-size: var(--fs-small); }

/* 6. SFS band (graphite panel)
   ----------------------------------------------------------------------- */
.sfs-band {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(22px, 3.6vw, 52px);
  border-radius: var(--r-xl);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.sfs-band .section-title { color: #fff; }
.sfs-band__text { margin-top: 18px; max-width: 36em; color: var(--c-on-dark-muted); }
.sfs-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.sfs-band__drawing { align-self: center; }
.sfs-band__drawing .drawing-sheet__paper { border-radius: 14px 14px 0 0; }
.sfs-band__drawing .drawing-sheet__caption { border-radius: 0 0 14px 14px; }
@media (min-width: 1024px) {
  .sfs-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}

/* Spec chips: four mono facts in a grid */
.spec-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-line);
}
.spec-chips > div { padding: 12px 14px; background: var(--c-surface); }
.spec-chips dt {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.spec-chips dd { margin-top: 3px; font-family: var(--f-mono); font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.spec-chips--dark { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12); }
.spec-chips--dark > div { background: var(--c-dark); }
.spec-chips--dark dt { color: var(--c-on-dark-muted); }
.spec-chips--dark dd { color: var(--c-on-dark); }
@media (min-width: 640px) {
  .spec-chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 7. Buy routes: supply only, or supply and install
   ----------------------------------------------------------------------- */
.routes { display: grid; gap: clamp(24px, 3vw, 40px); }
.routes__head .text-link { margin-top: 14px; }
.routes__cards { display: grid; gap: 14px; }
.route-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.route-card__for {
  font-family: var(--f-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.route-card__title { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 600; font-stretch: var(--wd-head); line-height: 1.05; letter-spacing: -0.03em; }
.route-card__text { color: var(--c-text-2); }
.route-card__list { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.route-card__list li { display: flex; gap: 10px; font-size: var(--fs-small); }
.route-card__list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; border-radius: 2px; background: var(--c-accent); }
.route-card--dark { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-on-dark); }
.route-card--dark .route-card__for { color: var(--c-accent); }
.route-card--dark .route-card__text { color: var(--c-on-dark-muted); }
.route-card--dark .route-card__list { border-top-color: rgba(255, 255, 255, 0.14); }
@media (min-width: 768px) {
  .routes__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .routes { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

/* 8. Factory band: full photo with a card
   ----------------------------------------------------------------------- */
.factory-band {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-dark);
}
.factory-band__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.factory-band__film {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  background: rgba(28, 32, 36, 0.82);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
}
.factory-band__film .icon {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
}
.factory-band__card { padding: clamp(22px, 3vw, 40px); background: var(--c-surface); }
.factory-band__text { margin-top: 16px; color: var(--c-text-2); }
.factory-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.factory-band__caption { margin-top: 12px; }
@media (min-width: 1024px) {
  .factory-band { min-height: 560px; align-items: end; }
  .factory-band__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .factory-band__film { left: auto; right: 24px; top: 24px; }
  .factory-band__card {
    position: relative;
    max-width: 540px;
    margin: 28px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
  }
}

/* Project cards: 3 across */
.project-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-card__meta { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 1024px) {
  .project-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid--3 .project-card { grid-column: auto; }
  .project-grid--3 .project-card__media { height: auto; aspect-ratio: 4 / 3; }
}
.project-card .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .project-card .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* T-101 begin: "On site" on a system page, two or three project photos, each a link to its project page; the facts
   beside a system's downloads (spec chips, one column) */
.site-photos { display: grid; gap: 14px; }
.site-photo__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.site-photo__link:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.site-photo__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-line); }
.site-photo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.site-photo__link:hover .site-photo__media img { transform: scale(1.03); }
.site-photo__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  padding: 14px 14px 14px 20px;
}
.site-photo__name { font-weight: 600; }
.site-photo__meta { grid-column: 1; font-size: var(--fs-xs); color: var(--c-muted); }
.site-photo__body .round-icon { grid-column: 2; grid-row: 1 / span 2; }
.site-photo__link:hover .round-icon { transform: rotate(45deg); }
.site-photos__credit { margin-top: 10px; }
@media (min-width: 640px) {
  .site-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .site-photo__media img, .site-photo__link .round-icon { transition: none; }
}
.spec-chips--downloads { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-top: 20px; }
/* Without the test section, Downloads can follow the tinted specification directly: give it its top space back */
.section--tint + #downloads.section--flush-top { padding-top: var(--section-y); }
@media print {
  .site-photo { break-inside: avoid; }
}
/* T-101 end */

/* 9. Technical block on the homepage
   ----------------------------------------------------------------------- */
.tech-grid { display: grid; gap: 14px; }
.tech-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
}
.tech-card__title { font-size: 1.375rem; font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.02em; line-height: 1.15; }
.tech-card__text { font-size: var(--fs-small); color: var(--c-text-2); }
.tech-card--docs .btn { align-self: flex-start; margin-top: 8px; }
.tech-card--test { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tech-card--test:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tech-card--test .tech-card__text { color: var(--c-on-dark-muted); }
.test-figure { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.test-figure dt { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-on-dark-muted); }
.test-figure dd { margin-top: 6px; font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem); font-weight: 600; font-stretch: 120%; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.test-figure dd span { margin-left: 8px; font-family: var(--f-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--c-accent); }
.tech-card__more { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: var(--fs-xs); font-weight: 600; }
.tech-card__more .round-icon { width: 34px; height: 34px; }
.tech-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; padding-top: 6px; }
@media (min-width: 768px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-card--docs { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .tech-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
  .tech-card--docs { grid-column: auto; }
}

/* Compact document rows */
.doc-mini { display: grid; margin-top: 6px; border-top: 1px solid var(--c-line); }
.doc-mini__item { border-bottom: 1px solid var(--c-line); }
.doc-mini__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 4px 14px;
  min-height: 52px;
  padding: 10px 2px;
  color: var(--c-ink);
  text-decoration: none;
}
.doc-mini__type {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.doc-mini__title { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.doc-mini__meta { font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-muted); white-space: nowrap; }
.doc-mini__link .icon { width: 18px; height: 18px; color: var(--c-ink); transition: transform 0.4s var(--ease); }
.doc-mini__link:hover .doc-mini__title { color: var(--c-accent-ink); }
.doc-mini__link:hover .icon { transform: translateY(2px); }
@media (min-width: 640px) {
  .doc-mini__link { grid-template-columns: 9rem minmax(0, 1fr) auto 20px; }
  .doc-mini__type { grid-column: auto; }
}

/* RAL swatch strip */
.ral-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ral-strip__chip {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(28, 32, 36, 0.12);
}
.ral-strip__note { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.04em; color: var(--c-muted); }

/* Group cards: plates in graphite */
.group-card__plate { background: var(--c-dark); }

/* CTA band: a white drawing sheet with a brass rule */
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background:
    linear-gradient(rgba(28, 32, 36, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(28, 32, 36, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--c-surface);
}
.cta-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-accent); }
.cta-band__title { font-stretch: var(--wd-head); letter-spacing: -0.035em; }
.cta-band__phone { font-family: var(--f-mono); font-weight: 500; }

/* FAQ */
.faq__item[open] .faq__icon { background: var(--c-accent); border-color: var(--c-accent); }

/* 10. Inner pages: hero additions
   ----------------------------------------------------------------------- */
.page-inner { --fs-page-title: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); }  /* 36 to 64px */
.page-hero__title { max-width: 20ch; }
.page-hero__title .accent { font-size: 1em; line-height: inherit; padding-bottom: 0; }
.page-hero__subtitle { font-family: var(--f-sans); font-style: normal; font-weight: 300; }
.breadcrumb { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.spec-chips--hero { margin-top: auto; }
.page-hero__content .spec-chips--hero { margin-top: 30px; }
@media (min-width: 640px) {
  .spec-chips--hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .page-hero__content .spec-chips--hero { margin-top: auto; }
  .page-hero__content .page-hero__actions { margin-bottom: 30px; }
  .spec-chips--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.drawing-sheet--hero { align-self: start; }
.drawing-sheet--hero .drawing-sheet__paper { display: grid; place-items: center; min-height: 300px; }

.notice {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px dashed var(--c-line-2);
  border-radius: 14px;
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.notice .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-accent-ink); }

/* 11. Why specify: icon list beside a heading
   ----------------------------------------------------------------------- */
.why { display: grid; gap: clamp(24px, 3vw, 48px); }
.why__list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-line); }
.why__item { display: grid; align-content: start; gap: 10px; padding: clamp(18px, 2vw, 28px); background: var(--c-surface); }
.why__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-ink);
  color: var(--c-accent);
}
.why__icon .icon { width: 22px; height: 22px; }
.why__title { margin-top: 6px; font-size: 1.1875rem; font-weight: 600; font-stretch: var(--wd-head); line-height: 1.2; letter-spacing: -0.02em; }
.why__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }
@media (min-width: 640px) {
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__list--3 .why__item:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .why { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .why__head { position: sticky; top: calc(var(--sticky-top) + 80px); }
  .why__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why__list--3 .why__item:last-child { grid-column: auto; }
}

/* 12. Specification table: grouped rows, mono labels
   ----------------------------------------------------------------------- */
.spec-table { display: grid; gap: 14px; }
.spec-table__group { padding: clamp(18px, 2vw, 26px); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.spec-table__title {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spec-table__rows { display: grid; }
.spec-table__row { display: grid; gap: 4px; padding: 12px 0; }
.spec-table__row + .spec-table__row { border-top: 1px solid var(--c-line); }
.spec-table__row dt { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted); }
.spec-table__row dd { font-size: var(--fs-small); font-weight: 500; line-height: 1.45; }
@media (min-width: 900px) {
  .spec-table { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

/* 13. HHB stand-off table
   ----------------------------------------------------------------------- */
.bracket-split { align-items: start; }
.bracket-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.bracket-table-wrap .caption { padding: 12px 18px 16px; }
.bracket-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bracket-table th,
.bracket-table td { padding: 9px 14px; text-align: right; white-space: nowrap; }
.bracket-table thead th { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); }
.bracket-table thead tr:first-child th { padding-top: 14px; }
.bracket-table thead th[scope="colgroup"] { text-align: center; color: var(--c-ink); }
.bracket-table tbody th { font-weight: 500; text-align: left; }
.bracket-table tbody tr:nth-child(even) { background: #F7F7F5; }
.bracket-table thead tr:first-child th:first-child { text-align: left; vertical-align: bottom; }
@media (min-width: 1024px) {
  .bracket-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* 14. PRO range block (standing seam page)
   ----------------------------------------------------------------------- */
.pro-range { display: grid; gap: 20px; margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--c-line); }
.pro-range__title { font-size: 1.375rem; font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.02em; }
.pro-range__text p { margin-top: 10px; color: var(--c-text-2); }
.pro-range__text a { font-weight: 600; color: var(--c-ink); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .pro-range { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
}
.drawing-sheet--zoom .drawing-sheet__paper img { max-height: 640px; object-fit: contain; }

/* 15. Test results
   ----------------------------------------------------------------------- */
.test-grid { display: grid; gap: 14px; }
.test-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.test-card__type { font-family: var(--f-mono); font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.test-card__title { font-size: 1.375rem; font-weight: 600; font-stretch: var(--wd-head); line-height: 1.15; letter-spacing: -0.02em; }
.test-card__results { display: grid; gap: 1px; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.12); }
.test-card__results > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--c-dark-2); }
.test-card__results dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-on-dark-muted); }
.test-card__results dd { font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 500; color: #fff; }
.test-card__facts { display: grid; gap: 6px; font-size: 0.8125rem; color: var(--c-on-dark-muted); }
.test-card__facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; }
.test-card__facts dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
.test-card__facts dd { color: var(--c-on-dark); }
.test-card__link { margin-top: auto; }
.test-card .text-link { color: var(--c-on-dark); }
.test-card .text-link--icon span { text-decoration-color: rgba(255, 255, 255, 0.35); }
.test-card .text-link--icon .icon { color: var(--c-accent); }
@media (min-width: 640px) {
  .test-card__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 16. Documents: type label, held state
   ----------------------------------------------------------------------- */
.doc__icon { background: var(--c-ink); color: var(--c-accent); }
.doc__type { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.doc__title { margin-top: 2px; }
.doc__meta { font-family: var(--f-mono); font-size: 0.75rem; }
.doc__note { margin-top: 6px; max-width: 46em; font-size: 0.8125rem; color: var(--c-text-2); }
.doc--held { background: var(--c-bg); border-style: dashed; }
.doc--held .doc__icon { background: var(--c-surface-2); color: var(--c-muted); }
.doc--held:hover { box-shadow: none; }
.downloads-split { align-items: start; }
@media (min-width: 1024px) {
  .downloads-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* 17. Buy strip and related links
   ----------------------------------------------------------------------- */
.buy-strip {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.buy-strip__title { font-size: 1.375rem; font-weight: 600; font-stretch: var(--wd-head); line-height: 1.15; letter-spacing: -0.02em; }
.buy-strip__label { font-family: var(--f-mono); font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-ink); }
.buy-strip__item p + p { margin-top: 4px; font-size: var(--fs-small); color: var(--c-text-2); }
.buy-strip .btn { justify-self: start; }
@media (min-width: 1024px) {
  .buy-strip { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr) auto; align-items: center; gap: 28px; }
  .buy-strip__item { padding-left: 24px; border-left: 1px solid var(--c-line); }
}

.related-links__title { margin-bottom: 14px; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.related-links { display: grid; gap: 10px; }
.related-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  min-height: 64px;
  padding: 14px 14px 14px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.related-link:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.related-link__name { font-weight: 600; }
.related-link__text { grid-column: 1; font-size: var(--fs-xs); color: var(--c-muted); }
.related-link .round-icon { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 900px) {
  .related-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gallery-credit { margin-top: 10px; margin-bottom: 24px; }

/* Drawing hero crop and build-up list (systems with no photo yet) */
.page-hero__frame--drawing {
  background:
    linear-gradient(rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.page-hero__frame--drawing img { mix-blend-mode: multiply; transform: scale(var(--zoom, 1.8)); transform-origin: var(--focus, 50% 50%); object-position: var(--focus, 50% 50%); }
.page-hero__media .caption .drawing-sheet__ref { margin-right: 6px; }
.page-hero__media .caption a { color: var(--c-ink); font-weight: 600; text-underline-offset: 3px; }
.drawing-split { display: grid; gap: 20px; }
.buildup-list { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--c-dark); color: var(--c-on-dark); }
.buildup-list__title { font-family: var(--f-mono); font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.buildup-list__items { display: grid; margin-top: 14px; counter-reset: layer; }
.buildup-list__items li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
  line-height: 1.4;
  counter-increment: layer;
}
.buildup-list__items li::before {
  content: counter(layer, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-on-dark-muted);
  padding-top: 2px;
}
.buildup-list__total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.24); font-family: var(--f-mono); font-size: 0.8125rem; color: var(--c-accent); }
@media (min-width: 1024px) {
  .drawing-split--buildup { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

/* 19. SFS page: stud table, components, drawing pair
   ----------------------------------------------------------------------- */
.section-split { align-items: start; }
.stud-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.stud-table-wrap .caption { padding: 12px 18px 16px; }
.stud-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.stud-table th,
.stud-table td { padding: 9px 10px; text-align: center; white-space: nowrap; }
.stud-table thead th { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); }
.stud-table thead th[scope="colgroup"] { color: var(--c-ink); }
.stud-table tbody th { padding-left: 16px; font-weight: 500; text-align: left; }
.stud-table tbody td:nth-last-child(-n+2) { text-align: left; color: var(--c-text-2); }
.stud-table tbody tr + tr { border-top: 1px solid var(--c-line); }
.stud-table .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c-ink); }
.stud-table .dash { display: inline-block; width: 10px; height: 1px; background: var(--c-line-2); vertical-align: middle; }
.components { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--c-dark); color: var(--c-on-dark); }
.components__title { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.components__list { display: grid; margin-top: 12px; }
.components__list > div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.components__list dt { font-weight: 600; font-size: var(--fs-small); }
.components__list dd { font-size: 0.875rem; color: var(--c-on-dark-muted); }
@media (min-width: 1100px) {
  .section-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.drawing-pair { display: grid; gap: 14px; }
@media (min-width: 1024px) {
  .drawing-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.design-chips { margin-top: 18px; }
.test-grid.test-grid--single { max-width: 820px; grid-template-columns: minmax(0, 1fr); }
.buy-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
@media (min-width: 1024px) {
  .buy-strip--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr) auto; }
}
.doc__state--request { border: 1px solid var(--c-line-2); color: var(--c-ink-2); background: var(--c-surface); }
.doc--request .doc__icon { background: var(--c-surface-2); color: var(--c-ink); }

/* 20. Hubs, comparison tables, downloads, testing, colours
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .page-hero--plain .page-hero__actions--end { align-self: end; justify-content: flex-end; margin-top: 0; }
}
.page-hero__lead .text-link { min-height: 0; display: inline; }

.hub-grid { display: grid; gap: 14px; }
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 250px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.hub-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.hub-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c-ink); color: var(--c-accent); }
.hub-card__icon .icon { width: 22px; height: 22px; }
.hub-card__title { margin-top: 8px; font-size: 1.375rem; font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.02em; line-height: 1.15; }
.hub-card__text { font-size: var(--fs-small); color: var(--c-text-2); }
.hub-card__meta { font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-accent); }
.hub-card .round-icon { margin-top: auto; align-self: flex-end; }
.hub-card--dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.hub-card--dark .hub-card__text { color: var(--c-on-dark-muted); }
.hub-card--dark .hub-card__icon { background: var(--c-accent); color: var(--c-ink); }
.ral-strip--mini { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.ral-strip--mini .ral-strip__chip { border-radius: 4px; }
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.compare-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.compare-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--fs-xs); line-height: 1.45; }
.compare-table th,
.compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; }
.compare-table thead th { font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); }
.compare-table tbody tr + tr { border-top: 1px solid var(--c-line); }
.compare-table tbody th { min-width: 150px; font-weight: 600; font-size: var(--fs-small); }
.compare-table tbody th a { color: var(--c-ink); text-underline-offset: 3px; text-decoration-color: var(--c-line-2); }
.compare-table tbody th a:hover { color: var(--c-accent-ink); }
.compare-table .text-link { min-height: 0; font-size: var(--fs-xs); }
.compare-table--docs,
.compare-table--finishes { min-width: 640px; }
/* Phones: the systems comparison as one card per system, each value under its column's name (main.js
   copies the names into data-label); "Not applicable" cells and empty cells are left out (T-029 audit). */
@media (max-width: 767.98px) {
  .js .compare-wrap--stack { overflow: visible; border: 0; border-radius: 0; background: none; }
  .js .compare-table--stack { min-width: 0; }
  .js .compare-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .compare-table--stack tbody,
  .js .compare-table--stack tr,
  .js .compare-table--stack th,
  .js .compare-table--stack td { display: block; }
  .js .compare-table--stack tbody { display: grid; gap: 12px; }
  .js .compare-table--stack tbody tr { padding: 6px 0 10px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
  .js .compare-table--stack tbody tr + tr { border-top: 1px solid var(--c-line); }
  .js .compare-table--stack tbody th { padding: 12px 16px 6px; font-size: var(--fs-body, 1rem); }
  .js .compare-table--stack td { position: relative; min-height: 2.25em; padding: 6px 16px 6px calc(16px + 7.5rem + 12px); }
  .js .compare-table--stack td::before { content: attr(data-label); position: absolute; left: 16px; top: 8px; width: 7.5rem; font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
  .js .compare-table--stack td[data-na],
  .js .compare-table--stack td:empty { display: none; }
}

.dl-groups { display: grid; gap: clamp(28px, 3vw, 44px); }
.dl-group { display: grid; gap: 16px; }
.dl-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 2px solid var(--c-ink); }
.dl-group__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.025em; }
.dl-group__count { font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-muted); }
@media (min-width: 1024px) {
  .dl-group { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .dl-group__head { position: sticky; top: calc(var(--sticky-top) + 80px); display: grid; border-bottom: 0; border-top: 2px solid var(--c-ink); padding: 14px 0 0; }
}

.ask-band {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.ask-band__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.03em; color: #fff; }
.ask-band p { margin-top: 8px; color: var(--c-on-dark-muted); }
.ask-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ask-band .btn--primary { background: var(--c-accent); color: var(--c-ink); }
.ask-band .btn--primary .btn__icon { background: var(--c-ink); color: var(--c-accent); }
.ask-band .text-link { color: var(--c-on-dark); text-decoration-color: rgba(255, 255, 255, 0.35); }
@media (min-width: 900px) {
  .ask-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.test-grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .test-grid.test-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .test-grid.test-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .test-grid--3 .test-card__results { grid-template-columns: minmax(0, 1fr); } }
.fire-split { align-items: start; }
@media (min-width: 1024px) { .fire-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.evidence { display: grid; margin-top: 22px; border-top: 1px solid var(--c-line); }
.evidence > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); }
.evidence dt { font-weight: 600; }
.evidence dd { font-family: var(--f-mono); font-size: 0.78125rem; color: var(--c-text-2); }
.evidence__note { margin-top: 12px; }

.swatch-panel { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--c-line); border-radius: var(--r-xl); background: var(--c-surface); }
.swatch-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 22px; }
.swatch-panel__title { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px 12px; }
.swatch { display: grid; gap: 4px; }
.swatch__chip { aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 12px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(28, 32, 36, 0.12); }
.swatch__code { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; }
.swatch__name { font-size: 0.8125rem; color: var(--c-muted); }

.finish-grid { display: grid; gap: 14px; }
.finish-card { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.finish-card__sample { display: block; height: 120px; border-radius: 14px; }
.finish-card__sample--ppc { background: linear-gradient(135deg, #383E42 0 33%, #A1A1A0 33% 66%, #705335 66%); }
.finish-card__sample--anodised { background: linear-gradient(100deg, #B9BBBC, #E4E5E3 30%, #A9ABAC 55%, #D7D8D6 80%, #BFC1C1); }
.finish-card__title { margin-top: 6px; font-size: 1.5rem; font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.025em; }
.finish-card__text { color: var(--c-text-2); }
.finish-card__facts { display: grid; margin-top: 4px; border-top: 1px solid var(--c-line); }
.finish-card__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); }
.finish-card__facts dt { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted); }
.finish-card__facts dd { font-weight: 600; text-align: right; }
@media (min-width: 768px) { .finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 21. Quote form: three routes, route-only field groups, radio choices
   ----------------------------------------------------------------------- */
.route-fields { display: contents; }
@media (min-width: 640px) {
  .route--3 .route__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.route--3 .route__text { min-height: 64px; font-size: 0.90625rem; }
/* Four routes (quote, samples, visit, documents; T-028 F1-10): two by two at every width */
.route--4 .route__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route--4 .route__text { min-height: 64px; padding: 10px 12px; gap: 10px; font-size: 0.875rem; }
@media (max-width: 359.98px) {
  .route--4 .route__options { grid-template-columns: minmax(0, 1fr); }
}
.choice-list--radio .choice > span::before { border-radius: 50%; }
.choice--radio input:checked + span::before { background: var(--c-ink); box-shadow: inset 0 0 0 4px #fff; }
.field__textarea--short { min-height: 96px; }
.map-card__text { margin-top: 10px; color: var(--c-text-2); font-size: var(--fs-small); }
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.quote-form .tender-form__success h3 { font-stretch: var(--wd-head); }

/* 18. Very narrow phones
   ----------------------------------------------------------------------- */
@media (max-width: 379.98px) {
  .f-hero__actions .btn,
  .sfs-band__actions .btn { white-space: normal; }
  .btn--lg { padding-left: 18px; }
  .proof__value { font-size: 1.25rem; }
}

/* 22. Projects: catalogue note, facts panel action, project hero chips
   ----------------------------------------------------------------------- */
.catalogue__note { margin-top: 16px; }
/* T-057: with fewer facts the panel, stretched to the photo's height, keeps the button (and the print link after it)
   at its foot, as the Group and Acoustics panels keep their note; stacked on phones it sits 20px under the facts. */
.facts-panel__actions { margin-top: auto; padding-top: 20px; }
.facts-panel__title { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.facts-panel__grid dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; }
.project-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.facts-panel__services .chip .tbc { margin-left: 4px; }
.filter-bar__legend,
.filter-bar__label { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* 23. Late pages: routes facts, audiences, factory list, about, legal, 404
   ----------------------------------------------------------------------- */
.route-card__facts { display: grid; margin-top: 4px; border-top: 1px solid var(--c-line); }
.route-card__facts > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.route-card__facts dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.route-card__facts dd { font-size: var(--fs-small); }
.route-card--dark .route-card__facts,
.route-card--dark .route-card__facts > div { border-color: rgba(255, 255, 255, 0.14); }
.route-card--dark .route-card__facts dt { color: var(--c-on-dark-muted); }
.process__title { font-stretch: var(--wd-head); }
@media (min-width: 1100px) {
  .process[style*="--steps: 7"] .process__text { font-size: 0.875rem; }
}

.audience-grid { display: grid; gap: 14px; }
.audience { display: grid; align-content: start; gap: 16px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.audience__title { font-size: 1.5rem; font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.025em; }
.audience .scope-list { margin: 0; }
@media (min-width: 900px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.make-list { display: grid; border-top: 2px solid var(--c-ink); }
/* The name keeps at least 9em and the label wraps beside it (T-028 F4-04: a long label took the whole row and
   the name column collapsed to 0); on phones the label and its chip go under the name. */
.make-list__item { display: grid; grid-template-columns: minmax(9em, 1fr) minmax(0, auto); align-items: center; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line-2); }
.make-list__name { grid-row: span 2; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.02em; color: var(--c-ink); text-decoration: none; }
.make-list__name:hover { color: var(--c-accent-ink); }
.make-list__label { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); justify-self: end; }
.make-list__item .tbc { justify-self: end; }
.make-list__label { text-align: right; }
@media (max-width: 767.98px) {
  .make-list__item { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; }
  .make-list__name { grid-row: auto; }
  .make-list__label, .make-list__item .tbc { justify-self: start; text-align: left; }
}
.factory-band--page .factory-band__img { object-position: 50% 30%; }

.how-list { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--c-dark); color: var(--c-on-dark); }
.how-list__title { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.how-list dl { display: grid; margin-top: 10px; }
.how-list dl > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.how-list dt { font-size: 1.125rem; font-weight: 600; font-stretch: var(--wd-head); }
.how-list dd { font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.details-table { display: grid; border-top: 2px solid var(--c-ink); }
.details-table > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line-2); }
.details-table dt { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); padding-top: 3px; }
.details-table dd { font-weight: 600; }
.details-table a { color: var(--c-ink); text-underline-offset: 3px; }
.person__initials { font-family: var(--f-mono); }
.people--3 .person--note { max-width: 420px; }

.commitments .text-link { margin-top: auto; }
.commitments .why__item { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1100px) { .why__list--4.commitments { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.legal-table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--c-line); border-radius: 14px; }
.legal-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-xs); }
.legal-table th,
.legal-table td { padding: 10px 14px; text-align: left; vertical-align: top; }
.legal-table thead th { font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-2); }
.legal-table tbody tr + tr { border-top: 1px solid var(--c-line); }
.legal__toc-title { font-family: var(--f-mono); font-size: 0.71875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.legal__body .notice { margin: 0 0 24px; }
.legal__body h2 { font-stretch: var(--wd-head); }

.error-page__code { font-family: var(--f-mono); font-weight: 500; }
.error-page__code--icon .icon { width: 1em; height: 1em; color: var(--c-accent-ink); }
.error-page__title { font-stretch: var(--wd-head); }
.person__initials { font-style: normal; }

/* Header fit: very narrow phones and the 1024 to 1199 band */
@media (max-width: 379.98px) {
  .site-header__actions { gap: 6px; }
  .menu-toggle { width: 44px; height: 44px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .primary-nav__item + .primary-nav__item::before { margin: 0 9px; }
  .primary-nav__link { letter-spacing: 0.08em; }
  .site-header__actions::before { margin: 0 6px 0 2px; }
}

/* Grid items that hold scrolling tables must be allowed to shrink */
.legal__inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .legal__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); } }
.split > *,
.drawing-split > *,
.section-split > *,
.bracket-split > * { min-width: 0; }
.stud-table-wrap,
.bracket-table-wrap,
.compare-wrap,
.legal-table-wrap { min-width: 0; max-width: 100%; }
.details-table dd { overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .page-hero__actions .btn,
  .cta-band__actions .btn { white-space: normal; }
}
/* Scroll containers are positioned, so visually hidden cell text stays inside them */
.stud-table-wrap,
.bracket-table-wrap,
.compare-wrap,
.legal-table-wrap { position: relative; }
.drawing-sheet__paper:has(.sfs-band__photo) { padding: 0; overflow: hidden; }
.sfs-band__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 55%; mix-blend-mode: normal !important; }

/* Project: tested band */
.tested-band { display: grid; gap: 12px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-lg); background: var(--c-dark); color: var(--c-on-dark); }
.tested-band__label { font-family: var(--f-mono); font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.tested-band__title { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); font-weight: 600; font-stretch: var(--wd-head); letter-spacing: -0.03em; color: #fff; }
.tested-band__text { max-width: 60em; color: var(--c-on-dark-muted); }
.tested-band .btn { justify-self: start; margin-top: 8px; }
/* The list card spans the row only after an even number of cards; after an odd number it fills the gap beside the last one. */
.why__list--6 .why__item--list:nth-child(odd) { grid-column: 1 / -1; }
.why__bullets { display: grid; gap: 6px; margin-top: 2px; }
.why__bullets li { position: relative; padding-left: 18px; font-size: var(--fs-small); color: var(--c-text-2); }
.why__bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--c-accent); }
@media (min-width: 1100px) { .why__list--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 24. Layout pass (lead, 13 Oct): no holes in the last row of any card grid
   ----------------------------------------------------------------------- */

/* Test cards: head, results, facts, link as grid areas; a wide variant puts the head beside the data */
.test-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "results" "facts" "link"; align-content: start; }
.test-card__head { grid-area: head; display: grid; gap: 10px; align-content: start; }
.test-card__results { grid-area: results; }
.test-card__facts { grid-area: facts; }
.test-card__link { grid-area: link; margin-top: 6px; }
.test-card__figure { display: grid; gap: 6px; margin-top: 8px; }
.test-card__figure-value { font-size: clamp(3.25rem, 2.4rem + 3vw, 5rem); font-weight: 600; font-stretch: 120%; line-height: 0.95; letter-spacing: -0.04em; color: #fff; }
.test-card__figure-unit { margin-left: 8px; font-family: var(--f-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--c-accent); }
.test-card__figure-label { max-width: 26ch; font-size: var(--fs-xs); color: var(--c-on-dark-muted); }
/* An odd last result spans the row when results sit in two columns */
.test-card__results > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* A full-width card with three results shows them as three equal cells */
@media (min-width: 640px) {
  .test-grid--single .test-card__results:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .test-grid--single .test-card__results:has(> div:nth-child(3):last-child) > div:last-child { grid-column: auto; }
}
@media (min-width: 900px) {
  .test-grid--single .test-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
}
@media (min-width: 1024px) {
  .test-grid--wide .test-card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "head results" "head facts" "link facts";
    gap: 18px clamp(28px, 3vw, 48px);
    padding: clamp(28px, 3vw, 40px);
  }
  .test-grid--wide .test-card__link { align-self: end; }
}
/* Three cards in two columns: the third spans the row */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .test-grid--3 > .test-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Facts lists: the last item takes the rest of its row */
.facts > .facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 480px) {
  .facts > .facts__item:last-child:nth-child(odd) { grid-column: auto; }
  .facts > .facts__item:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .facts > .facts__item:last-child:nth-child(3n + 4) { grid-column: 1 / -1; }
}
.facts-panel__grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Project grids: a lone card, or the odd card out, becomes a wide horizontal card */
@media (min-width: 768px) {
  .project-grid--3 > .project-card:only-child,
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .project-grid--3 > .project-card:only-child .project-card__media,
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card) .project-card__media {
    flex: 0 0 48%;
    aspect-ratio: auto;
    height: auto;
    min-height: 300px;
  }
  .project-grid--3 > .project-card:only-child .project-card__body,
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card) .project-card__body { justify-content: center; padding: clamp(22px, 3vw, 40px); }
}
@media (min-width: 1024px) {
  /* three across: only the lone card stays wide */
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card):not(:only-child) { grid-column: auto; flex-direction: column; }
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card):not(:only-child) .project-card__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card):not(:only-child) .project-card__body { justify-content: flex-start; padding: clamp(18px, 2vw, 26px); }
  .project-grid--3:has(> .project-card:nth-child(2):last-child):not(:has(> .flagship)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid--3 > .project-card:only-child { grid-column: 1 / -1; }
  .project-grid--3 > .project-card:only-child .project-card__media { flex-basis: 58%; min-height: 380px; }
}

/* Galleries: the remainder after the lead photo fills its row */
@media (max-width: 767.98px) {
  .gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
@media (min-width: 768px) {
  .gallery--1 .gallery__item:first-child { grid-column: 1 / -1; }
  .gallery--4 .gallery__item:last-child:nth-child(3n + 4) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .gallery--4 .gallery__item:last-child:nth-child(3n + 5),
  .gallery--4 .gallery__item:nth-last-child(2):nth-child(3n + 4) { grid-column: span 6; aspect-ratio: 16 / 10; }
}

/* Related links: as many columns as links (up to three) */
@media (min-width: 900px) {
  .related-links:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-links:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* Specification groups: two or three equal columns, never an orphan */
@media (min-width: 900px) {
  .spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-table > .spec-table__group:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .spec-table:has(> .spec-table__group:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-table:has(> .spec-table__group:nth-child(3):last-child) > .spec-table__group:last-child { grid-column: auto; }
}

/* A single "to follow" person card spans the row */
@media (min-width: 640px) {
  .people > .person--note:only-child { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .people > .person--note:only-child .person__photo { grid-row: span 2; }
}
.test-grid.test-grid--single { max-width: none; }
@media (min-width: 900px) {
  .test-grid--single .test-card__facts > div:first-child { grid-column: 1 / -1; }
  .test-grid--single .test-card__facts > div:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .gallery__item:first-child img { position: absolute; inset: 0; }
  .project-grid--3 > .project-card:only-child .tags,
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card) .tags { margin-top: 4px; }
}
@media (min-width: 1024px) {
  .project-grid--3 > .project-card:last-child:nth-child(odd of .project-card):not(:only-child) .tags { margin-top: auto; }
}
@media (min-width: 640px) {
  .people > .person--note:only-child { grid-template-rows: auto auto; align-content: center; row-gap: 6px; }
  .people > .person--note:only-child .person__name { align-self: end; }
  .people > .person--note:only-child .person__role { align-self: start; }
}

/* 30. Illustrative 3D renders (T-033): the studio render on a white sheet with the drawings' faint grid
   (the render's white ground multiplies away), the build-up viewer and its "View in 3D" model
   ----------------------------------------------------------------------- */
.page-hero__frame--render,
.sys-card--render .sys-card__media,
.viewer__stage,
.swatch-panel__stage {
  background:
    linear-gradient(rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.page-hero__frame--render img,
.sys-card--render .sys-card__media img,
.viewer__img,
.swatch-panel__stage img { object-fit: contain; mix-blend-mode: multiply; }
.sys-card--render .sys-card__media img { transform: scale(1.12); }
.sys-card--render:hover .sys-card__media img { transform: scale(1.16); }
.sfs-band__drawing--render .drawing-sheet__paper { padding: clamp(6px, 1vw, 12px); }
.sfs-band__drawing--render .drawing-sheet__paper img { display: block; aspect-ratio: 4 / 3; max-height: 460px; margin: 0 auto; object-fit: contain; }

/* The viewer: renders switched in CSS by position (no JavaScript needed), the model laid over them. T-093: the
   renders of every colour are in the stage (--c1 to --c4); without the script (or before it runs) CSS shows the first
   colour's render of the checked view; facades-3d.js then marks the viewer ready and the render to show (.is-shown). */
.viewer { display: grid; gap: 12px; min-width: 0; }
.viewer__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewer__img--2,
.viewer__cap--2,
.viewer__img:not(.viewer__img--c1),
.viewer__cap:not(.viewer__cap--c1) { display: none; }
.viewer:not(.is-ready):has(.viewer__input--2:checked) .viewer__img--1,
.viewer:not(.is-ready):has(.viewer__input--2:checked) .viewer__cap--1 { display: none; }
.viewer:not(.is-ready):has(.viewer__input--2:checked) .viewer__img--2.viewer__img--c1 { display: block; }
.viewer:not(.is-ready):has(.viewer__input--2:checked) .viewer__cap--2.viewer__cap--c1 { display: inline; }
.viewer.is-ready .viewer__img,
.viewer.is-ready .viewer__cap { display: none; }
.viewer.is-ready .viewer__img.is-shown { display: block; }
.viewer.is-ready .viewer__cap.is-shown { display: inline; }
.viewer model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--c-accent);
  --progress-bar-height: 3px;
}
/* The model's focus ring (2px brass inside the stage) is set in its shadow root by facades-3d.js (T-028 F3-09). */
.viewer.is-3d .viewer__img { visibility: hidden; }
.viewer__status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--c-ink);
  pointer-events: none;
}
.viewer__status:empty { display: none; }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.viewer__switch {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
}
.viewer__opt { position: relative; display: block; }
.viewer__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.viewer__opt span {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text-2);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.viewer__opt input:checked + span { background: var(--c-ink); color: #fff; }
.viewer__opt input:not(:checked):hover + span { color: var(--c-ink); }
.viewer__opt input:focus-visible + span { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.viewer__label {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.viewer__3d { margin-left: auto; }
.viewer__3d[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.viewer__3d[aria-pressed="true"] .btn__icon { background: var(--c-accent); color: var(--c-ink); }
.viewer__3d[aria-busy="true"] { cursor: progress; }
.viewer__caption { margin-top: -2px; }
@media (max-width: 479.98px) {
  .viewer__3d { width: 100%; margin-left: 0; }
  .viewer__switch { flex: 1 1 auto; }
  .viewer__opt { flex: 1 1 0; }
  .viewer__opt span { justify-content: center; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__opt span { transition: none; }
}

/* HHB: the renders beside the stand-off table, the drawing under them as the technical reference */
.bracket-split .viewer { align-self: start; }
.bracket-drawing { margin-top: clamp(20px, 2.4vw, 32px); }
.bracket-drawing .drawing-sheet__paper img { max-height: 520px; }

/* Colours: RAL 7016 on a system render beside the swatches */
.swatch-panel--render { display: grid; gap: clamp(20px, 3vw, 36px); }
.swatch-panel__render { display: grid; gap: 10px; align-content: start; }
.swatch-panel__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.swatch-panel__stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .swatch-panel--render { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* T-041 begin: "View in 3D" controls. Made by facades-3d.js once the model is on: round + / − / reset on the
   stage (bottom right, like the hero reel's pause button) and the hint in the caption in place of the render's
   caption. model-viewer's own AR button (iOS only) moves to the top right. T-093: the image block's colour swatches
   replace the "Example colours" chips (block T-093 below). */
.viewer__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.viewer__zoom[hidden] { display: none; }
.viewer__zbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px var(--c-line), 0 1px 2px rgba(28, 32, 36, 0.08), 0 10px 26px -12px rgba(28, 32, 36, 0.45);
  color: var(--c-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.viewer__zbtn svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .viewer__zbtn:hover { background: var(--c-ink); color: #fff; }
}
.viewer__zbtn:active { transform: scale(0.94); }
.viewer__zbtn:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.viewer model-viewer::part(default-ar-button) { top: 14px; right: 14px; bottom: auto; transform-origin: top right; }

.viewer__cap--3d { display: none; }
.viewer.is-3d .viewer__caption .viewer__cap:not(.viewer__cap--3d) { display: none; }
.viewer.is-3d .viewer__caption .viewer__cap--3d { display: inline; }

@media (max-width: 479.98px) {
  .viewer__zoom { right: 10px; bottom: 10px; gap: 6px; }
  .viewer__zbtn { width: 40px; height: 40px; }
  .viewer__zbtn svg { width: 17px; height: 17px; }
  .viewer model-viewer::part(default-ar-button) { top: 10px; right: 10px; }
}
@media (max-width: 359.98px) {
  .viewer__zbtn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__zbtn { transition: none; }
}
/* T-041 end */

/* T-099 begin: full screen (the user, 23 Oct 2026). The button tops the + / − / reset stack; with a mouse it shows while
   the pointer is over the stage (and on keyboard focus), on touch always. .is-full: the viewer full screen, whether by
   the Fullscreen API or, where an element cannot go full screen (iPhone Safari), as a fixed layer over the window
   (.is-overlay); the stage takes the height, the swatches, the switch and the parts list stay under it. */
.viewer__zbtn--fs { margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) {
  .viewer__zbtn--fs { opacity: 0; transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); }
  .viewer__stage:hover .viewer__zbtn--fs,
  .viewer__zbtn--fs:focus-visible,
  .viewer.is-full .viewer__zbtn--fs { opacity: 1; }
}
.viewer.is-full {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: auto;
  background: var(--c-bg, #fff);
}
.viewer.is-overlay { position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; }
.viewer.is-full .viewer__stage { min-height: 0; aspect-ratio: auto; }
html.has-viewer-full,
html.has-viewer-full body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .viewer__zbtn--fs { transition: none; }
}
/* T-099 end */

/* T-093 begin: one image block on the system and profile pages (director, 21 Oct 2026). The viewer sits in the hero
   (.viewer--hero): the render on the white studio sheet, then the controls: the colour swatches, a 2 × 2 grid of
   44 px chips (the colours we have renders for, at most four) with the chosen colour's name, beside the
   "Finished | Cut-away" switch and "View in 3D". On phones the controls stack. The swatches are radio buttons: one Tab
   stop, the arrow keys move and choose, a tap chooses. Woodgrain chips show the profiles' fine grain line. */
.viewer--hero { align-self: start; }
.viewer__controls { display: grid; gap: 14px 20px; min-width: 0; }
.viewer__colours { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.viewer__swatches { display: grid; grid-template-columns: repeat(2, 44px); gap: 8px; flex: none; }
.viewer__swatch { position: relative; display: block; width: 44px; height: 44px; }
.viewer__swatch-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.viewer__chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: var(--chip, var(--c-surface-2));
  box-shadow: inset 0 0 0 1px rgba(28, 32, 36, 0.16);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.viewer__swatch--wood .viewer__chip {
  background-image: repeating-linear-gradient(97deg, rgba(40, 24, 10, 0.1) 0 1px, transparent 1px 5px, rgba(255, 255, 255, 0.08) 5px 6px, transparent 6px 9px);
}
.viewer__swatch-input:checked + .viewer__chip { box-shadow: inset 0 0 0 1px rgba(28, 32, 36, 0.16), 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-ink); }
.viewer__swatch-input:focus-visible + .viewer__chip { outline: 2px solid var(--c-accent-ink); outline-offset: 6px; }
@media (hover: hover) {
  .viewer__swatch-input:not(:checked):hover + .viewer__chip { transform: translateY(-2px); }
}
.viewer__colour { display: grid; gap: 4px; min-width: 0; margin: 0; }
.viewer__colour-label {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.viewer__colour-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--c-ink); }
/* "View in 3D" keeps its place until the script shows it (no shift under the hero render) */
.js .viewer--hero .viewer__3d[hidden] { display: inline-flex !important; visibility: hidden; }
/* Without JavaScript the swatches could not change the picture: CSS shows the first colour, so they are left out */
.no-js .viewer__colours { display: none; }

/* With swatches: the colours on the left, the switch and "View in 3D" on the right (below them when the column is
   narrow), the "Illustrative render" label under the buttons */
.viewer__controls--colours { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.viewer__controls--colours .viewer__colours { flex: 0 1 auto; }
.viewer__controls--colours .viewer__colour { max-width: 11em; }
.viewer__controls--colours .viewer__bar { flex: 1 1 260px; justify-content: flex-end; gap: 10px; }
.viewer__controls--colours .viewer__switch { order: 1; }
.viewer__controls--colours .viewer__3d { order: 2; margin-left: 0; }
.viewer__controls--colours .viewer__label { order: 3; flex: 1 1 100%; text-align: right; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .viewer--hero .viewer__stage { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__chip { transition: none; }
  .viewer__swatch-input:not(:checked):hover + .viewer__chip { transform: none; }
}
@media print {
  /* The hero's render stays on the printed sheet (print.css leaves the viewer out): the one shown, without controls */
  .page-hero .viewer--hero[data-viewer] { display: block !important; margin: 0 0 3mm !important; }
  .viewer--hero .viewer__controls,
  .viewer--hero model-viewer,
  .viewer--hero .viewer__zoom,
  .viewer--hero .viewer__status { display: none !important; }
  .viewer--hero .viewer__stage { aspect-ratio: auto !important; overflow: visible !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  .viewer--hero .viewer__img { position: static !important; width: 100% !important; height: 50mm !important; visibility: visible !important; }
}
/* T-093 end */

/* 31. Homepage hero photos (T-063; was the T-037 reel of projects, systems and colours): our project photos cross-fade
   on the hero stage by themselves, one every --hreel-dur (6 s), with a very slow zoom; the current step fills like a
   progress bar under the caption. The frame is placed on the stage (section 3). The controls show with html.js;
   assets/js/facades-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). Under reduced motion
   nothing plays by itself and nothing zooms. Without JS the first photo and its caption show, with no controls.
   ----------------------------------------------------------------------- */
.hreel {
  --hreel-fade: 1.4s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cap toggle" "steps steps";
  align-items: center;
  gap: 4px 16px;
}
.hreel__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #2A2E33;
}
/* The even veil (8% of the shade colour) over every photo, under the shades */
.hreel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgb(var(--hero-shade, 13 13 12) / var(--hero-veil, 0.08));
}
.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; }
/* LCP: Chrome leaves out an image that covers the whole viewport (it takes it for a background), so the photos are
   drawn 0.1% smaller than the stage (as on the Group's hero): the first photo stays the LCP element. */
.hreel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(0.999);
  transform-origin: 50% 50%;
}
@media (max-aspect-ratio: 4/5) {
  .hreel__img { object-position: var(--focus-m, 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(0.999); } to { transform: scale(1.06); } }
@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; }
}

/* Captions: every caption shares one grid cell, so the block keeps the height of the longest and nothing moves. The
   old caption is gone (0.2 s) before the new one fades in. */
.hreel__captions { grid-area: cap; display: grid; align-self: end; }
.hreel__cap {
  grid-area: 1 / 1;
  align-self: end;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #fff;
  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__name {
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  transition: text-decoration-color 0.2s ease;
}
.hreel__name:hover { text-decoration-color: #fff; }
.hreel__by { font-weight: 600; }

/* Steps: a hairline per photo (3:1 on the shade), the current one fills; 44px tall buttons. Shown with html.js. */
.hreel__steps { display: none; }
.js .hreel__steps {
  grid-area: steps;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  margin: -6px 0 -10px;
}
.hreel__steps > li { display: flex; }
.hreel__step {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hreel__step::before,
.hreel__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  border-radius: 2px;
}
.hreel__step::before { background: rgba(255, 255, 255, 0.55); transition: background-color 0.2s ease; }
.hreel__step:hover::before { background: rgba(255, 255, 255, 0.85); }
.hreel__fill { background: #fff; 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 #fff; outline-offset: -2px; border-radius: 6px; }

/* Pause and play (WCAG 2.2.2): a white round button beside the caption */
.hreel__toggle {
  grid-area: toggle;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px -10px rgba(13, 13, 12, 0.5);
  color: var(--c-ink);
  transition: transform 0.3s var(--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 #fff; outline-offset: 3px; }

/* From 1024px the controls are a column bottom right: the caption, then the steps beside the button */
@media (min-width: 1024px) {
  .hreel {
    grid-template-areas: "cap cap" "steps toggle";
    gap: 10px 14px;
  }
  .js .hreel__steps { margin: -10px 0 -10px; }
}
@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 { transition: none; }
}

/* T-039 begin: roof and wall profiles, the site-wide parts (the pages' own styles are in facades-profiles.css).
   - The one line that links to /profiles/ on the MET-PRO SFS page (where the Express Pro block was) and under the
     systems grid on the Systems hub.
   - The header bar holds five items (Systems, SFS, Profiles, Projects, Technical): from 1024 to 1199 the gaps and
     the tracking come in a little more, and up to 1279 the phone shows as its icon, so nothing wraps. */
.pro-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
.pro-link .text-link { font-weight: 600; }
.pro-link--grid { margin-top: clamp(18px, 2vw, 26px); }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .primary-nav__item + .primary-nav__item::before { margin: 0 7px; }
  .primary-nav__link { letter-spacing: 0.06em; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* The phone shows as its round icon here (its name stays "Call 01708 554777"), as on phones */
  .header-phone { width: 44px; padding: 0; border-radius: 50%; justify-content: center; }
  .header-phone .icon { display: block; }
  .header-phone__number { display: none; }
}
/* T-039 end */

/* T-092 begin: the director's menu (meeting, 21 Oct 2026): Aluminium cladding, Roof and wall sheets, SFS and purlins,
   Garden rooms, Airspace development, then Projects and Technical (Technical last).
   - Header bar: the labels in sentence case (the long names read better than in spaced capitals). The five product
     items are in the bar from 1024px; Projects and Technical (.primary-nav__item--wide) join them from 1440px and are
     always in the menu panel's Explore list. From 1024 to 1279px each label takes two balanced lines. The phone shows
     as its round icon on every desktop width (its name stays "Call 01708 554777"); the number shows from 520 to 1023px.
   - Menu panel: five product links at a smaller size, so each stays on one line from 1024px, then the aluminium
     systems under their own label. */
.primary-nav__link {
  padding: 12px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}
.primary-nav__link::after { right: 0; }
.primary-nav__item + .primary-nav__item::before { margin: 0 11px; }
.primary-nav__item--wide { display: none; }
@media (min-width: 1024px) {
  .header-phone { width: 44px; padding: 0; border-radius: 50%; justify-content: center; }
  .header-phone .icon { display: block; }
  .header-phone__number { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .primary-nav__link { max-width: 7.6em; padding: 10px 0; white-space: normal; text-wrap: balance; }
  .primary-nav__link::after { bottom: 2px; }
  .primary-nav__item + .primary-nav__item::before { height: 22px; margin: 0 9px; }
  .site-header__actions::before { margin: 0 4px 0 0; }
}
@media (min-width: 1440px) {
  .primary-nav__item--wide { display: flex; }
}
.menu__lead--products a { font-size: clamp(1.75rem, 3vw - 0.25rem, 2.625rem); line-height: 1.08; }
.menu__label--sub { margin-top: 26px; }
/* "Design, fabricate and install" (director): the project's headline scope beside the sector chip, graphite with the
   brass tick, and a scope line's bracketed scope in brass ink. Only where the records show it (project-pages.json). */
.project-hero__chips .chip--scope { gap: 7px; padding-left: 10px; border-color: var(--c-dark); background: var(--c-dark); color: #fff; }
.chip--scope .icon { width: 15px; height: 15px; color: var(--c-accent); }
.scope-tag { font-weight: 600; color: var(--c-accent-ink); white-space: nowrap; }
@media print {
  .project-hero__chips .chip--scope { border-color: currentColor; background: none; color: inherit; }
}
/* T-092 end */

/* T-106 begin: the header's dropdown panels (the user, 23 Oct 2026: a dropdown of quick links under each menu item)
   and the phone menu's lists. Markup: src/partials/header.html and nav-<key>.html; behaviour: assets/js/facades-nav.js.
   - Header bar (from 1024px): each item takes the bar's full height, so the pointer stays on it from the link down to
     its panel. The panel is a graphite card under the bar (the bar's colour and hairline), placed under its item and
     kept inside the bar by the script (--nav-x): a mono label in brass, the links (a name, a mono note, a profile
     glyph or an icon), then the way to the page itself ("All systems", the arrow in its brass circle). It fades in
     and drops 6px (with reduced motion it just shows, main.css). While it is open the item keeps its brass underline.
   - The disclosure button follows the link in the Tab order and shows only with keyboard focus, under the label (the
     bar has no room for a chevron beside each of the seven items at 1440px). Touch screens open a panel with the first
     tap on the link. Without JavaScript the buttons and panels are not shown.
   - Phone menu (below 1024px): a round chevron button after each product, Projects and Technical opens the same
     links in place, on the menu's light page; the "Aluminium cladding systems" list hides there (the first list holds
     it). From 1024px the menu panel is as it was (T-092). */
.site-header__bar { position: relative; }
@media (min-width: 1024px) {
  .primary-nav { align-self: stretch; }
  .primary-nav__list { height: 100%; align-items: stretch; }
}
.primary-nav__head { position: relative; display: inline-flex; align-items: center; }
.primary-nav__item.is-open .primary-nav__link::after { transform: scaleX(1); }
.primary-nav__toggle {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-dark-2);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
.primary-nav__toggle .icon { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.primary-nav__toggle:focus-visible { opacity: 1; pointer-events: auto; }
.primary-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.no-js .primary-nav__toggle,
.no-js .nav-panel { display: none; }

.nav-panel {
  --nav-w: 340px;
  position: absolute;
  top: calc(100% + 10px);
  left: var(--nav-x, 12px);
  z-index: 2;
  width: min(var(--nav-w), calc(100% - 24px));
  padding: 16px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: var(--c-on-dark);
  box-shadow: 0 1px 2px rgba(10, 12, 14, 0.2), 0 30px 60px -22px rgba(10, 12, 14, 0.6);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.primary-nav__item.is-open > .nav-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.22s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0s;
}
.primary-nav__item.is-swap > .nav-panel { transition: none; }
/* The pointer crosses the gap to the panel without leaving the item */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.nav-panel--systems { --nav-w: 370px; }
.nav-panel--profiles { --nav-w: 660px; }
.nav-panel--projects { --nav-w: 390px; }
.nav-panel--technical { --nav-w: 440px; }
.nav-panel--sfs,
.nav-panel--airspace-development { --nav-w: 330px; }

.nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 8px 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Texts that may hold a "MET-PRO" (a nowrap span, from the build or from WordPress) are never flex containers */
.nav-panel__label {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.nav-panel__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--c-accent);
}
.nav-panel__count {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark-muted);
}
.nav-panel__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Roof and wall sheets: two columns, read down each column in the range's order */
.nav-panel--profiles .nav-panel__list { display: block; columns: 2; column-gap: 4px; }
.nav-panel--profiles .nav-panel__list > li { break-inside: avoid; padding-bottom: 2px; }
/* A row: the name, the note under it, the arrow (shown on hover and focus) at the end; with a profile glyph or a page
   icon in front on the Roof and wall sheets and Technical panels */
.nav-panel__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 14px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--c-on-dark);
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-panel--profiles .nav-panel__link,
.nav-panel--technical .nav-panel__link { grid-template-columns: auto minmax(0, 1fr) 16px; }
.nav-panel__link::after {
  content: "";
  grid-column: -2 / -1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 16px;
  height: 16px;
  background: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}
.nav-panel__link:hover,
.nav-panel__link:focus-visible { background: var(--c-dark-2); color: #fff; }
.nav-panel__link:hover::after,
.nav-panel__link:focus-visible::after { opacity: 1; transform: none; }
.site-header .nav-panel__link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.nav-panel__name {
  grid-column: -3 / -2;
  grid-row: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 106%;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.nav-panel__note {
  grid-column: -3 / -2;
  grid-row: 2;
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: 0.71875rem;
  line-height: 1.4;
  color: var(--c-on-dark-muted);
}
.nav-panel__link[aria-current="page"] .nav-panel__name { color: var(--c-accent); }
/* Profile glyphs (assets/img/profiles/<slug>-glyph.svg) and the technical pages' icons on a faint tile */
.nav-panel__glyph,
.nav-panel__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-accent);
}
.nav-panel__glyph { width: 52px; }
.nav-panel__glyph-svg { display: block; width: 40px; height: 14px; overflow: visible; }
.nav-panel__icon { width: 36px; }
.nav-panel__icon .icon { width: 18px; height: 18px; }

.nav-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 8px 8px 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* The page itself: the label, then the graphite arrow in its brass circle (the site's buttons) */
.nav-panel__all {
  display: inline-block;
  padding-block: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.005em;
  color: #fff;
  text-decoration: none;
}
.nav-panel__all::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  vertical-align: top;
  border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%231C2024' d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: background-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.nav-panel__all:hover::after { background-color: var(--c-accent-hover); transform: translateX(3px); }
.nav-panel__more {
  display: inline-block;
  padding-block: 12px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--c-on-dark-muted);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
.nav-panel__more:hover { color: #fff; text-decoration-color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  .nav-panel { transform: none; }
}

/* The phone menu's lists (below 1024px; the same partials, in place under their link) */
.menu__more {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.menu__more .icon { width: 18px; height: 18px; transition: transform 0.35s var(--ease); }
.menu__more:hover { border-color: var(--c-ink); }
.menu__more[aria-expanded="true"] { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-accent); }
.menu__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menu .nav-panel {
  position: static;
  flex: 0 0 100%;
  width: auto;
  padding: 2px 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--c-ink);
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}
.menu .nav-panel[hidden] { display: none; }
.menu .nav-panel::before,
.menu .nav-panel__head { display: none; }
.menu .nav-panel__list { margin: 0 -10px; }
.menu .nav-panel--profiles .nav-panel__list { columns: auto; }
/* (main.css styles every link in the menu's lists large and inline: these rules put the rows back) */
.menu .nav-panel .nav-panel__link {
  display: grid;
  gap: 0 14px;
  min-height: 44px;
  padding: 7px 10px;
  font-size: 1rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--c-ink);
}
.menu .nav-panel .nav-panel__link:hover,
.menu .nav-panel .nav-panel__link:focus-visible { background: var(--c-surface-2); color: var(--c-ink); transform: none; }
.menu .nav-panel__link::after { background: var(--c-accent-ink); }
.menu .nav-panel__name { font-size: 1.0625rem; }
.menu .nav-panel__note { color: var(--c-muted); }
.menu .nav-panel__link[aria-current="page"] .nav-panel__name { color: var(--c-accent-ink); }
.menu .nav-panel__glyph,
.menu .nav-panel__icon { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-accent-ink); }
.menu .nav-panel__foot { margin: 6px 0 0; border-top-color: var(--c-line); }
.menu .nav-panel .nav-panel__all {
  display: inline-block;
  min-height: 0;
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.menu .nav-panel .nav-panel__all:hover { color: var(--c-ink); transform: none; }
.menu .nav-panel .nav-panel__more {
  display: inline-block;
  min-height: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--c-muted);
  text-decoration-color: var(--c-line-2);
}
.menu .nav-panel .nav-panel__more:hover { color: var(--c-ink); transform: none; text-decoration-color: var(--c-accent-ink); }
@media (max-width: 1023.98px) {
  /* The label takes the row beside its round button (a long one wraps inside it); the list goes under both */
  .menu__lead > li,
  .menu__list > li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .menu__lead > li > a,
  .menu__list > li > a { flex: 1 1 0; min-width: 0; }
  .menu__label--sub,
  .menu__small--systems { display: none; }
  .menu .nav-panel { padding-top: 6px; }
}
/* Phones: the product names a size down, so the longest ("Airspace development") stays on one line beside its button */
@media (max-width: 599.98px) {
  .menu__lead--products > li > a { font-size: clamp(1.375rem, 6.4vw, 1.75rem); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .menu .nav-panel--profiles .nav-panel__list { display: block; columns: 2; column-gap: 8px; }
}
@media (min-width: 1024px) {
  .menu__more,
  .menu .nav-panel { display: none; }
}
/* T-106 end */

/* 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. */
.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-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  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: 600 0.8125rem/1 var(--f-mono);
}

/* 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-family: var(--f-mono); font-size: 0.75rem; 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 */

/* 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; }
}

/* Home hero on phones (user, 15 Oct): "Request a quote" and "All documents" sit on one line where they fit
   (375px and up); on narrower phones they wrap to two lines as before. */
@media (max-width: 639.98px) {
  .f-hero__actions { gap: 8px; }
  .f-hero__actions .btn { flex: 0 1 auto; min-height: 50px; padding-left: 15px; gap: 8px; font-size: 0.875rem; white-space: nowrap; }
  .f-hero__actions .btn .btn__icon { width: 36px; height: 36px; }
}

/* T-069 begin: a system's products as the group's shop sells them (the brackets page: Express FS single EFS-1 and
   double EFD-1), each with its illustrative render, SKU, use, specs and "Check price and order at FAB Supplies"
   (new tab); the size table as ranges (bracket size, stand-off on a 60 mm and a 100 mm rail). */
.fs-products { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.fs-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.fs-product__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 8px 8px 0;
  border-radius: 14px;
  background:
    linear-gradient(rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(28, 32, 36, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.fs-product__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fs-product__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.fs-product__sku {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.fs-product__name { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.fs-product__use { line-height: 1.55; color: var(--c-text-2); }
.fs-product__specs { display: grid; gap: 12px; margin: 4px 0 6px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.fs-product__specs > div { display: grid; gap: 2px; }
.fs-product__specs dt {
  padding-top: 2px;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.fs-product__specs dd { font-size: var(--fs-small); line-height: 1.45; }
.fs-product__btn { align-self: flex-start; max-width: 100%; margin-top: auto; white-space: normal; text-align: left; }
.fs-products__note { margin-top: 14px; }
@media (min-width: 768px) {
  .fs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-product__specs > div { grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px; }
}
.bracket-table--ranges th,
.bracket-table--ranges td { text-align: left; }
.bracket-table--ranges thead th { white-space: normal; vertical-align: bottom; }
@media print {
  .fs-product { break-inside: avoid; }
  .fs-product__btn { display: none; }
}
/* T-069 end */

/* T-097 begin: "Every part, close up" and the numbered parts in "View in 3D" (the user, 23 Oct 2026; Sotech's 3D markers
   as the idea, done better). The gallery (#parts, under the hero): one card per part, numbered as the pins, the
   close-up on the white studio sheet with its number in a brass disc, the name, a line or two, the key figure in
   mono; a sideways strip on phones, a grid from 768px; each image opens the lightbox; "Show in 3D" only where the
   model can load. In 3D (facades-3d.js): brass pins with the number (44px targets), the short name beside a pin on
   hover and focus and for the chosen part; the panel ("3 of 11", name, lines, figure, previous, next, All parts) on
   the model's lower left when the viewer is 560px or wider, else docked under it; the list of parts under the model;
   Explode on the stage's upper left. */
.parts .section-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.parts-grid {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78%, 1fr);
  gap: 14px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  list-style: none;
}
.part-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  scroll-snap-align: start;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.part-card.is-current { border-color: var(--c-ink); box-shadow: var(--shadow-soft); }
.part-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
}
.part-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.part-card__media .gallery__zoom { box-shadow: inset 0 0 0 1px var(--c-line); }
.part-card__media:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: -3px; }
@media (hover: hover) {
  .part-card__media:hover img { transform: scale(1.04); }
  .part-card__media:hover .gallery__zoom { transform: scale(1.08); }
}
.part-card__n,
.viewer__pin-n,
.viewer__pbtn-n {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.part-card__n {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  font-size: 0.9375rem;
  box-shadow: 0 0 0 2px #fff, 0 6px 16px -8px rgba(28, 32, 36, 0.5);
}
.part-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-top: 1px solid var(--c-line); }
.part-card__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.part-card__text { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.part-card__spec {
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--c-ink);
}
.part-card__3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  margin: auto 0 -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-accent-ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.part-card__3d[hidden] { display: none; }
.part-card__3d .icon { width: 18px; height: 18px; }
.part-card__3d:hover { color: var(--c-ink); }
.part-card__3d:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; border-radius: 4px; }
.parts__3d[hidden] { display: none; }
@media (min-width: 768px) {
  .parts-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .parts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

/* the parts in 3D */
.viewer { container-type: inline-size; }
.viewer__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.viewer__pin-n {
  width: 28px;
  height: 28px;
  font-size: 0.8125rem;
  box-shadow: 0 0 0 2px #fff, 0 4px 14px -4px rgba(28, 32, 36, 0.55);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.viewer__pin:not([data-visible]):not(.is-current) { opacity: 0.35; }
.viewer__pin.is-current { z-index: 2; }
.viewer__pin.is-current .viewer__pin-n { background: var(--c-ink); color: var(--c-accent); transform: scale(1.18); }
.viewer.has-part .viewer__pin:not(.is-current) .viewer__pin-n { transform: scale(0.86); }
.viewer__pin-label {
  position: absolute;
  top: 50%;
  left: 40px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px var(--c-line), 0 8px 20px -12px rgba(28, 32, 36, 0.5);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.viewer__pin:focus-visible { outline: none; }
.viewer__pin:focus-visible .viewer__pin-n { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.viewer__pin:focus-visible .viewer__pin-label,
.viewer__pin.is-current .viewer__pin-label { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
  .viewer__pin:hover .viewer__pin-n { transform: scale(1.12); }
  .viewer__pin:hover .viewer__pin-label { opacity: 1; transform: translate(0, -50%); }
}
.viewer__explode {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px var(--c-line), 0 1px 2px rgba(28, 32, 36, 0.08), 0 10px 26px -12px rgba(28, 32, 36, 0.45);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.viewer__explode[hidden] { display: none; }
.viewer__explode svg { width: 20px; height: 20px; }
.viewer__explode[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.viewer__explode:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
@media (hover: hover) {
  .viewer__explode:hover { background: var(--c-ink); color: #fff; }
}
.viewer__part {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sheet);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}
.viewer__part[hidden] { display: none; }
.viewer__part:focus { outline: none; }
.viewer__part:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.viewer__part-count {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.viewer__part-n { color: var(--c-ink); font-weight: 500; }
.viewer__part-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--c-ink); }
.viewer__part-text { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); }
.viewer__part-spec { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.45; color: var(--c-ink); }
.viewer__part-spec[hidden] { display: none; }
.viewer__part-nav { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.viewer__part-btn,
.viewer__part-all {
  display: inline-grid;
  place-items: center;
  height: 40px;
  margin: 0;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.viewer__part-btn { width: 40px; padding: 0; }
.viewer__part-btn svg { width: 18px; height: 18px; }
.viewer__part-all { margin-left: auto; padding: 0 16px; }
.viewer__part-btn:focus-visible,
.viewer__part-all:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
@media (hover: hover) {
  .viewer__part-btn:hover,
  .viewer__part-all:hover { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
}
.viewer__parts { min-width: 0; }
.viewer__parts[hidden] { display: none; }
.viewer__plist {
  position: relative; /* the hidden "Part N:" texts stay inside the scroller */
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  list-style: none;
}
.viewer__plist > li { flex: none; scroll-snap-align: start; }
.viewer__pbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 14px 0 6px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.viewer__pbtn--all { padding: 0 14px; }
.viewer__pbtn-n { width: 26px; height: 26px; font-size: 0.75rem; }
.viewer__pbtn[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.viewer__pbtn:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
@media (hover: hover) {
  .viewer__pbtn:not([aria-pressed="true"]):hover { border-color: var(--c-ink); }
}
@container (min-width: 560px) {
  .viewer__stage,
  .viewer__part { grid-area: 1 / 1; }
  .viewer__part {
    z-index: 3;
    align-self: end;
    justify-self: start;
    width: min(340px, 54%);
    margin: 0 0 14px 14px;
  }
}
@container (max-width: 559.98px) {
  .viewer__pin { width: 40px; height: 40px; }
  .viewer__pin-n { width: 24px; height: 24px; font-size: 0.75rem; }
  .viewer__pin-label { left: 34px; }
}
@media (max-width: 479.98px) {
  .viewer__explode { top: 10px; left: 10px; min-height: 40px; padding: 0 14px 0 10px; }
  .parts .section-head__action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .part-card,
  .part-card__media img,
  .viewer__pin-n,
  .viewer__pin-label,
  .viewer__explode,
  .viewer__part-btn,
  .viewer__part-all,
  .viewer__pbtn { transition: none; }
}
@media print {
  .parts-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .part-card { break-inside: avoid; }
  .part-card__3d,
  .parts__3d { display: none; }
}
/* T-097 end */
/* 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 Facades: the renders sit on the white studio sheet, so their corner star is ink (.ill-mark--ink). The viewer
   shows its star in the stage's top left corner only while the 3D model is on (each render has its caption's star);
   the brackets' product pictures get a positioned frame for theirs. */
.ill-mark--ink { color: var(--c-muted); text-shadow: none; opacity: 0.8; }
.viewer__mark { display: none; top: 12px; right: auto; bottom: auto; left: 14px; }
.viewer.is-3d .viewer__mark { display: block; }
.fs-product__media { position: relative; }
/* T-100 end */

/* T-097 with T-100: the close-up's asterisk in the top right corner (the number is top left, the zoom button bottom
   right); in 3D the stage's asterisk stays top left and Explode moves beside it. */
.part-card__media .ill-mark { top: 12px; right: 14px; bottom: auto; }
.viewer.has-parts .viewer__explode { left: 32px; }
@media (max-width: 479.98px) {
  .viewer.has-parts .viewer__explode { left: 30px; }
}

/* T-116 begin (the user, 27 Oct: "maybe not the lock sign, more like a button to offer the download"): every document
   that downloads ends its row with a "Download" button in the style of "Add to my request" (a pill, a dark disc with
   the arrow, the word). The row's stretched link does the work (the registration dialog for a gated document), so
   the button is drawn under it and needs no handler of its own. */
.doc__get {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 16px 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;
  transition: border-color 0.3s var(--ease);
}
.doc:hover .doc__get { border-color: var(--c-ink); }
.doc__get-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
}
.doc__get-mark .icon { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.doc:hover .doc__get-mark .icon { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .doc__get,
  .doc__get-mark .icon { transition: none; }
}
@media print { .doc__get { display: none !important; } }
/* T-116 end */