/* McVeigh Technical Solutions: site styles. See DESIGN.md for the thinking behind these choices.
   Colours: McVeigh navy #283890 (the logo) and teal #2ca0ad (accent), both from the original site.
   One typeface, Archivo, with its width axis carrying the hierarchy: wide for headings, normal for text,
   narrow for facts. Square corners and 3px frames echo the boxed logo. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #283890;
  --navy-700: #1f2c74;
  --teal: #2ca0ad;
  --teal-text: #1d7a85;
  --teal-300: #8ad4dc;
  --ink: #141b3c;
  --plant: #0f1538;
  --mist: #eef1f6;
  --steel: #5b6278;
  --rule: #d5dae6;
  --rule-strong: #7d869e;
  --paper: #ffffff;
  --on-dark: #b8bfdc;

  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wide: 112%;
  --narrow: 88%;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --space: clamp(64px, 8vw, 112px);
  --frame: 3px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-700); text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 750;
  font-stretch: var(--wide);
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.625rem); }
h3 { font-size: 1.3125rem; letter-spacing: -0.01em; line-height: 1.25; }
strong { font-weight: 650; }
::selection { background: var(--teal-300); color: var(--ink); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--teal-300); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--navy); color: var(--paper); padding: 12px 18px; font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section--mist { background: var(--mist); }
.section--tight { padding: calc(var(--space) * .6) 0; }
.section--flush-top { padding-top: 0; }
.section-title { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section-title p { color: var(--steel); font-size: 1.1875rem; margin: 0; max-width: 40rem; }
.section-title--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.section-title--row > div { max-width: 46rem; }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }

.lead { font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--steel); max-width: 40rem; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.3vw, 1.875rem); margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.muted { color: var(--steel); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 24px;
  font: 650 1rem/1.2 var(--font); font-stretch: 104%;
  color: var(--paper); background: var(--navy); border: 2px solid var(--navy); border-radius: 2px;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper); text-decoration: none; }
.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--paper); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn--light:hover { background: var(--mist); border-color: var(--mist); color: var(--navy-700); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--paper); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--paper); color: var(--paper); }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { font-weight: 650; color: var(--navy); }

/* ---------- Top bar ---------- */
.topbar { background: var(--plant); color: var(--on-dark); font-size: .875rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar__info { display: flex; gap: 22px; align-items: center; min-width: 0; }
.topbar a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar a:hover { color: var(--teal-300); }
.topbar .icon { width: 16px; height: 16px; color: var(--teal); }
.topbar__tag { color: var(--on-dark); white-space: nowrap; }
.topbar__social { display: flex; gap: 4px; }
.topbar__social a { width: 32px; height: 32px; justify-content: center; }
@media (max-width: 1180px) { .topbar__tag { display: none; } }
@media (max-width: 640px) { .topbar__social { display: none; } .topbar .container { justify-content: center; } }
@media (max-width: 400px) { .topbar__email { display: none !important; } }

/* ---------- Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; flex: none; }
.brand img { width: 150px; height: auto; }
@media (max-width: 400px) { .brand img { width: 126px; } }

.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
  font: 550 1rem/1.2 var(--font); color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav__link { white-space: nowrap; }
/* small desktops: six items and the quote button share the bar, so the items pack closer */
@media (min-width: 1021px) and (max-width: 1180px) {
  .nav__list { gap: 0; }
  .nav__link { gap: 4px; padding: 8px 8px; }
}
.nav__link .icon { width: 16px; height: 16px; color: var(--steel); transition: transform .15s; }
.nav__link:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav__link.is-active, .nav__link[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--teal); }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }

.menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 10;
  min-width: 280px; margin: 0; padding: 8px; list-style: none;
  background: var(--paper); border: 2px solid var(--navy); box-shadow: 0 18px 40px rgba(20, 27, 60, .16);
  display: none;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item.is-open > .menu { display: block; }
.no-js .nav__item--has-menu:hover > .menu, .no-js .nav__item--has-menu:focus-within > .menu { display: block; }
.menu--mega { width: 600px; left: -8px; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.nav__item.is-open > .menu--mega { display: grid; }
.no-js .nav__item--has-menu:hover > .menu--mega, .no-js .nav__item--has-menu:focus-within > .menu--mega { display: grid; }
.menu__link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.menu__link:hover { background: var(--mist); color: var(--ink); }
.menu__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--teal); }
.menu__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 2px solid var(--navy); color: var(--navy); }
.menu__icon .icon { width: 20px; height: 20px; }
.menu__text { display: block; }
.menu__title { display: block; font-weight: 650; }
.menu__desc { display: block; color: var(--steel); font-size: .875rem; line-height: 1.4; margin-top: 2px; }
.menu__group { padding: 12px 12px 4px; font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.menu__foot { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-top: 6px; padding: 10px 12px 4px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.menu__foot a { font-weight: 650; }

.header-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.header-phone { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.15; color: var(--ink); }
.header-phone small { font-size: .8125rem; color: var(--steel); }
.header-phone strong { font-size: 1.0625rem; font-stretch: var(--wide); }
.header-phone:hover strong { color: var(--navy); }

.nav-toggle {
  display: none; margin-left: auto; min-height: 44px; padding: 8px 14px; gap: 8px; align-items: center;
  border: 2px solid var(--navy); border-radius: 2px; background: var(--paper); color: var(--navy);
  font: 650 1rem/1 var(--font); cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-open .nav-toggle .icon--menu { display: none; }
.nav-open .nav-toggle .icon--close { display: block; }
.nav__mobile-cta { display: none; }

@media (max-width: 1180px) { .header-phone { display: none; } }
@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .js .nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--nav-top, 112px); z-index: 99;
    margin: 0; padding: 8px var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-top: 1px solid var(--rule);
    display: none;
  }
  .js.nav-open .nav { display: block; }
  .no-js .nav { width: 100%; order: 3; }
  .no-js .site-header .container { flex-wrap: wrap; }
  .no-js .nav-toggle { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__link { width: 100%; justify-content: space-between; min-height: 56px; padding: 12px 2px; font-size: 1.1875rem; font-weight: 650; font-stretch: var(--wide); }
  .nav__link:hover { text-decoration: none; }
  .nav__link.is-active, .nav__link[aria-current="page"] { box-shadow: none; color: var(--teal-text); }
  .menu, .menu--mega, .nav__item.is-open > .menu--mega {
    position: static; width: auto; min-width: 0; padding: 0 0 12px; border: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr);
  }
  .menu::before { display: none; }
  .menu__link { padding: 10px 2px; align-items: center; }
  .menu__desc { display: none; }
  .menu__icon { width: 32px; height: 32px; }
  .menu__foot { padding: 10px 2px 4px; }
  .nav__mobile-cta { display: grid; gap: 12px; padding-top: 24px; border-bottom: 0 !important; }
}
html.nav-open { overflow: hidden; }

/* ---------- Home hero: the services switchboard ----------
   A navy board (headline, client line, buttons, the six services as ruled rows) beside a stage that runs out to
   the window's right edge and shows one slide at a time. Hovering or focusing a service wires its row to the
   stage with a teal run and shows that service's work (main.js). Nothing moves on its own. Without JS the default
   slide shows and every row is a plain link. Then .hero-proof: a title block of facts and marks. */
.hero {
  --hero-gap: clamp(36px, 4.4vw, 64px);
  --hero-bleed: min(20px, calc(var(--gutter) - 4px));
  position: relative; isolation: isolate;
  background: var(--navy); color: var(--paper);
  /* so the caption can find the container's right edge from inside the full-bleed stage */
  container-type: inline-size;
}
.hero__grid {
  --cw: min(var(--container), 100% - 2 * var(--gutter));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--cw) * .54) var(--hero-gap) calc(var(--cw) * .46 - var(--hero-gap)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: clamp(560px, calc(100svh - 300px), 700px);
}
.hero__head { grid-column: 2; grid-row: 1; padding-top: clamp(24px, 2.4vw, 36px); }
.hero__title { margin: 0; color: var(--paper); font-size: clamp(2.125rem, 3.3vw, 3rem); font-stretch: 116%; line-height: 1.03; letter-spacing: -0.028em; }
/* wide enough for "from the first drawing" on one line: break at the phrases */
@media (min-width: 440px) { .hero__l { display: block; } }
.hero__clients { margin: clamp(12px, 1.3vw, 18px) 0 0; max-width: 34rem; color: #dfe3f4; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.45; }
.hero__actions .btn-row { margin-top: clamp(18px, 1.6vw, 24px); }

/* the switchboard: six ruled rows, each a link to its service page */
.hero__list {
  grid-column: 2; grid-row: 2; align-self: end; position: relative; z-index: 2;
  list-style: none; margin: clamp(20px, 2vw, 32px) 0 clamp(20px, 1.8vw, 28px); padding: 0;
  border-top: var(--frame) solid var(--paper);
}
.hero__list li { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.hero__link {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 4px 20px; align-items: baseline;
  padding: clamp(7px, .6vw, 9px) 14px clamp(7px, .6vw, 9px) 0; color: var(--paper); text-decoration: none;
}
.hero__link:hover { color: var(--paper); text-decoration: none; }
.hero__name { font-size: clamp(1.375rem, 1.95vw, 1.75rem); font-weight: 650; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.12; }
.hero__desc { font-size: .9375rem; font-weight: 500; font-stretch: var(--narrow); line-height: 1.3; color: var(--on-dark); }
/* a pressed row (hover or keyboard focus): a darker panel, bleeding a little into the gutter like the services
   schedule. At rest nothing is pressed and there's no wire. */
.hero__link::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 calc(-1 * var(--hero-bleed));
  background: var(--navy-700); opacity: 0;
}
.hero__link:hover::before, .hero__link:focus-visible::before { opacity: 1; }
.hero__link:hover .hero__desc, .hero__link:focus-visible .hero__desc { color: #dfe3f4; }
/* the wire: a teal run from the pointed-at row across the gap to a junction (a navy square in a teal ring)
   centred on the stage's edge. Without JS it only shows while the row whose photo is showing is pointed at. */
.hero__link::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--hero-gap) + 9px); height: 19px; margin-top: -10px;
  background:
    linear-gradient(var(--navy), var(--navy)) right 4px center / 11px 11px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right center / 19px 19px no-repeat,
    linear-gradient(var(--teal), var(--teal)) left center / calc(100% - 18px) 3px no-repeat;
  opacity: 0; pointer-events: none;
}
.hero__link.is-on:hover::after, .hero__link.is-on:focus-visible::after { opacity: 1; }
/* with JS the wire is one element (.hero__wire, added by main.js). It shows only while a row is pointed at or
   focused (.is-pointing): it draws out from the row, glides along the board's edge to each row pointed at after
   that, and fades away when the pointer and focus leave the list. As it lands on a row, a pulse runs along it
   to the junction and the junction's centre lights. */
.hero__wire { display: none; }
.hero.has-wire .hero__link::after { display: none; }
.hero.has-wire .hero__wire {
  display: block; position: absolute; left: 100%; top: 0; z-index: 3;
  width: calc(var(--hero-gap) + 9px); height: 19px; margin: -10px 0 0; padding: 0; border: 0; pointer-events: none;
  transform: translateY(var(--wire-y, 0px));
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s;
}
.hero.has-wire.is-pointing .hero__wire { opacity: 1; visibility: visible; transition: none; }
.hero.has-wire.is-ready .hero__wire { transition: transform .28s var(--ease), opacity .2s ease, visibility 0s .2s; }
.hero.has-wire.is-ready.is-pointing .hero__wire { transition: transform .28s var(--ease); }
.hero__line { position: absolute; left: 0; top: 8px; width: calc(100% - 18px); height: 3px; background: var(--teal); transform-origin: 0 50%; }
.hero__flow { position: absolute; left: 0; top: 8px; width: 32px; height: 3px; background: linear-gradient(90deg, rgba(138, 212, 220, 0), var(--teal-300)); opacity: 0; }
.hero__jn { position: absolute; right: 0; top: 0; width: 19px; height: 19px; border: 4px solid var(--teal); background: var(--navy); }
/* without JS the wire can't follow the pointer, so a hovered row is only half pressed */
.no-js .hero__link:not(.is-on):not(:focus-visible):hover::before { opacity: .5; }
/* keyboard focus rings the pressed panel (bleed included), clear of the first letter */
.hero__link:focus-visible { outline: none; }
.hero__link:focus-visible::before { outline: 3px solid var(--teal-300); outline-offset: -3px; }
/* narrower desktops: what each service covers goes under its name, so every name keeps one line */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero__link { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* the stage: one slide at a time, the full height of the hero, out to the window's edge */
.hero__stage { grid-column: 4 / 6; grid-row: 1 / 3; position: relative; z-index: 1; margin: 0; background: var(--navy-700); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; margin: 0; }
.hero__slide:not(.is-on) { display: none; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Under Armour: a white column runs down the portrait's left edge, where the junction lands; crop past it */
.hero__slide[data-key="ventilation"] img { transform: scale(1.14); transform-origin: 100% 28%; }
/* the caption sits on the stage's foot, its right edge on the container's right edge (the line of the header's
   quote button and the title block below); the left edge belongs to the wire */
.hero__cap {
  --hero-out: max(0px, (100cqw - min(var(--container), 100cqw - 2 * var(--gutter))) / 2);
  position: absolute; right: 0; right: var(--hero-out); bottom: 0;
  max-width: min(28rem, calc(100% - 40px)); max-width: min(28rem, 100% - 40px - var(--hero-out));
  margin: 0; padding: 14px 22px 16px; background: var(--navy);
  font-size: .9375rem; font-stretch: 94%; line-height: 1.35; color: #dfe3f4;
}
.hero__cap strong { display: block; color: var(--paper); font-size: 1.0625rem; font-weight: 650; font-stretch: 104%; }
.hero__cap { z-index: 2; }
/* Design has no photo: its drawing, on drawing paper. Every photo slide also carries its drawing (.hero__bp),
   on the same paper, for the moment it arrives. */
.hero__drawing { position: absolute; inset: 0; display: grid; place-items: center; padding: 48px 36px 96px; }
.hero__drawing, .hero__bp::before {
  background-color: var(--navy-700);
  background-image:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
}
.hero__drawing svg, .hero__bp svg {
  position: relative; width: 100%; height: auto; max-height: 100%; opacity: .9;
  /* the extract is cut out of a bigger sheet: let the runs fade in on the left rather than stop dead */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
          mask-image: linear-gradient(90deg, transparent, #000 14%);
}
/* with JS (desktop): every slide is laid out, hidden, so its photo and drawing load before they're wanted. A new
   slide comes in over the one it replaces, which stays underneath exactly as it looks, caption and all, until it's
   covered (.is-leaving). With motion allowed, the new slide arrives as its drawing (.is-entering): the paper floods
   out from the junction where the wire lands (.is-flooding; --jy, set on the slide by main.js), then the paper and
   the linework contract back into the junction at the same speed, uncovering the photo, once the photo has loaded
   (.is-built). On a slow connection the drawing simply waits for its photo. */
.hero__bp { display: none; }
.hero.is-warm .hero__slide { display: block; visibility: hidden; z-index: 0; }
.hero.is-warm .hero__slide.is-leaving { visibility: visible; z-index: 1; }
.hero.is-warm .hero__slide.is-on { visibility: visible; z-index: 2; }
.hero.is-warm .hero__bp {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 48px 36px 96px;
  visibility: hidden; pointer-events: none;
}
.hero__bp::before { content: ""; position: absolute; inset: 0; }
/* the flood animates this radius rather than clip-path itself: Chrome hands a clip-path animation to the
   compositor, and as it ends it can drop it for a frame, flashing the old slide back over the whole stage */
@property --flood-r { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
@media (prefers-reduced-motion: no-preference) {
  .hero.is-warm .hero__slide.is-flooding { clip-path: circle(var(--flood-r) at 0 var(--jy, 50%)); animation: hero-flood .5s var(--ease) both; }
  /* .is-photo: coming from drawing paper, the photo floods in without its drawing (main.js) */
  .hero.is-warm .hero__slide.is-entering:not(.is-photo) .hero__bp { visibility: visible; }
  /* the paper and its linework contract as one layer, so no part of the drawing is left floating over the photo */
  .hero.is-warm .hero__slide.is-built .hero__bp { clip-path: circle(var(--flood-r) at 0 var(--jy, 50%)); animation: hero-ebb .5s var(--ease) both; }
}
@keyframes hero-flood {
  from { --flood-r: 0%; }
  to { --flood-r: 150%; }
}
@keyframes hero-ebb {
  from { --flood-r: 150%; }
  to { --flood-r: 0%; }
}

/* short laptop screens (1366x768, 1280x720): a tighter rhythm keeps all six rows above the fold */
@media (min-width: 901px) and (max-height: 800px) {
  .hero__head { padding-top: clamp(20px, 2vw, 32px); }
  .hero__actions .btn-row { margin-top: 18px; }
  .hero__list { margin: 20px 0; }
  .hero__link { padding-top: 6px; padding-bottom: 6px; }
}

/* phones and small tablets: headline and client line, a photo band, then the six rows */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); grid-template-rows: auto; min-height: 0; }
  .hero__head { grid-column: 2; grid-row: 1; padding: 28px 0 24px; }
  .hero__stage { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 2 / 1; }
  .hero__list { grid-column: 2; grid-row: 3; align-self: start; margin: 0 0 16px; border-top: 0; }
  .hero__link { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0 13px; }
  /* no hover here and no wire; a tap darkens the row edge to edge */
  .hero__link::after, .hero.has-wire .hero__wire { display: none; }
  .hero__link::before { inset: 0 calc(-1 * var(--gutter)); }
  .hero__link:active::before { opacity: 1; }
  .hero__slide[data-key="ventilation"] img { transform: none; }
  /* the caption's text starts on the gutter line, with the headline and the rows */
  .hero__cap { left: 0; right: auto; max-width: calc(100% - var(--gutter)); padding: 6px 12px 7px var(--gutter); font-size: .8125rem; }
  .hero__cap strong { font-size: .875rem; }
  .hero__cap span { display: none; }
}
/* small tablets: a shallower band; from 700px the six rows go in two columns */
@media (min-width: 600px) and (max-width: 900px) {
  .hero__stage { aspect-ratio: 5 / 2; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .hero__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .hero__link::before { inset: 0 -12px; }
}

/* ---------- Home: facts and marks, a title block under the hero ---------- */
.hero-proof { padding: clamp(16px, 2vw, 24px) 0 0; }
.hero-proof + .section { padding-top: clamp(48px, 6vw, 80px); }
.hero-proof__block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 2px solid var(--navy); background: var(--paper); }
.hero-proof__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-right: 1px solid var(--rule); }
.hero-proof__facts > div { padding: 12px 16px 14px; border-right: 1px solid var(--rule); min-width: 0; }
.hero-proof__facts > div:last-child { border-right: 0; }
.hero-proof__facts dt { margin-bottom: 2px; font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.hero-proof__facts dd { margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.hero-proof__marks { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 18px 12px; min-width: 0; }
.hero-proof__label { align-self: start; font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); }
.hero-proof__marks ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; }
.hero-proof__marks li { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; height: 44px; }
.hero-proof__marks img { width: auto; max-width: 100%; height: calc(var(--h, 30) * 1px); object-fit: contain; }
@media (max-width: 1100px) {
  .hero-proof__block { grid-template-columns: minmax(0, 1fr); }
  .hero-proof__facts { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .hero-proof__facts > div { padding: 10px 10px 12px; }
  .hero-proof__facts dd { font-size: .9375rem; }
  .hero-proof__marks ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
  .hero-proof__marks img { height: calc(var(--h, 30) * .85px); }
}

/* ---------- Accreditation strip ---------- */

/* ---------- Intro ---------- */
.statement { margin: 0; color: var(--navy); font-size: clamp(1.625rem, 2.8vw, 2.375rem); font-weight: 700; font-stretch: var(--wide); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
/* Home: the statement with a ruled list of facts under it, beside the promise and how we work. The facts sit at
   the foot of their column, level with the buttons, so the statement's column never ends in an empty gap. */
.intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 6vw, 96px); }
.intro__head { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.intro__facts { margin: 0; border-top: var(--frame) solid var(--navy); }
.intro__facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.intro__facts dt { font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.intro__facts dd { margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.intro__body { display: flex; flex-direction: column; max-width: 40rem; }
.intro__lead { margin: 0 0 20px; font-size: clamp(1.25rem, 1.8vw, 1.4375rem); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.intro__actions { margin: auto 0 0; padding-top: 28px; }
@media (max-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
}
.values { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--frame) solid var(--navy); }
.values li { padding: 22px 28px 0 0; }
.values li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.values h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.values p { margin: 0; color: var(--steel); }
@media (max-width: 860px) {
  .values { grid-template-columns: minmax(0, 1fr); }
  .values li, .values li + li { padding: 20px 0; border-left: 0; }
  .values li + li { border-top: 1px solid var(--rule); }
}

/* ---------- Title block (the drawing-sheet fact box) ---------- */
.tblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 2px solid var(--navy); background: var(--paper); color: var(--ink); }
.tblock > div { padding: 12px 16px 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.tblock > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.tblock > div:nth-last-child(-n+2):nth-child(odd), .tblock > div:last-child { border-bottom: 0; }
.tblock > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.tblock dt { font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); margin-bottom: 2px; }
.tblock dd { margin: 0; font-weight: 650; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.tblock--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tblock--4 > div { border-bottom: 0; border-right: 1px solid var(--rule); }
.tblock--4 > div:last-child { border-right: 0; }
@media (max-width: 760px) {
  .tblock--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblock--4 > div { border-bottom: 1px solid var(--rule); }
  .tblock--4 > div:nth-child(even) { border-right: 0; }
  .tblock--4 > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- Services schedule ---------- */
.schedule { list-style: none; margin: 0; padding: 0; border-top: var(--frame) solid var(--navy); }
.schedule__head, .schedule__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.15fr); gap: 0 28px; align-items: start;
}
.schedule__head { padding: 10px 0; border-top: var(--frame) solid var(--navy); border-bottom: 1px solid var(--rule-strong); font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.schedule__head span:first-child { grid-column: 2; }
.schedule__head + .schedule { border-top: 0; }
/* hover (and keyboard focus): a panel wipes in from a teal edge set just outside the icon column,
   the icon tile fills with teal from the bottom like a gauge, and the title's underline draws in */
.schedule__row { position: relative; isolation: isolate; padding: 22px 0; border-bottom: 1px solid var(--rule); --row-bleed: min(20px, calc(var(--gutter) - 4px)); --row-panel: var(--mist); }
.section--mist .schedule__row { --row-panel: var(--paper); }
.schedule__row::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 calc(-1 * var(--row-bleed));
  background: var(--row-panel); box-shadow: inset 3px 0 0 var(--teal);
  clip-path: inset(0 100% 0 0); transition: clip-path .26s var(--ease);
}
.schedule__row:is(:hover, :focus-within)::before { clip-path: inset(0 0 0 0); }
.schedule__icon {
  width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper);
  background: linear-gradient(var(--teal-text), var(--teal-text)) 0 100% / 100% 0 no-repeat, var(--navy);
  transition: background-size .22s var(--ease);
}
.schedule__row:is(:hover, :focus-within) .schedule__icon { background-size: 100% 100%; }
.schedule__icon .icon { width: 24px; height: 24px; transition: transform .22s var(--ease); }
.schedule__row:is(:hover, :focus-within) .schedule__icon .icon { transform: scale(1.1); }
.schedule__row h3, .schedule__row h2 { margin: 7px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.schedule__row h3 a, .schedule__row h2 a {
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .26s .04s var(--ease), color .2s;
}
.schedule__row h3 a::after, .schedule__row h2 a::after { content: ""; position: absolute; inset: 0; }
.schedule__row:is(:hover, :focus-within) h3 a, .schedule__row:is(:hover, :focus-within) h2 a { color: var(--navy); background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
  .schedule__row::before, .schedule__icon, .schedule__icon .icon, .schedule__row h3 a, .schedule__row h2 a { transition: none; }
}
@media (forced-colors: active) {
  .schedule__row::before { display: none; }
  .schedule__row:is(:hover, :focus-within) h3 a, .schedule__row:is(:hover, :focus-within) h2 a { text-decoration: underline; }
}
/* text-wrap: no single word left alone on a cell's last line */
.schedule__row p { margin: 6px 0 0; color: var(--steel); text-wrap: pretty; }
.schedule__scope { font-size: .9375rem; font-stretch: var(--narrow); }
@media (max-width: 900px) {
  .schedule__head { display: none; }
  .schedule__head + .schedule { border-top: var(--frame) solid var(--navy); }
  .schedule__row { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; }
  .schedule__row h3, .schedule__row h2 { margin-top: 8px; }
  .schedule__row p { grid-column: 2; margin-top: 4px; }
}

/* ---------- Projects ---------- */
.projects { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px); }
.project { grid-column: span 4; position: relative; display: flex; flex-direction: column; }
.project--quarter { grid-column: span 3; }
.project__media { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 4 / 3; border-bottom: var(--frame) solid var(--navy); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project:hover .project__media img { transform: scale(1.03); }
.project__media--logo { display: grid; place-items: center; border: 2px solid var(--navy); background: var(--paper); }
.project__media--logo img { width: 62%; height: auto; object-fit: contain; }
.project h3, .project h2 { margin: 16px 0 10px; font-size: 1.3125rem; letter-spacing: -0.01em; }
.project h3 a, .project h2 a { color: var(--ink); text-decoration: none; }
.project h3 a::after, .project h2 a::after { content: ""; position: absolute; inset: 0; }
.project:hover h3 a, .project:hover h2 a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.project .tblock { border-width: 1px; border-color: var(--rule-strong); }
.project .tblock dd { font-size: .9375rem; }
.project .tblock > div { padding: 8px 12px 9px; }
@media (max-width: 1000px) {
  .project--quarter { grid-column: span 6; }
}
@media (max-width: 900px) {
  .project { grid-column: span 6; }
}
@media (max-width: 600px) {
  .project, .project--quarter { grid-column: span 12; }
}
.projects--2 .project { grid-column: span 6; }
@media (max-width: 600px) { .projects--2 .project { grid-column: span 12; } }

/* ---------- Home case studies: a set of drawing sheets that stack as you scroll ----------
   Every sheet is sticky, a strip lower than the one before (--i), so each slides up over the last and the
   covered sheets leave only their title strips showing: by the last sheet the strips read as the set's register.
   Sheet heights step down by a strip so every sheet's foot sits on the same line; the stack then leaves as one.
   --cs-h is the last sheet's height, sized so the whole stack fits the screen. On phones the sheets pile up with
   only their top edges showing. main.js sets --cs-cover (0 to 1) as the next sheet covers one. Short screens
   and print get the sheets one after another. */
.cs-stack {
  --cs-top: calc(var(--header-h) + 20px);
  --cs-strip: 64px;
  --cs-foot: 20px;
  --cs-h: min(560px, calc(100vh - var(--cs-top) - (var(--n) - 1) * var(--cs-strip) - var(--cs-foot)));
  --cs-h: min(560px, calc(100svh - var(--cs-top) - (var(--n) - 1) * var(--cs-strip) - var(--cs-foot)));
  list-style: none; margin: 0; padding: 0;
}
.cs-sheet {
  position: sticky; top: calc(var(--cs-top) + var(--i) * var(--cs-strip));
  height: calc(var(--cs-h) + (var(--n) - 1 - var(--i)) * var(--cs-strip));
  display: grid; grid-template-rows: var(--cs-strip) minmax(0, 1fr);
  background: var(--paper); border: var(--frame) solid var(--navy);
}
.cs-sheet + .cs-sheet { margin-top: 40px; }
/* the strip: what stays in view once the sheet is covered, so it carries the link */
.cs-sheet__strip {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  border-bottom: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--mist) calc(var(--cs-cover, 0) * 100%), var(--paper));
}
.cs-sheet__name { margin: 0; padding: 0 24px; font-size: 1.375rem; line-height: 1.15; }
.cs-sheet__name a { color: var(--ink); text-decoration: none; }
.cs-sheet__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cs-sheet:hover .cs-sheet__name a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cs-sheet__sub {
  margin: 0; padding: 0 24px; align-self: stretch; display: flex; align-items: center;
  border-left: 1px solid var(--rule); color: var(--steel); font-size: .9375rem; font-stretch: var(--narrow); line-height: 1.25;
}
.cs-sheet__body { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 0; }
/* the shade that settles on a sheet as the next one covers it */
.cs-sheet__body::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--plant); opacity: calc(var(--cs-cover, 0) * .45);
}
.cs-sheet__media { position: relative; overflow: hidden; min-height: 0; background: var(--mist); }
.cs-sheet__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cs-sheet:hover .cs-sheet__media img { transform: scale(1.03); }
/* the panel: the summary at the top, and the facts as the sheet's title block, in its bottom-right corner */
.cs-sheet__panel { display: flex; flex-direction: column; min-height: 0; padding: 24px 24px 0; border-left: 1px solid var(--rule-strong); }
/* the detail (a second photo, or the client's quote) takes the height that's left, and steps aside when that's
   too little to be worth showing */
.cs-sheet__detail { flex: 1 1 0; min-height: 0; container-type: size; margin: 0 0 20px; }
.cs-sheet__detail img { width: 100%; height: 100%; object-fit: cover; }
.cs-sheet__quote { margin: 0; padding-left: 18px; border-left: var(--frame) solid var(--teal); }
.cs-sheet__detail--quote { overflow: hidden; }
.cs-sheet__quote p { margin: 0 0 8px; font-size: .9375rem; line-height: 1.5; }
.cs-sheet__quote footer { color: var(--steel); font-size: .8125rem; font-stretch: var(--narrow); line-height: 1.35; }
@container (max-height: 150px) { .cs-sheet__detail img { display: none; } }
/* the quote runs to about 140px in a wide panel and 210px in a narrow one */
@container (max-height: 150px) or ((max-width: 440px) and (max-height: 220px)) { .cs-sheet__quote { display: none; } }
.cs-sheet__summary { margin: 0 0 20px; font-size: 1.0625rem; line-height: 1.55; }
.cs-sheet__facts { margin: 0 -24px; border-width: 1px 0 0; border-color: var(--rule-strong); }
.cs-sheet__facts > div { padding: 9px 24px 10px; }
.cs-sheet__facts dd { font-size: .9375rem; }
.cs-sheet__facts > div:last-child { grid-column: 1 / -1; border-right: 0; }
.cs-sheet__facts > div:not(:last-child) { border-bottom: 1px solid var(--rule); }
.cs-sheet__more { margin: auto 0 18px; font-weight: 650; color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cs-sheet:hover .cs-sheet__more { text-decoration-thickness: 2px; }
/* shorter laptop screens: slimmer strips, so the last sheet keeps a decent photo */
@media (min-width: 901px) and (max-height: 900px) {
  .cs-stack { --cs-strip: 52px; }
  .cs-sheet__name { font-size: 1.1875rem; }
}
/* the phone bar along the foot of the screen */
@media (max-width: 1020px) { .cs-stack { --cs-foot: 82px; } }
/* phones and narrow tablets: photo over the facts, and the sheets pile up with only their top edges showing */
@media (max-width: 900px) {
  .cs-stack { --cs-top: calc(var(--header-h) + 12px); --cs-pile: 10px; --cs-h: min(600px, calc(100svh - var(--cs-top) - (var(--n) - 1) * var(--cs-pile) - var(--cs-foot))); }
  .cs-sheet { top: calc(var(--cs-top) + var(--i) * var(--cs-pile)); height: calc(var(--cs-h) + (var(--n) - 1 - var(--i)) * var(--cs-pile)); grid-template-rows: auto minmax(0, 1fr); }
  .cs-sheet + .cs-sheet { margin-top: 28px; }
  .cs-sheet__strip { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 13px; gap: 2px; }
  .cs-sheet__name, .cs-sheet__sub { padding: 0; border: 0; }
  .cs-sheet__name { font-size: 1.1875rem; }
  .cs-sheet__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 1fr) auto; }
  .cs-sheet__panel { padding: 14px 16px 0; border-left: 0; border-top: 1px solid var(--rule-strong); }
  .cs-sheet__facts { margin: 0 -16px; }
  .cs-sheet__facts > div { padding: 8px 16px 9px; }
  .cs-sheet__more { margin: 0 0 14px; }
  .cs-sheet__summary, .cs-sheet__detail { display: none; }
}
@media (max-width: 900px) and (min-height: 760px) { .cs-sheet__summary { display: block; margin-bottom: 12px; font-size: 1rem; } }
/* too short to stack (landscape phones, small laptops at high zoom), and print: one sheet after another */
@media (max-height: 599px), (min-width: 901px) and (max-height: 679px), print {
  .cs-sheet { position: relative; top: auto; height: auto; }
  .cs-sheet__media { aspect-ratio: 16 / 9; }
  .cs-sheet__body::after { display: none; }
  .cs-sheet__strip { background: var(--paper); }
}
@media (max-height: 679px) and (min-width: 901px) { .cs-sheet__media { aspect-ratio: auto; min-height: 300px; } }
@media print { .cs-sheet { break-inside: avoid; } .cs-sheet__detail { display: none; } }
@media (forced-colors: active) {
  .cs-sheet { border-color: CanvasText; }
  .cs-sheet__body::after { display: none; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter {
  min-height: 44px; padding: 8px 16px; cursor: pointer;
  font: 550 .9375rem/1 var(--font); color: var(--ink); background: var(--paper);
  border: 2px solid var(--rule); border-radius: 2px;
}
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.project[hidden] { display: none; }

/* ---------- Process: one schematic run ---------- */
.run { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); position: relative; }
.run::before { content: ""; position: absolute; left: 9px; right: 0; top: 9px; height: 3px; background: var(--teal); }
.run li { position: relative; padding-top: 44px; }
.run li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--navy);
}
.section--mist .run li::before { background: var(--mist); }
.run h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin-bottom: 6px; }
.run__sub { font-weight: 650; color: var(--navy); min-height: 3.2em; }
.run p:last-child { margin: 0; color: var(--steel); }
@media (max-width: 860px) {
  .run { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .run::before { left: 9px; right: auto; top: 9px; bottom: 0; width: 3px; height: auto; }
  .run li { padding: 0 0 0 48px; }
  .run__sub { min-height: 0; }
}

/* ---------- Sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.sector { position: relative; }
/* the photo and the title share one grid cell: the title is a white-on-navy tab rising from the frame's bottom rule */
.sector__media { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; background: var(--mist); border-bottom: var(--frame) solid var(--navy); }
.sector__media > * { grid-area: 1 / 1; }
.sector__media img { position: relative; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sector:hover .sector__media img { transform: scale(1.03); }
.sector__title { align-self: end; justify-self: start; margin: 0; padding: 10px 18px 7px; background: var(--navy); color: #fff; font-size: 1.375rem; line-height: 1.2; }
.sector__title a { color: #fff; text-decoration: none; }
.sector__title a::after { content: ""; position: absolute; inset: 0; }
.sector__title a:focus-visible { outline: none; }
.sector__title a:focus-visible::after { outline: 3px solid var(--navy); outline-offset: 4px; }
.sector:hover .sector__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sector p { margin: 16px 0 0; color: var(--steel); }
@media (max-width: 860px) { .sectors { grid-template-columns: minmax(0, 1fr); } .sector { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 20px; align-items: start; } .sector p { margin-top: 0; } .sector__title { padding: 8px 14px 6px; font-size: 1.1875rem; } }
@media (max-width: 480px) { .sector { display: block; } .sector p { margin-top: 14px; } .sector__title { padding: 10px 16px 7px; font-size: 1.3125rem; } }

/* ---------- Quote ---------- */
.quote { margin: 0; max-width: 54rem; }
.quote blockquote { margin: 0; font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 600; font-stretch: 104%; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.quote blockquote p { margin: 0; }
.quote figcaption { margin-top: 22px; display: flex; align-items: center; gap: 16px; color: var(--steel); }
.quote figcaption img { width: 120px; height: auto; }
.quote figcaption strong { display: block; color: var(--ink); }
.quote--rule { border-left: var(--frame) solid var(--teal); padding-left: clamp(20px, 3vw, 36px); }

/* ---------- Home services: a section through a building ----------
   The hero already lists the six services, so this band shows where each one is in a building: a typical section
   (roof plant, ceiling voids, risers, the basement plant room) drawn by tools/drawings/home_section.py, with a note on
   each service at the end of its callout's leader, and Design as the sheet's title block (home_services() in
   build.py). The architect's background is in steel, a step behind; McVeigh's systems are in navy. Pointing at or
   tabbing to a note lights its system in teal and steps the others back. Nothing moves on its own: the run owns the
   page's drawing-as-you-scroll moment.
   Where the sheet is at least 68rem wide (about 1190px screens at the default text size; never, with text set
   larger) the notes stand either side of the building, on the leaders' shoulders; narrower, the drawing is cropped to
   the building, each leader ends in its service's tile at the crop's edge, and the notes follow as a key (on phones,
   each service's name and one fact). The drawing's size, its note columns and the crop are in drawing units on
   .bldg__canvas (--vw, --vh, --l0/--l1, --r0/--r1, --x0, --cw), and each note's height is its --y. */
.bldg__title { margin-bottom: clamp(24px, 3vw, 36px); }
.bldg__title > div { max-width: 58rem; }
/* the sheet: a paper margin with zone ticks, a navy border inside it */
.bldg__sheet {
  padding: 10px; border: 1px solid var(--rule-strong);
  background:
    linear-gradient(90deg, var(--rule-strong) 1px, transparent 1px) 0 0 / 12.5% 10px repeat-x,
    linear-gradient(90deg, var(--rule-strong) 1px, transparent 1px) 0 100% / 12.5% 10px repeat-x,
    linear-gradient(var(--rule-strong) 1px, transparent 1px) 0 0 / 10px 25% repeat-y,
    linear-gradient(var(--rule-strong) 1px, transparent 1px) 100% 0 / 10px 25% repeat-y,
    var(--paper);
}
.bldg__in { container: bldg / inline-size; border: 1px solid var(--navy); background: var(--paper); }
.bldg__canvas, .bldg__art { position: relative; }
.bldg__svg { display: block; width: 100%; height: auto; color: var(--navy); overflow: visible; }
.bldg__layer { transition: color .2s, opacity .2s; }
.bldg__layer--arch { color: var(--steel); opacity: .8; }
.bldg__svg .is-paper { fill: var(--paper); }
/* a service's tile: navy with the white icon (as on the Services page), filling teal from the foot, like a gauge,
   when its note is pointed at. The leaders' ends on narrow screens (.bldg__mark) are the same tile, smaller */
.bldg__tile, .bldg__mark {
  position: relative; z-index: 0; flex: none; display: grid; place-items: center;
  color: var(--paper); background: var(--navy);
}
.bldg__tile { width: 28px; height: 28px; }
.bldg__tile::before, .bldg__mark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--teal-text);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .26s var(--ease);
}
.bldg__tile .icon { width: 17px; height: 17px; }
/* the notes: each whole note is its service's link */
.bldg__notes { list-style: none; margin: 0; padding: 0; }
.bldg__note, .bldg__tb-main { position: relative; }
.bldg__head { display: flex; align-items: center; gap: 10px; }
.bldg h3 { margin: 0; font-size: 1.1875rem; line-height: 1.15; }
.bldg h3 a {
  color: var(--ink); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .26s var(--ease), color .2s;
}
.bldg h3 a::after { content: ""; position: absolute; inset: 0; }
.bldg__where { margin: 8px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.bldg__fact { margin: 6px 0 0; font-size: .875rem; line-height: 1.4; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); text-wrap: pretty; }
:is(.bldg__note, .bldg__tb-main):is(:hover, :focus-within) h3 a { color: var(--navy); background-size: 100% 2px; }
:is(.bldg__note, .bldg__tb-main):is(:hover, :focus-within) .bldg__tile::before { transform: none; }
/* pointing at a note lights its system and steps the rest back (the architect's background stays as it is). Each
   lit rule names the layer twice so it outranks the step-back rule */
.bldg__sheet:has(:is(.bldg__note, .bldg__tb-main):is(:hover, :focus-within)) .bldg__layer:not(.bldg__layer--arch) { opacity: .22; }
.bldg__sheet:has(.bldg__note--aircon:is(:hover, :focus-within)) .bldg__layer.bldg__layer--aircon,
.bldg__sheet:has(.bldg__note--vent:is(:hover, :focus-within)) .bldg__layer.bldg__layer--vent,
.bldg__sheet:has(.bldg__note--heat:is(:hover, :focus-within)) .bldg__layer.bldg__layer--heat,
.bldg__sheet:has(.bldg__note--plumb:is(:hover, :focus-within)) .bldg__layer.bldg__layer--plumb,
.bldg__sheet:has(.bldg__note--maint:is(:hover, :focus-within)) .bldg__layer.bldg__layer--maint,
.bldg__sheet:has(.bldg__tb-main:is(:hover, :focus-within)) .bldg__layer.bldg__layer--design { opacity: 1; color: var(--bldg-lit, var(--teal)); }
.bldg__sheet:has(.bldg__note--aircon:is(:hover, :focus-within)) .bldg__mark--aircon::before,
.bldg__sheet:has(.bldg__note--vent:is(:hover, :focus-within)) .bldg__mark--vent::before,
.bldg__sheet:has(.bldg__note--heat:is(:hover, :focus-within)) .bldg__mark--heat::before,
.bldg__sheet:has(.bldg__note--plumb:is(:hover, :focus-within)) .bldg__mark--plumb::before,
.bldg__sheet:has(.bldg__note--maint:is(:hover, :focus-within)) .bldg__mark--maint::before { transform: none; }
/* the title block: the drawing's own lettering, then Design, then three of its facts */
.bldg__tb { display: grid; grid-template-columns: minmax(0, 25fr) minmax(0, 33fr) minmax(0, 62fr); border-top: 1.5px solid var(--navy); }
.bldg__tb > * { min-width: 0; padding: 14px 18px 16px; }
.bldg__tb > * + * { border-left: 1px solid var(--rule-strong); }
.bldg__tb-id { display: flex; align-items: center; color: var(--navy); }
.bldg__tb-cad { width: 100%; max-width: 230px; height: auto; }
.bldg__tb-main:is(:hover, :focus-within) { background: var(--mist); }
.bldg__tb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 !important; }
.bldg__tb-facts > div { padding: 14px 16px 16px; min-width: 0; }
.bldg__tb-facts > div + div { border-left: 1px solid var(--rule); }
.bldg__tb-facts dt { margin-bottom: 4px; font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.bldg__tb-facts dd { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.3; }
.bldg__mark { display: none; }
/* wide: the notes stand either side of the building, each on its leader's shoulder */
@container bldg (min-width: 68rem) {
  .bldg__canvas { aspect-ratio: var(--vw) / var(--vh); }
  .bldg__art { position: absolute; inset: 0; }
  .bldg__note {
    position: absolute; top: calc(var(--y) / var(--vh) * 100%); margin-top: -.5px;
    padding-top: 10px; border-top: 1px solid var(--navy); transition: border-color .2s;
  }
  .bldg__note--l { left: calc(var(--l0) / var(--vw) * 100%); width: calc((var(--l1) - var(--l0)) / var(--vw) * 100%); }
  .bldg__note--r { left: calc(var(--r0) / var(--vw) * 100%); width: calc((var(--r1) - var(--r0)) / var(--vw) * 100%); }
  .bldg__note:is(:hover, :focus-within) { border-top-color: var(--teal); }
  .bldg__note :is(.bldg__where, .bldg__fact) { max-width: 30ch; }
}
/* until the sheet reaches its full width, the drawing is a little smaller than drawn, so the notes step down */
@container bldg (min-width: 68rem) and (max-width: 75.9rem) {
  .bldg__note h3 { font-size: 1.0625rem; }
  .bldg__note .bldg__where { font-size: .875rem; margin-top: 6px; }
  .bldg__note .bldg__fact { font-size: .8125rem; margin-top: 4px; }
  .bldg__note .bldg__tile { width: 24px; height: 24px; }
  .bldg__note .bldg__tile .icon { width: 15px; height: 15px; }
}
/* narrower: the drawing cropped to the building (no bigger than it is on a desktop), the leaders ending in tiles,
   the notes as a ruled key */
@container bldg (max-width: 67.99rem) {
  .bldg__art { max-width: 820px; margin-inline: auto; aspect-ratio: var(--cw) / var(--vh); overflow: hidden; }
  .bldg__svg { position: absolute; top: 0; left: calc(var(--x0) / var(--cw) * -100%); width: calc(var(--vw) / var(--cw) * 100%); max-width: none; }
  .bldg__mark {
    display: grid; position: absolute; z-index: 1; width: 22px; height: 22px;
    top: calc(var(--y) / var(--vh) * 100%); translate: -50% -50%;
  }
  .bldg__mark .icon { width: 13px; height: 13px; }
  .bldg__mark--l { left: calc((var(--l1) - var(--x0)) / var(--cw) * 100%); }
  .bldg__mark--r { left: calc((var(--r0) - var(--x0)) / var(--cw) * 100%); }
  .bldg__legend { display: none; }
  .bldg__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: 4px 20px 0; border-top: 1px solid var(--rule); }
  .bldg__note { padding: 18px 0 20px; border-top: 1px solid var(--rule); }
  .bldg__note:nth-child(-n+2) { border-top: 0; }
  .bldg__note :is(.bldg__where, .bldg__fact) { padding-left: 38px; }
  .bldg__tb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .bldg__tb-id { display: none; }
  .bldg__tb-main { border-left: 0 !important; }
  .bldg__tb-facts { grid-template-columns: minmax(0, 1fr); }
  .bldg__tb-facts > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .bldg__tb-facts > div { padding: 10px 16px 11px; }
}
/* phones: the drawing shows where each service is, so the key gives each one's name and one fact, two to a row */
@media (max-width: 700px) {
  .bldg__sheet { padding: 6px; background-size: 12.5% 6px, 12.5% 6px, 6px 25%, 6px 25%, auto; }
  .bldg__notes { gap: 0 16px; padding: 0 14px; }
  .bldg__note { padding: 14px 0 16px; }
  .bldg__head { align-items: flex-start; gap: 8px; }
  .bldg__note .bldg__tile { width: 22px; height: 22px; }
  .bldg__note .bldg__tile .icon { width: 13px; height: 13px; }
  .bldg__note h3 { font-size: 1rem; line-height: 1.25; }
  .bldg__note .bldg__where { display: none; }
  .bldg__note .bldg__fact { padding-left: 0; margin-top: 8px; }
  .bldg__tb { grid-template-columns: minmax(0, 1fr); }
  .bldg__tb > * { padding: 14px; }
  .bldg__tb-main .bldg__where { font-size: .875rem; }
  .bldg__tb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
  .bldg__tb-facts > div { padding: 10px 10px 12px 14px; }
  .bldg__tb-facts > div + div { border-top: 0; border-left: 1px solid var(--rule); }
  .bldg__tb-facts dd { font-size: .875rem; }
  /* thin lines would vanish at half size: the drawing's lines step up a little */
  .bldg__svg path[stroke-width=".7"] { stroke-width: 1.1; }
  .bldg__svg path[stroke-width=".6"] { stroke-width: .9; }
  .bldg__svg path[stroke-width="1.45"] { stroke-width: 1.9; }
  .bldg__svg path[stroke-width="1.2"] { stroke-width: 1.7; }
  .bldg__svg path[stroke-width="1.1"] { stroke-width: 1.6; }
}
/* the smallest phones: the key and the title block's facts one to a row, so long names keep to their cells */
@media (max-width: 379px) {
  .bldg__notes { grid-template-columns: minmax(0, 1fr); }
  .bldg__note:nth-child(2) { border-top: 1px solid var(--rule); }
  .bldg__tb-facts { grid-template-columns: minmax(0, 1fr); }
  .bldg__tb-facts > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  .bldg__tile::before, .bldg__mark::before, .bldg__layer, .bldg h3 a, .bldg__note { transition: none; }
}
/* high contrast: the drawing in the theme's text colour (it sets its own colour, so it isn't forced on its own),
   the background in its grey, and the lit system in its highlight */
@media (forced-colors: active) {
  .bldg { --bldg-lit: Highlight; }
  .bldg__svg { color: CanvasText; }
  .bldg__layer--arch { opacity: 1; color: GrayText; }
  .bldg__svg .is-paper { fill: Canvas; }
  .bldg__tile, .bldg__mark { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .bldg__tile::before, .bldg__mark::before { display: none; }
  :is(.bldg__note, .bldg__tb-main):is(:hover, :focus-within) h3 a { text-decoration: underline; }
  .bldg__sheet:has(:is(.bldg__note, .bldg__tb-main):is(:hover, :focus-within)) .bldg__layer:not(.bldg__layer--arch) { opacity: 1; }
}
@media print { .bldg__sheet { break-inside: avoid; } }

/* ---------- Home: a client reference ----------
   The band before the closing call to action: a client's words set as the sign-off panel of a drawing (client_ref()
   in build.py). Navy, so it stands apart from white Sectors above and the mist call to action below. The words sit in
   a 3px white frame; the label breaks its top edge, as the g breaks the logo's box. Who said it sits under a teal line
   that ends in a square where it meets the facts column, which is plant room, like the footer. As
   drawn here (without JS, with reduced motion, in print, in high contrast) the words are white and the line drawn;
   main.js inks them up as the band scrolls into place (below, after the phone layout). */
.client-ref { padding: clamp(72px, 7.5vw, 112px) 0 clamp(64px, 7vw, 104px); background: var(--navy); color: #dfe3f4; }
.client-ref__panel {
  --cr-px: clamp(24px, 4.4vw, 62px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 330px); grid-template-rows: 1fr auto;
  border: var(--frame) solid var(--paper);
}
/* the label in a gap in the frame's top edge */
.client-ref__label {
  position: absolute; z-index: 1; top: calc(var(--frame) / -2); left: calc(var(--cr-px) - 14px); translate: 0 -50%;
  margin: 0; padding: 0 14px; background: var(--navy);
  font-size: .9375rem; font-weight: 600; font-stretch: var(--narrow); line-height: 1.3; letter-spacing: 0; color: var(--teal-300);
}
/* the words and who said them share the facts column's two rows, so the line under the words closes off both */
.client-ref__fig { grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; min-width: 0; margin: 0; }
.client-ref__quote { margin: 0; padding: clamp(44px, 4.6vw, 64px) var(--cr-px) clamp(36px, 3.6vw, 52px); }
/* the marks hang in the margin, in light teal (their alt text is empty: the blockquote says it's a quotation) */
.client-ref__quote p {
  margin: 0; max-width: 31em;
  font-size: clamp(1.3125rem, .8rem + 1.62vw, 2.125rem); font-weight: 560; font-stretch: 104%;
  line-height: 1.32; letter-spacing: -.012em; text-indent: -.42em; text-wrap: pretty; color: var(--paper);
}
.client-ref__quote p::before { content: "\201C"; content: "\201C" / ""; color: var(--teal-300); }
.client-ref__quote p::after { content: "\201D"; content: "\201D" / ""; color: var(--teal-300); }
.client-ref__cap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px var(--cr-px) 22px; }
.client-ref__cap::before, .client-ref__cap::after { content: ""; position: absolute; background: var(--teal); }
.client-ref__cap::before { top: calc(var(--frame) / -2); left: 0; right: 0; height: var(--frame); transform-origin: 0 50%; }
.client-ref__cap::after { z-index: 1; top: -5px; right: -5px; width: 10px; height: 10px; }
.client-ref__plate { display: block; padding: 9px 14px 8px; background: var(--paper); }
.client-ref__plate img { width: clamp(124px, 11vw, 150px); }
.client-ref__name { font-size: .9375rem; line-height: 1.45; color: #dfe3f4; }
.client-ref__name strong { font-weight: 650; color: var(--paper); }
.client-ref__facts, .client-ref__more { grid-column: 2; min-width: 0; background: var(--plant); }
.client-ref__facts { grid-row: 1; display: flex; flex-direction: column; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.client-ref__facts:last-child { grid-row: 1 / 3; border-bottom: 0; }
.client-ref__facts > div { flex: 1 1 auto; padding: 18px clamp(20px, 2vw, 28px); }
.client-ref__facts > div + div { border-top: 1px solid rgba(255, 255, 255, .14); }
.client-ref__facts dt { margin: 0 0 3px; font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); color: var(--teal-300); }
.client-ref__facts dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--paper); text-wrap: pretty; }
.client-ref__more {
  grid-row: 2; display: flex; align-items: center; padding: 18px clamp(20px, 2vw, 28px) 20px;
  font-weight: 650; line-height: 1.4; color: var(--paper);
  text-decoration: underline; text-decoration-color: var(--teal-300); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.client-ref__more:hover { color: var(--paper); background: #182052; text-decoration-color: var(--paper); text-decoration-thickness: 2px; }
.client-ref__more:focus-visible { outline: 3px solid var(--teal-300); outline-offset: -7px; }
/* tablets: one column, the facts side by side under the words */
@media (max-width: 900px) {
  .client-ref__panel, .client-ref__fig { display: block; }
  .client-ref__cap::after { right: -1.5px; translate: 50% 0; }
  .client-ref__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .client-ref__facts > div { padding: 16px clamp(18px, 2.4vw, 24px); }
  .client-ref__facts > div:first-child { padding-left: var(--cr-px); }
  .client-ref__facts > div + div { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
  .client-ref__more { padding: 16px var(--cr-px) 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
}
/* phones: the facts as a ruled list, label beside value */
@media (max-width: 600px) {
  .client-ref__quote { padding-top: 40px; padding-bottom: 32px; }
  .client-ref__facts { grid-template-columns: minmax(0, 1fr); }
  .client-ref__facts > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 12px; padding: 12px var(--cr-px); }
  .client-ref__facts > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .client-ref__facts dt { margin: 3px 0 0; }
  .client-ref__facts dd { font-size: 1rem; }
}
/* without subgrid the line and the column's rule can't be held level, so the square that joins them goes */
@supports not (grid-template-rows: subgrid) { .client-ref__cap::after { display: none; } }
/* the ink: on screen with motion allowed and no high-contrast theme (the same query as main.js). The script moves a
   pen down the words (--client-ink, px from the quote's top): above it they're white, below it they wait in a softer
   tone that still reads at 4.9:1 on the navy, and each line inks up over one line's travel as the pen passes. Then
   it draws the line under the words (--client-line, 0 to 1), over a fine dashed route, the way proposed work is
   drawn, and lands the square at its end (.is-signed). .is-quiet settles a landing or a jump without easing. */
@property --client-ink { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .client-ref.is-live .client-ref__quote p {
      color: transparent; -webkit-background-clip: text; background-clip: text;
      background-image: linear-gradient(var(--paper) calc(var(--client-ink, 0px) - 1.32em), #aab2dc var(--client-ink, 0px));
      transition: --client-ink .14s linear;
    }
  }
  .client-ref.is-live .client-ref__cap { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 8px, transparent 8px 14px) 0 0 / 100% 1px no-repeat; }
  .client-ref.is-live .client-ref__cap::before { transform: scaleX(var(--client-line, 1)); transition: transform .14s linear; }
  .client-ref.is-live .client-ref__cap::after { transform: scale(0); transition: transform .12s var(--ease); }
  .client-ref.is-live.is-signed .client-ref__cap::after { transform: none; transition-duration: .22s; }
  .client-ref.is-quiet .client-ref__quote p, .client-ref.is-quiet .client-ref__cap::before, .client-ref.is-quiet .client-ref__cap::after { transition: none; }
}
@media (forced-colors: active) {
  .client-ref__label { background: Canvas; }
  .client-ref__cap::before { background: CanvasText; }
  .client-ref__cap::after { display: none; }
  .client-ref__plate { border: 1px solid CanvasText; }
}
@media print {
  .client-ref { padding: 24px 0; background: none; color: var(--ink); }
  .client-ref__panel { border-color: var(--navy); break-inside: avoid; }
  .client-ref__label { background: var(--paper); color: var(--steel); }
  .client-ref__quote p, .client-ref__name strong, .client-ref__facts dd, .client-ref__more { color: var(--ink); }
  .client-ref__quote p::before, .client-ref__quote p::after, .client-ref__name, .client-ref__facts dt { color: var(--steel); }
  .client-ref__cap::before { background: var(--navy); }
  .client-ref__cap::after { display: none; }
  .client-ref__facts, .client-ref__more, .client-ref__facts > div + div { background: none; border-color: var(--rule); }
  .client-ref__plate { padding-left: 0; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--mist); color: var(--steel); border-top: var(--frame) solid var(--navy); }
/* where content follows it (the home page) rather than the footer, a matching rule closes it off */
.cta-band:not(:last-child) { border-bottom: var(--frame) solid var(--navy); }
.cta-band .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.cta-band h2 { color: var(--ink); margin-bottom: 10px; }
.cta-band p { margin: 0; max-width: 40rem; font-size: 1.125rem; }
.cta-band .btn-row { justify-content: flex-end; }
@media (max-width: 860px) { .cta-band .container { grid-template-columns: minmax(0, 1fr); } .cta-band .btn-row { justify-content: flex-start; } }
@media (max-width: 480px) { .cta-band .btn { flex: 1 1 100%; } }

/* ---------- Home: what do you need? ----------
   The home page's closing call to action (home_cta() in build.py), between the client reference's navy and the
   plant-room footer, so it's mist, like the call-to-action band that ends the other pages. That band is already
   higher up this page, so this one asks what the visitor needs and gives a door for each: ruled rows in a navy
   frame, like a schedule on a drawing, each the need and then what the door does. A row is one link, and fills navy
   when pointed at or focused, as an outline button does. Below 1101px the doors go under the heading. */
.cta-need { background: var(--mist); }
.cta-need .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px clamp(40px, 6vw, 96px); align-items: center;
  padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: clamp(56px, 6.5vw, 96px);
}
.cta-need h2 { margin-bottom: 12px; }
.cta-need__head p { margin: 0; max-width: 30rem; font-size: 1.125rem; color: var(--steel); }
.cta-need__doors { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 2px solid var(--navy); }
.cta-need__doors li + li { border-top: 1px solid var(--rule); }
.cta-need__door {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 72px;
  padding: 16px clamp(18px, 2.2vw, 28px); color: var(--ink); text-decoration: none; transition: background-color .15s, color .15s;
}
.cta-need__need { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.cta-need__go { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-stretch: 104%; color: var(--navy); white-space: nowrap; transition: color .15s; }
.cta-need__go .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.cta-need__door:is(:hover, :focus-visible) { background: var(--navy); color: var(--paper); text-decoration: none; }
.cta-need__door:is(:hover, :focus-visible) .cta-need__go { color: var(--paper); }
.cta-need__door:is(:hover, :focus-visible) .icon { transform: translateX(3px); }
.cta-need__door:focus-visible { outline: 3px solid var(--teal-300); outline-offset: -7px; }
@media (max-width: 1100px) { .cta-need .container { grid-template-columns: minmax(0, 46rem); } }
@media (max-width: 480px) { .cta-need__door { min-height: 64px; padding-top: 14px; padding-bottom: 14px; } .cta-need__need { font-size: 1.0625rem; } }
@media (forced-colors: active) {
  .cta-need__doors, .cta-need__doors li + li { border-color: CanvasText; }
  .cta-need__door:is(:hover, :focus-visible) .cta-need__go { text-decoration: underline; }
}
@media print { .cta-need { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--plant); color: var(--on-dark); font-size: .96875rem; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--teal-300); text-decoration: underline; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 40px; }
.footer-brand img { width: 150px; margin-bottom: 20px; }
.footer-brand p { max-width: 30em; }
.site-footer h2 { font-size: 1rem; font-stretch: var(--wide); color: var(--paper); margin: 4px 0 16px; letter-spacing: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.footer-contact .icon { color: var(--teal); margin-top: 3px; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact address { font-style: normal; line-height: 1.55; }
.footer-social { display: flex; gap: 8px; margin-top: 22px; }
.footer-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); }
.footer-social a:hover { border-color: var(--teal); text-decoration: none; }
.footer-accred { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: baseline; }
.footer-accred p { margin: 0; font-weight: 600; color: var(--paper); }
.footer-accred ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .875rem; }
.footer-bottom p { margin: 0; }
@media (max-width: 960px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .footer-brand, .footer-main > div:last-child { grid-column: 1 / -1; } }

/* ---------- Inner page heading: a navy band on drawing-paper grid ---------- */
.page-head, .section--blueprint {
  background-color: var(--navy);
  background-image: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 100%);
  background-repeat: no-repeat;
  color: #dfe3f4;
}
/* the Design page: drawing paper (fine and major grid inside a sheet border) with drafting tools on it */
.page-head--bg-drafting {
  background-image:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 100%);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px, 100% 100%;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  box-shadow: inset 0 0 0 14px var(--navy), inset 0 0 0 15px rgba(255, 255, 255, .18);
}
.page-head { position: relative; z-index: 1; }
.page-head .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-head--media .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.page-head h1 { color: var(--paper); margin-bottom: 18px; max-width: 15em; }
.page-head .lead { color: #dfe3f4; margin-bottom: 0; }
.page-head .btn-row, .page-head .tblock { margin-top: 28px; }
.page-head .tblock { border-color: var(--paper); box-shadow: 0 18px 40px rgba(9, 13, 36, .25); }
.page-head__media { position: relative; margin: 0; border: var(--frame) solid var(--paper); background: var(--mist); }
.page-head__media::before {
  content: ""; position: absolute; z-index: -1; inset: 16px -16px -16px 16px;
  border: 2px solid var(--teal); pointer-events: none;
}
.page-head__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-head__media figcaption { position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: var(--paper); color: var(--navy); font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); }
@media (min-width: 901px) {
  /* the framed photo floats level with the breadcrumb (its frame dropped 6px to the text's cap
     height); the margin below keeps a strip of band under it, where the drawing shows */
  .page-head--media .page-head__media { align-self: start; margin: 6px 0 clamp(72px, 8vw, 120px); box-shadow: 0 24px 50px rgba(9, 13, 36, .28); }
}
@media (max-width: 900px) {
  .page-head--media .container { grid-template-columns: minmax(0, 1fr); }
  .page-head__media { max-width: 640px; margin-right: 16px; }
}
.breadcrumbs { margin-bottom: 20px; font-size: .9375rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs li { color: #c3cae6; }
/* the separator trails each item, so a wrapped trail breaks after a slash and line 2 starts flush,
   and its empty alt text keeps it out of the accessibility tree (the first content line is the
   fallback for browsers without generated-content alt text) */
.breadcrumbs li:not(:last-child)::after { content: "/"; content: "/" / ""; margin: 0 10px; color: rgba(255, 255, 255, .4); }
.breadcrumbs a { color: var(--paper); }
.breadcrumbs a:hover { color: var(--teal-300); }

/* the design / install / maintain run on the same band */
.section--blueprint h2 { color: var(--paper); }
.section--blueprint .section-title p { color: #dfe3f4; }
.section--blueprint .run::before { background: var(--teal); }
.section--blueprint .run li::before { background: var(--navy); border-color: var(--paper); }
.section--blueprint .run h3 { color: var(--paper); }
.section--blueprint .run__sub { color: var(--teal-300); }
.section--blueprint .run p:last-child { color: #dfe3f4; }
/* high-contrast themes replace background colours, which would take the line away: draw it in the text
   colour (here, after the navy-band rule, so it wins on the band too) */
@media (forced-colors: active) { .run::before, .section--blueprint .run::before { background: CanvasText; } }
/* the home run draws its drawings (run--plot: run() in build.py draws them with tools/drawings/run_extracts.py, and
   "Home: the run draws its drawings as you scroll" in main.js). Each step carries an extract of a real drawing in the
   site's CAD lettering: the ground-floor ventilation layout over Design, section A-A through the ceiling void over
   Install, the PPM schedule over Maintain. They're decorative (aria-hidden) and never sit behind words: on desktop
   they stand in a row above the run, one over each junction, with the line dropped below them; at 860px and
   narrower each sits under its step's words. White at half strength, a step behind the words (a little stronger on
   phones, where they're drawn smaller). As drawn here, so without JS and with reduced motion, the drawings are whole
   and the line is drawn; in print and in high-contrast themes the drawings are left out and the run is as it is on
   Services */
.run__fig { display: none; }
@media screen and (forced-colors: none) {
  .run__fig { display: block; position: relative; --dwg-a: .5; }
  .run__dwg { display: block; width: 100%; height: 100%; overflow: visible; opacity: var(--dwg-a); }
}
/* the band's own drawing sheet (sheet-home.svg, in the BG2 block below) keeps only its title block and revision list
   here, drawn smaller, so the band carries the three drawings, not a fourth: the captions quote P1 and C1 from the
   list. (The title block still names the sheet's own schematic, faintly. 900px and narrower the band shows only the
   sheet border, and in print and high-contrast themes, with no drawings, the sheet is as it was.) The title block is
   the sheet's right half, so the fade ends 4px short of it */
@media screen and (min-width: 901px) and (forced-colors: none) {
  .section--blueprint.section--plot::before {
    background-size: clamp(380px, 32vw, 520px) auto;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 49px - clamp(190px, 16vw, 260px)), #000 calc(100% - 19px - clamp(190px, 16vw, 260px)));
            mask-image: linear-gradient(90deg, transparent calc(100% - 49px - clamp(190px, 16vw, 260px)), #000 calc(100% - 19px - clamp(190px, 16vw, 260px)));
  }
}
/* desktop: each drawing stands over its junction. It is two fifths as tall as a column is wide (its viewBox is 340 x
   136), worked out from the run's width (the container's, where container units work), and the line and junctions
   drop by that much and 24px more. The sizes are set on the band, not the run, which main.js restyles every frame */
@media screen and (min-width: 861px) and (forced-colors: none) {
  .section--plot > .container { container-type: inline-size; }
  .section--plot {
    --run-gap: clamp(24px, 4vw, 56px);
    --dwg-h: calc((min(var(--container), 100vw - 2 * var(--gutter)) - 2 * var(--run-gap)) * .4 / 3);
    --dwg-drop: 24px;
  }
  @supports (width: 1cqw) {
    .section--plot { --dwg-h: calc((100cqw - 2 * var(--run-gap)) * .4 / 3); }
  }
  .run--plot li { padding-top: calc(var(--dwg-h) + var(--dwg-drop) + 44px); }
  .run--plot li::before { top: calc(var(--dwg-h) + var(--dwg-drop)); }
  .section--blueprint .run--plot::before { top: calc(var(--dwg-h) + var(--dwg-drop) + 9px); }
  .run__fig { position: absolute; left: 0; top: 0; width: 100%; height: var(--dwg-h); }
}
/* phones and tablets: each drawing sits under its step's words, down the left run */
@media screen and (max-width: 860px) and (forced-colors: none) {
  .run--plot { gap: 40px; }
  .run--plot li { display: flex; flex-direction: column; }
  .run__fig { order: 1; width: 100%; max-width: 420px; aspect-ratio: 5 / 2; margin-top: 16px; --dwg-a: .6; }
}
/* the pen, on screen with motion allowed and no high-contrast theme (the same query as main.js). main.js sets
   --run-p, how much of the line is drawn, from the scroll position, and marks each junction .is-lit once the line
   reaches its centre: its ring firms up to white and, as the visitor scrolls down to it, it pops (.is-popping: it
   swells, fills teal and sends out a ring). Ahead of the line the rings are faint and only the route shows, as a fine
   dashed line, the way proposed work is drawn. The moving line is the static ::before itself, scaled from its start.
   The line also draws the drawing over each step, left to right: on desktop whatever is left of its tip, down the
   left as the pen (60% of the way down the screen) passes the drawing. main.js moves each drawing into a span that
   clips it to what the pen has passed (.run__clip) and lays fresh ink over it: a teal copy of the drawing (--run-ink)
   in a band that ends at the pen and fades out behind it (.run__wet), which dries (.is-dry) a moment after the pen
   stops. Under it all the drawing waits as a faint underlay (--run-under), which shows ahead of the pen; over it the
   drawn part is a little fainter, so it comes out at the strength it has as written. Both copies are pictures main.js
   makes from the drawing. Each span slides with the pen and its content slides back as far, by transforms on layers
   of their own (kept, as making them only while a drawing is drawn cost more than it saved), so a frame repaints
   nothing. Each drawing is marked .is-drawing while the pen is on it, when its band of ink shows, and .is-done once
   it's finished. Nothing in the band shows past its edges, and the band clips anything that would (the band of ink
   runs on past a drawing's end), so a phone's page never widens. Scrolling back up takes it all back; the words
   never change. Landing on the band, a jump or a resize settles everything at once (.is-quiet). --run-p is
   registered as not inherited, so setting it restyles only the run and its line (which asks for it); without
   @property it is inherited as usual and all still works */
@property --run-p { syntax: "<number>"; inherits: false; initial-value: 1; }
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .section--plot { overflow-x: clip; }
  .run--plot::before { --run-p: inherit; transform-origin: 0 0; transform: scaleX(var(--run-p, 1)); }
  .run--plot.is-live:not(.is-quiet) li::before { transition: border-color .2s var(--ease); }
  .section--blueprint .run--plot.is-live li:not(.is-lit)::before { border-color: rgba(255, 255, 255, .3); }
  .run--plot li.is-popping::before { animation: run-pop .55s var(--ease); }
  .run--plot.is-live .run__fig { background: var(--run-under) left bottom / contain no-repeat; }
  .run--plot.is-live .run__dwg { opacity: calc((var(--dwg-a) - .1) / .9); }
  .run__clip { position: absolute; top: -4px; bottom: -4px; left: -4px; overflow: hidden; }
  .run__clip > .run__dwg { position: absolute; top: 4px; left: 4px; }
  .run__wet {
    position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; visibility: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
  }
  .run__wet > span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--run-ink) left bottom / contain no-repeat; }
  .run__fig.is-drawing .run__wet { visibility: visible; }
  .run--plot.is-dry .run__wet { opacity: 0; }
  .run--plot.is-dry:not(.is-quiet) .run__wet { transition: opacity .4s var(--ease); }
  .run__clip, .run__clip > .run__dwg, .run__wet, .run__wet > span { will-change: transform; }
}
@media screen and (min-width: 861px) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .section--blueprint .run--plot { background: repeating-linear-gradient(270deg, rgba(255, 255, 255, .32) 0 8px, transparent 8px 14px) 9px calc(var(--dwg-h) + var(--dwg-drop) + 10px) / calc(100% - 9px) 1px no-repeat; }
}
@media screen and (max-width: 860px) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .section--blueprint .run--plot { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .32) 0 8px, transparent 8px 14px) 10px 9px / 1px calc(100% - 9px) no-repeat; }
  .run--plot::before { transform: scaleY(var(--run-p, 1)); }
}
/* until main.js has drawn the run (.is-live), a visitor with scripts on sees it as it starts rather than as it ends:
   the line not yet drawn, the junctions faint and the drawings as faint as the underlay. So a page reloaded part-way
   down the band, which can be painted before main.js runs, draws in rather than showing the finished drawings for a
   moment and then taking them back. Without scripts this doesn't apply and all is drawn, and if main.js never comes
   it's all drawn after 5s */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .run--plot:not(.is-live) { animation: run-wait-line 5s; }
  .section--blueprint .run--plot:not(.is-live) li::before { animation: run-wait-ring 5s; }
  .run--plot:not(.is-live) .run__dwg { animation: run-wait-dwg 5s; }
}
@keyframes run-wait-line { from, to { --run-p: 0; } }
@keyframes run-wait-ring { from, to { border-color: rgba(255, 255, 255, .3); } }
@keyframes run-wait-dwg { from, to { opacity: .1; } }
@keyframes run-pop {
  0% { box-shadow: 0 0 0 0 rgba(44, 160, 173, .7); }
  35% { transform: scale(1.5); background-color: var(--teal); }
  100% { box-shadow: 0 0 0 16px rgba(44, 160, 173, 0); }
}

/* ---------- Content pages ---------- */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.aside { display: grid; gap: 24px; align-content: start; }
.aside__sticky { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 24px; }
@media (max-width: 1100px) { .content-grid { grid-template-columns: minmax(0, 1fr); } .aside { display: none; } }
.contact-card { background: var(--plant); color: var(--on-dark); padding: 28px; }
.contact-card h2 { color: var(--paper); font-size: 1.375rem; margin-bottom: 10px; }
.contact-card p { margin: 0 0 18px; }
.contact-card__links { display: grid; gap: 10px; margin-bottom: 22px; }
.contact-card__links a { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.contact-card__links a:hover { color: var(--teal-300); text-decoration: underline; }
.contact-card__links .icon { color: var(--teal); }
.side-list h2 { font-size: 1.0625rem; margin-bottom: 8px; }
.side-list ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.side-list li { border-bottom: 1px solid var(--rule); }
.side-list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.side-list a:hover { color: var(--navy); text-decoration: underline; }
.side-list a[aria-current="page"] { color: var(--navy); font-weight: 650; }
.side-list .icon { color: var(--navy); }

.block + .block { margin-top: clamp(48px, 6vw, 72px); }
.block > h2 { font-size: clamp(1.5rem, 2.3vw, 1.875rem); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
@media (max-width: 640px) { .checklist--2 { grid-template-columns: minmax(0, 1fr); } }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 8px;
  border-left: 3px solid var(--teal-text); border-bottom: 3px solid var(--teal-text); transform: rotate(-45deg);
}

.scope-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.scope-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scope-list li { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); font-weight: 550; }
@media (max-width: 760px) { .scope-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .scope-list, .scope-list--3 { grid-template-columns: minmax(0, 1fr); } }

.pillars { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.pillars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.pillars h3 { margin: 0; font-size: 1.25rem; }
.pillars .pillars__sub { margin: 4px 0 0; font-size: .9375rem; font-weight: 600; font-stretch: var(--narrow); color: var(--navy); }
.pillars p { margin: 0; color: var(--steel); }
@media (max-width: 640px) { .pillars li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Case study ---------- */
.case-scope { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .case-scope { grid-template-columns: minmax(0, 1fr); } }
.case-scope .statement { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
.case-scope h2 { font-size: 1.0625rem; margin-bottom: 12px; }
.service-links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.service-links li { border-bottom: 1px solid var(--rule); }
.service-links a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.service-links a:hover { color: var(--navy); text-decoration: underline; }
.service-links .icon { color: var(--navy); }

.gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.gallery__item { margin: 0; }
.gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--mist); cursor: zoom-in; overflow: hidden; }
.gallery__btn img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s var(--ease); }
.gallery--landscape .gallery__btn img { aspect-ratio: 4 / 3; }
.gallery__btn:hover img { transform: scale(1.03); }
@media (max-width: 900px) { .gallery--4 { --cols: 2 !important; } }
@media (max-width: 640px) {
  .gallery { --cols: 2 !important; gap: 8px; }
  .gallery--odd .gallery__item:first-child { grid-column: 1 / -1; }
  .gallery--odd .gallery__item:first-child img { aspect-ratio: 4 / 3; }
}

.lightbox { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(9, 13, 36, .97); color: var(--paper); }
.lightbox::backdrop { background: rgba(9, 13, 36, .97); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; }
.lightbox__count { margin: 0; color: var(--on-dark); font-size: .9375rem; }
.lightbox__figure { margin: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; padding: 0 16px; }
.lightbox__stage { position: relative; min-height: 0; width: 100%; height: 100%; }
.lightbox__stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; transition: opacity .2s; }
.lightbox.is-loading .lightbox__stage img { opacity: .35; }
.lightbox__caption { max-width: 60rem; padding: 12px 0 0; text-align: center; color: var(--on-dark); font-size: .9375rem; }
.lightbox__nav { display: flex; justify-content: center; gap: 12px; padding: 14px 16px 20px; }
.lightbox__btn {
  min-width: 48px; min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid rgba(255, 255, 255, .4); border-radius: 2px; background: transparent; color: var(--paper); font: 600 .9375rem/1 var(--font); cursor: pointer;
}
.lightbox__btn:hover { border-color: var(--paper); background: rgba(255, 255, 255, .08); }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox :focus-visible { outline-color: var(--teal-300); }
html.lightbox-open { overflow: hidden; }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 22px 0; color: var(--ink); text-decoration: none; }
.pager a:hover strong { color: var(--navy); text-decoration: underline; }
.pager small { color: var(--steel); font-size: .9375rem; }
.pager strong { font-size: 1.3125rem; font-stretch: var(--wide); }
.pager .pager__next { text-align: right; align-items: flex-end; border-left: 1px solid var(--rule); padding-left: 24px; }
@media (max-width: 520px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .pager__next { text-align: left; align-items: flex-start; border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } }

.story-quotes { display: grid; gap: 28px; }
.story-quotes .quote blockquote { font-size: 1.1875rem; font-weight: 550; font-stretch: 100%; }

/* ---------- Partners and accreditations ---------- */
.partner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 48px); align-items: center; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.partners { border-top: 2px solid var(--navy); max-width: 62rem; }
.partner__logo { height: 110px; display: grid; place-items: center; padding: 16px; border: 1px solid var(--rule); background: var(--paper); }
.partner__logo img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; }
.partner h3 { margin-bottom: 6px; }
.partner p { margin: 0; color: var(--steel); }
.partner p + p { margin-top: 10px; }
@media (max-width: 640px) { .partner { grid-template-columns: minmax(0, 1fr); } .partner .partner__logo { width: 180px; height: 96px; } .partner .partner__logo img { max-height: 60px; } }

.accred-table { width: 100%; border-collapse: collapse; border-top: var(--frame) solid var(--navy); }
.accred-table th, .accred-table td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.accred-table thead th { font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--rule-strong); }
.accred-table tbody th { font-weight: 650; font-size: 1.0625rem; }
.accred-table td { color: var(--steel); }
.accred-table img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
@media (max-width: 600px) { .accred-table .col-logo { display: none; } }

/* seven partner and accreditation logos: one row on desktop, four over three on tablets, pairs on phones */
.logo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.logo-grid .partner__logo { height: 100px; }
.logo-grid .partner__logo img { max-height: 60px; }
@media (max-width: 1100px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.callout { margin-top: clamp(40px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; padding: 24px 28px; border: 2px solid var(--navy); }
.callout h2 { font-size: 1.25rem; margin-bottom: 4px; }
.callout p { margin: 0; color: var(--steel); max-width: 44rem; }

/* ---------- Project highlights ---------- */
.posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.post { display: flex; flex-direction: column; }
.post__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--mist); }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post h2 { font-size: 1.1875rem; margin: 14px 0 4px; }
.post__place { margin: 0 0 6px; font-size: .9375rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); }
.post p { color: var(--steel); }
.post__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9375rem; }
.post__links a { font-weight: 600; }
.also { margin-top: clamp(48px, 6vw, 72px); border-top: 2px solid var(--navy); padding-top: 20px; }
.also h2 { font-size: 1.25rem; }
.also ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.also li { color: var(--steel); }
.also strong { display: block; color: var(--ink); }
@media (max-width: 860px) { .also ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About ---------- */
.about-media { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.about-media img { width: 100%; object-fit: cover; }
.about-media img:first-child { aspect-ratio: 3 / 4; }
.about-media img:last-child { aspect-ratio: 3 / 4; margin-top: 64px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-panel { border: var(--frame) solid var(--navy); padding: clamp(20px, 3.5vw, 40px); }
.form-panel h2 { font-size: 1.625rem; margin-bottom: 6px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 24px; }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 650; }
.field label span { font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 2px solid var(--rule-strong); border-radius: 2px; background: var(--paper);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field__error { margin: 0; color: #b3261e; font-size: .9375rem; font-weight: 600; }
.field__error:empty { display: none; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283890' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 42px; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.form__note { margin: 0; color: var(--steel); font-size: .9375rem; }
.form__status { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--navy); }
.form__status:not(:empty) { padding: 14px 16px; border-left: var(--frame) solid var(--teal); background: var(--mist); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-list { list-style: none; margin: 0; padding: 0; border-top: var(--frame) solid var(--navy); }
.contact-list li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.contact-list li > div { min-width: 0; }
.contact-list .icon { width: 26px; height: 26px; color: var(--navy); margin-top: 2px; }
.contact-list h2 { font-size: 1rem; font-stretch: 100%; margin: 0 0 2px; color: var(--steel); font-weight: 600; letter-spacing: 0; }
.contact-list a.big, .contact-list .big { font-size: clamp(1.1875rem, 2vw, 1.375rem); font-weight: 700; font-stretch: var(--wide); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a.big:hover { color: var(--navy); text-decoration: underline; }
.contact-list address { font-style: normal; line-height: 1.55; }
.contact-list .link { display: inline-block; margin-top: 8px; }
.contact-social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.contact-social a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- 404 ---------- */
.notfound { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(64px, 10vw, 128px); }
.notfound__code { margin: 0 0 8px; font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; font-stretch: var(--wide); line-height: 1; color: var(--navy); }

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .cta-band, .site-footer, .nav-toggle, .lightbox, .aside { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Fixes after the first redesign screenshots ---------- */
.pager small { display: inline-flex; align-items: center; gap: 8px; }
.pager small .icon { width: 18px; height: 18px; }

/* Sticky call and quote bar on phones and tablets (the phone number otherwise scrolls away) */
.mobile-bar { display: none; }

/* ---------- Service pages: the scope as a spec panel ---------- */
.scope-panel { background: var(--mist); padding: clamp(22px, 3vw, 36px); border-top: var(--frame) solid var(--navy); }
.scope-panel > h2 { margin-bottom: 18px; }
.scope-panel .scope-list { border-top: 0; gap: 0 28px; }
.scope-panel .scope-list li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); }
.scope-panel .scope-list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 9px; height: 9px; background: var(--teal); }


/* ---------- Round-2 review fixes ---------- */
/* interior headings sit a step below the home headline */
.page-head h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 360px) { .page-head h1 { font-size: 2.05rem; } }
/* top-aligned heads, 4:3 photos and full-width stacked photos, so sibling pages don't jump */
.page-head .container { align-items: start; }
.page-head + .section { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 900px) { .page-head__media { max-width: none; margin-right: 16px; } }
/* logos in the page head are shown whole, never cropped like photos */
.page-head__media--logo { display: grid; place-items: center; padding: clamp(32px, 5vw, 56px); background: var(--paper); aspect-ratio: 4 / 3; }
.page-head__media--logo img { width: auto; max-width: 72%; max-height: 120px; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 900px) { .page-head__media--logo { aspect-ratio: 16 / 9; } }

/* navy duotone for the black-and-white library photos, so they sit with the project photography */
.duotone { position: relative; isolation: isolate; }
.duotone img { filter: grayscale(1) contrast(1.08); }
.duotone::after { content: ""; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: screen; pointer-events: none; }
.page-head__media.duotone::after { inset: 0; }

/* title blocks: break long place names at sensible points */
.tblock dd { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .tblock dd { font-size: .96875rem; font-stretch: 94%; } }

/* case study index and project highlights: rows line up (subgrid) */
.projects--index .project { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.projects--index .project .tblock { align-self: start; height: 100%; }
/* the project cards are flex containers, which would override the hidden attribute the filters set */
.projects--index .project[hidden] { display: none; }
.posts .post { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }

/* galleries of 6, 9 or 12 photos use three columns on tablets */
@media (max-width: 900px) and (min-width: 641px) { .gallery--4.gallery--by3 { --cols: 3 !important; } }

/* Concentrix: the client quotes stay beside the story as it scrolls */
@media (min-width: 901px) { .story-quotes { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }

/* square and triangular marks get more height than wide wordmarks */
.accred-table img.logo--square { height: 58px; }
.partner__logo img.logo--square { max-height: 92px; }
.logo-grid .partner__logo img.logo--square { max-height: 76px; }
.accred-table th, .accred-table td { overflow-wrap: break-word; }

/* contact: the email address fits narrow screens */
.contact-list .big { font-stretch: 100%; }

/* phones and tablets: one sticky Call / Request-a-quote bar instead of repeated button pairs */
@media (max-width: 1020px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 2px solid var(--navy); box-shadow: 0 -8px 24px rgba(20, 27, 60, .12);
  }
  .mobile-bar .btn { min-height: 46px; padding: 8px 10px; white-space: nowrap; text-align: center; font-size: .9375rem; }
  body { padding-bottom: 66px; }
  html { scroll-padding-bottom: 84px; }
  html.nav-open .mobile-bar, html.lightbox-open .mobile-bar { display: none; }
  .page-head .btn-row, .hero__actions { display: none; }
}
/* very short screens (landscape phones, heavy zoom): nothing fixed or sticky covers the content */
@media (max-height: 520px) {
  .site-header { position: relative; }
  .mobile-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
  html { scroll-padding: 0; }
}

/* bigger tap targets for standalone links on phones */
@media (max-width: 760px) {
  .footer-links a, .footer-contact a { display: inline-block; padding: 10px 0; }
  .footer-bottom a { display: inline-block; padding: 10px 0; }
  .topbar a { padding: 10px 0; }
  .post__links a { display: inline-block; padding: 10px 0; }
}
/* phone menu: a clear current-page marker */
@media (max-width: 1020px) {
  .menu__link[aria-current="page"] { box-shadow: none; border-left: 3px solid var(--teal); padding-left: 10px; color: var(--teal-text); font-weight: 650; }
}

/* Windows high-contrast themes keep the state indicators */
@media (forced-colors: active) {
  .filter[aria-pressed="true"] { outline: 3px solid CanvasText; outline-offset: 2px; }
  .nav__link.is-active, .nav__link[aria-current="page"], .menu__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
  .hero-proof__block, .page-head__media, .tblock { border-color: CanvasText; }
  .hero__link.is-on .hero__name { text-decoration: underline; }
  .hero__link::before, .hero__link::after, .hero.has-wire .hero__wire { display: none; }
  .hero__link:focus-visible { outline: 3px solid CanvasText; outline-offset: -3px; }
}

/* ---------- Company profile additions: team, call-out steps, specs, clients ---------- */
/* Who's who (Meet the team): the Managing Director in a spotlight with everyone who reports to them in one row,
   then a section per team. No connecting lines or "reporting to" labels: seniority shows in headshot size and
   order, and people who share a role always sit side by side. Headshots are the one round shape on the site,
   with a grey silhouette until photos arrive. Each person can have a short blurb in their own words. */
.who { --face: 88px; }
/* :where keeps this reset weaker than the component rules below */
:where(.who) ul { list-style: none; margin: 0; padding: 0; }
.who-face { flex: none; display: block; width: var(--face); height: var(--face); border: 3px solid var(--navy); border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #eef0f4, #cdd3de); color: #9ea6b8; }
.who-face svg, .who-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who-person { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.who-text { min-width: 0; }
.who-name { display: block; font-size: 1.0625rem; font-weight: 700; font-stretch: 100%; line-height: 1.25; color: var(--ink); overflow-wrap: break-word; }
.who-role { display: block; margin-top: 3px; font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); line-height: 1.3; color: var(--navy); }
.who-blurb { margin: 10px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--steel); text-wrap: pretty; }

/* the leadership panel: the Managing Director's headshot carries the site's offset teal frame */
.who-lead { background: var(--mist); padding: clamp(24px, 4vw, 52px); }
.who-md { display: flex; align-items: center; gap: clamp(24px, 3.5vw, 44px); }
.who-md .who-face { --face: 168px; margin: 10px; box-shadow: 0 0 0 7px var(--mist), 0 0 0 10px var(--teal); }
.who-md__name { margin: 0; font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 750; font-stretch: var(--wide); letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
.who-md__role { margin: 8px 0 0; font-size: 1.1875rem; font-weight: 650; line-height: 1.3; color: var(--navy); }
.who-md .who-blurb { max-width: 38rem; margin-top: 14px; font-size: 1.0625rem; }
/* everyone who reports to the Managing Director, in one row on desktop */
.who-direct { --face: 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.who-direct .who-name { font-size: 1.125rem; }

/* one section per team: a heading that says who leads it, then a row per level, each role kept together */
.who-team { margin-top: clamp(56px, 6vw, 88px); padding-top: 20px; border-top: var(--frame) solid var(--navy); }
.who-team__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.who-team__head h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.who-ledby { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--steel); }
.who-ledby strong { font-weight: 650; color: var(--ink); }
.who-team__intro { margin: 10px 0 0; max-width: 46rem; color: var(--steel); text-wrap: pretty; }
.who-row { display: flex; flex-wrap: wrap; gap: 28px 0; margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--rule); }
.who-row + .who-row { margin-top: 28px; }
.who-row--1 { --face: 88px; }
.who-row--2 { --face: 72px; }
.who-row > ul { display: flex; gap: 28px; min-width: 0; }
.who-row > ul + ul { margin-left: 32px; padding-left: 32px; border-left: 1px solid var(--rule); }
/* a set width, so a role's people line up and blurbs wrap to a readable measure */
.who-row .who-person { flex: 0 1 190px; width: 190px; min-width: var(--face); }

@media (max-width: 1099px) {
  .who-direct { --face: 92px; }
  .who-row .who-person { flex-basis: 160px; width: 160px; }
  .who-row--1 { --face: 80px; }
  .who-row--2 { --face: 68px; }
}

/* phones: a list, one person to a line, headshot beside the name; each role's people stay together */
@media (max-width: 719px) {
  .who-lead { padding: 24px 20px 28px; }
  .who-md { flex-direction: column; align-items: flex-start; gap: 16px; }
  .who-md .who-face { --face: 120px; }
  .who-direct { --face: 64px; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .who-person { flex-direction: row; align-items: flex-start; gap: 14px; }
  .who-direct .who-name { font-size: 1.0625rem; }
  .who-team__head { display: block; }
  .who-ledby { margin-top: 6px; }
  .who-row { display: block; }
  .who-row > ul { flex-direction: column; gap: 16px; }
  .who-row > ul + ul { margin: 20px 0 0; padding: 0; border: 0; }
  /* the desktop width would become a 190px height once the list runs vertically */
  .who-row .who-person { flex: none; width: auto; }
  .who-row--1 { --face: 60px; }
  .who-row--2 { --face: 52px; }
}
@media (forced-colors: active) { .who-face { border-color: CanvasText; } .who-md .who-face { box-shadow: none; } }

/* ---------- Service and maintenance: full-width bands ---------- */
/* two side-by-side columns of a band, headed a step below a section title */
.band-col > h2 { font-size: clamp(1.5rem, 2.3vw, 1.875rem); }
.band-col > p { color: var(--steel); }

/* what every job record on the client portal shows: a framed, ruled sheet */
.record { margin-top: clamp(40px, 5vw, 56px); background: var(--paper); border: 2px solid var(--navy); }
.record__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 14px 20px; border-bottom: 1px solid var(--rule-strong); }
.record__head h3 { margin: 0; font-size: 1.125rem; }
.record__head p { margin: 0; color: var(--steel); font-size: .9375rem; }
/* the 1px gaps show the rule colour through, so the grid is ruled whatever the column count */
.record ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.record li { position: relative; padding: 14px 20px 14px 48px; background: var(--paper); font-weight: 650; }
.record li::before {
  content: ""; position: absolute; left: 20px; top: 1.15em; width: 14px; height: 8px;
  border-left: 3px solid var(--teal-text); border-bottom: 3px solid var(--teal-text); transform: rotate(-45deg);
}
@media (max-width: 760px) { .record ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .record ul { grid-template-columns: minmax(0, 1fr); } }

/* the breakdown call: the schematic run, six numbered junctions across the navy band */
.run--steps { counter-reset: step; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 28px); }
.run--steps::before { left: 17px; top: 15.5px; }
.run--steps li { counter-increment: step; padding-top: 54px; }
.run--steps li::before {
  content: counter(step); width: 34px; height: 34px; display: grid; place-items: center;
  font-weight: 750; font-size: .9375rem; font-stretch: var(--wide); line-height: 1; color: var(--navy);
}
.section--blueprint .run--steps li::before { color: var(--paper); }
.run--steps h3 { font-size: 1.125rem; margin-bottom: 6px; }
@media (max-width: 1100px) {
  .run--steps { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 40rem; }
  .run--steps::before { left: 15.5px; right: auto; top: 17px; bottom: 17px; width: 3px; height: auto; }
  .run--steps li { padding: 5px 0 0 56px; }
}

/* what we maintain: an equipment schedule */
.equip { width: 100%; border-collapse: collapse; border-top: var(--frame) solid var(--navy); }
.equip th, .equip td { text-align: left; vertical-align: top; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--rule); }
.equip thead th { padding-top: 10px; padding-bottom: 10px; font-size: .875rem; font-weight: 600; font-stretch: var(--narrow); color: var(--steel); border-bottom-color: var(--rule-strong); }
.equip tbody th { width: 22%; font-weight: 650; font-size: 1.0625rem; }
.equip tbody td { color: var(--steel); }
.equip tbody td:last-child { width: 32%; padding-right: 0; color: var(--ink); font-weight: 600; font-stretch: var(--narrow); }
.equip__note { margin: 18px 0 0; max-width: 46rem; color: var(--steel); }
@media (max-width: 760px) {
  .equip, .equip tbody, .equip tr, .equip th, .equip td { display: block; width: auto !important; }
  .equip thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .equip tbody tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .equip tbody th, .equip tbody td { padding: 0; border: 0; }
  .equip tbody td { margin-top: 4px; }
  .equip tbody td[data-label]::before { content: attr(data-label) ": "; color: var(--steel); }
}

/* long-standing clients: one bar per client, length by years, the number beside it */
.tenure { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--navy); }
.tenure li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: center; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tenure__name { font-weight: 650; }
.tenure__plot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tenure__bar { flex: none; height: 16px; width: calc((100% - 5.5rem) * var(--v)); background: var(--navy); border-radius: 0 2px 2px 0; }
.tenure__value { white-space: nowrap; font-weight: 600; font-stretch: var(--narrow); }
@media (max-width: 520px) { .tenure li { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { .tenure__bar { background: CanvasText; } }

/* client references set smaller than the home-page quote, stacked */
.quotes { display: grid; gap: 28px; margin-top: 24px; }
.quotes .quote blockquote { font-size: 1.1875rem; font-weight: 550; font-stretch: 100%; }
.quotes .quote figcaption { margin-top: 14px; }
.case-scope .quotes { margin-top: 32px; }
.quotes--2 { margin-top: clamp(40px, 5vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 64px); }
@media (max-width: 860px) { .quotes--2 { grid-template-columns: minmax(0, 1fr); } }
/* a heading band with a title block but no photo: keep the block to the text column, clear of the drawing */
.page-head:not(.page-head--media) .tblock { max-width: 40rem; }

/* client names as a ruled list */
.client-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; border-top: var(--frame) solid var(--navy); }
.client-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 650; font-stretch: 104%; }
@media (max-width: 960px) { .client-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } }

/* accreditations: insurance, health and safety, training */
.accred-more { margin-top: clamp(48px, 6vw, 72px); }
.accred-more .block > h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
.accred-more .tblock { max-width: 34rem; }
/* ==========================================================================
   BG2 "DRAWING EXTRACTS": heading-band backgrounds (option: drawing)
   Each page type carries a fragment of the drawing that belongs to it, in white at low
   opacity: a VRV schematic for air conditioning, a ductwork plan for ventilation, an LTHW
   schematic for heating, a PPM schedule for maintenance, a store ceiling plan for retail, and
   so on. Where the band has a header photo, the drawing lies underneath it: it is pinned to
   the photo's bottom-left corner, shows in the band below the photo and in the margin to its
   right, and fades out before the text column. Company pages and the home band are drawn as a
   drawing sheet instead: a border with zone ticks and a title block in the corner. Design gets
   the border and a drawing-paper grid, with a coordination section (no title block) under the photo.
   Assets: assets/img/bg2/*.svg, generated by tools/drawings/generate.py (run it from the project folder).
   ========================================================================== */
.page-head, .section--blueprint { position: relative; isolation: isolate; }
.page-head::before, .section--blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
}

/* where the header photo sits, worked out from the page-head layout (two columns, 1.1fr and .9fr,
   in the container; the photo's top 6px below the breadcrumb's box, at its cap height): its left
   edge from the band centre (--bg-pl) and its bottom edge from the band top (--bg-pb) */
.page-head--media {
  --bg-cw: min(var(--container), 100vw - 2 * var(--gutter));
  --bg-gap: clamp(32px, 5vw, 80px);
  --bg-pl: calc(var(--bg-cw) * .05 + var(--bg-gap) * .45);
  --bg-pb: calc(6px + clamp(32px, 5vw, 64px) + ((var(--bg-cw) - var(--bg-gap)) * .45 - 2 * var(--frame)) * .75 + 2 * var(--frame));
  /* nothing in the text column: the drawing fades in across the gap, under the photo's left edge */
  --bg-fade: linear-gradient(90deg, transparent calc(50% + var(--bg-pl) - 14px), #000 calc(50% + var(--bg-pl) + 50px));
}

/* 1. drawing extracts: 1500 x 760, drawn relative to the photo's bottom-left corner at (240, 420) */
.page-head--media::before {
  background-size: 1500px 760px;
  background-position: calc(50% + 510px + var(--bg-pl)) calc(var(--bg-pb) - 420px);
  opacity: .19;
  -webkit-mask-image: var(--bg-fade);
          mask-image: var(--bg-fade);
}
/* desktop: the extract dissolves over the band's last 32px rather than being cut off by its edge.
   This selector stays at its plain specificity and position, so the sheets with a photo (more
   specific, below) keep their hard foot for the title block and Design (later) keeps its own mask */
@media (min-width: 901px) {
  .page-head--media::before {
    -webkit-mask-image: var(--bg-fade), linear-gradient(0deg, transparent 0, #000 32px), linear-gradient(270deg, transparent 0, #000 24px);
    -webkit-mask-composite: source-in;
            mask-image: var(--bg-fade), linear-gradient(0deg, transparent 0, #000 32px), linear-gradient(270deg, transparent 0, #000 24px);
            mask-composite: intersect;
  }
}
.page-head--bg-icefire::before { background-image: url("../img/bg2/vrv-schematic.svg"); }
.page-head--bg-ventilation::before { background-image: url("../img/bg2/duct-layout.svg"); }
.page-head--bg-pipework::before { background-image: url("../img/bg2/lthw-schematic.svg"); }
.page-head--bg-plumbing::before { background-image: url("../img/bg2/dhw-schematic.svg"); }
.page-head--bg-retail::before { background-image: url("../img/bg2/retail-ceiling.svg"); }
.page-head--bg-commercial::before { background-image: url("../img/bg2/office-plan.svg"); }
.page-head--bg-residential::before { background-image: url("../img/bg2/house-mvhr.svg"); }
/* tables read louder than plans and schematics at the same strength, so they sit lower */
.page-head--bg-tools::before { background-image: url("../img/bg2/ppm-schedule.svg"); opacity: .13; }

/* pages without a photo: the lead runs up to 640px from the container's left edge (gutter + 640px
   on narrower screens), so their fades never start before gutter + 666px */
/* the services index: its legend keeps the top-right corner, fading out before the text */
.page-head--bg-services::before {
  background-image: url("../img/bg2/services-legend.svg");
  background-size: 1500px 820px;
  background-position: calc(50% + 550px) 0;
  opacity: .12;
  -webkit-mask-image: linear-gradient(90deg, transparent max(50% - 20px, var(--gutter) + 666px), #000 max(50% + 200px, var(--gutter) + 780px));
          mask-image: linear-gradient(90deg, transparent max(50% - 20px, var(--gutter) + 666px), #000 max(50% + 200px, var(--gutter) + 780px));
}
/* below 1440 the full-size legend runs past the band's right edge: a smaller one (0.7) keeps
   its table 20px inside the band (its left edge at 100% - 370px, its centre divider at 100% - 195px).
   The fade ends by the table's left edge, so the table is never cut */
@media (min-width: 901px) and (max-width: 1439px) {
  .page-head--bg-services::before {
    background-size: 1050px 574px; background-position: right -400px top 0;
    -webkit-mask-image: linear-gradient(90deg, transparent max(50% - 20px, var(--gutter) + 666px), #000 min(max(50% + 200px, var(--gutter) + 780px), max(100% - 372px, var(--gutter) + 700px)));
            mask-image: linear-gradient(90deg, transparent max(50% - 20px, var(--gutter) + 666px), #000 min(max(50% + 200px, var(--gutter) + 780px), max(100% - 372px, var(--gutter) + 700px)));
  }
}
/* below 1110px the whole table no longer fits clear of the lead (gutter + 700px): the fade ends at
   the centre divider instead, leaving the right-hand column and the right-aligned title */
@media (min-width: 901px) and (max-width: 1109px) {
  .page-head--bg-services::before {
    -webkit-mask-image: linear-gradient(90deg, transparent max(100% - 225px, var(--gutter) + 666px), #000 max(100% - 196px, var(--gutter) + 700px));
            mask-image: linear-gradient(90deg, transparent max(100% - 225px, var(--gutter) + 666px), #000 max(100% - 196px, var(--gutter) + 700px));
  }
}

/* 2. drawing sheets: title block, revision list and a small drawing in the bottom-right corner
   of the sheet border. The two company pages with a photo use a compact strip title block
   instead (sheet-*-strip.svg), clear of the photo; on phones they show just the border.
   Design only borrows --sheet for its coordination section; see 3. */
.page-head--bg-buildings { --sheet: url("../img/bg2/sheet-buildings.svg"); }
.page-head--bg-equipment { --sheet: url("../img/bg2/sheet-equipment.svg"); }
.page-head--bg-certificates { --sheet: url("../img/bg2/sheet-certificates.svg"); }
.page-head--bg-contact { --sheet: url("../img/bg2/sheet-contact.svg"); }
.page-head--bg-drafting { --sheet: url("../img/bg2/sheet-design.svg"); }
.section--blueprint { --sheet: url("../img/bg2/sheet-home.svg"); }
/* company pages with a photo: a 78-tall strip title block in the corner, which always clears the
   photo's teal outline (the strip under the photo is never under 117px on desktop) */
.page-head--media.page-head--bg-buildings { --sheet: url("../img/bg2/sheet-buildings-strip.svg"); }
.page-head--media.page-head--bg-equipment { --sheet: url("../img/bg2/sheet-equipment-strip.svg"); }
.page-head--bg-buildings::before, .page-head--bg-equipment::before, .page-head--bg-certificates::before,
.page-head--bg-contact::before, .section--blueprint::before {
  background-image: var(--sheet);
  background-size: clamp(420px, 44vw, 620px) auto;
  background-position: right 15px bottom 15px;
  opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, transparent max(50% + 26px, var(--gutter) + 666px), #000 max(50% + 170px, var(--gutter) + 780px));
          mask-image: linear-gradient(90deg, transparent max(50% + 26px, var(--gutter) + 666px), #000 max(50% + 170px, var(--gutter) + 780px));
}
.page-head--media.page-head--bg-buildings::before, .page-head--media.page-head--bg-equipment::before {
  background-size: 620px auto;
  -webkit-mask-image: var(--bg-fade);
          mask-image: var(--bg-fade);
}
/* the home band has no photo; its sheet sits top right, above the three columns */
.section--blueprint::before {
  background-position: right 15px top 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 40px), #000 calc(50% + 120px));
          mask-image: linear-gradient(90deg, transparent calc(50% - 40px), #000 calc(50% + 120px));
}
/* the sheet border and zone ticks */
.page-head--bg-buildings::after, .page-head--bg-equipment::after, .page-head--bg-certificates::after,
.page-head--bg-contact::after, .page-head--bg-drafting::after, .section--blueprint::after {
  content: ""; position: absolute; inset: 14px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .17);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .17) 1px, transparent 1px) 0 0 / 160px 7px repeat-x,
    linear-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px) 0 0 / 7px 160px repeat-y;
}

/* 3. Design: the drawing-paper grid (major and minor lines, registration crosses on the major
   lines) round the photo, clear of the text, with the coordination section under the photo */
.page-head--bg-drafting {
  background-image: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 100%);
  background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; box-shadow: none;
}
.page-head--bg-drafting::before {
  background-image:
    var(--sheet),
    url("../img/bg2/grid-cross.svg"),
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: 1500px 760px, 96px 96px, 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: calc(50% + 510px + var(--bg-pl)) calc(var(--bg-pb) - 420px), 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
  opacity: .2;
  /* a longer fade than the extracts: from the text column's edge to well under the photo */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% + var(--bg-pl) - var(--bg-gap) + 6px), #000 calc(50% + var(--bg-pl) + 120px));
          mask-image: linear-gradient(90deg, transparent calc(50% + var(--bg-pl) - var(--bg-gap) + 6px), #000 calc(50% + var(--bg-pl) + 120px));
}

/* narrower desktops: the sheets without a photo show just their title-block column, clear of the
   text. The title block starts half a sheet width (clamp(210px, 22vw, 310px)) in from the sheet's
   right edge, 15px in from the band's; the fade runs in the gap just left of it */
@media (min-width: 901px) and (max-width: 1200px) {
  .page-head--bg-buildings::before, .page-head--bg-equipment::before, .page-head--bg-certificates::before,
  .page-head--bg-contact::before {
    -webkit-mask-image: linear-gradient(90deg, transparent max(100% - 49px - clamp(210px, 22vw, 310px), var(--gutter) + 666px), #000 max(100% - 19px - clamp(210px, 22vw, 310px), var(--gutter) + 700px));
            mask-image: linear-gradient(90deg, transparent max(100% - 49px - clamp(210px, 22vw, 310px), var(--gutter) + 666px), #000 max(100% - 19px - clamp(210px, 22vw, 310px), var(--gutter) + 700px));
  }
  .section--blueprint::before {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 49px - clamp(210px, 22vw, 310px)), #000 calc(100% - 19px - clamp(210px, 22vw, 310px)));
            mask-image: linear-gradient(90deg, transparent calc(100% - 49px - clamp(210px, 22vw, 310px)), #000 calc(100% - 19px - clamp(210px, 22vw, 310px)));
  }
}
/* the strip title blocks under a photo do the same until the drawing beside them clears the photo
   fade whole: the key plan (its left edge 435px in from the band's right edge) from 1126px, the
   equipment schedule (569px in) from 1427px. Narrower, only part of it would show, so the strip
   shows just its title block (310px wide, 15px in from the band's edge), cut in the 12px gap
   between the title block and the drawing beside it */
@media (min-width: 901px) and (max-width: 1125px) {
  .page-head--media.page-head--bg-buildings::before {
    -webkit-mask-image: var(--bg-fade), linear-gradient(90deg, transparent calc(100% - 335px), #000 calc(100% - 327px));
    -webkit-mask-composite: source-in;
            mask-image: var(--bg-fade), linear-gradient(90deg, transparent calc(100% - 335px), #000 calc(100% - 327px));
            mask-composite: intersect;
  }
}
@media (min-width: 901px) and (max-width: 1426px) {
  .page-head--media.page-head--bg-equipment::before {
    -webkit-mask-image: var(--bg-fade), linear-gradient(90deg, transparent calc(100% - 335px), #000 calc(100% - 327px));
    -webkit-mask-composite: source-in;
            mask-image: var(--bg-fade), linear-gradient(90deg, transparent calc(100% - 335px), #000 calc(100% - 327px));
            mask-composite: intersect;
  }
}
/* wider desktops: a smaller sheet sits lower and further right, so the drawing register stays
   clear of a two-line heading (it reaches its full 620px at 1722px). The photo variants keep 620px */
@media (min-width: 1201px) {
  .page-head--bg-buildings::before, .page-head--bg-equipment::before, .page-head--bg-certificates::before,
  .page-head--bg-contact::before { background-size: clamp(420px, 36vw, 620px) auto; }
}
/* phones and small tablets: the text takes the full width and the photo sits at the foot of the
   band (full width less its 16px outline offset). The drawing stays pinned to the photo's
   bottom-left corner and shows only round its lower part: it has faded out by the height of a
   16:9 logo panel (the shortest case), so nothing reaches the text above the photo. The company
   pages, with or without a photo, keep just the sheet border, at the band edge. */
@media (max-width: 900px) {
  /* the band gets a deeper foot under the photo, and the drawing shows only there: never beside the
     photo, where the narrow margins would cut its labels, and dissolving into the band's bottom edge */
  .page-head--media {
    --bg-pad: 88px;
    --bg-ph: calc((100vw - 2 * var(--gutter) - 16px) * .5625);
    --bg-fade: linear-gradient(0deg, transparent 0, #000 14px, #000 calc(var(--bg-pad) - 14px), transparent var(--bg-pad));
  }
  .page-head--media:not(.page-head--bg-buildings):not(.page-head--bg-equipment) .container { padding-bottom: var(--bg-pad); }
  .page-head--media::before {
    background-position: left calc(var(--gutter) - 240px) bottom calc(var(--bg-pad) - 340px);
    opacity: .16;
  }
  .page-head--bg-tools::before { opacity: .12; }
  /* Design keeps its paper grid up round the photo */
  .page-head--bg-drafting::before {
    background-position: left calc(var(--gutter) - 240px) bottom calc(var(--bg-pad) - 340px), 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
    opacity: .16;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 14px, #000 calc(var(--bg-pad) + var(--bg-ph) * .4), transparent calc(var(--bg-pad) + var(--bg-ph) - 16px));
            mask-image: linear-gradient(0deg, transparent 0, #000 14px, #000 calc(var(--bg-pad) + var(--bg-ph) * .4), transparent calc(var(--bg-pad) + var(--bg-ph) - 16px));
  }
  .page-head--bg-buildings::before, .page-head--bg-equipment::before, .page-head--bg-certificates::before,
  .page-head--bg-contact::before, .page-head--bg-services::before, .section--blueprint::before { background-image: none; }
  .page-head--bg-buildings::after, .page-head--bg-equipment::after, .page-head--bg-certificates::after,
  .page-head--bg-contact::after, .page-head--bg-drafting::after, .section--blueprint::after, .page-head--bg-services::after {
    content: ""; position: absolute; inset: 6px; z-index: -1; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .17);
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .17) 1px, transparent 1px) 0 0 / 160px 5px repeat-x,
      linear-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px) 0 0 / 5px 160px repeat-y;
  }
}
@media (forced-colors: active) {
  .page-head::before, .page-head::after, .section--blueprint::before, .section--blueprint::after { display: none; }
}
/* ======================== end BG2 drawing extracts ======================== */

/* ==================== Home: partners and accreditations title block ====================
   Built by accred_strip() from ACCRED_INTRO and ACCRED_GROUPS in content.py. A static, ruled schedule in the
   drawing title-block language: a title cell (heading, a line naming the partners, ruled links) beside two
   ruled groups of four cells. The column rules line up from row to row, and on wide screens the title cell
   shares the two rows (subgrid), so its link rules line up with the rule between the groups. No motion. */
.accred-tb { padding: clamp(8px, 1.5vw, 16px) 0; }
/* on the home page it follows the services schedule's mist band */
.section--mist + .accred-tb { padding-top: clamp(40px, 5vw, 64px); }
/* and the call to action band comes straight after it, before the case studies */
.accred-tb + .cta-band { margin-top: clamp(32px, 3.5vw, 48px); }
.accred-tb__block {
  display: grid; grid-template-columns: minmax(min-content, 1.05fr) minmax(0, 3fr);
  border: 2px solid var(--navy); background: var(--paper);
}
.accred-tb__title {
  grid-row: span 2; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 28px) 0;
  border-right: 1px solid var(--rule-strong);
}
/* the heading and line wrapper only matters on wide screens; elsewhere its children join the title's layout */
.accred-tb__head { display: contents; }
.accred-tb__title h2 { margin: 0; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; }
.accred-tb__title p { margin: 0; color: var(--ink); font-size: .9375rem; line-height: 1.55; max-width: 36ch; }
/* the links sit at the foot of the title cell as ruled rows, where a title block puts its sheet references */
.accred-tb__links { list-style: none; margin: auto calc(-1 * clamp(18px, 2vw, 28px)) 0; padding: 0; }
.accred-tb__links li + li { border-top: 1px solid var(--rule); }
.accred-tb__links li:first-child { border-top: 1px solid var(--rule-strong); }
.accred-tb__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  padding: 10px clamp(18px, 2vw, 28px); font-weight: 650; font-size: .9375rem; text-decoration: none; color: var(--navy);
}
.accred-tb__links a:hover { background: var(--mist); }
.accred-tb__links a:focus-visible { outline-offset: -3px; }
.accred-tb__links .icon { flex: none; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.accred-tb__links a:is(:hover, :focus-visible) .icon { transform: translateX(3px); }

.accred-tb__group { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.accred-tb__group + .accred-tb__group { border-top: 1px solid var(--rule-strong); }
.accred-tb__band {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px clamp(14px, 1.6vw, 20px) 9px;
  background: var(--mist); border-bottom: 1px solid var(--rule);
  font-size: .8125rem; font-weight: 600; font-stretch: var(--narrow); line-height: 1.3; color: var(--steel);
}
.accred-tb__band::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--teal); }
/* 1px ruled cells: the list's rule colour shows through a 1px gap between white cells */
.accred-tb__cells {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
}
.accred-tb__cell {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px clamp(14px, 1.6vw, 20px); background: var(--paper);
}
.accred-tb__logo { display: flex; align-items: center; height: 58px; }
.accred-tb__logo img { width: auto; height: 44px; max-width: 100%; object-fit: contain; object-position: left center; }
.accred-tb__logo--wide img { height: 30px; }
.accred-tb__logo--tall img { height: 54px; }
.accred-tb__logo--square img { height: 58px; }
/* no logo yet (or a figure): the name is set in the logo's place */
.accred-tb__logo--text {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 700; font-stretch: var(--wide); line-height: 1.1;
  color: var(--navy); overflow-wrap: break-word;
}
.accred-tb__name {
  font-size: .9375rem; font-weight: 650; font-stretch: var(--narrow); line-height: 1.3; color: var(--ink);
  text-wrap: pretty; overflow-wrap: break-word;
}
.accred-tb__what { display: block; margin-top: 2px; font-weight: 500; font-size: .875rem; color: var(--steel); }
/* a text cell has only its grey line: drop it to the foot so it sits level with its neighbours' grey lines */
.accred-tb__logo--text + .accred-tb__name { margin-top: auto; }
.accred-tb__logo--text + .accred-tb__name .accred-tb__what { margin-top: 0; }

/* wide screens: the title cell spans both rows as a subgrid, its heading in the first and its two links
   filling the second, so the link rules start exactly on the rule between the two groups */
@media (min-width: 1181px) {
  .accred-tb__block { grid-template-rows: auto auto; }
  .accred-tb__title { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; padding: 0; }
  .accred-tb__head { display: flex; flex-direction: column; gap: 12px; padding: 20px clamp(18px, 2vw, 28px) 8px; }
  .accred-tb__links { margin: 0; display: grid; grid-auto-rows: 1fr; border-top: 1px solid var(--rule-strong); }
  .accred-tb__links li:first-child { border-top: 0; }
  .accred-tb__links a { height: 100%; }
}
/* tablets and small laptops: the title cell becomes a row across the top, the links on the right */
@media (max-width: 1180px) {
  .accred-tb__block { grid-template-columns: minmax(0, 1fr); }
  .accred-tb__title {
    grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); align-items: center; gap: 8px 32px;
    padding: 20px clamp(14px, 1.6vw, 20px); border-right: 0; border-bottom: 1px solid var(--rule-strong);
  }
  .accred-tb__title h2, .accred-tb__title p { grid-column: 1; max-width: 52ch; }
  .accred-tb__links { grid-column: 2; grid-row: 1 / span 2; margin: 0; border: 1px solid var(--rule); }
  .accred-tb__links li:first-child { border-top: 0; }
  .accred-tb__links a { min-height: 44px; padding: 8px 14px; }
}
/* phones: partners two by two with smaller logos, registrations one per row, the links stacked under the line */
@media (max-width: 640px) {
  .accred-tb__title { display: flex; flex-direction: column; align-items: stretch; padding: 18px 12px 16px; gap: 8px; }
  .accred-tb__title h2 { font-size: 1.375rem; }
  .accred-tb__title p { font-size: .875rem; }
  .accred-tb__links { margin-top: 6px; }
  .accred-tb__links a { font-size: .875rem; padding: 8px 12px; }
  .accred-tb__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accred-tb__band { padding: 7px 12px 8px; }
  .accred-tb__cell { padding: 12px; gap: 8px; }
  .accred-tb__logo { height: 44px; }
  .accred-tb__logo img { height: 34px; }
  .accred-tb__logo--wide img { height: 22px; }
  .accred-tb__logo--tall img { height: 42px; }
  .accred-tb__logo--square img { height: 44px; }
  .accred-tb__logo--text { font-size: 1.0625rem; }
  .accred-tb__name { font-size: .875rem; }
  .accred-tb__what { font-size: .8125rem; }
  /* registrations: one row each, the logo centred in a fixed column beside its name, so the text lines up */
  .accred-tb__group--2 .accred-tb__cells { grid-template-columns: minmax(0, 1fr); }
  .accred-tb__group--2 .accred-tb__cell { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; }
  .accred-tb__group--2 .accred-tb__logo { flex: none; width: 96px; height: 40px; justify-content: center; }
  .accred-tb__group--2 .accred-tb__logo img { height: auto; max-height: 40px; max-width: 76px; }
  .accred-tb__group--2 .accred-tb__logo--text { width: 96px; min-width: 0; font-size: 1rem; white-space: nowrap; }
  .accred-tb__group--2 .accred-tb__logo--text + .accred-tb__name { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .accred-tb__links .icon { transition: none; } }
@media (forced-colors: active) {
  .accred-tb__block { border-color: CanvasText; }
  .accred-tb__cell { outline: 1px solid CanvasText; }
  .accred-tb__band { border-bottom-color: CanvasText; }
}
/* the cell rules are a background showing through the gaps, so keep backgrounds when printing */
@media print { .accred-tb__block { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Partnerships page: a partner whose logo hasn't arrived yet shows its name in the logo box, set like the home block */
.partner__logo-text { font-size: 1.25rem; font-weight: 700; font-stretch: var(--wide); line-height: 1.15; color: var(--navy); text-align: center; }
/* Partnerships page on phones: square logos (Toshiba T7, Gas Safe, SafeContractor) stay inside their 96px boxes */
@media (max-width: 640px) { .partner .partner__logo img.logo--square { max-height: 64px; } }
/* ==================== end home partners and accreditations title block ==================== */