/* ==========================================================================
   Express Group: homepage concept
   Plain CSS, no framework. Sections map 1:1 to WordPress template parts.
   Shape rule: buttons and chips are full pills; photos and panels 24 to 32px;
   cards 20 to 24px; form inputs 12px.
   ========================================================================== */

/* 1. Tokens
   ----------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour */
  --c-bg: #F6F5F1;            /* warm off-white page */
  --c-surface: #FFFFFF;       /* cards */
  --c-surface-2: #EFEEE8;     /* tinted panels, tags */
  --c-ink: #141414;           /* charcoal text and primary buttons */
  --c-ink-2: #2B2A29;         /* logo charcoal */
  --c-text-2: #4A4945;        /* secondary body text (8:1 on bg) */
  --c-muted: #5E5E5A;         /* labels and captions (6:1 on bg) */
  --c-line: #E4E2DC;          /* thin dividers */
  --c-line-2: #D3D1C9;
  --c-field: #8F8D86;         /* form field borders (3.3:1 on white) */
  --c-accent: #A4BD39;        /* Express lime, sampled from the logo */
  --c-accent-hover: #B3CB4C;
  --c-accent-ink: #4B6A14;    /* accent for text on light (5.7:1) */
  --c-accent-soft: #EEF2DA;
  --c-accent-line: #D9E3AE;
  --c-dark: #1C1C1A;          /* footer, flagship, dark cards */
  --c-dark-2: #262624;
  --c-on-dark: #F2F1EC;
  --c-on-dark-muted: #B4B3AC;
  --c-error: #B42318;

  /* Service colours (T-068, director 19 Oct): one per service, the same wherever the service is named. Change a
     colour here only. --svc-<key> on light grounds: 4.6:1 or more on the page, 5:1 or more on white, so it may be
     used as text; --svc-<key>-dk on dark grounds (footer, flagship, photo cards): 4.6:1 or more on --c-dark.
     The brand lime stays the brand's (logo, main buttons); no service is lime, and fire protection is not red.
     Used through [data-svc="<key>"] (section 24), the keys of SERVICES in tools/build.py and of
     eg_service_registry() in the theme. */
  --svc-facades: #3164AB;             /* cobalt */
  --svc-facades-dk: #5487CD;
  --svc-recladding: #187B78;          /* teal */
  --svc-recladding-dk: #3F928F;
  --svc-drylining: #AD5260;           /* plaster rose */
  --svc-drylining-dk: #C26C77;
  --svc-sfs: #3A5D73;                 /* steel */
  --svc-sfs-dk: #68899F;
  --svc-render-ewi: #7A5617;          /* bronze */
  --svc-render-ewi-dk: #A57E43;
  --svc-passive-fire: #B25417;        /* ember */
  --svc-passive-fire-dk: #C76D3C;
  --svc-flashings-copings: #8A4879;   /* aubergine */
  --svc-flashings-copings-dk: #B0719E;
  --svc-design: #564692;              /* indigo */
  --svc-design-dk: #877BC5;

  /* Type */
  --f-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fs-body: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);           /* 17 to 18px */
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);              /* 18 to 21px */
  --fs-small: 0.9375rem;                                              /* 15px */
  --fs-xs: 0.875rem;                                                  /* 14px */
  --fs-display: clamp(2.5rem, 1.2rem + 4.45vw, 5.75rem);             /* 40 to 92px */
  --fs-h2: clamp(2rem, 1.35rem + 2.4vw, 3.5rem);                      /* 32 to 56px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);                    /* 20 to 24px */

  /* Space */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);                        /* 16 to 32px */
  --container: 86rem;                                                 /* 1376px */
  --section-y: clamp(3rem, 2.1rem + 3.4vw, 5.5rem);                    /* 48 to 88px, doubled between sections */
  --stack: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);

  /* Shape and depth */
  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 20px;
  --r-sm: 12px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(28, 28, 26, 0.04), 0 12px 32px -16px rgba(28, 28, 26, 0.16);
  --shadow-lift: 0 2px 4px rgba(28, 28, 26, 0.05), 0 24px 48px -24px rgba(28, 28, 26, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layers */
  --z-bar: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-toast: 70;
}

/* 2. Base
   ----------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip, not hidden: hidden would make <body> the scroll container and stop the sticky header */
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }

::selection { background: var(--c-accent); color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-accent-ink);
  outline-offset: 3px;
}

/* R2-01: a focused element is never hidden under the sticky header, in either tab direction (Shift+Tab
   scrolls it to the top edge). scroll-padding-top keeps the header clear: 82px under 768px (10px gap +
   62px bar + 10px), 92px from 768px (12 + 68 + 12). That is also where a stuck section nav's links sit,
   so focusing them never scrolls the page (pages.css adds the nav's own clearance below it). Anchor
   offsets subtract the padding, so in-page links land where they did (104px from the top). */
:root { --scroll-pad-top: 82px; }
@media (min-width: 768px) {
  :root { --scroll-pad-top: 92px; }
}
html { scroll-padding-top: var(--scroll-pad-top); }
[id] { scroll-margin-top: calc(104px - var(--scroll-pad-top)); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

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

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 96px;
  pointer-events: none;
}

/* 3. Layout and type helpers
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section-head {
  max-width: 50rem;
  margin-bottom: var(--stack);
}

.section-head--row {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-head--row > div { max-width: 50rem; }

@media (min-width: 768px) {
  .section-head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section-head__action { flex: none; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(164, 189, 57, 0.22);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-intro {
  margin-top: 18px;
  max-width: 40em;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text-2);
}

/* Italic serif accent words inside sans headings */
.accent {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: -0.01em;
}

.caption {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-muted);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(20, 20, 20, 0.28);
  transition: text-decoration-color 0.3s var(--ease), color 0.3s var(--ease);
}
.text-link:hover { text-decoration-color: var(--c-accent-ink); color: var(--c-accent-ink); }

.text-link--icon,
.text-link--arrow { gap: 8px; }
.text-link--icon { text-decoration: none; }
.text-link--icon span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(20, 20, 20, 0.28);
}
.text-link--icon .icon { width: 20px; height: 20px; color: var(--c-accent-ink); }
.text-link--arrow .icon { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.text-link--arrow:hover .icon { transform: translateX(3px); }

/* 4. Buttons, chips and small parts
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 6px 6px 6px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease);
}
.btn__icon .icon { width: 18px; height: 18px; }
.btn:hover .btn__icon { transform: translate(2px, -2px) scale(1.05); }

.btn--primary { background: var(--c-ink); color: #fff; }
.btn--primary .btn__icon { background: var(--c-accent); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-ink-2); }

.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 { background: transparent; color: var(--c-ink); border-color: rgba(20, 20, 20, 0.22); }
.btn--outline .btn__icon { background: var(--c-ink); color: #fff; }
.btn--outline:hover { border-color: var(--c-ink); background: var(--c-surface); }

.btn--lg { min-height: 58px; padding-left: 26px; font-size: 1.0625rem; }
.btn--lg .btn__icon { width: 46px; height: 46px; }

.btn--sm { min-height: 44px; padding: 5px 5px 5px 18px; gap: 10px; font-size: 0.90625rem; }
.btn--sm .btn__icon { width: 34px; height: 34px; }
.btn--sm .btn__icon .icon { width: 15px; height: 15px; }

.round-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
  transition: transform 0.5s var(--ease);
}
.round-icon .icon { width: 17px; height: 17px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
}
.chip .icon { width: 17px; height: 17px; color: var(--c-accent-ink); }
.chip--strong { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip--strong .icon { color: var(--c-accent); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink-2);
}
.tag--more { background: transparent; border: 1px solid var(--c-line-2); color: var(--c-muted); }

/* Facts: Main contractor, Contract value, Location (T-057: Client and Duration are not shown) */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.facts dt {
  margin-bottom: 3px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-muted);
}
.facts dd {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.facts__item--value dd {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.facts .is-tbc { color: var(--c-muted); font-weight: 500; }
.facts .is-tbc abbr { border-bottom: 1px dotted currentColor; cursor: help; }

.facts--dark { border-top-color: rgba(255, 255, 255, 0.14); }
.facts--dark dt { color: var(--c-on-dark-muted); }
.facts--dark dd { color: var(--c-on-dark); }
.facts--dark .is-tbc { color: var(--c-on-dark-muted); }

@media (min-width: 480px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* T-057: the last fact takes the rest of its row, so a short list (the live view drops unconfirmed facts) leaves
   no empty cell; the Express Facades rule */
.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; }
}

/* 5. Header
   ----------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: 10px max(8px, calc(var(--gutter) - 12px)) 0;
  pointer-events: none;
}

.site-header__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(var(--container) + 24px);
  height: 62px;
  margin-inline: auto;
  padding: 0 7px 0 10px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 10px 30px -14px rgba(28, 28, 26, 0.18);
  transition: height 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}

.site-header.is-compact .site-header__bar {
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.06), 0 16px 36px -16px rgba(28, 28, 26, 0.3);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header__bar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: none;
}
.brand__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1E1E1C;
}
.brand__mark img { width: 31px; height: 31px; }
/* The company's own lockup, "Express Group ltd" running into the swirl (director, 19 Oct; T-065): the light-ground
   file in the header and menu, the dark-ground file in the footer, never redrawn or recoloured. */
.brand__logo { display: block; width: auto; height: 44px; margin: -2px 0; }
.brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.primary-nav { display: none; margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; }
.primary-nav__item { display: flex; align-items: center; }
.primary-nav__item + .primary-nav__item::before {
  content: "/";
  margin: 0 12px;
  font-weight: 400;
  color: var(--c-line-2);
}
.primary-nav__link {
  position: relative;
  display: inline-block;
  padding: 12px 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.13em;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}
.primary-nav__link:hover::after,
.primary-nav__link.is-active::after { transform: scaleX(1); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-phone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.header-phone .icon { width: 18px; height: 18px; }
.header-phone__number { display: none; }
.header-phone:hover { border-color: var(--c-ink); }

@media (min-width: 380px) and (max-width: 767.98px) {
  .header-phone {
    width: auto;
    padding: 0 12px;
    border-radius: var(--r-pill);
    font-size: 0.84375rem;
    letter-spacing: -0.01em;
  }
  .header-phone .icon { display: none; }
  .header-phone__number { display: inline; }
}

.header-cta { display: none; }

.menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  transition: background-color 0.3s var(--ease);
}
.menu-toggle:hover { background: var(--c-ink-2); }
.menu-toggle__lines,
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-toggle__lines { position: relative; }
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.35s var(--ease);
}
.menu-toggle__lines::before { top: -6px; }
.menu-toggle__lines::after { top: 6px; width: 12px; }
.menu-toggle:hover .menu-toggle__lines::after { transform: scaleX(1.5); transform-origin: left; }

@media (min-width: 768px) {
  .site-header { padding-top: 12px; }
  .site-header__bar { height: 68px; gap: 16px; padding: 0 8px 0 12px; }
  .site-header.is-compact .site-header__bar { height: 58px; }
  .brand__name { font-size: 1.1875rem; }
  .brand__logo { height: 54px; }
  .site-header.is-compact .brand__logo { height: 48px; }
  .header-cta { display: inline-flex; }
  .header-phone {
    display: inline-flex;
    width: auto;
    height: 44px;
    gap: 8px;
    padding: 0 14px 0 12px;
    border-radius: var(--r-pill);
  }
  .header-phone__number { display: inline; }
}

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .site-header__actions { margin-left: 0; }
  .site-header__actions::before {
    content: "";
    width: 1px;
    height: 26px;
    margin: 0 10px 0 6px;
    background: var(--c-line);
  }
  .header-phone { border-color: transparent; padding: 0 6px; }
  .header-phone:hover { border-color: transparent; color: var(--c-accent-ink); }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .primary-nav__link { letter-spacing: 0.1em; }
  .primary-nav__item + .primary-nav__item::before { margin: 0 8px; }
  .header-phone .icon { display: none; }
}

@media (min-width: 1200px) {
  .site-header__bar { gap: 20px; padding: 0 8px 0 14px; }
  .primary-nav__item + .primary-nav__item::before { margin: 0 16px; }
  .site-header__actions { gap: 10px; }
}

/* Header links "Projects" and "Accreditations" (user, 13 Oct): after the three services, shown only where
   they fit with room to spare. Below that they stay in the full menu (they are in it at every width).
   1024-1199px: the three services, as approved. 1200-1279px: + Projects. 1280px and up: + Accreditations,
   with the compact tracking and separators of the 1024px header up to 1439px. */
.primary-nav__item--projects,
.primary-nav__item--accreditations { display: none; }
@media (min-width: 1200px) {
  .primary-nav__item--projects { display: flex; }
}
@media (min-width: 1280px) {
  .primary-nav__item--accreditations { display: flex; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .primary-nav__link { letter-spacing: 0.1em; }
  .primary-nav__item + .primary-nav__item::before { margin: 0 8px; }
}

/* 6. Full menu
   ----------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0s;
}

.menu__panel {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  min-height: 100%;
  margin-inline: auto;
  padding: 14px var(--gutter) 40px;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-weight: 600;
}
.menu__close .icon { width: 18px; height: 18px; }

.menu__grid {
  display: grid;
  gap: 36px;
  padding-top: 32px;
}

.menu__label {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
}
.menu__label:not(:first-child) { margin-top: 28px; }

.menu__lead a,
.menu__list a,
.menu__small a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
  color: var(--c-ink);
  transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.menu__lead a {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.menu__list a {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.menu__small a { font-size: 1.0625rem; font-weight: 500; }
.menu__small .icon { width: 16px; height: 16px; color: var(--c-muted); }
.menu__lead a:hover,
.menu__list a:hover,
.menu__small a:hover { color: var(--c-accent-ink); transform: translateX(4px); }

.menu__contact { display: grid; gap: 6px; }
.menu__contact a {
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}
.menu__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  justify-items: start;
}

@media (min-width: 1024px) {
  .menu__panel { padding-top: 22px; }
  .menu__grid {
    grid-template-columns: 5fr 4fr 3fr;
    gap: 48px;
    padding-top: 56px;
  }
}

.js .menu .menu__col {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.js .menu.is-open .menu__col { opacity: 1; transform: none; }
.js .menu.is-open .menu__col:nth-child(2) { transition-delay: 0.06s; }
.js .menu.is-open .menu__col:nth-child(3) { transition-delay: 0.12s; }

html.menu-open { overflow: hidden; }

/* 7. Hero
   -----------------------------------------------------------------------
   T-058 (the user's variant 3, 15 Oct): the project films fill a full-bleed stage that starts under the
   floating header bar (the bar stays as it is). The H1, lead, buttons and capability statement link sit on
   the films, bottom left, in white over a soft dark shade that lies only behind the text, so the rest of each
   film stays bright. It was tuned on the six posters and on frames sampled from every film (tasks/T-058,
   Log): every piece of text passes WCAG AA on every film. The current film's caption,
   the steps, "Watch showreel" and the pause button sit bottom right; the four figures run in a row under the
   stage. Phones (under 640px): the film comes first, edge to edge, and the text follows on the page
   background (chosen from screenshots, see the T-058 Log). T-059 (15 Oct): sharper 50 fps films and a very
   light even veil (8%) over the whole stage under the two shades. */
.hero {
  --hero-head: 72px;               /* the sticky header's height (10px gap + 62px bar); 80px from 768px */
  --hero-shade: 13 13 12;          /* the gradient's colour, as RGB channels */
  --hero-veil: 0.08;               /* T-059: the even veil over the whole stage (from 640px), under the shades */
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.hero__stage { position: relative; isolation: isolate; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero__line { display: block; text-wrap: balance; }
/* H1 eyebrow (13 Oct): the site's small eyebrow (lime dot) inside the H1, where the "On site now" label was.
   It resets the title's size, tracking and line height; the two title lines are untouched. */
.hero__title .hero__eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}
.hero__title .accent {
  font-size: 1.07em;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__lead {
  max-width: 34em;
  margin-top: clamp(18px, 2vw, 26px);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hero__actions .btn { flex: 1 1 100%; }

.hero__brochure { margin-top: 20px; }

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  margin-top: 30px;
}
.figure {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line-2);
}
.figure__value {
  font-size: clamp(1.875rem, 1.45rem + 1.25vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.figure__prefix,
.figure__unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-muted);
}
.figure__prefix { margin-right: 4px; }
.figure__label {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-muted);
}

.hero__frame {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-2);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.play-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 20px 6px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px -10px rgba(14, 14, 13, 0.45);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  transition: transform 0.3s var(--ease);
}
.play-pill__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  transition: transform 0.5s var(--ease);
}
.play-pill__icon .icon { width: 16px; height: 16px; margin-left: 2px; }
.play-pill:hover .play-pill__icon { transform: scale(1.08); }
.play-pill:active { transform: scale(0.98); }

/* Phones: the film first, edge to edge from the top of the screen (under the header bar), with the showreel
   and pause buttons on its foot; the steps and the caption under it; then the text on the page background. */
@media (max-width: 639.98px) {
  .hero { --hero-film: clamp(260px, 65vh, 760px); }  /* the film's height: 65% of the screen (the user, 23 Oct; svh where supported, below) */
  .hero__stage { margin-top: calc(-1 * var(--hero-head)); }
  .hero__body { display: flex; flex-direction: column; }
  .hero__media {
    position: relative;
    order: -1;
    display: flex;
    flex-direction: column;
    margin-inline: calc(-1 * var(--gutter));
  }
  .hero__frame { order: -2; height: var(--hero-film); }
  .hero__media .reel__steps { order: -1; padding-inline: var(--gutter); margin: 2px 0 -10px; }
  .hero__media .reel__captions { padding-inline: var(--gutter); }
  .hero__media .reel__controls {
    position: absolute;
    top: calc(var(--hero-film) - 66px);
    left: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
  }
  .hero__media .reel__controls > * { pointer-events: auto; }
  .hero__content { padding-top: 22px; }
}
@supports (height: 1svh) {
  @media (max-width: 639.98px) {
    .hero { --hero-film: clamp(260px, 65svh, 760px); }
  }
}
/* Short phones (an iPhone SE is 568px tall): a shorter film, so the headline starts above the phone bar. */
@media (max-width: 639.98px) and (max-height: 700px) {
  .hero { --hero-film: max(220px, 58vh); }
}
@supports (height: 1svh) {
  @media (max-width: 639.98px) and (max-height: 700px) {
    .hero { --hero-film: max(220px, 58svh); }
  }
}

/* From 640px: the stage. The films fill it, the gradient lies over them, the text and the controls sit on it. */
@media (min-width: 640px) {
  .hero__actions .btn { flex: 0 0 auto; }
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hero__stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(calc(100vh - var(--bottom-ui, 0px)), 940px);
    min-height: min(calc(100svh - var(--bottom-ui, 0px)), 940px);
    margin-top: calc(-1 * var(--hero-head));
    padding: calc(var(--hero-head) + clamp(40px, 6vh, 72px)) 0 clamp(18px, 2.4vw, 34px);
    background: #2B2A27;
    color: #fff;
  }
  /* The frame is positioned on the stage (its ancestors up to the stage stay static), behind everything else. */
  .hero__frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #2B2A27;
  }
  /* LCP: Chrome leaves out an image that covers the whole viewport (it takes it for a background), so a poster
     that fills the stage on a screen as tall as the stage would not count and the first film would become the
     LCP when it starts. 0.1% smaller keeps the first poster the LCP; the films stay 0.2% smaller (below). */
  .reel__frame .hero__img { transform: scale(0.999); }
  /* The veil (T-059, the user, 15 Oct: "a very, very light overlay so the text reads a little clearer"): an
     even 8% of the shade colour over the films and posters, the lightest value that visibly calms the
     brightest frames (Apex Camden's white fins); it lies under the two shades below, so every text gains
     contrast (tasks/T-059, Log). Phones have no text on the film, so they keep the films as they are. */
  .hero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgb(var(--hero-shade) / var(--hero-veil));
  }
  /* The shade: one under the text (solid to the left and bottom edges, fading out above the eyebrow and to the
     right of the widest line) and one under the caption, steps and buttons (solid to the right and bottom edges,
     fading out above and to the left). Each lies behind its own text, so it follows that text at every width;
     the rest of the film is left as it is. 0.58 is the least that passes on every film (tasks/T-058, Log). The
     ramps are eased (smoothstep), so no edge shows. */
  .hero__stage { overflow: hidden; }
  .hero__content::before,
  .hero__media .reel__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;
  }
  .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));
  }
  .hero__media .reel__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));
  }
  .hero__content,
  .hero__media > :not(.hero__frame) { position: relative; z-index: 1; }

  .hero__title { color: #fff; }
  .hero__title .hero__eyebrow { color: #fff; }
  .hero__lead { max-width: 31em; color: #fff; }
  .hero__brochure,
  .hero__brochure span { color: #fff; }
  .hero__brochure span { text-decoration-color: rgba(255, 255, 255, 0.5); }
  .hero__brochure:hover,
  .hero__brochure:hover span { color: #fff; text-decoration-color: #fff; }
  .hero__brochure .icon { color: var(--c-accent); }
  .hero__content,
  .hero__media .reel__captions { text-shadow: 0 1px 2px rgb(var(--hero-shade) / 0.18); }
  .hero__actions .btn { text-shadow: none; }
  .hero__stage :focus-visible { outline-color: #fff; }
  .hero__stage .btn--primary { border-color: rgba(255, 255, 255, 0.22); }

  /* Controls under the text (640 to 1023px): caption and buttons side by side, the steps under them. */
  .hero__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "caption controls" "steps steps";
    align-items: end;
    gap: 6px 24px;
    margin-top: clamp(28px, 4vh, 44px);
  }
  .hero__media .reel__captions { grid-area: caption; }
  .hero__media .reel__caption { align-self: end; }
  .hero__media .reel__steps { grid-area: steps; margin: -8px 0 -14px; }
  .hero__media .reel__controls { grid-area: controls; display: flex; align-items: center; gap: 10px; }

  .hero .figures { margin-top: clamp(28px, 3.4vw, 44px); }
}

@media (min-width: 768px) {
  .hero { --hero-head: 80px; }
}

/* From 1024px: the text bottom left, the controls in a column bottom right, their feet on one line. */
@media (min-width: 1024px) {
  .hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 22rem);
    align-items: end;
    gap: clamp(32px, 5vw, 96px);
  }
  .hero__media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "caption" "steps" "controls";
    gap: 8px 0;
    margin-top: 0;
  }
  .hero__media .reel__steps { margin: -6px 0 -6px; }
  .hero__media .reel__controls { justify-content: space-between; }
  /* The first line stays on one line beside the controls column at every width (at most 84px). */
  .hero__title { font-size: min(var(--fs-display), 5.6vw, 5.25rem); }
}

@media (min-width: 1200px) {
  .hero__actions .btn { flex: 0 0 auto; }
}

/* 8. Estimate band (second route)
   ----------------------------------------------------------------------- */
.estimate { padding-bottom: clamp(44px, 5vw, 76px); }

.estimate__panel {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.8vw, 36px);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-xl);
  background: var(--c-accent-soft);
}
.estimate .eyebrow { margin-bottom: 12px; }
.estimate .eyebrow::before { background: var(--c-accent-ink); box-shadow: none; }
.estimate__title {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.625rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.estimate__title .accent { white-space: nowrap; }
.estimate__text {
  margin-top: 12px;
  max-width: 38ch;
  font-size: var(--fs-body);
  color: var(--c-ink-2);
}
.estimate__cta { justify-self: stretch; }

@media (min-width: 640px) {
  .estimate__cta { justify-self: start; }
}

@media (min-width: 1024px) {
  .estimate__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro drop" "intro cta";
    align-items: center;
    gap: 18px clamp(24px, 3vw, 44px);
  }
  .estimate__intro { grid-area: intro; }
  .estimate__panel > .dropzone { grid-area: drop; }
  .estimate__cta { grid-area: cta; justify-self: start; }
}

@media (min-width: 1280px) {
  .estimate__panel {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 4.6fr) auto;
    grid-template-areas: "intro drop cta";
  }
}

/* Drop zones (estimate band and form) */
.dropzone { position: relative; }
.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone__label {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1.5px dashed rgba(20, 20, 20, 0.3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.75);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.dropzone__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-accent);
}
.dropzone__icon .icon { width: 21px; height: 21px; }
.dropzone__title { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.dropzone__browse {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-accent-ink);
}
.dropzone__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.dropzone:hover .dropzone__label,
.dropzone.is-dragover .dropzone__label { border-color: var(--c-ink); background: var(--c-surface); }
.dropzone__input:focus-visible + .dropzone__label {
  outline: 3px solid var(--c-accent-ink);
  outline-offset: 3px;
}
.dropzone__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dropzone__files:empty { display: none; }
.dropzone__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 0.8125rem;
  font-weight: 500;
}
.dropzone__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__file .icon { width: 14px; height: 14px; color: var(--c-accent-ink); }

/* 9. Trust strip
   ----------------------------------------------------------------------- */
.trust { padding-bottom: clamp(16px, 2vw, 24px); }
.trust__inner {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.trust__row {
  display: grid;
  gap: 14px;
  padding: 22px 0;
}
.trust__row + .trust__row { border-top: 1px solid var(--c-line); }
.trust__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
}
/* 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 or shrunk below that height: they wrap instead. T-094: in the firms'
   own colours, as each firm issues its logo, at full strength (no ink, opacity or filter). */
.trust__logos {
  --logo-h: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
}
.trust__logo {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}
.trust__logo img {
  display: block;
  width: auto;
  height: calc(var(--logo-h) * var(--s, 1));
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 640px) {
  .trust__logos { --logo-h: 30px; gap: 16px 44px; }
}
.trust__chips { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 1024px) {
  .trust__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 26px 0;
  }
  .trust__logos { --logo-h: 34px; gap: 16px 40px; }
}
@media (min-width: 1280px) {
  .trust__logos { gap: 16px 64px; }
}

/* 10. Services
   ----------------------------------------------------------------------- */
.lead-services {
  display: grid;
  gap: 14px;
}

.lead-service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  border-radius: var(--r-xl);
  background: var(--c-ink-2);
  color: #fff;
}
.lead-service__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.lead-service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 13, 0) 22%, rgba(14, 14, 13, 0.5) 52%, rgba(14, 14, 13, 0.9) 100%);
}
.lead-service:hover .lead-service__img { transform: scale(1.04); }

.lead-service__body {
  width: 100%;
  max-width: 36rem;
  padding: clamp(20px, 2.4vw, 32px);
}
.lead-service__title {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.lead-service__text {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.lead-service__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.lead-service__list li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  font-weight: 500;
}
.lead-service__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.lead-service__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lead-service:hover .round-icon { transform: translate(2px, -2px) scale(1.05); }

.lead-service--large .lead-service__title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); }
.lead-service--large .lead-service__text { font-size: var(--fs-body); }

@media (min-width: 768px) {
  .lead-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-service--large { grid-column: 1 / -1; min-height: 520px; }
}

@media (min-width: 1024px) {
  .lead-services {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: repeat(2, minmax(340px, auto));
  }
  .lead-service { min-height: 0; }
  .lead-service--large { grid-column: auto; grid-row: span 2; min-height: 700px; }
}

.more-services { margin-top: clamp(36px, 4.5vw, 64px); }
.more-services__title {
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
}
.more-services__list {
  display: grid;
  border-top: 1px solid var(--c-line);
}
.more-service {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}
.more-service__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-accent-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.more-service__icon .icon { width: 21px; height: 21px; }
.more-service__name {
  align-self: end;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--c-ink);
}
.more-service__name::after { content: ""; position: absolute; inset: 0; }
.more-service__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
}
.more-service:hover .more-service__icon { background: var(--c-accent); color: var(--c-ink); }
.more-service:hover .more-service__name { color: var(--c-accent-ink); }

@media (min-width: 768px) {
  .more-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
/* Grid pass (T-026 follow-up): in two columns an odd last service fills the row. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .more-service:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .more-services__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .more-service {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    padding: 24px 22px 26px;
    border-bottom: 0;
    border-left: 1px solid var(--c-line);
  }
  .more-service:first-child { border-left: 0; padding-left: 0; }
  .more-service:last-child { padding-right: 0; }
  .more-service__icon { grid-row: auto; }
  .more-service__name { align-self: start; }
}

/* 11. Factory
   ----------------------------------------------------------------------- */
.factory__inner {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}
.factory__media { display: grid; gap: 12px; }
/* R1-10: the factory photo without a play button until real footage exists (same box as .video-poster). */
.factory__photo {
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}
.factory__photo img { width: 100%; height: 100%; object-fit: cover; }

.video-poster {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--c-dark);
  color: var(--c-ink);
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 13, 0.08) 0%, rgba(14, 14, 13, 0.42) 100%);
}
.video-poster__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 12px rgba(164, 189, 57, 0.28);
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.video-poster__play .icon { width: 30px; height: 30px; margin-left: 4px; }
.video-poster__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.78);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.video-poster:hover img { transform: scale(1.03); }
.video-poster:hover .video-poster__play {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 18px rgba(164, 189, 57, 0.22);
}

.factory__list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.factory__list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
}
.factory__list strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
}
.factory__tick {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.factory__tick .icon { width: 15px; height: 15px; }
.factory__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 30px;
}

@media (min-width: 1024px) {
  .factory__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
  .video-poster,
  .factory__photo { aspect-ratio: 16 / 12; }
  .video-poster__label { left: 24px; bottom: 24px; }
}

/* 12. Projects and flagship
   ----------------------------------------------------------------------- */
.flagship {
  display: grid;
  overflow: hidden;
  margin-bottom: clamp(16px, 2vw, 24px);
  border-radius: var(--r-xl);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.flagship__media {
  position: relative;
  margin: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: var(--c-dark-2);
}
.flagship__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flagship__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.8);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.flagship__camera {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
}
.flagship__camera .icon { width: 16px; height: 16px; }
.flagship__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 48px);
  padding-top: clamp(12px, 2vw, 48px);
}
.flagship__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
}
.flagship__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}
.flagship__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(164, 189, 57, 0.45);
  border-radius: var(--r-pill);
  background: rgba(164, 189, 57, 0.12);
  font-size: 0.78125rem;
  color: var(--c-on-dark);
}
.flagship__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(164, 189, 57, 0.25);
}
.flagship__title {
  margin-top: 16px;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.flagship__subtitle {
  margin-top: 6px;
  font-family: var(--f-serif);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--c-on-dark-muted);
}
.flagship__text {
  margin-top: 16px;
  max-width: 32em;
  color: var(--c-on-dark-muted);
}
.flagship .facts { margin-top: 26px; }
.flagship .tags { margin-top: 20px; }
.tags--dark .tag {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--c-on-dark);
}

@media (min-width: 1024px) {
  .flagship { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .flagship__media { aspect-ratio: auto; min-height: 460px; margin: 12px 0 12px 12px; }
  .flagship__content { padding: 44px 44px 44px 40px; }
}

.project-grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
}

.project-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);
}
.project-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.project-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.045); }

/* Photographer's credit on a photo shown without a caption (T-015 R2-07, mirrored from WordPress in round 3):
   the homepage's large project card (lower right of the photo) and the sector photos (upper right, the text
   sits at the bottom). "Photo: Craig Auckland / Fotohaus" on Worthing; clicks pass through to the card link. */
.project-card__media { position: relative; }
.photo-credit {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.62);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  pointer-events: none;
}
/* A collapsed sector card is narrow (about 195px at 1440): the line may wrap, so a rounded box, not a pill. */
.sector > .photo-credit { top: 10px; bottom: auto; border-radius: 8px; }

.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 26px);
}
.project-card__meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted);
}
.project-card__title {
  margin-top: -8px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.project-card__title a { text-decoration: none; color: var(--c-ink); }
.project-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project-card .tags { margin-top: auto; }
.project-card .tag--more { position: relative; z-index: 2; }

@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .project-card .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card .facts > .facts__item:last-child { grid-column: auto; }
  .project-card .facts > .facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .project-card { grid-column: span 5; }
  .project-card--wide { grid-column: span 7; }
  .project-card__media { aspect-ratio: auto; height: clamp(250px, 23vw, 360px); }
}

/* 13. Why (About)
   ----------------------------------------------------------------------- */
.why__inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
.why__photo {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.why__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% 60%;
  border-radius: var(--r-lg);
}
.why__intro .text-link--arrow { margin-top: 12px; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .why__photo img { aspect-ratio: 3 / 2; object-position: 30% 70%; }
}

.why__grid {
  display: grid;
  gap: 14px;
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.why-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.why-card__icon .icon { width: 24px; height: 24px; }
.why-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.why-card__text {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-2);
}
.why-card .text-link--icon { margin-top: auto; padding-top: 6px; }

.why-card--dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.why-card--dark .why-card__icon { background: var(--c-accent); color: var(--c-ink); }
.why-card--dark .why-card__text { color: var(--c-on-dark-muted); }
.why-card--tint { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.why-card--tint .why-card__icon { background: var(--c-surface); }

@media (min-width: 640px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .why__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .why__grid { grid-auto-rows: 1fr; align-self: end; }
  .why-card { min-height: 290px; }
  .why__photo img { aspect-ratio: 5 / 4; }
}

/* 14. Sectors
   ----------------------------------------------------------------------- */
.sector-list {
  display: grid;
  gap: 12px;
}
.sector {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  border-radius: var(--r-lg);
  background: var(--c-ink-2);
  color: #fff;
}
.sector__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 13, 0.05) 25%, rgba(14, 14, 13, 0.55) 60%, rgba(14, 14, 13, 0.9) 100%);
}
.sector__content { width: 100%; padding: 22px; }
.sector__title {
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.sector__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  cursor: default;
}
.sector__detail { display: grid; }
.sector__inner { min-height: 0; }
.sector__text {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.sector__projects {
  display: grid;
  gap: 0;
  margin-top: 14px;
  font-size: var(--fs-small);
}
.sector__projects li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sector__projects li span:last-child {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sector__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.sector__link .icon { width: 17px; height: 17px; }

@media (min-width: 640px) {
  .sector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector { min-height: 380px; }
  .sector:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .sector-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sector { grid-column: span 2; min-height: 420px; }
  .sector:nth-child(n + 4) { grid-column: span 3; }
}

@media (min-width: 1280px) {
  .sector-list {
    display: flex;
    gap: 12px;
    height: 560px;
  }
  .sector {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    transition: flex-grow 0.8s var(--ease-soft);
  }
  .sector.is-active { flex-grow: 2.8; }
  .sector__content { padding: 24px 20px; }
  .sector__title { font-size: 1.3125rem; }
  .sector.is-active .sector__title { font-size: 1.75rem; }
  .sector__toggle { cursor: pointer; }
  .sector__detail {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s var(--ease), opacity 0.4s var(--ease);
  }
  .sector__inner { overflow: hidden; min-width: 18rem; }
  .sector.is-active .sector__detail { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.15s; }
  .sector:not(.is-active) .sector__img { filter: saturate(0.75); }
  .sector.is-active .sector__img { transform: scale(1.03); }
  .sector:not(.is-active):hover::after { background: linear-gradient(180deg, rgba(14, 14, 13, 0.02) 25%, rgba(14, 14, 13, 0.5) 60%, rgba(14, 14, 13, 0.86) 100%); }
}

/* 15. Health and safety
   ----------------------------------------------------------------------- */
.safety__inner {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
.safety__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.awards {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 32px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.awards__img {
  width: 88px;
  height: 112px;
  object-fit: cover;
  border-radius: 14px;
}
.awards__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.awards__title .icon { width: 20px; height: 20px; color: var(--c-accent-ink); }
.awards__list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-text-2);
}
.awards__list strong { display: block; font-weight: 600; color: var(--c-ink); }

.badges {
  display: grid;
  gap: 12px;
}
.badge {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.badge__seal {
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-bg);
  box-shadow: inset 0 0 0 4px var(--c-bg), inset 0 0 0 5px var(--c-line-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
.badge__seal small {
  display: block;
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.badge__seal--small { font-size: 0.65rem; letter-spacing: 0.02em; }
.badge__seal--accent {
  background: var(--c-accent);
  border-color: var(--c-ink);
  box-shadow: inset 0 0 0 4px var(--c-accent), inset 0 0 0 5px rgba(20, 20, 20, 0.25);
  color: var(--c-ink);
}
.badge__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.badge__lead {
  margin-top: 4px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}
.badge__text {
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text-2);
}
.badge--feature {
  grid-template-columns: 84px minmax(0, 1fr);
  padding: 22px;
  border-color: var(--c-dark);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.badge--feature .badge__seal { width: 84px; height: 84px; font-size: 1rem; }
.badge--feature .badge__seal small { font-size: 0.7rem; }
.badge--feature .badge__title { font-size: 1.375rem; letter-spacing: -0.02em; }
.badge--feature .badge__lead { color: var(--c-accent); }
.badge--feature .badge__text { color: var(--c-on-dark-muted); }

.badge--iso { grid-template-columns: minmax(0, 1fr); gap: 16px; }

@media (max-width: 639.98px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .badge--feature,
  .badge--iso { grid-column: 1 / -1; }
  .badge:not(.badge--feature):not(.badge--iso) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    padding: 16px;
  }
  .badge:not(.badge--feature):not(.badge--iso) .badge__seal { width: 54px; height: 54px; font-size: 0.6875rem; }
  .badge:not(.badge--feature):not(.badge--iso) .badge__seal--small { font-size: 0.59375rem; }
}
.badge__seals { display: flex; }
.badge__seals .badge__seal { width: 60px; height: 60px; font-size: 0.75rem; }
.badge__seals .badge__seal + .badge__seal { margin-left: -10px; }
.badge__seals .badge__seal:nth-child(2) { background: var(--c-surface); box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 5px var(--c-line-2); }
.badge__seals .badge__seal:nth-child(3) { background: var(--c-accent-soft); box-shadow: inset 0 0 0 4px var(--c-accent-soft), inset 0 0 0 5px var(--c-accent-line); }

@media (min-width: 640px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge--feature,
  .badge--iso { grid-column: 1 / -1; }
  .badge--iso { grid-template-columns: auto minmax(0, 1fr); gap: 22px; padding: 22px; }
  .badge__seals .badge__seal { width: 72px; height: 72px; font-size: 0.8125rem; }
}

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

/* 16. News and company links
   ----------------------------------------------------------------------- */
.news__grid {
  display: grid;
  gap: 14px;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: clamp(22px, 2.4vw, 30px);
  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);
}
.news-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.news-card__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-accent-ink);
}
.news-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.news-card__title a { text-decoration: none; color: inherit; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-2);
}
.news-card .round-icon { margin-top: auto; }
.news-card:hover .round-icon { transform: translate(2px, -2px) scale(1.05); }

.news-card--feature { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.news-card--feature .news-card__category { color: var(--c-accent); }
.news-card--feature .news-card__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; }
.news-card--feature .news-card__text { color: var(--c-on-dark-muted); max-width: 30em; }

@media (min-width: 768px) {
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-card--feature { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .news__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
  .news-card--feature { grid-column: auto; min-height: 320px; }
}

.company-links {
  display: grid;
  margin-top: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid var(--c-line);
}
.company-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-ink);
}
.company-link__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.company-link__icon .icon { width: 21px; height: 21px; }
.company-link__title {
  align-self: end;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.company-link__text {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-text-2);
}
.company-link:hover .company-link__icon { background: var(--c-accent); color: var(--c-ink); }
.company-link:hover .company-link__title { color: var(--c-accent-ink); }

@media (min-width: 640px) {
  .company-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .company-link:last-child:nth-child(odd) { grid-column: 1 / -1; } /* grid pass: only an odd last link fills the row */
}

@media (min-width: 1100px) {
  .company-links {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .company-link {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    padding: 24px 22px 26px;
    border-bottom: 0;
    border-left: 1px solid var(--c-line);
  }
  .company-link:first-child { border-left: 0; padding-left: 0; }
  .company-link:last-child { padding-right: 0; }
  .company-link:last-child:nth-child(odd) { grid-column: auto; }
  /* grid pass: four links (thank-you page) share the row instead of leaving a fifth column empty */
  .company-links:has(> .company-link:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .company-link__icon { grid-row: auto; }
  .company-link__title { align-self: start; }
}

/* 17. Group companies
   ----------------------------------------------------------------------- */
.group__grid {
  display: grid;
  gap: 14px;
}
.group-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.group-card__plate {
  display: grid;
  place-items: center;
  height: 132px;
  margin-bottom: 8px;
  padding: 22px;
  border-radius: 16px;
  background: var(--c-dark);
}
.group-card__plate img {
  width: auto;
  max-width: 62%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
}
.group-card__plate .group-card__logo--wide { max-width: 50%; }
.group-card__title,
.group-card__text,
.group-card .text-link,
.group-card__soon { margin-inline: 10px; }
.group-card__title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.group-card__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-2);
}
.group-card .text-link { margin-top: auto; padding-top: 8px; }
.group-card__soon {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
}

@media (min-width: 768px) {
  .group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* Four group cards (T-088: the Group About lists FAB Supplies too): two by two, then one row of four */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .group__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .group__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.js .group__grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* 18. Careers band
   ----------------------------------------------------------------------- */
.careers__band {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}
.careers__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 65% 50%;
}
.careers__card { padding: clamp(22px, 3vw, 40px); }
.careers__text {
  margin-top: 16px;
  max-width: 34em;
  color: var(--c-text-2);
}
.careers__card .btn { margin-top: 26px; }

@media (min-width: 1024px) {
  .careers__band {
    min-height: 580px;
    align-items: center;
    border: 0;
    background: var(--c-dark);
  }
  .careers__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 70% 40%;
  }
  .careers__card {
    position: relative;
    max-width: 560px;
    margin: 32px;
    padding: 40px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lift);
  }
}

/* 19. Tender section and form
   ----------------------------------------------------------------------- */
.tender__inner {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
.tender__subtitle {
  margin-top: 34px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.steps {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  counter-reset: step;
}
.step {
  position: relative;
  min-height: 32px;
  padding-left: 46px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-ink);
}
.step__title { font-weight: 600; color: var(--c-ink); }

.contacts {
  display: grid;
  gap: 18px;
  margin: 32px 0 22px;
  padding-top: 26px;
  border-top: 1px solid var(--c-line);
}
.contact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.contact__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-accent-ink);
}
.contact__icon .icon { width: 19px; height: 19px; }
.contact__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-muted);
}
.contact__value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.contact__value { display: flex; align-items: center; min-height: 44px; }
a.contact__value:hover { color: var(--c-accent-ink); }
.contact .text-link { font-size: var(--fs-xs); }

.tender-form {
  padding: clamp(18px, 3vw, 40px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}

.route { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.route__legend { margin-bottom: 12px; padding: 0; font-size: var(--fs-small); font-weight: 600; }
.route__options { display: grid; gap: 10px; }
.route__option { position: relative; display: flex; }
.route__option .route__text { flex: 1; }
.route__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.route__text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line-2);
  border-radius: 16px;
  background: var(--c-bg);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.route__text .icon { width: 20px; height: 20px; color: var(--c-muted); }
.route__option input:checked + .route__text {
  border-color: var(--c-ink);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
.route__option input:checked + .route__text .icon { color: var(--c-accent-ink); }
.route__option input:focus-visible + .route__text { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }

.form-grid {
  display: grid;
  gap: 18px 16px;
}
.field { display: grid; align-content: start; min-width: 0; }
.field__label {
  margin-bottom: 8px;
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.3;
}
.field__req { color: var(--c-ink); }
.field__optional { font-weight: 400; color: var(--c-muted); }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--c-field);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field__input::placeholder { color: var(--c-muted); opacity: 1; }
.field__input:hover { border-color: var(--c-ink-2); }
.field__input:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(164, 189, 57, 0.55);
}
.field__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__textarea { min-height: 128px; resize: vertical; }
.field__error {
  display: none;
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-error);
}
.field.is-invalid .field__input { border-color: var(--c-error); }
.field.is-invalid .dropzone__label { border-color: var(--c-error); }
.field.is-invalid .field__error { display: block; }

.dropzone--form .dropzone__label { background: var(--c-bg); }

.tender-form__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.tender-form__footer .btn { justify-content: space-between; }
.tender-form__privacy {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-muted);
}
.tender-form__privacy a { color: var(--c-ink); text-underline-offset: 3px; }

.tender-form__success {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 20px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
}
.tender-form__success h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.tender-form__success p { color: var(--c-text-2); font-size: var(--fs-small); }
.tender-form__success-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-accent);
}
.tender-form__success-icon .icon { width: 20px; height: 20px; }

@media (min-width: 640px) {
  .route__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last route spans the row (no hole in the two-column grid). */
  .route__options > .route__option:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
  .tender-form__footer { flex-direction: row; align-items: center; justify-content: space-between; }
  .tender-form__privacy { max-width: 22em; }
}

@media (min-width: 1024px) {
  .tender__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .tender-form { position: sticky; top: 100px; }
}

/* 20. Footer
   ----------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(8px, 2vw, 24px);
  padding: clamp(52px, 6vw, 88px) 0 32px;
  border-radius: 32px 32px 0 0;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
.site-footer__brand { grid-column: 1 / -1; }
.brand--light { color: var(--c-on-dark); }
.site-footer__brand .brand__logo { height: 64px; }
.brand--light .brand__mark { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.site-footer__statement {
  margin-top: 18px;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-on-dark-muted);
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-on-dark);
  text-decoration: none;
}
.site-footer__social .icon { width: 22px; height: 22px; color: var(--c-accent); }
.site-footer__social:hover { color: var(--c-accent); }
.site-footer__heading {
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-on-dark-muted);
}
.site-footer__col ul { display: grid; gap: 0; }

@media (max-width: 767.98px) {
  .site-footer__col--wide { grid-column: 1 / -1; }
  .site-footer__col--group ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
}
.site-footer__col a {
  display: block;
  padding-block: 10px;
  font-size: var(--fs-small);
  color: var(--c-on-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-footer__col a:hover { color: var(--c-accent); }
.site-footer__address {
  padding-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-on-dark-muted);
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__legal {
  max-width: 62em;
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--c-on-dark-muted);
}
.site-footer__policies { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-footer__policies a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--fs-xs);
  color: var(--c-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
  .site-footer__bottom { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 32px; }
  .site-footer__policies { flex: none; }
}

@media (min-width: 1280px) {
  .site-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 2.2fr) minmax(0, 1.8fr) minmax(0, 2.6fr); }
  .site-footer__brand { grid-column: auto; }
}

/* T-061: accreditation logos above the bottom bar. Each mark as the scheme issues it, on a small white tile (a mark
   drawn for a dark ground sits on an outlined dark tile), the same tile height, even gaps; on phones they wrap and
   centre. The ISO mark keeps its certificate numbers under it, one per line (Forefront's rules: 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: var(--r-sm);
  background: #FFFFFF;
}
.accreditation--dark .accreditation__tile { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.accreditation__tile img {
  display: block;
  width: auto;
  height: calc(var(--acc-h) * var(--s, 1));
  max-width: 100%;
  object-fit: contain;
}
.accreditation__caption {
  display: grid;
  width: 0;
  min-width: 100%;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark-muted);
}
.site-footer .accreditation .tbc {
  position: absolute;
  top: -9px;
  right: -9px;
  padding: 1px 7px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  background: var(--c-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-on-dark);
}
.site-footer .accreditation .tbc abbr { text-decoration: none; cursor: help; }
@media (max-width: 639.98px) {
  .site-footer__accreditations { text-align: center; }
  .accreditations { justify-content: center; }
}

/* 21. Mobile bottom bar
   ----------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  background: rgba(246, 245, 241, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease);
}
.mobile-bar.is-hidden { transform: translateY(110%); }
.mobile-bar .btn { min-height: 52px; }
.mobile-bar__call { gap: 8px; padding: 6px 20px 6px 16px; }
.mobile-bar__call .icon { width: 19px; height: 19px; }
.mobile-bar__cta { justify-content: space-between; }

@media (max-width: 767.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  :root { --bottom-ui: calc(76px + env(safe-area-inset-bottom)); }
}
/* R1-07: a focused element is never hidden under the mobile bar. A cookie banner adds its own height
   through --banner-h while it is open (WordPress sets it). */
html { scroll-padding-bottom: calc(var(--bottom-ui, 0px) + var(--banner-h, 0px) + 12px); }
@media (min-width: 768px) {
  .mobile-bar { display: none; }
}

/* 22. Dialog and toast
   ----------------------------------------------------------------------- */
.video-dialog {
  width: min(980px, calc(100% - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: var(--c-on-dark);
  overflow: hidden;
}
.video-dialog::backdrop {
  background: rgba(14, 14, 13, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.video-dialog__frame { position: relative; aspect-ratio: 16 / 9; min-height: 360px; }
.video-dialog__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.video-dialog__message {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  height: 100%;
  padding: 72px 24px 32px;
  text-align: center;
}
.video-dialog__kicker {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink);
}
.video-dialog__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); letter-spacing: -0.03em; }
.video-dialog__text { max-width: 30em; color: var(--c-on-dark-muted); }
.video-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, 0.6);
  font-weight: 600;
  color: #fff;
}
.video-dialog__close .icon { width: 17px; height: 17px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: var(--z-toast);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 767.98px) {
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* 23. Motion
   ----------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .project-grid > [data-reveal]:nth-child(2n),
.js .why__grid > [data-reveal]:nth-child(2n),
.js .news__grid > [data-reveal]:nth-child(2),
.js .group__grid > [data-reveal]:nth-child(2),
.js .lead-services > [data-reveal]:nth-child(2),
.js .badges > [data-reveal]:nth-child(2n) { transition-delay: 0.08s; }
.js .news__grid > [data-reveal]:nth-child(3),
.js .group__grid > [data-reveal]:nth-child(3),
.js .lead-services > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}
/* T-026 (lead, from the T-014 performance work): the homepage hero paints at once. No rise or fade on the
   title, no reveal on the lead, buttons and figures, and no settle on the first film poster (the LCP image).
   Reveals further down the page are unchanged. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .menu .menu__col { opacity: 1; transform: none; }
}

/* Lead fix (12 Oct): keep the off-canvas menu inside 320px screens and stop any sideways scroll. */
html { overflow-x: clip; }
.menu__panel, .menu__top, .menu__grid, .menu__col { min-width: 0; }
@media (max-width: 379.98px) { .menu__grid { grid-template-columns: minmax(0, 1fr); } }

/* Lead (12 Oct): showreel player, moved out of an inline style. */
.video-dialog__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0E0E0D; }
/* R1-08: the 360px minimum height (meant for the text message) forced the 16:9 frame to 640px wide on
   phones and cropped the film. The frame now follows the dialog's width; only the message keeps the height. */
.video-dialog__frame { min-height: 0; }
.video-dialog__frame:has(> .video-dialog__message:not([hidden])) { aspect-ratio: auto; min-height: 360px; }
/* T-042: on a short landscape screen (a phone on its side) the 16:9 film was taller than the screen, so its
   bottom and the player's controls were cut off. The dialog is never wider than the film can be at the screen's
   height, so the whole film and its controls show. Browsers without dvh keep the width above. */
.video-dialog { width: min(980px, calc(100% - 24px), calc((100dvh - 48px) * 16 / 9)); }

/* Lead (12 Oct): very narrow phones (320 to 379px). Hero buttons wrap inside the pill instead of
   widening the hero beyond the screen (same approach as the inner pages in pages.css). */
@media (max-width: 379.98px) {
  .hero__content, .hero__actions { min-width: 0; }
  .hero .btn { white-space: normal; text-align: left; }
  .hero .btn--lg { padding-left: 18px; font-size: 1rem; }
  .hero .figures { gap: 16px 14px; }
  .hero .figure__value { white-space: normal; }
  .estimate__intro, .estimate .dropzone, .estimate__cta { min-width: 0; }
  main .btn { white-space: normal; text-align: left; }
  main .btn--lg { padding-left: 18px; font-size: 1rem; }
  .safety__intro, .safety__docs, .awards, .awards > * { min-width: 0; }
}

/* Lead (12 Oct, user request): the trust-strip accreditations are links to the Accreditations page.
   None is highlighted at rest; each one turns dark on hover or keyboard focus. */
.trust__chips > li { display: flex; }
a.chip--link {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.chip--link:hover,
a.chip--link:focus-visible { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
a.chip--link:hover .icon,
a.chip--link:focus-visible .icon { color: var(--c-accent); }
a.chip--link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
@media (pointer: coarse) { a.chip--link { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { a.chip--link { transition: none; } }

/* T-026: homepage hero films. Six project films cross-fade in the hero frame, about 6 s each.
   main.js (block 15) adds two <video> layers over the first poster once the page has loaded.
   The progress steps double as a slide picker. Since T-058 the frame fills the hero stage (section 7) and the
   caption, the steps and the buttons sit on the films; the factory gallery (T-054, below) reuses the steps,
   the captions and the toggle, so the light-on-film looks are scoped to .hero.
   ----------------------------------------------------------------------- */
.reel__frame .hero__img { position: absolute; inset: 0; }
.reel__frame picture { display: contents; }
.reel__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  pointer-events: none;
  /* 0.2% smaller than the poster underneath (invisible), so the browser keeps the first poster as the
     Largest Contentful Paint instead of re-timing LCP when the first film fades in */
  transform: scale(0.998);
  transition: opacity 0.8s cubic-bezier(0.45, 0, 0.55, 1);
}
.reel__layer.is-front { z-index: 1; }
.reel__frame.is-covered .hero__img { visibility: hidden; }
.reel__layer.is-shown { opacity: 1; }
/* Without JavaScript the first poster and its caption show, with no controls. */
.no-js .reel__toggle, .no-js .reel__steps, .reel--static .reel__toggle, .reel--static .reel__steps { display: none; }

.reel__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px -10px rgba(14, 14, 13, 0.45);
  color: var(--c-ink);
  transition: transform 0.3s var(--ease);
}
.reel__toggle .icon { width: 16px; height: 16px; }
.reel__toggle .reel__icon-play { margin-left: 2px; }
.reel__toggle[data-state="playing"] .reel__icon-play,
.reel__toggle:not([data-state="playing"]) .reel__icon-pause { display: none; }
.reel__toggle:hover { transform: scale(1.05); }
.reel__toggle:active { transform: scale(0.97); }
/* In the hero the toggle sits in the controls row beside "Watch showreel", not on a corner of the frame. */
.hero .reel__toggle { position: relative; right: auto; bottom: auto; flex: none; }

/* Progress steps: a hairline per film; the 44px buttons stay inside their column. */
.reel__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: -10px 0 -12px;
}
.reel__steps > li { display: flex; }
.reel__step {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.reel__step::before,
.reel__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  border-radius: 2px;
}
.reel__step::before { background: var(--c-field); transition: background-color 0.2s ease; } /* 3:1 on the page */
.reel__step:hover::before { background: var(--c-muted); }
.reel__fill {
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.reel__step:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* Captions: all share one grid cell, so the block keeps the height of the longest and nothing below moves. */
.reel__captions { display: grid; }
/* The old caption is gone (0.2 s) before the new one starts to fade in, so two captions never show on top of
   each other in the shared cell (user, 15 Oct: the factory gallery's captions overlapped mid-change). */
.reel__caption {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.reel__caption.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease 0.2s, visibility 0s linear 0.2s;
}
.reel__name {
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 20, 20, 0.3);
  transition: text-decoration-color 0.2s ease;
}
.reel__name:hover { text-decoration-color: currentColor; }
.reel__by { font-weight: 600; color: var(--c-accent-ink); }

@media (min-width: 640px) {
  .reel__steps { gap: 6px; }
}
@media (min-width: 1024px) {
  .reel__toggle { right: 20px; bottom: 20px; }
}

/* The hero's caption and steps on the films (from 640px): white text and hairlines over the gradient. */
@media (min-width: 640px) {
  .hero .reel__captions { color: #fff; }
  .hero .reel__name { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
  .hero .reel__name:hover { text-decoration-color: #fff; }
  .hero .reel__by { color: inherit; }
  .hero .reel__step::before { background: rgba(255, 255, 255, 0.55); }
  .hero .reel__step:hover::before { background: rgba(255, 255, 255, 0.8); }
  .hero .reel__fill { background: #fff; }
  .hero .reel__step:focus-visible { outline-color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__layer, .reel__caption, .reel__toggle { transition: none; }
}
/* Print: the text on the page background, without the films and their controls. */
@media print {
  .hero__stage { min-height: 0; margin-top: 0; padding: 0; background: none; color: inherit; }
  .hero__frame, .reel__controls, .hero .reel__steps,
  .hero__content::before, .hero .reel__captions::before { display: none !important; }
  .hero__title, .hero__title .hero__eyebrow, .hero__lead, .hero__brochure, .hero__brochure span,
  .hero .reel__captions, .hero .reel__name { color: #000 !important; text-shadow: none !important; }
}

/* T-054: the factory gallery. Express Facades products (our own renders) cross-fade in the old photo's box
   (.factory__photo: 16:11, 4:3 from 1024px), about every 3.5 s; main.js block 16. The hero reel's toggle,
   steps and captions are reused, so both read as one family. Every render is a 4:3 file with the object
   centred on white (tools/factory-gallery-images.py); it is contained in the box and multiplied into one
   warm backdrop, so the white ground disappears and every slide has the same tone and framing. The old
   slide fades out (0.5 s) as the new one fades in a moment later (0.7 s, from 0.3 s), so the two products
   barely overlap and the backdrop never flashes. The box keeps its size, the steps are drawn from the
   first paint (.js is set in the head) and the captions share one grid cell, so nothing below moves when a
   slide changes. */
.fgal__frame {
  position: relative;
  isolation: isolate;
  background: var(--c-surface-2);
}
.fgal__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 1, 1);
}
.fgal__slide.is-active {
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0, 0, 0.2, 1) 0.3s;
}
.fgal .fgal__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
.fgal__toggle { z-index: 2; }
/* As many steps as slides, in one row */
.fgal__steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.fgal--static .reel__toggle, .fgal--static .reel__steps { display: none; }
/* Phones: a smaller button, so it stays clear of the product in the shorter box */
@media (max-width: 639.98px) {
  .fgal__toggle { right: 10px; bottom: 10px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fgal__slide { transition: none; }
}
/* Print: the slide on screen, with its caption, without the controls (print.css is shared and left alone) */
@media print {
  .fgal__toggle, .fgal__steps { display: none !important; }
}

/* ==========================================================================
   Page tools (T-045). The same block ends main.css on the three sites and in the
   WordPress themes; the behaviour is in page-tools.js, the print sheet in print.css.
   ========================================================================== */
/* Q1. "Print or save as PDF": a quiet text button beside the facts panel or the hero actions. */
.print-action { margin: 16px 0 0; }
.facts-panel .print-action { padding-top: 14px; border-top: 1px solid var(--c-line); }
.print-action__button,
.copy-details__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-line-2, currentColor);
  text-underline-offset: 4px;
  cursor: pointer;
}
.print-action__button:hover,
.copy-details__button:hover { text-decoration-color: currentColor; }
.print-action__button:focus-visible,
.copy-details__button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; border-radius: 4px; }
.print-action__icon { width: 20px; height: 20px; flex: none; }
.print-sheet { display: none; }

/* Q2. Register links and "Copy company details" */
.register-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-weight: 500;
  color: var(--c-accent-ink);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.register-link .icon { width: 14px; height: 14px; }
.copy-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 14px 0 0; }
.copy-details__status { font-size: var(--fs-xs); color: var(--c-muted); }

/* Q3. "Enquiry about": the context the visitor came from, an editable field with a Clear button. */
.context-field { margin-bottom: 18px; }
.context-field__row { display: flex; gap: 8px; align-items: stretch; }
.context-field__input { flex: 1 1 auto; min-width: 0; background: var(--c-accent-soft, var(--c-surface)); font-weight: 500; }
.context-field__clear {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-field);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
}
.context-field__clear:hover { border-color: var(--c-ink); }
.context-field__clear:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.context-field__hint { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }

/* Q4. One line under each form: the draft is kept in this tab only. */
.draft-note { margin: 14px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.draft-note__clear {
  display: inline;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.draft-note__clear:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: 2px; }

/* Q5. Same-site page transitions: a short crossfade between pages, and the project card photo grows
   into the project page's lead photo (view-transition-name set inline on both). Browsers without
   cross-document view transitions navigate as before; nothing runs under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.25s; }
  ::view-transition-group(*) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  .project-overview__frame img,
  .page-hero--system .page-hero__frame > img { view-transition-name: lead-photo; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

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

/* Links to the Services overview (user, 16 Oct): "Services" first in the header bar, "All services" at the end of the
   menu's services list and of the footer's Services column. */
.menu__all a { font-weight: 600; }
.menu__all .icon { width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; }
.site-footer__all a { font-weight: 600; }

/* 24. Service colours (T-068, director 19 Oct: "different colours for service names, the same for each service in
   different locations")
   -----------------------------------------------------------------------
   One mark everywhere: a small dot in the service's colour before its name, which stays in ink (or white on dark
   grounds), so every name keeps its contrast and the colour still shows at 13px. Hover and the current page take the
   service's colour too. The colours are the --svc-* tokens in section 1; an element names its service with
   data-svc="<key>" (facades, recladding, drylining, sfs, render-ewi, passive-fire, flashings-copings, design).
   Where it shows: the header bar, the full menu, the footer, the service cards (Home, Services), each service
   page (breadcrumb, eyebrow, section nav), the scope tags of project cards and the flagship, the project page's
   services and the capability statement's services. */
[data-svc="facades"] { --svc: var(--svc-facades); --svc-dk: var(--svc-facades-dk); }
[data-svc="recladding"] { --svc: var(--svc-recladding); --svc-dk: var(--svc-recladding-dk); }
[data-svc="drylining"] { --svc: var(--svc-drylining); --svc-dk: var(--svc-drylining-dk); }
[data-svc="sfs"] { --svc: var(--svc-sfs); --svc-dk: var(--svc-sfs-dk); }
[data-svc="render-ewi"] { --svc: var(--svc-render-ewi); --svc-dk: var(--svc-render-ewi-dk); }
[data-svc="passive-fire"] { --svc: var(--svc-passive-fire); --svc-dk: var(--svc-passive-fire-dk); }
[data-svc="flashings-copings"] { --svc: var(--svc-flashings-copings); --svc-dk: var(--svc-flashings-copings-dk); }
[data-svc="design"] { --svc: var(--svc-design); --svc-dk: var(--svc-design-dk); }

/* The dot (a flex item where the link is a flex box, else inline before the text) */
.menu__lead a[data-svc]::before,
.menu__small a[data-svc]::before,
.tag[data-svc]::before,
.chip[data-svc]::before,
.pack-service[data-svc] .pack-service__name::before,
.page-hero[data-svc] .breadcrumb__list [aria-current]::before,
.lead-service[data-svc] .lead-service__title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--svc);
}

/* Header bar: the dot before the label, the hover and current-page underline in the service's colour */
.primary-nav__link[data-svc] { padding-left: 17px; }
.primary-nav__link[data-svc]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--svc);
}
.primary-nav__link[data-svc]::after { left: 17px; background: var(--svc); }
/* Room for the dots where the bar is tight, so the logo keeps its full size (measured in 20px steps from 1024 to
   1440): a 6px dot from 1024 to 1279px, tighter tracking and 6px separators at 1024-1099px, and at 1200-1279px
   (where Projects joins) the compact tracking and 8px separators of the 1280px bar. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .primary-nav__link[data-svc] { padding-left: 13px; }
  .primary-nav__link[data-svc]::before { left: 1px; width: 6px; height: 6px; margin-top: -3px; }
  .primary-nav__link[data-svc]::after { left: 13px; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .primary-nav__link { letter-spacing: 0.07em; }
  .primary-nav__link[data-svc] { padding-left: 12px; }
  .primary-nav__link[data-svc]::after { left: 12px; }
  .primary-nav__item + .primary-nav__item::before { margin: 0 6px; }
  .site-header__actions::before { margin: 0 8px 0 4px; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .primary-nav__link { letter-spacing: 0.1em; }
  .primary-nav__item + .primary-nav__item::before { margin: 0 8px; }
}

/* Full menu: large lead services (the dot grows with the text), small services */
.menu__lead a[data-svc] { gap: 0.3em; }
.menu__lead a[data-svc]::before { width: max(8px, 0.19em); height: max(8px, 0.19em); }
.menu__lead a[data-svc]:hover,
.menu__small a[data-svc]:hover,
.menu__lead a[data-svc][aria-current],
.menu__small a[data-svc][aria-current] { color: var(--svc); }

/* Footer (dark): the light variant of each colour; the dot hangs, so a wrapped name stays aligned */
.site-footer__col a[data-svc] { position: relative; padding-left: 18px; }
.site-footer__col a[data-svc]::before {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(10px + 0.8em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--svc-dk);
}
.site-footer__col a[data-svc]:hover { color: var(--svc-dk); }

/* Lead service photo cards (Home, Services): the dot before the title, with a thin white ring so it reads on any
   photo (the colour is 5:1 or more against the ring) */
.lead-service[data-svc] .lead-service__title::before {
  display: inline-block;
  width: max(10px, 0.22em);
  height: max(10px, 0.22em);
  margin-right: 0.32em;
  vertical-align: 0.16em;
  box-shadow: 0 0 0 2.5px #fff;
}

/* "Also from Express" (Home, Services): the icon in the service's colour; on hover the circle fills with it. In
   WordPress the row's colour follows its link, so a row an editor points elsewhere has data-svc="" and keeps the
   plain style. */
.more-service[data-svc]:not([data-svc=""]) .more-service__icon { color: var(--svc); }
.more-service[data-svc]:not([data-svc=""]):hover .more-service__icon { background: var(--svc); border-color: var(--svc); color: #fff; }
.more-service[data-svc]:not([data-svc=""]):hover .more-service__name { color: var(--svc); }

/* Service pages: the dot before the page's name in the breadcrumb, the eyebrow's dot, and the section nav's
   current link filled with the service's colour (white text: 5:1 or more on every colour) */
.page-hero[data-svc] .breadcrumb__list [aria-current]::before {
  display: inline-block;
  margin-right: 8px;
  vertical-align: 0.04em;
}
.page-hero[data-svc] .eyebrow::before {
  background: var(--svc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--svc) 18%, transparent);
}
.section-nav[data-svc] .section-nav__link.is-active,
.section-nav[data-svc] .section-nav__link[aria-current] { background: var(--svc); color: #fff; }

/* Scope tags on project cards and the flagship: a tag that is one of the project's services carries its dot */
.tag[data-svc] { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; }
.tag[data-svc]::before { width: 7px; height: 7px; }
.tags--dark .tag[data-svc]::before { background: var(--svc-dk); }

/* Project page, "Services" chips; capability statement, "Services" */
.chip[data-svc] { padding-left: 12px; }
.facts-panel__services a.chip[data-svc]:hover { border-color: var(--svc); color: var(--svc); }
.pack-service[data-svc] .pack-service__name::before {
  display: inline-block;
  margin-right: 8px;
  vertical-align: 0.06em;
}

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