/* ==================================================================
   brial.ca - BMI (Brial Mechanical Inc.)

   Light theme in BMI blue, with a single dark band at the top of the
   page. Single stylesheet, no framework.

   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Buttons & links
   06  Motion utilities
   07  Header, mega menu & mobile nav
   08  Hero (dark) & partner strip
   09  Sections & components
   10  Footer
   11  Responsive refinements
   ================================================================== */


/* ------------------------------------------------------------------
   01  Tokens
   ------------------------------------------------------------------ */

:root {
  /* Brand blues. --navy-700 is sampled from the BMI logo. */
  --navy-900: #060b22;
  --navy-800: #0a1235;
  --navy-700: #122069;
  --navy-600: #1a2c86;
  --navy-500: #23399f;

  --blue-700: #17389c;
  --blue-600: #1d4ed8;
  --blue-500: #2563eb;
  --blue-400: #4b83f0;
  --blue-300: #8fb4f6;
  --blue-200: #b9cffa;
  --blue-100: #dbe6ff;
  --blue-50:  #eff4ff;

  /* The teal ring from the logo, used sparingly as a secondary. */
  --teal-700: #054d6e;
  --teal-500: #0e7490;

  /* Surfaces */
  --white: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --surface-3: #e9f0fa;
  --border: #dee6f3;
  --border-strong: #c5d3e9;

  /* Ink */
  --ink-900: #0b1430;
  --ink-800: #16213f;
  --ink-700: #2c3b5e;
  --ink-600: #3d4d72;
  --ink-500: #55648a;
  --ink-400: #7b88a6;

  /* Review stars keep Google's amber: a blue five-star row reads as a
     control rather than a rating, and it sits beside the Google mark. */
  --star: #fbbc04;

  --bg: var(--surface);
  --text: var(--ink-700);
  --heading: var(--ink-900);
  --accent: var(--blue-600);

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Headings run on a squarer, more industrial grotesque than the body text.
     Manrope alone made every heading read as a default UI font. */
  --font-display: "Archivo", "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.14rem, 1.08rem + 0.28vw, 1.30rem);
  --step-2:  clamp(1.32rem, 1.22rem + 0.48vw, 1.62rem);
  --step-3:  clamp(1.54rem, 1.36rem + 0.82vw, 2.05rem);
  --step-4:  clamp(1.80rem, 1.51rem + 1.32vw, 2.60rem);
  --step-5:  clamp(2.10rem, 1.64rem + 2.06vw, 3.30rem);
  --step-6:  clamp(2.45rem, 1.72rem + 3.20vw, 4.20rem);

  --container: 78rem;
  --container-narrow: 54rem;
  --gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);
  --header-h: 4.5rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(11, 20, 48, 0.06), 0 1px 3px rgba(11, 20, 48, 0.05);
  --shadow: 0 4px 14px rgba(11, 20, 48, 0.07), 0 2px 6px rgba(11, 20, 48, 0.04);
  --shadow-lg: 0 18px 44px rgba(11, 20, 48, 0.12), 0 6px 16px rgba(11, 20, 48, 0.06);
  --shadow-navy: 0 18px 40px rgba(18, 32, 105, 0.24);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ------------------------------------------------------------------
   02  Reset & base
   ------------------------------------------------------------------ */

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

* { margin: 0; }

html {
  /* `clip` rather than `hidden`: the horizontal reveal offsets sit outside
     the viewport until they animate in, and `hidden` here would let the root
     scroll container grow sideways on phones. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.nav-open, html.nav-open body { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--blue-600); color: #fff; }

.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;
  top: -100%;
  left: 1rem;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--navy-700);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0; }


/* ------------------------------------------------------------------
   03  Typography
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--step-1);
  line-height: 1.58;
  color: var(--ink-500);
}

.muted { color: var(--ink-500); }
.measure { max-width: 62ch; }

/* Accent underline behind a word in a heading.
   `inline-block` matters: as a plain inline box the absolutely positioned
   rule resolves against the whole line box and runs past the word. */
.marked {
  position: relative;
  display: inline-block;
  color: var(--blue-300);
  white-space: nowrap;
}
.marked::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Heading line-height is tight, so the inline box bottom sits above the
     font's descender. Push the rule below it or it reads as a strikethrough. */
  bottom: -0.2em;
  height: 0.09em;
  background: var(--blue-400);
  border-radius: 99px;
}


/* ------------------------------------------------------------------
   04  Layout primitives
   ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); }
.section--alt { background: var(--surface-2); }

.section__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
}
.section__head--center {
  justify-items: center;
  text-align: center;
}
.section__head--center .lead { max-width: 60ch; }
.section__head--split { gap: 1.25rem; }

@media (min-width: 60rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 3rem;
  }
  .section__head--split .section__aside { justify-self: end; text-align: right; }
}

.stack { display: grid; gap: 1.25rem; justify-items: start; }

.grid { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); }

/* Explicit column counts rather than auto-fit: with six cards, auto-fit
   resolves to four columns on a wide desktop and orphans the last two. */
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------------
   05  Buttons & links
   ------------------------------------------------------------------ */

a {
  color: var(--blue-600);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--blue-700); }

.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: #fff;
  --btn-bd: var(--blue-600);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  min-height: 3rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(29, 78, 216, 0.26);
}
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; flex: none; }

.btn--primary:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); }

.btn--navy { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }
.btn--navy:hover {
  --btn-bg: var(--navy-600);
  --btn-bd: var(--navy-600);
  box-shadow: var(--shadow-navy);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-700);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bd: var(--blue-600);
  --btn-fg: var(--blue-700);
  background: var(--blue-50);
  box-shadow: none;
}

/* On dark backgrounds */
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-700); --btn-bd: #fff; }
.btn--light:hover { --btn-fg: var(--navy-800); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.45);
}
.btn--outline-light:hover {
  --btn-bd: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.btn--lg { padding: 1.05rem 2rem; min-height: 3.4rem; font-size: var(--step-1); }
.btn--sm { padding: 0.55rem 1.05rem; min-height: 2.4rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Text link with a sliding arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--blue-600);
}
.arrow-link .icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.22s var(--ease);
}
.arrow-link:hover .icon { transform: translateX(4px); }

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


/* ------------------------------------------------------------------
   06  Motion utilities
   ------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s var(--ease) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.965); }
[data-reveal="none"]  { transform: none; }

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Without JS nothing ever gets .is-revealed, so show everything. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ------------------------------------------------------------------
   07  Header, mega menu & mobile nav
   ------------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: transform 0.3s var(--ease), box-shadow 0.25s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow); }
.header.is-hidden { transform: translateY(-100%); }

/* The mobile nav panel is a child of <header> and comes later in the DOM, so
   the bar itself has to be lifted above it or the panel covers the logo and
   the close button. */
.topbar, .header__inner { position: relative; z-index: 3; }

.topbar {
  background: var(--navy-700);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.4rem;
  padding-block: 0.3rem;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar__item .icon { width: 1rem; height: 1rem; color: var(--blue-200); }
.topbar a { color: inherit; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #fff; text-decoration: underline; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
  background: #fff;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.logo__img { height: 3rem; width: auto; }

.nav { display: none; margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__item { position: relative; }

/* The mega panel spans the full header width, so it must resolve against
   <header> rather than the list item. */
.nav__item--mega { position: static; }
.nav__link--trigger { cursor: default; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* The Services item is a <button>, not a link: reset the UA styling so it
     sits in the row identically to its siblings. */
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-800);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--blue-700);
  background: var(--blue-50);
}
.nav__link .icon {
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.7;
  transition: transform 0.2s var(--ease);
}
.nav__item--mega:hover .nav__link .icon { transform: rotate(180deg); }

/* --- Mega menu ---------------------------------------------------- */

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0 var(--gutter) 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr) 14.5rem;
  gap: 0;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mega__rail {
  padding: 1.25rem 1rem;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.mega__rail-title {
  padding: 0 0.6rem 0.6rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.mega__cat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background-color 0.18s var(--ease);
}
.mega__cat:hover, .mega__cat.is-active { background: #fff; box-shadow: var(--shadow-sm); }

/* `:first-of-type` matters: the trailing arrow is also a direct `.icon`
   child, and without it the arrow picks up this tile styling too. */
.mega__cat > .icon:first-of-type {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-700);
}
.mega__cat.is-active > .icon:first-of-type { background: var(--blue-600); color: #fff; }

.mega__cat-text { display: grid; gap: 0.1rem; min-width: 0; }
.mega__cat-label {
  font-size: var(--step--1);
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.25;
}
.mega__cat-note {
  font-size: var(--step--2);
  color: var(--ink-400);
  line-height: 1.3;
}
.mega__cat-arrow {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: var(--ink-400);
  opacity: 0;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.mega__cat.is-active .mega__cat-arrow { opacity: 1; color: var(--blue-600); }

.mega__panels { position: relative; padding: 1.25rem 1.5rem; }

.mega__panel { display: none; }
.mega__panel.is-active { display: block; }

.mega__panel-title {
  margin-bottom: 0.65rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.mega__links {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
}
.mega__links a {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.mega__links a:hover { background: var(--blue-50); }
.mega__link-label {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.3;
}
.mega__links a:hover .mega__link-label { color: var(--blue-700); }
.mega__link-note {
  font-size: var(--step--2);
  color: var(--ink-400);
  line-height: 1.35;
}

.mega__all { font-size: var(--step--1); }

.mega__promo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--navy-600) 0%, transparent 62%),
    var(--navy-700);
  color: rgba(255, 255, 255, 0.78);
}
.mega__promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-200);
}
.mega__promo-title {
  font-size: var(--step-1);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.mega__promo-copy { font-size: var(--step--1); line-height: 1.5; }
.mega__promo .btn { margin-top: auto; align-self: start; }

/* --- Header actions ----------------------------------------------- */

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.header__phone { display: none; align-items: center; gap: 0.55rem; text-decoration: none; }
.header__phone .icon {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.55rem;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  stroke-width: 2;
}
.header__phone-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  line-height: 1.2;
}
.header__phone-num {
  display: block;
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--navy-700);
  line-height: 1.2;
  white-space: nowrap;
}
.header__phone:hover .header__phone-num { color: var(--blue-600); }

.header__cta { display: none; }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy-700);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile panel -------------------------------------------------- */

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 3.25rem) var(--gutter) 2rem;
  background: #fff;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-panel__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--navy-800);
  font-size: var(--step-2);
  font-weight: 800;
  text-decoration: none;
  text-align: left;
}
.nav-panel__link .icon { transition: transform 0.22s var(--ease); color: var(--ink-400); }
.nav-panel [data-submenu].is-open > .nav-panel__link .icon { transform: rotate(180deg); }

.nav-panel__sub {
  display: none;
  padding: 0.5rem 0 0.75rem 0.9rem;
  border-left: 2px solid var(--blue-100);
}
.nav-panel [data-submenu].is-open .nav-panel__sub { display: block; }
.nav-panel__group {
  margin: 0.75rem 0 0.35rem;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.nav-panel__group:first-child { margin-top: 0; }
.nav-panel__sub ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.nav-panel__sub a {
  display: block;
  padding: 0.5rem 0;
  color: var(--ink-600);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
}
.nav-panel__sub a:hover { color: var(--blue-600); }
/* The category index, set apart from the services listed above it. */
.nav-panel__all { color: var(--blue-600) !important; font-weight: 800 !important; }

.nav-panel__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }


/* ------------------------------------------------------------------
   08  Hero (dark) & partner strip
   ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Shows through before the photo decodes, and behind it at edge cases. */
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  align-items: center;
}

.hero .eyebrow { color: var(--blue-200); }
.hero .eyebrow::before { background: var(--blue-400); }

/* Generous gaps between the blocks. The headline runs a little smaller than
   it could and the air does the work instead, which is how the hero reads as
   substantial without the band having to grow. */
.hero__copy {
  display: grid;
  gap: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  justify-items: start;
}

.hero__title {
  font-size: clamp(2.35rem, 1.35rem + 3.5vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: #fff;
  /* Lifts the type off the photograph without a visible shadow. */
  text-shadow: 0 2px 24px rgba(4, 8, 26, 0.55);
  text-wrap: initial;
}
/* Direct child only: a descendant selector here would also catch the nested
   `.marked` span and stretch its underline across the whole line. */
.hero__title > span { display: block; }

.hero__lead {
  font-size: clamp(1.08rem, 0.96rem + 0.58vw, 1.38rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 34ch;
  text-shadow: 0 1px 16px rgba(4, 8, 26, 0.5);
}

/* One inline row of proof points rather than a block of them. */
.hero__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Dot separators between the items. Generated rather than marked up so the
   list still reads as three plain items to a screen reader. Only once the
   items actually sit on one line - stacked, they read as stray marks. */
@media (min-width: 48rem) {
  .hero__points li:not(:last-child)::after {
    content: "\2022";
    margin-left: 1rem;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 400;
  }
}
.hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Held at body size deliberately: at the next step up the three items no
     longer fit on one line inside the copy column, and wrapping one of them
     onto a second row reads as a mistake. */
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.hero__points .icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  color: var(--blue-300);
}

/* The hero buttons carry the page's primary action, so they run a size
   above the standard large button. */
.hero .btn--lg {
  padding: 1.2rem 2.35rem;
  min-height: 3.9rem;
  font-size: var(--step-0);
}

/* --- Hero photo ----------------------------------------------------
   The photo is the background of the whole band, not a picture beside
   the copy. A scrim over it carries the text: heavy on the left where
   the words sit, thinning to the right so the technician stays visible.
   ------------------------------------------------------------------- */

/* Generates no box, so the photo layer and the indicators it groups each
   stack against the section itself: photo under the copy, dots over it. */
.hero__media { display: contents; }

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Decorative only. Without this the slideshow's hover-pause would fire
     every time the pointer crossed the band. */
  pointer-events: none;
}

/* Crossfade. The first slide carries .is-active in the markup so it is
   painted before the script runs, and stays put if it never does. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holds the technician and the van in frame as the band changes ratio. */
  object-position: 72% 32%;
}

/* The scrim lives inside the photo layer rather than on the section so the
   slide indicators, which sit in the same layer, can paint over it. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      92deg,
      rgba(6, 11, 34, 0.95) 0%,
      rgba(6, 11, 34, 0.9) 30%,
      rgba(8, 15, 44, 0.62) 52%,
      rgba(8, 15, 44, 0.3) 72%,
      rgba(8, 15, 44, 0.42) 100%
    ),
    linear-gradient(180deg, rgba(6, 11, 34, 0.3) 0%, transparent 62%);
}

/* Narrow screens put the copy straight over the technician, so the photo
   drops back to being texture rather than a subject. */
@media (max-width: 61.99rem) {
  .hero__photo::after {
    background: linear-gradient(
      180deg,
      rgba(6, 11, 34, 0.88) 0%,
      rgba(6, 11, 34, 0.78) 45%,
      rgba(6, 11, 34, 0.92) 100%
    );
  }
  .hero__photo img { object-position: 66% 24%; }
}

/* Slide indicators, bottom right of the band. The current slide reads as a
   short rule and the rest as dots, so position in the run is legible at a
   glance. These sit above the copy layer so the clicks reach them. */
.hero__dots {
  position: absolute;
  z-index: 4;
  right: max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* Slides run from dark mechanical rooms to white van panels, so the
     cluster carries its own backing rather than trusting the photo. */
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: rgba(6, 11, 34, 0.42);
  backdrop-filter: blur(3px);
}

.slide-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 6px rgba(4, 8, 26, 0.5);
  cursor: pointer;
  transition: width 0.45s var(--ease), background-color 0.3s var(--ease);
}
.slide-dot:hover { background: rgba(255, 255, 255, 0.75); }
.slide-dot.is-active {
  width: 1.85rem;
  background: #fff;
}
.slide-dot:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .slide-dot { transition: none; }
}

/* --- Partner strip ------------------------------------------------- */

.partners {
  padding-block: clamp(1.4rem, 1.1rem + 1.1vw, 2.25rem);
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.partners__label {
  text-align: center;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: clamp(0.9rem, 0.75rem + 0.5vw, 1.35rem);
}
.partners__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Seven logos at this size only just clear the container, so the upper
     bound on the gap is what keeps them on a single row. */
  gap: 1.1rem clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners__list img {
  height: clamp(2.6rem, 1.95rem + 2.1vw, 3.5rem);
  width: auto;
  /* Some marks are long horizontal wordmarks. Without a ceiling on the
     width they eat the row on their own, so they fit inside the box and
     lose height instead. */
  max-width: clamp(6rem, 3.2rem + 7vw, 10.5rem);
  object-fit: contain;
  /* Left in colour: two of these marks are solid-fill boxes that turn into
     unreadable grey rectangles under a grayscale filter. */
  opacity: 0.88;
  transition: opacity 0.25s var(--ease);
}
.partners__list li:hover img { opacity: 1; }


/* ------------------------------------------------------------------
   09  Sections & components
   ------------------------------------------------------------------ */

/* --- Service cards (photo card, copy revealed on hover) ------------ */

.svc-card {
  position: relative;
  display: block;
  /* Near-square: the job photos are portrait phone shots, and a wide card
     crops the crew straight out of them. */
  aspect-ratio: 4 / 4.3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-card:hover, .svc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.svc-card:hover img { transform: scale(1.06); }

.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 15, 44, 0.94) 0%,
    rgba(8, 15, 44, 0.66) 28%,
    rgba(8, 15, 44, 0.14) 58%,
    rgba(8, 15, 44, 0.04) 100%
  );
  transition: opacity 0.3s var(--ease);
}
/* Deepen the scrim on hover so the revealed paragraph stays readable. */
.svc-card:hover::before, .svc-card:focus-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 18, 53, 0.55);
}

.svc-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 1.35rem;
}
.svc-card__title {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -0.018em;
}

.svc-card__copy {
  font-size: var(--step--1);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  /* Collapsed until hover. max-height rather than display so it animates. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 0.35s var(--ease), opacity 0.28s var(--ease),
    transform 0.3s var(--ease);
}
.svc-card:hover .svc-card__copy,
.svc-card:focus-visible .svc-card__copy {
  max-height: 12rem;
  opacity: 1;
  transform: translateY(0);
}

.svc-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--blue-200);
}
.svc-card__meta .icon { width: 1em; height: 1em; transition: transform 0.22s var(--ease); }
.svc-card:hover .svc-card__meta .icon { transform: translateX(4px); }

/* Touch devices never hover, so show the copy up front instead. */
@media (hover: none) {
  .svc-card__copy { max-height: 12rem; opacity: 1; transform: none; }
}

/* --- Secondary service list ---------------------------------------- */

.svc-list__heading {
  margin: clamp(2.25rem, 1.8rem + 1.4vw, 3rem) 0 1.25rem;
  font-size: var(--step-2);
}

.svc-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 40rem) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-800);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease), color 0.2s var(--ease);
}
.svc-list a:hover {
  border-color: var(--blue-400);
  color: var(--blue-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.svc-list .icon {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
}
.svc-list a:hover .icon { background: var(--blue-100); }

/* --- Stats --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
}
@media (min-width: 60rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat { display: grid; gap: 0.3rem; }
.stat__num {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--step--1); font-weight: 700; color: var(--ink-700); }
.stat__note { font-size: var(--step--1); color: var(--ink-400); line-height: 1.4; }

/* --- Project scroller ---------------------------------------------- */

.scroller { position: relative; }

.scroller__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.5rem, 78%);
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block: 0.5rem 1.25rem;
  /* Let cards bleed to the screen edge while the container stays centred. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.scroller__track::-webkit-scrollbar { height: 6px; }
.scroller__track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.scroller__track > * { scroll-snap-align: start; }

/* Snap and smooth scrolling both fight the pointer, so they stand down
   mid-drag and the row lands wherever the hand left it. */
.js .scroller__track { cursor: grab; }
.scroller__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

@media (min-width: 48rem) { .scroller__track { grid-auto-columns: minmax(20rem, 44%); } }
@media (min-width: 72rem) { .scroller__track { grid-auto-columns: minmax(21rem, 31.5%); } }

.scroller__nav { display: none; gap: 0.5rem; }
.scroller__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-700);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.scroller__btn:hover:not([disabled]) {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
}
.scroller__btn[disabled] { opacity: 0.35; cursor: default; }

.project {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  overflow: hidden;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy-700);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.project__body { display: grid; gap: 0.45rem; padding: 1.15rem 1.25rem 1.35rem; }
.project__name { font-size: var(--step-1); font-weight: 800; color: var(--navy-800); line-height: 1.25; }
.project__where { font-size: var(--step--1); font-weight: 700; color: var(--blue-600); }
.project__desc { font-size: var(--step--1); line-height: 1.55; color: var(--ink-500); }

/* --- Reviews -------------------------------------------------------- */

.review {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.review__top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.review__avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1;
}
.review__who { display: grid; gap: 0.05rem; min-width: 0; }
.review__name {
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.25;
}
.review__role {
  font-size: var(--step--2);
  color: var(--ink-400);
  line-height: 1.3;
}
.review__source { width: 1.15rem; height: 1.15rem; margin-left: auto; flex: none; }

.review__stars { display: flex; gap: 0.15rem; color: var(--star); }
.review__stars .icon { width: 1.05rem; height: 1.05rem; }

.review__text {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-600);
}

.review__corp {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}

/* --- Feature list (checkmarks), used on inner pages ---------------- */

.check-list { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--step-0);
  line-height: 1.55;
}
.check-list .icon {
  width: 1.45rem;
  height: 1.45rem;
  flex: none;
  margin-top: 0.12rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  stroke-width: 3;
}

/* --- Media frame, used on inner pages ------------------------------ */

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-3);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) { .media-frame--tall { aspect-ratio: 4 / 4.2; } }

/* --- Accordion, used on inner pages -------------------------------- */

.accordion { display: grid; gap: 0.6rem; }
.accordion__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.accordion__item:has([aria-expanded="true"]) {
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.1rem 1.35rem;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.4;
}
.accordion__trigger:hover { color: var(--blue-700); }
.accordion__trigger .icon { flex: none; color: var(--blue-600); transition: transform 0.25s var(--ease); }
.accordion__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

.accordion__panel { height: 0; overflow: hidden; transition: height 0.3s var(--ease); }
html:not(.js) .accordion__panel { height: auto; }
.accordion__panel > div {
  padding: 0 1.35rem 1.35rem;
  color: var(--ink-500);
  line-height: 1.7;
  max-width: 74ch;
}

/* --- CTA band ------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 85% 10%, var(--navy-600) 0%, transparent 55%),
    var(--navy-700);
  color: rgba(255, 255, 255, 0.82);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 90% 50%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 90% 50%, #000, transparent 70%);
  pointer-events: none;
}
.cta-band__inner { position: relative; display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 60rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
  .cta-band__actions { justify-self: end; }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 52ch; }
.cta-band__actions { display: grid; gap: 0.75rem; }

/* --- Emergency ribbon ----------------------------------------------- */

.ribbon {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.86);
  padding-block: 0.9rem;
  font-size: var(--step--1);
}
.ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  text-align: center;
}
.ribbon strong { color: #fff; font-weight: 800; }
.ribbon a {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid var(--blue-400);
}
.ribbon a:hover { color: var(--blue-200); }

/* Small pulsing dot to signal live availability. */
.pulse-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.7);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 0.5rem rgba(94, 234, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}


/* ------------------------------------------------------------------
   09b  Service pages

   Inner pages share one skeleton: a compact dark hero with the job
   photo beside the copy, a strip of literal facts, then long-form
   sections. Everything below the hero stays light, like the homepage.
   ------------------------------------------------------------------ */

/* --- Page hero ----------------------------------------------------- */

.phero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 88% 10%, rgba(37, 99, 235, 0.28) 0%, transparent 58%),
    linear-gradient(170deg, var(--navy-700) 0%, var(--navy-800) 62%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.8);
  padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 3.25rem);
  overflow: hidden;
}

.phero__inner {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  align-items: center;
}

.phero__copy {
  display: grid;
  gap: clamp(1.1rem, 0.85rem + 1vw, 1.75rem);
  justify-items: start;
}

.phero .eyebrow { color: var(--blue-200); }
.phero .eyebrow::before { background: var(--blue-400); }

.phero__title {
  font-size: clamp(1.95rem, 1.3rem + 2.3vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

.phero__lead {
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
}

.phero__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 26rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* A cool rim rather than a drop shadow: on a navy band a shadow reads
     as a smudge. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 48px rgba(4, 8, 26, 0.45);
}
.phero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Most of these photos centre well. Where the subject sits high in the frame,
   such as a technician working up into a ceiling, the page asks for the top. */
.phero__photo--top img { object-position: 50% 12%; }

@media (min-width: 60rem) {
  .phero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .phero__photo { justify-self: end; width: 100%; }
}
/* Below the split the portrait photo would push the copy off the first
   screen, so it runs as a short landscape band instead. */
@media (max-width: 59.99rem) {
  .phero__photo { aspect-ratio: 16 / 9; max-height: 15rem; }
}

/* --- Breadcrumbs --------------------------------------------------- */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.6);
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.55rem; }
.crumbs li + li::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.crumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: var(--blue-200); font-weight: 600; }

/* --- At-a-glance fact bar ------------------------------------------ */

.factbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(1.25rem, 1rem + 0.9vw, 2rem);
}
.factbar__list {
  display: grid;
  gap: clamp(1rem, 0.8rem + 0.7vw, 1.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
@media (min-width: 56rem) {
  .factbar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fact { display: grid; gap: 0.2rem; }
.fact__k {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.fact__v {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.4;
  color: var(--heading);
}

/* --- Long-form prose ----------------------------------------------- */

.prose { display: grid; gap: 1.1rem; max-width: 68ch; }
.prose h3 {
  margin-top: 0.9rem;
  font-size: var(--step-2);
  line-height: 1.25;
}
.prose ul, .prose ol { display: grid; gap: 0.5rem; padding-left: 1.2rem; margin: 0; }
.prose li { line-height: 1.6; }
.prose strong { color: var(--ink-900); }

/* --- Symptom cards -------------------------------------------------- */

.sign {
  display: grid;
  gap: 0.65rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sign:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sign .icon {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-700);
}
.sign__title {
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.35;
  color: var(--heading);
}
.sign__text { font-size: var(--step--1); line-height: 1.6; }

/* --- Method steps --------------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.15rem);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 0.75rem + 0.5vw, 1.4rem);
  align-items: start;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.step__num {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1;
}
.step__body { display: grid; gap: 0.35rem; }
.step__title { font-size: var(--step-1); line-height: 1.3; }
.step__text { line-height: 1.62; }

/* Steps that carry a photograph of the stage they describe. The sources are
   375px wide, so the column is kept small enough that they are never
   upscaled. */
.step__photo {
  width: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
}
/* On wide screens the photograph runs the full height of the card and bleeds
   to its right edge, so short step text does not leave a column of dead
   space beside a small thumbnail. */
@media (min-width: 48rem) {
  .step:has(.step__photo) {
    grid-template-columns: auto minmax(0, 1fr) 12rem;
    align-items: center;
    padding-right: 0;
    min-height: 10rem;
    overflow: hidden;
  }
  .step:has(.step__photo) .step__photo {
    align-self: stretch;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    margin-block: calc(clamp(1rem, 0.85rem + 0.6vw, 1.5rem) * -1);
  }
}
@media (max-width: 47.99rem) {
  .step__photo { grid-column: 2; max-width: 14rem; margin-top: 0.35rem; }
}

/* --- Schematic diagrams --------------------------------------------
   Inline SVG rather than an image file: the labels stay selectable,
   crawlable and legible at any zoom, and there is no extra request. */

.diagram {
  margin: 0;
  padding: clamp(1rem, 0.8rem + 1vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* Scaled to the full width a schematic's labels become unreadable on a
   phone, so below the fold-out width it swipes sideways instead. */
.diagram__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.diagram__scroll svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.diagram figcaption {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-500);
}
.diagram figcaption strong { color: var(--ink-800); }

/* Diagram ink, so the schematics track the theme in one place. */
.dg-pipe  { fill: none; stroke: var(--ink-700); stroke-width: 3; }
.dg-water { fill: none; stroke: var(--blue-500); stroke-width: 3; }
.dg-fill  { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.5; }
.dg-bad   { fill: #c2410c; opacity: 0.85; }
/* Deposits shown against a long run of pipe need to read as a coating
   rather than as the pipe itself. */
.dg-grease { fill: #c2410c; opacity: 0.45; }
.dg-mark  { fill: none; stroke: var(--blue-600); stroke-width: 2; stroke-dasharray: 6 5; }
.dg-slab  { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.dg-soft  { fill: var(--surface-2); stroke: var(--ink-700); stroke-width: 2.5; }
/* Classes rather than fill="var(--x)": a custom property in a presentation
   attribute is not reliably honoured. */
.dg-nozzle { fill: var(--blue-600); }
.dg-open   { fill: var(--surface); }
.dg-zone   { fill: var(--blue-50); stroke: var(--border-strong); stroke-width: 2; }
/* Phasing diagrams need three states for the same shape: finished, being
   worked on now, and not started. */
.dg-live   { fill: var(--blue-100); stroke: var(--blue-600); stroke-width: 2.5; }
.dg-idle   { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.dg-ghost  { fill: none; stroke: var(--ink-400); stroke-width: 3; stroke-dasharray: 7 6; }
/* Movement and flow arrows, split in two because a group cannot set a
   stroked line and a filled arrowhead at once. */
.dg-arrow      { fill: none; stroke: var(--blue-600); stroke-width: 2.5; }
.dg-arrow-head { fill: var(--blue-600); }
/* Shaded region of a plan showing what a given valve takes out of service. */
.dg-hit { fill: var(--blue-600); opacity: 0.28; }
/* The water passage in a cutaway, tinted so the pipe wall reads as layers
   around a bore rather than as a stack of flat bars. */
.dg-bore { fill: var(--blue-50); }
.dg-label { font-family: var(--font-sans); font-size: 15px; font-weight: 600; fill: var(--ink-700); }
.dg-label--sm { font-size: 13px; font-weight: 500; fill: var(--ink-500); }
.dg-label--key { fill: var(--blue-700); font-weight: 700; }
.dg-tag   { fill: var(--navy-700); }
.dg-tag-text { font-family: var(--font-sans); font-size: 12px; font-weight: 700; fill: #fff; }

/* --- Spec table ----------------------------------------------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
/* Reads as a header band on the table rather than a floating line of grey
   text inside the rounded wrapper. */
.spec caption {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--step--1);
  color: var(--ink-500);
  text-align: left;
}
.spec th, .spec td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}
.spec th {
  width: 34%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  background: var(--surface-2);
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* --- Figure caption under a photo ----------------------------------- */

/* Completed projects we have no photograph of, listed under the card grid.
   Kept deliberately plain: the building name is the whole point. */
.also {
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.also__h {
  margin-bottom: 0.75rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.also__list { list-style: none; padding: 0; margin: 0; }
.also__row {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}
.also__row:first-child { border-top: 0; padding-top: 0; }
.also__row:last-child { padding-bottom: 0; }
.also__name { font-size: var(--step-0); font-weight: 800; color: var(--navy-800); }
.also__where { font-size: var(--step--1); font-weight: 700; color: var(--blue-600); }
.also__scope { font-size: var(--step--1); color: var(--ink-500); }
@media (min-width: 48rem) {
  .also__row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.figure { margin: 0; display: grid; gap: 0.75rem; }
.figure figcaption { font-size: var(--step--1); line-height: 1.55; color: var(--ink-500); }

.accordion__h { font-size: inherit; font-weight: inherit; margin: 0; }


/* ------------------------------------------------------------------
   09c  Projects index & contact page
   ------------------------------------------------------------------ */

/* --- Filter pills --------------------------------------------------
   The count lives in a span so it can be rewritten as filtering changes
   without disturbing the label's own text node. */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-700);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.filter__btn:hover { border-color: var(--blue-400); color: var(--blue-700); }
.filter__btn[aria-pressed="true"] {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
}
.filter__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.65;
}
/* Hidden by the filter rather than removed, so the reveal state survives. */
.is-filtered-out { display: none !important; }
.filter__empty { color: var(--ink-500); }

/* --- Compact page header --------------------------------------------
   For pages that open on their content rather than a hero band. No
   bottom padding: the first section supplies it. */
.pagehead { padding-block: clamp(1.75rem, 1.3rem + 1.8vw, 3rem) 0; }
.pagehead__inner { display: grid; gap: 1rem; justify-items: start; }
.pagehead__title {
  font-size: var(--step-5);
  line-height: 1.04;
  margin: 0;
  max-width: 20ch;
}
.pagehead__lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
  max-width: 62ch;
}

/* The breadcrumb is built for the dark hero, so recolour it here. */
.crumbs--light ol { color: var(--ink-400); }
.crumbs--light li + li::before { background: var(--border-strong); }
.crumbs--light a { color: var(--ink-500); }
.crumbs--light a:hover { color: var(--blue-700); }
.crumbs--light [aria-current] { color: var(--ink-700); }

/* --- Linked sign card ------------------------------------------------
   The whole card is the hit area. An overlay on the title link rather than
   a wrapping <a> keeps the heading in the document outline. */
.sign--link { position: relative; }
.sign--link .sign__title a { color: inherit; text-decoration: none; }
.sign--link .sign__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sign--link:hover .sign__title a,
.sign--link:focus-within .sign__title a { color: var(--blue-700); }
.sign--link:focus-within { box-shadow: 0 0 0 3px var(--blue-100); }

/* --- Contact layout ------------------------------------------------ */
.contact-grid { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
/* The form heading opens the page, but it sits in a column rather than
   across the full width, so it runs below full display size. */
.contact-grid .section__head :is(h1, h2) { font-size: var(--step-3); line-height: 1.1; }
@media (min-width: 62rem) {
  .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 1rem; }
.panel__h {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: 0 0 0.35rem;
}
.panel__note { font-size: var(--step--1); color: var(--ink-500); margin: 0 0 1.1rem; }

/* Contact method rows */
.cmethod {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding-block: 0.9rem;
}
.cmethod + .cmethod { border-top: 1px solid var(--border); }
.cmethod__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
}
.cmethod__icon .icon { width: 1.15rem; height: 1.15rem; }
.cmethod__k {
  display: block;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.15rem;
}
.cmethod__v { font-weight: 700; color: var(--ink-800); font-style: normal; }
.cmethod__v a { color: inherit; text-decoration: none; }
.cmethod__v a:hover { color: var(--blue-700); text-decoration: underline; }
.cmethod__sub { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-500); margin-top: 0.15rem; }

/* Emergency panel sits on the dark brand colour so it reads first. */
.panel--urgent {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: rgba(255, 255, 255, 0.82);
}
.panel--urgent .panel__h { color: #fff; }
.panel--urgent .panel__note { color: rgba(255, 255, 255, 0.72); }
.panel--urgent .cmethod + .cmethod { border-top-color: rgba(255, 255, 255, 0.16); }
.panel--urgent .cmethod__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.panel--urgent .cmethod__k { color: rgba(255, 255, 255, 0.6); }
.panel--urgent .cmethod__v,
.panel--urgent .cmethod__v a { color: #fff; }
.panel--urgent .cmethod__sub { color: rgba(255, 255, 255, 0.66); }

/* --- Form ----------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: 0.35rem; }
.field__label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-700);
}
.field__opt { font-weight: 500; color: var(--ink-400); }
.field__input,
.field__select,
.field__area {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-800);
  font-size: var(--step-0);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field__area { min-height: 8.5rem; resize: vertical; }
.field__select {
  appearance: none;
  padding-right: 2.4rem;
  /* Chevron drawn in the background so the control keeps native semantics. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.05rem;
}
.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field__input::placeholder,
.field__area::placeholder { color: var(--ink-400); }

.field__error {
  font-size: var(--step--1);
  font-weight: 600;
  color: #b91c1c;
  min-height: 0;
}
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__area { border-color: #b91c1c; }
.field.is-invalid .field__input:focus,
.field.is-invalid .field__area:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.14); }

.form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: start; }
.form__consent input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blue-600); }
.form__consent span { font-size: var(--step--1); color: var(--ink-500); line-height: 1.55; }
/* The checkbox has no border of its own to recolour, so flag it with a ring. */
.field--consent.is-invalid .form__consent input { outline: 2px solid #b91c1c; outline-offset: 2px; }
.field--consent.is-invalid .form__consent span { color: #b91c1c; }

.form__foot { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: center; }
.form__foot .btn { flex: 0 0 auto; }
.form__small { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

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

.form__status {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.55;
}
.form__status:empty { display: none; }
.form__status--ok { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.form__status--bad { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* --- Service area chips --------------------------------------------- */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.areas--center { justify-content: center; }
.areas li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-700);
}

/* --- Numbered "what happens next" ----------------------------------- */
.next { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); counter-reset: next; }
@media (min-width: 48rem) { .next { grid-template-columns: repeat(4, 1fr); } }
.next__item {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1rem;
  border-top: 3px solid var(--blue-100);
  counter-increment: next;
}
.next__item::before {
  content: counter(next, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--blue-600);
  line-height: 1;
}
.next__t { font-size: var(--step-0); font-weight: 800; color: var(--ink-800); margin: 0; }
.next__d { font-size: var(--step--1); color: var(--ink-500); line-height: 1.6; margin: 0; }


/* ------------------------------------------------------------------
   09d  Blog
   
   The blog under /blog/ is built by Hugo, not by the site generator,
   but it loads this same stylesheet so a reader moving from a service
   page to an article never downloads a second one. Everything here is
   scoped to classes Hugo's templates use and nothing else.
   ------------------------------------------------------------------ */

/* An article is a reading page, so the title, standfirst, cover and body all
   sit on one centred measure instead of the title spanning the full container
   while the prose below it sits in a narrower column. */
.post__head,
.post__cover,
.post__body {
  max-width: 48rem;
  margin-inline: auto;
}

/* Post meta line under the title. */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-500);
}
.post__meta time { font-weight: 600; color: var(--ink-600); }

.post__cover {
  margin-top: 2rem;
}
.post__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* The post body is generated markdown, so it is styled by element rather
   than by class. Width is held to a comfortable measure and centred. */
.post__body {
  max-width: 48rem;
  margin-inline: auto;
}
.post__body > :first-child { margin-top: 0; }
/* Hugo renders the H1 from the markdown body as well as the page header
   putting it in the pagehead, so the duplicate inside the body is hidden
   rather than deleted, which keeps the generated markdown portable. */
.post__body > h1 { display: none; }
.post__body h2 {
  margin: 2.6rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink-900);
}
.post__body h3 {
  margin: 2rem 0 0.7rem;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--ink-900);
}
.post__body p,
.post__body li { font-size: var(--step-0); line-height: 1.75; color: var(--ink-600); }
.post__body p { margin: 0 0 1.1rem; }
.post__body strong { color: var(--ink-800); font-weight: 700; }
.post__body a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.post__body a:hover { color: var(--blue-700); }
.post__body ul,
.post__body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.post__body img {
  width: 100%;
  height: auto;
  margin: 1.8rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.post__body blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--blue-600);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.post__body blockquote p:last-child { margin-bottom: 0; }
.post__body hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--border); }
.post__body code {
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 0.9em;
}
/* Generated posts routinely contain comparison tables. */
.post__body table {
  width: 100%;
  margin: 1.8rem 0;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
.post__body th,
.post__body td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.post__body thead th {
  background: var(--surface-2);
  font-weight: 800;
  color: var(--ink-800);
}
.post__body tbody th { font-weight: 700; color: var(--ink-800); }

/* Topic chips at the foot of a post. Not links: the taxonomy pages are
   deliberately not generated, so a chip would lead nowhere. */
.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 48rem;
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
}
.post__tags li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--ink-500);
}

/* Post cards, on the index and in the related strip. */
.pcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}
.pcard__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}
.pcard__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; }
.pcard__date {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.pcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.3;
  color: var(--ink-900);
}
.pcard__copy { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.pcard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--blue-600);
}
.pcard__more .icon { width: 1rem; height: 1rem; transition: transform 0.18s var(--ease); }
.pcard:hover .pcard__more .icon { transform: translateX(3px); }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.pager__count { font-size: var(--step--1); font-weight: 600; color: var(--ink-500); }


/* ------------------------------------------------------------------
   10  Footer
   ------------------------------------------------------------------ */

.footer {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--step--1);
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 52rem) {
  .footer__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); }
}

.footer__brand { display: grid; gap: 1.1rem; justify-items: start; }
/* No plate behind it: the oval is --navy-700 against the --navy-800 footer,
   so it reads as a tonal shape and the white lettering carries it. */
.footer__logo { display: inline-flex; }
.footer__logo img { height: 4.6rem; width: auto; }
.footer__blurb { max-width: 34ch; line-height: 1.65; }

.footer__contact { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; }
.footer__contact .icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25rem;
  color: var(--blue-400);
}
.footer__contact a { color: #fff; text-decoration: none; font-weight: 700; }
.footer__contact a:hover { color: var(--blue-200); text-decoration: underline; }

.footer__cols {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.footer__title {
  margin-bottom: 0.9rem;
  font-size: var(--step--1);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
/* "Maintenance Programs" wraps to two lines where the others do not, which
   would drop its list below its neighbours'. */
@media (min-width: 40rem) { .footer__title { min-height: 2.6em; } }
.footer__list { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.footer__list a { color: rgba(255, 255, 255, 0.66); text-decoration: none; line-height: 1.45; }
.footer__list a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.5);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* Sticky call bar, phones only. */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 -6px 20px rgba(11, 20, 48, 0.18);
}
.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem;
  background: var(--navy-700);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 800;
  text-decoration: none;
}
.callbar a:first-child { background: var(--blue-600); }
.callbar .icon { width: 1.1rem; height: 1.1rem; }

@media (min-width: 64rem) { .callbar { display: none; } }


/* ------------------------------------------------------------------
   11  Responsive refinements
   ------------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  /* The secondary topbar list crowds the phone number into two cramped
     rows on a phone, so it only appears from tablet up. */
  .topbar__list--secondary { display: none; }
  .topbar__inner { justify-content: center; }
}

@media (max-width: 63.99rem) {
  /* Keep the sticky call bar from covering the end of the footer. */
  body { padding-bottom: 3.4rem; }
}

@media (min-width: 48rem) {
  .scroller__nav { display: flex; }
  .header__cta { display: inline-flex; }
}

@media (min-width: 62rem) {
  .hero__inner {
    /* Keep the whole band plus the partner strip inside the first screen.
       The subtracted amount covers the header, the hero's own padding and
       the partner strip below it, so the band grows with a tall viewport
       but never pushes the logos out of view on a short one. */
    min-height: calc(100svh - 24.5rem);
  }
  /* Held clear of the technician on the right of the photograph. */
  .hero__copy { max-width: 46rem; }
}

@media (min-width: 64rem) {
  .nav { display: block; }
  /* Tightens the gap between the nav and the phone block once the nav is
     actually on screen. Below this width .nav is display:none but still in
     the DOM, so leaving this rule unscoped would beat the auto margin on
     .header__actions and drag the hamburger back beside the logo. */
  .nav + .header__actions { margin-left: 0.75rem; }
  .nav-toggle { display: none; }
  .nav-panel { display: none; }
  .header__phone { display: inline-flex; }
}

/* Laptops with a short viewport (browser chrome, docks, bookmark bars) are
   the tight case for keeping the partner logos above the fold, so the hero
   compresses on viewport *height* rather than width. */
@media (min-width: 62rem) and (max-height: 54rem) {
  /* Take the room out of the padding and the empty space around the copy,
     not out of the type. An earlier version shrank the headline and buttons
     here, which made the whole call to action look small inside a tall band. */
  .hero { padding-block: 2rem; }
  /* This reserve is at its practical floor: the subtracted amount covers the
     header, the hero's padding and the partner strip, so going lower is what
     pushes the logos below the fold on a short laptop screen. */
  .hero__inner { min-height: calc(100svh - 19.5rem); }
  .hero__copy { gap: 2.2rem; }
  .hero__title { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); }
  .hero .btn--lg { min-height: 3.75rem; }
  .partners { padding-block: 1.2rem; }
  .partners__label { margin-bottom: 0.8rem; }
  .partners__list img { height: 3.2rem; }
}

/* Between the desktop nav appearing and the viewport being genuinely wide,
   the nav, phone and CTA need the room more than a large logo does. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .logo__img { height: 2.2rem; }
  .nav__link { padding-inline: 0.6rem; }
}