/* First HVAC Solutions - shared stylesheet
   One file for every page. Mobile-first.
   Order: fonts, tokens, base, grid, components, sections, pages, motion, print.

   Layout rule: every two-column section sits on the same 12-column grid with the same gap (--g),
   so column edges line up from one section to the next. Card grids use 3 or 4 equal columns on that grid. */

/* ---------- Fonts (self-hosted, subset) ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks keep layout steady while fonts load */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 700; size-adjust: 98%; ascent-override: 92%; descent-override: 22%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; }

/* ---------- Tokens ---------- */
:root {
  --blue-light: #1E9FDB;
  --blue-deep: #006EB8;
  --red-bright: #E62333;
  --red-deep: #B81D1D;
  --grey-light: #D9D9D7;
  --grey-mid: #A8A8A8;
  --ink: #1B1B1A;
  --paper: #FFFFFF;
  --paper-alt: #F5F5F3;

  --ink-soft: #55554F;        /* secondary text, 7.4:1 on white */
  --line: #E6E6E3;            /* hairline outlines */
  --line-strong: #CFCFCB;
  --field: #8A8A84;           /* form field outline, 3.5:1 on white (non-text) */
  --ink-2: #252524;           /* card surface on the dark section */
  --ink-3: #32322F;

  --font-head: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Modular scale, ratio 1.25 on mobile growing to 1.333 on desktop */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.28rem + 0.45vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.56rem + 0.85vw, 2.375rem);
  --step-4: clamp(2.125rem, 1.8rem + 1.45vw, 3.125rem);
  --step-5: clamp(2.5rem, 2rem + 2.3vw, 4rem);

  /* Spacing, 8px base */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section: clamp(4rem, 2.8rem + 5vw, 6.5rem);

  /* Grid */
  --max: 75rem;                                     /* 1200px content width */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); /* page side padding */
  --g: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);        /* gap between columns and cards, everywhere */

  /* Corners, outlines, depth */
  --r-sm: 10px;     /* buttons, inputs */
  --r: 16px;        /* cards, panels, images */
  --r-pill: 999px;
  --outline: 1px solid var(--line);
  --shadow: 0 1px 2px rgba(27, 27, 26, 0.04), 0 6px 18px -10px rgba(27, 27, 26, 0.14);
  --shadow-lift: 0 2px 6px rgba(27, 27, 26, 0.05), 0 22px 44px -22px rgba(27, 27, 26, 0.32);

  --header-h: 4.25rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Circuit colours: blue = cooling, red = heating, grey = air */
.c-cool { --c: var(--blue-deep); --c-accent: var(--blue-light); --c-tint: #E6F2FA; }
.c-heat { --c: var(--red-deep); --c-accent: var(--red-bright); --c-tint: #FCEBEC; }
.c-air  { --c: var(--ink); --c-accent: var(--grey-mid); --c-tint: #EEEEEC; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: var(--step-0); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.title-md { font-size: var(--step-3); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--blue-deep); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
strong { font-weight: 700; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue-light); color: var(--paper); }

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

.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: var(--s-2); top: -4rem; z-index: 100; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; font-weight: 600;
}
.skip-link:focus { top: var(--s-2); color: var(--paper); }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-alt { background: var(--paper-alt); }
.section-rule { border-top: var(--outline); }
.stack > * + * { margin-top: var(--s-3); }
.measure { max-width: 40rem; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.more { margin-top: var(--s-5); }
.is-center { text-align: center; }

/* Section heading: label, heading, intro */
.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: var(--step--2); line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-deep);
}
.eyebrow-light { color: var(--blue-light); }
.section-head { max-width: 46rem; margin-bottom: var(--s-5); }
.section-head > * + * { margin-top: 0.85rem; }
.section-head .eyebrow + * { margin-top: 0.6rem; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-intro { color: var(--ink-soft); font-size: var(--step-0); max-width: 38rem; }
.section-head.is-center .section-intro { margin-inline: auto; }

/* Two-column layouts: stack on mobile, snap to the shared 12-column grid */
.split, .split-wide, .why, .page-hero-grid.has-media, .hero-full-grid, .cta-panel {
  display: grid; gap: var(--s-5) var(--g);
}
@media (min-width: 56em) {
  .split, .split-wide, .why, .page-hero-grid.has-media, .hero-full-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0;
  }
  /* 6 / 6 */
  .split > :first-child, .page-hero-grid.has-media > :first-child { grid-column: 1 / span 6; }
  .split > :last-child, .page-hero-grid.has-media > :last-child { grid-column: 7 / span 6; }
  /* 6 / 5 with a column of air */
  .why > :first-child { grid-column: 1 / span 6; }
  .why > :last-child { grid-column: 8 / span 5; }
  /* 7 / 5 */
  .hero-full-grid > :first-child { grid-column: 1 / span 7; }
  .hero-full-grid > :last-child { grid-column: 8 / span 5; }
  /* 7 / 4 */
  .split-wide > :first-child { grid-column: 1 / span 7; }
  .split-wide > :last-child { grid-column: 9 / span 4; }
}

/* Card grids: 1, 2, then 3 equal columns */
.card-grid { display: grid; gap: var(--g); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Image in a rounded, outlined frame */
.frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--grey-light); }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(27, 27, 26, 0.07); pointer-events: none; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.ar-43 { aspect-ratio: 4 / 3; }
.ar-32 { aspect-ratio: 3 / 2; }
.ar-16-9 { aspect-ratio: 16 / 9; }

/* ---------- Buttons, chips, pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0 1.4rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.975rem; line-height: 1; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.btn-primary:hover { background: #005A97; border-color: #005A97; color: var(--paper); box-shadow: 0 8px 20px -8px rgba(0, 110, 184, 0.6); }
.btn-secondary { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: var(--paper); background: transparent; }
.btn-ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.08); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  background: var(--c-tint); color: var(--c);
}
.chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-accent); }

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.pills li { padding: 0.45rem 0.95rem; border: var(--outline); border-radius: var(--r-pill); font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); background: var(--paper); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; text-decoration: none; color: var(--blue-deep); }
.link-arrow .icon { transition: transform 180ms var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow 200ms;
}
/* Thin blue-to-red line under the menu: a pale highlight on top and a faint shadow beneath give it a little depth */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, rgba(30, 159, 219, 0.85), rgba(0, 110, 184, 0.75) 45%, rgba(184, 29, 29, 0.75) 55%, rgba(230, 35, 51, 0.85));
  box-shadow: 0 1px 3px rgba(27, 27, 26, 0.18);
}
/* The frosted background sits on a pseudo-element: backdrop-filter on the header itself would trap the
   fixed mobile menu inside the header's height */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.96); }
@supports (backdrop-filter: blur(8px)) { .site-header::before { background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(160%) blur(10px); } }
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(27, 27, 26, 0.45); }
.header-inner { display: flex; align-items: center; gap: var(--s-2); height: var(--header-h); }
.nav-link, .nav-sub-toggle, .header-phone { white-space: nowrap; } /* keep menu items on one line on small laptops */
/* Small laptops (1024 to 1280px): tighter menu, and the phone number becomes the round call button so everything fits */
@media (min-width: 64em) and (max-width: 79.9375em) {
  .site-header .nav-link, .site-header .nav-sub-toggle { padding-inline: 0.6rem; }
  .site-header .header-phone { display: none; }
  .site-header .icon-btn-call { display: inline-flex; }
}
.brand { display: block; flex: none; margin-right: auto; line-height: 0; }
.brand img { height: 2.25rem; width: auto; }
.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-phone {
  display: none; align-items: center; gap: 0.45rem; height: 3rem;
  font-weight: 700; font-size: 1rem; color: var(--ink); text-decoration: none;
}
.header-phone .icon { color: var(--blue-deep); }
.header-phone:hover { color: var(--blue-deep); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.875rem; height: 2.875rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn-call { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); }
.icon-btn-call:hover { background: #005A97; border-color: #005A97; }
.header-quote { display: none; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile navigation panel */
.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--paper); overflow-y: auto;
  padding: var(--s-2) var(--gutter) var(--s-6);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: var(--outline); }
.nav-link, .nav-sub-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.nav-link[aria-current="page"] { color: var(--blue-deep); }
.nav-sub-toggle .icon { transition: transform 200ms var(--ease-out); }
.nav-sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-sub { display: none; padding: 0 0 var(--s-3); }
.nav-sub.is-open { display: grid; gap: var(--s-3); }
.nav-group-title {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c);
}
.nav-group-title .icon { color: var(--c-accent); }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a { display: block; padding: 0.5rem 0.75rem; margin-inline: -0.75rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.nav-group a:hover, .nav-group a[aria-current="page"] { background: var(--c-tint); color: var(--c); }
.nav-cta { display: grid; gap: var(--s-1); margin-top: var(--s-4); }

@media (min-width: 30em) { .brand img { height: 2.5rem; } }
@media (min-width: 48em) {
  .header-phone { display: inline-flex; }
  .icon-btn-call { display: none; }
}
@media (min-width: 64em) {
  :root { --header-h: 4.75rem; }
  .brand img { height: 2.625rem; }
  .menu-toggle { display: none; }
  .header-quote { display: inline-flex; }
  .header-actions { gap: var(--s-3); }
  .site-nav {
    position: static; visibility: visible; opacity: 1; transform: none; overflow: visible;
    padding: 0; background: none; margin-right: var(--s-2);
  }
  .nav-list { display: flex; align-items: center; gap: 0.15rem; }
  .nav-list > li { border: 0; position: relative; }
  .nav-link, .nav-sub-toggle {
    width: auto; height: 2.5rem; padding: 0 0.85rem; gap: 0.3rem; border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0;
    transition: background-color 150ms, color 150ms;
  }
  .nav-link:hover, .nav-sub-toggle:hover, .nav-sub-toggle[aria-expanded="true"] { background: var(--paper-alt); }
  .nav-link[aria-current="page"] { color: var(--blue-deep); background: #E6F2FA; }
  .nav-sub {
    position: absolute; top: calc(100% + 0.9rem); left: -0.5rem; width: min(46rem, 80vw);
    background: var(--paper); border: var(--outline); border-radius: var(--r);
    box-shadow: var(--shadow-lift);
    padding: var(--s-3); grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  }
  .nav-sub.is-open { display: grid; }
  .nav-cta { display: none; }
}

/* ---------- Home hero: full-bleed photo or video with the quote form on top ---------- */
.hero-full { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
/* Phones: an even overlay that keeps the text readable and lets the photo show. Desktop sets its own gradient. */
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 27, 26, 0.55) 0%, rgba(27, 27, 26, 0.72) 100%); }
/* Hero slideshow: project photos crossfade, each easing into a slow zoom */
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slides { z-index: -2; } /* behind the dark overlay on .hero-bg */
/* Desktop and phone photo sets: only the one for the current screen shows */
.hero-slides[data-deck="mobile"] { display: none; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide { opacity: 0; transition: opacity 1400ms var(--ease-out); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { object-position: var(--pos, 50% 50%); }
@media (prefers-reduced-motion: no-preference) {
  /* The zoom resets only after the slide has faded out, so there is no jump */
  .hero-slide img { transition: transform 0s 1500ms; }
  .hero-slide.is-active img { transform: scale(1.03); transition: transform 8000ms linear; }
  /* No entrance animation on the showcase: a transform or opacity animation would make it a stacking context and
     pull the full-bleed slides out from behind the overlay. The slides crossfade on their own. */
  .hero-copy > .hero-showcase { animation: none; }
}

/* Progress bars, caption and pause, under the phone number */
.hero-reel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: var(--s-5); max-width: 40rem; color: rgba(255, 255, 255, 0.82); font-size: var(--step--1); }
.hero-reel-bars { display: flex; gap: 4px; }
.hero-reel-bar { display: flex; align-items: center; width: 1.25rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-reel-bar span { position: relative; display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.hero-reel-bar span::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.hero-reel-bar:hover span { background: rgba(255, 255, 255, 0.55); }
.hero-reel-bar.is-active span::after { animation: reel-fill 6500ms linear forwards; }
.hero-reel.is-paused .hero-reel-bar.is-active span::after { animation-play-state: paused; }
@keyframes reel-fill { to { transform: none; } }
.hero-reel-caption { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 16rem; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-reel-caption [data-slide-caption] { overflow: hidden; text-overflow: ellipsis; color: var(--paper); font-weight: 600; }
.hero-reel-sep { width: 1rem; height: 1px; background: rgba(255, 255, 255, 0.4); flex: none; }
.hero-reel-pause {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}
.hero-reel-pause:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.1); }
.hero-reel-pause .icon { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.hero-reel .icon-play, .hero-reel.is-paused .icon-pause { display: none; }
.hero-reel.is-paused .icon-play { display: block; }
html:not(.js) .hero-reel { display: none; }
.hero-enquire { display: none; }
/* Phones and tablets: the form waits behind "Enquire now" (JS only; without JS it shows as normal),
   which leaves the full-bleed slideshow visible behind the hero text */
@media (max-width: 55.9375em) {
  .js .hero-enquire { display: inline-flex; }
  /* Full-screen hero on phones too. Type scales with the screen's height as well as its width so the
     content fills it, and any space left over is shared between the main groups rather than pooling. */
  .hero-slides[data-deck="desktop"] { display: none; }
  .hero-slides[data-deck="mobile"] { display: block; }
  .hero-full .hero-full-grid { padding-block: clamp(var(--s-4), 7svh, var(--s-6)) var(--s-4); align-items: stretch; }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-full .hero-copy h1 { font-size: max(2.25rem, min(10.6vw, 6.4svh)); } /* largest size that keeps "Air conditioning" on one line */
  .hero-full .hero-copy .lead { font-size: max(1.0625rem, min(5.2vw, 2.6svh)); line-height: 1.5; }
  .hero-full .hero-phone { font-size: max(1.5rem, min(7.5vw, 3.6svh)); }
  /* Headline and intro stay together near the top; phone, button and slide bars sit together at the bottom */
  .hero-copy > .lead { margin-top: var(--s-3); }
  .hero-copy > .hero-phone { margin-top: auto; padding-top: var(--s-5); }
  .hero-copy > .hero-enquire { align-self: stretch; justify-content: center; min-height: 3.5rem; margin-top: var(--s-3); font-size: 1.0625rem; }
  .hero-copy > .hero-showcase { align-self: stretch; margin-top: var(--s-4); }
  .hero-showcase .hero-reel { margin-top: 0; max-width: none; }
  .js .hero-form:not(.is-open) { display: none; }
  .hero-form { scroll-margin-top: var(--s-3); }
}
@media (max-width: 55.9375em) and (prefers-reduced-motion: no-preference) {
  .js .hero-form.is-open { animation: rise 450ms var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) { .hero-reel-bar.is-active span::after { transform: none; } }


.hero-full-grid { align-items: center; padding-block: var(--s-5) var(--s-6); }
.hero-copy > * + * { margin-top: var(--s-3); }
.hero-copy .eyebrow + h1 { margin-top: var(--s-2); }
.hero-full h1 { color: var(--paper); max-width: 15ch; }
.hero-full .lead { color: #E3E3E0; max-width: 32rem; }
.hero-phone {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.01em; color: var(--paper); text-decoration: none;
}
.hero-phone .icon { width: 1.6rem; height: 1.6rem; color: var(--blue-light); }
.hero-phone:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 2px; }
.hero-full :focus-visible { outline-color: var(--blue-light); }
.hero-form :focus-visible { outline-color: var(--blue-deep); }

.hero-form {
  position: relative; overflow: hidden; background: var(--paper); color: var(--ink);
  border-radius: calc(var(--r) + 4px); padding: var(--s-4) var(--s-3) var(--s-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -36px rgba(0, 0, 0, 0.8);
}
.hero-form::before, .hero-form::after { content: ""; position: absolute; top: 0; height: 4px; width: 50%; }
.hero-form::before { left: 0; background: var(--blue-light); }
.hero-form::after { right: 0; background: var(--red-bright); }
.hero-form .form { gap: var(--s-2); }
.hero-form .form-row { gap: var(--s-2); }
.hero-form-title { font-size: var(--step-3); }
.hero-form .intro { color: var(--ink-soft); margin: 0.35rem 0 var(--s-3); font-size: 0.975rem; line-height: 1.5; }
.hero-form .field input, .hero-form .field select { min-height: 2.875rem; }
@media (min-width: 30em) { .hero-form { padding: var(--s-4); } }
/* Step-by-step quote form (home hero). Without JS all three steps show stacked as one form. */
.qf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem var(--s-2); }
.qf-count { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.qf-bar { display: none; height: 3px; margin: var(--s-2) 0 var(--s-3); border-radius: 2px; background: var(--line); overflow: hidden; }
.js .qf-bar { display: block; }
.qf-bar span { display: block; height: 100%; background: var(--blue-deep); transform: scaleX(0.3333); transform-origin: left; transition: transform 450ms var(--ease-out); }
html:not(.js) .qf-head { margin-bottom: var(--s-3); }

.qf-step { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.qf-step + .qf-step { margin-top: var(--s-4); }
.qf-q { float: left; width: 100%; padding: 0; font-family: var(--font-head); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.qf-q:focus { outline: none; }
.qf:not(.is-stepped) [data-next], .qf:not(.is-stepped) [data-back] { display: none; }

/* Stepped: all steps share one grid cell so the card keeps the height of the tallest step */
.qf.is-stepped { display: grid; }
.qf.is-stepped .qf-step { grid-row: 2; grid-column: 1; margin-top: 0; }
.qf.is-stepped .qf-step:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.qf.is-stepped .form-status { grid-row: 1; margin-bottom: var(--s-2); }

/* Service tiles */
.qf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.qf-tile {
  position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.qf-tiles .qf-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; }
.qf-tile .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--blue-deep); transition: transform 200ms var(--ease-out); }
.qf-tile:nth-of-type(4) .icon, .qf-tile:nth-of-type(5) .icon { color: var(--red-deep); }
.qf-tile:hover { border-color: var(--ink); }
.qf-tile:active { transform: scale(0.98); }
.qf-tile:has(input:checked) { border-color: var(--blue-deep); background: #E6F2FA; box-shadow: inset 0 0 0 1px var(--blue-deep); color: var(--blue-deep); }
.qf-tile:has(input:checked) .icon { transform: scale(1.12); }
.qf-tile:has(input:focus-visible) { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.qf-tiles .qf-tile:last-of-type { grid-column: 1 / -1; }
.qf-tiles .error { grid-column: 1 / -1; }
.field.has-error .qf-tile { border-color: var(--red-deep); }

.qf-choice { display: grid; grid-template-columns: 1fr 1fr; }
.qf-choice .choice span { display: flex; justify-content: center; width: 100%; }

/* Back and continue sit at the bottom of every step */
.qf-nav { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-1); }
.qf-nav .btn { margin-left: auto; }
.qf-back { padding: 0.5rem 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.qf-back:hover { color: var(--ink); text-decoration: underline; }
.qf .form-note { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .qf.is-stepped .qf-step.is-active { animation: qf-in 380ms var(--ease-out); }
}
@keyframes qf-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Large screens: a wider hero so the headline and the form can both be bigger */
@media (min-width: 64em) {
  .hero-full .container { max-width: calc(84rem + var(--gutter) * 2); }
  .hero-full h1 { font-size: clamp(3.5rem, 1rem + 4.2vw, 4.75rem); }
  .hero-full .lead { font-size: 1.3125rem; max-width: 36rem; }
  .hero-full .hero-phone { font-size: var(--step-3); }
  .hero-form { padding: var(--s-5); }
  .hero-form-title { font-size: var(--step-4); }
  .hero-form .qf-q { font-size: var(--step-2); }
  .hero-form .qf-tile { min-height: 3.75rem; font-size: 1rem; padding: 0.75rem 1rem; }
  .hero-form .qf-tile .icon { width: 1.4rem; height: 1.4rem; }
  .hero-form .field input, .hero-form .field select { min-height: 3.25rem; }
  .hero-form .btn { min-height: 3.25rem; padding-inline: 1.5rem; }
}



@media (min-width: 56em) {
  .hero-bg::after { background: linear-gradient(90deg, rgba(27, 27, 26, 0.9) 0%, rgba(27, 27, 26, 0.74) 50%, rgba(27, 27, 26, 0.42) 100%); }
  .hero-full-grid { padding-block: var(--s-6); }
}
/* Fill the first screen below the sticky header (header height + its 1px border). svh ignores mobile browser bars. */
.hero-full-grid { min-height: calc(100vh - var(--header-h) - 1px); min-height: calc(100svh - var(--header-h) - 1px); }

/* ---------- Inner page hero ---------- */
.page-hero { padding-block: var(--s-5); background: var(--paper-alt); border-bottom: var(--outline); }
.page-hero-grid { align-items: center; }
.page-hero-copy > * + * { margin-top: var(--s-3); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 36rem; }
.crumbs { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--grey-mid); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--blue-deep); text-decoration: underline; }
.circuit-tag { display: inline-flex; }
.circuit-tag { padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--c-tint, #E6F2FA); color: var(--c, var(--blue-deep)); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; align-items: center; gap: 0.45rem; }
.circuit-tag::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-accent, var(--blue-light)); }
.page-hero-media .frame { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lift); }
@media (min-width: 56em) { .page-hero { padding-block: var(--s-6); } }

/* ---------- Trust strip ---------- */
.trust { padding-block: var(--s-5); border-bottom: var(--outline); text-align: center; }
.trust-label { font-family: var(--font-body); font-weight: 700; font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-3); }
/* Client logos in full colour. Scrolls on a loop; a static row when motion is reduced. */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-track { display: flex; width: max-content; }
/* padding-right matches the gap so the join between copies is spaced like every other pair (.logo-track beats the ul[role=list] reset) */
.logo-track .logo-list { --logo-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); display: flex; align-items: center; gap: var(--logo-gap); margin: 0; padding: 0 var(--logo-gap) 0 0; }
.logo-list li { flex: none; display: flex; align-items: center; }
.logo-list img { display: block; max-width: none; }
@media (max-width: 39.9375em) { .logo-list img { zoom: 0.8; } }
@media (prefers-reduced-motion: no-preference) {
  .logo-track { animation: logo-scroll 40s linear infinite; }
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
}
@keyframes logo-scroll { to { transform: translateX(calc(-100% / 3)); } } /* one of the three lists */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { width: auto; justify-content: center; }
  .logo-track .logo-list { flex-wrap: wrap; justify-content: center; row-gap: var(--s-3); padding: 0; }
  .logo-list[aria-hidden="true"] { display: none; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: var(--outline); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card-link { color: var(--ink); text-decoration: none; transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out), border-color 220ms; }
.card-link:hover { color: var(--ink); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-light); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.card-link:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.card-body h3 { font-size: var(--step-1); }
.card-body p { color: var(--ink-soft); font-size: 0.975rem; line-height: 1.6; }
.card-kicker { font-size: var(--step--2) !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c) !important; }
.card-more { margin-top: auto; padding-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9375rem; color: var(--c); }
.card-more .icon { transition: transform 180ms var(--ease-out); }
.card-link:hover .card-more .icon { transform: translateX(3px); }
.section-alt .card { box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04); border-color: transparent; }
.section-alt .card-link:hover { box-shadow: var(--shadow-lift); }

/* ---------- Why us ---------- */
.why { align-items: center; }
.why .section-head { margin-bottom: var(--s-4); }
.why-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.why-list li { position: relative; padding-left: 1.25rem; border-left: 2px solid var(--line); }
.why-list li::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--blue-light); transform-origin: top; }
.why-list li:nth-child(even)::before { background: var(--red-bright); }
.why-list h3 { font-size: var(--step-0); margin-bottom: 0.3rem; }
.why-list p { color: var(--ink-soft); font-size: 0.975rem; }
.why-media { display: grid; gap: var(--g); }
.why-media .pills { margin-top: calc(var(--g) * -0.25); }

/* ---------- Dark section and steps ---------- */
.section-dark { background: var(--ink); color: #D6D6D2; }
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark .eyebrow { color: var(--blue-light); }
.section-dark .section-intro { color: #BEBEB9; }
.section-dark :focus-visible { outline-color: var(--blue-light); }
.steps { display: grid; gap: var(--g); list-style: none; padding: 0; margin: 0; }
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  position: relative; overflow: hidden; padding: var(--s-4) var(--s-3) var(--s-4);
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.step-num {
  position: absolute; top: 0.75rem; right: 1.1rem;
  font-family: var(--font-head); font-weight: 800; font-size: 4rem; line-height: 1; letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.07);
}
.step-icon { color: var(--blue-light); width: 1.75rem; height: 1.75rem; margin-bottom: var(--s-3); }
.step:nth-child(4) .step-icon { color: var(--red-bright); }
.step-label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.4rem; }
.step:nth-child(4) .step-label { color: #F2848C; }
.step h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.step p:last-child { font-size: 0.975rem; line-height: 1.6; color: #BEBEB9; }

/* ---------- Sectors ---------- */
.sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.sectors li {
  display: flex; flex-direction: column; gap: 0.4rem; padding: var(--s-3);
  border-radius: var(--r); background: var(--paper); box-shadow: 0 1px 2px rgba(27, 27, 26, 0.04);
}
.sectors .icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--r-sm); background: #E6F2FA; color: var(--blue-deep); margin-bottom: 0.5rem; }
.sectors li:nth-child(even) .icon { background: #FCEBEC; color: var(--red-deep); }
.sectors strong { font-family: var(--font-head); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; line-height: 1.25; }
.sectors span { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
@media (min-width: 56em) { .sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Areas ---------- */

/* ---------- Reviews (home) ---------- */
/* Swipeable row on phones, three columns from tablet up */
.review-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 22rem); gap: var(--g); margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); scrollbar-width: thin;
}
.review-list > li { display: flex; scroll-snap-align: start; }
@media (min-width: 48em) {
  .review-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}
@media (min-width: 64em) { .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); width: 100%; margin: 0; padding: var(--s-4) var(--s-3) var(--s-3);
  border: var(--outline); border-radius: var(--r); background: var(--paper);
}
.review::before {
  content: "\201C"; position: absolute; top: 0.4rem; right: 1.1rem;
  font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--blue-light); opacity: 0.25;
}
.review-list > li:nth-child(even) .review::before { color: var(--red-bright); }
.review-title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.25; padding-right: 2.5rem; }
.review blockquote { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.review figcaption { display: grid; gap: 0.1rem; margin-top: auto; padding-top: var(--s-2); border-top: var(--outline); }
.review figcaption strong { font-size: 0.9375rem; }
.review figcaption span { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* Empty placeholder card: grey lines where the headline, quote and name will go */
.review-empty { min-height: 15rem; }
.review-empty span { display: block; height: 0.7rem; border-radius: 4px; background: var(--paper-alt); }
.review-empty span:nth-child(1) { width: 55%; height: 1rem; margin-bottom: var(--s-1); }
.review-empty span:nth-child(2) { width: 100%; }
.review-empty span:nth-child(3) { width: 85%; }
.review-empty span:nth-child(4) { width: 35%; margin-top: auto; }

/* ---------- CTA panel ---------- */
.cta-section { padding-block: 0 var(--section); }
.section + .cta-section, .section-rule + .cta-section { padding-top: 0; }
.section-alt + .cta-section, .section-dark + .cta-section { padding-top: var(--section); }
.cta-panel {
  position: relative; overflow: hidden; align-items: end;
  padding: var(--s-5) var(--s-4); border-radius: calc(var(--r) + 8px);
  color: var(--paper);
  /* Quiet depth: a soft blue gradient with a faint warm tint in the corner, a hairline red edge, a whisper of red glow
     and a fine highlight along the inside top edge */
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(230, 35, 51, 0.14), rgba(230, 35, 51, 0) 45%),
    linear-gradient(140deg, #0A7BC4 0%, var(--blue-deep) 55%, #005C9B 100%);
  border: 1px solid rgba(242, 132, 140, 0.45);
  box-shadow: 0 0 24px -10px rgba(230, 35, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 28px 56px -32px rgba(0, 60, 110, 0.55);
}
.cta-copy > * + * { margin-top: var(--s-2); }
.cta-copy h2 { color: var(--paper); max-width: 18ch; }
.cta-copy .lead { color: #DCEBF6; max-width: 34rem; }
.cta-panel .eyebrow-light { color: #BFE3F6; }
.cta-panel :focus-visible { outline-color: var(--paper); }
.cta-side { display: grid; gap: var(--s-3); justify-items: start; }
.cta-phone {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); line-height: 1; letter-spacing: -0.02em; color: var(--paper); text-decoration: none;
}
.cta-phone .icon { width: 1.9rem; height: 1.9rem; color: #BFE3F6; }
.cta-phone:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 2px; }
.cta-panel .btn-primary { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }
.cta-panel .btn-primary:hover { background: #EAF4FB; border-color: #EAF4FB; color: var(--ink); }
@media (min-width: 56em) {
  .cta-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; padding: var(--s-6); }
  .cta-copy { grid-column: 1 / span 7; }
  .cta-side { grid-column: 9 / span 4; }
}

/* ---------- Footer (dark) ---------- */
.site-footer { background: var(--ink); color: #CFCFCB; font-size: var(--step--1); }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--blue-light); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--blue-light); }
.footer-rule { display: flex; height: 4px; }
.footer-rule::before, .footer-rule::after { content: ""; flex: 1; }
.footer-rule::before { background: var(--blue-light); }
.footer-rule::after { background: var(--red-bright); }
.footer-main { padding-block: var(--s-6) var(--s-4); }
.footer-grid { display: grid; gap: var(--s-5) var(--g); }
.footer-brand img { height: 2.75rem; width: auto; }
.footer-brand p { margin-top: var(--s-3); max-width: 22rem; line-height: 1.65; }
.footer-col h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; color: #9E9E99; margin-bottom: var(--s-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-col li { line-height: 1.4; }
.footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; }
.footer-contact .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.05rem; color: var(--blue-light); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); justify-content: space-between;
  margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid #353533; color: #A9A9A4;
}
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > :nth-child(2) { grid-column: 1 / span 4; }
  .footer-grid > :nth-child(3) { grid-column: 5 / span 4; }
  .footer-grid > :nth-child(4) { grid-column: 9 / span 4; }
}
@media (min-width: 64em) {
  .footer-brand { grid-column: 1 / span 4; }
  .footer-grid > :nth-child(2) { grid-column: 6 / span 2; }
  .footer-grid > :nth-child(3) { grid-column: 8 / span 2; }
  .footer-grid > :nth-child(4) { grid-column: 10 / span 3; }
}

/* ---------- Service page blocks ---------- */
.check-list { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.check-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
.check-list .icon {
  width: 1.5rem; height: 1.5rem; padding: 0.3rem; margin-top: 0.05rem; border-radius: 50%;
  background: var(--c-tint, #E6F2FA); color: var(--c, var(--blue-deep)); stroke-width: 2.75;
}
.prose > * + * { margin-top: var(--s-2); }
.prose h2 { font-size: var(--step-3); }
.prose h2 + p { margin-top: var(--s-3); }
.prose * + h2 { margin-top: var(--s-5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--s-4); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.prose p { color: var(--ink-soft); }



.aside-title { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-2); }
.related { display: grid; gap: 0.75rem; }
.related a {
  display: grid; gap: 0.2rem; padding: 1rem 1.25rem; position: relative;
  border: var(--outline); border-radius: var(--r); color: var(--ink); text-decoration: none; background: var(--paper);
  transition: border-color 160ms, box-shadow 160ms;
}
.related a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.related strong { font-family: var(--font-head); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; line-height: 1.3; display: flex; align-items: center; gap: 0.5rem; }
.related strong::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); flex: none; }
.related span { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }

/* FAQ */
.faq { display: grid; gap: 0.75rem; }
.faq details { border: var(--outline); border-radius: var(--r); background: var(--paper); transition: border-color 160ms, box-shadow 160ms; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: 1.15rem 1.35rem; font-family: var(--font-head); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; line-height: 1.35;
  border-radius: var(--r);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 1.75rem; height: 1.75rem; padding: 0.35rem; border-radius: 50%; background: var(--paper-alt); color: var(--ink); transition: transform 200ms var(--ease-out), background-color 160ms; }
.faq details:not([open]) summary .icon { transform: rotate(45deg); }
.faq details[open] summary .icon { background: #E6F2FA; color: var(--blue-deep); }
.faq .answer { padding: 0 1.35rem 1.35rem; max-width: 46rem; color: var(--ink-soft); }

/* ---------- Projects page ---------- */
/* One project per row: photos on one side, text on the other, swapping sides down the page. Whitespace does the separating. */
.cases { display: grid; gap: var(--s-7); }
.case { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 56em) {
  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .case-media { grid-column: 1 / span 7; }
  .case-copy { grid-column: 9 / span 4; }
  .case:nth-of-type(even) .case-media { grid-column: 6 / span 7; grid-row: 1; }
  .case:nth-of-type(even) .case-copy { grid-column: 1 / span 4; grid-row: 1; }
}

/* Lead photo, then the rest as an even row of thumbnails (t-1 to t-4 keep the row full) */
.case-lead { margin: 0; aspect-ratio: 3 / 2; }
.case-thumbs { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.case-thumbs .frame { margin: 0; border-radius: var(--r-sm); }
.case-thumbs.t-1 { grid-template-columns: 1fr; }
.case-thumbs.t-1 .frame { aspect-ratio: 3 / 1; }
.case-thumbs.t-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-thumbs.t-2 .frame { aspect-ratio: 16 / 9; }
.case-thumbs.t-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-thumbs.t-3 .frame { aspect-ratio: 4 / 3; }
.case-thumbs.t-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-thumbs.t-4 .frame { aspect-ratio: 1; }
@media (prefers-reduced-motion: no-preference) {
  .case-media .frame img { transition: transform 700ms var(--ease-out); }
  .case-media .frame:hover img { transform: scale(1.03); }
}

.case-copy::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--c-accent); margin-bottom: var(--s-3); }
.case-kicker { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.case-copy h2 { font-size: var(--step-4); margin-top: 0.6rem; }
.case-summary { margin-top: var(--s-2); color: var(--ink-soft); line-height: 1.6; }
.case-copy .aside-title { margin: var(--s-4) 0 0.75rem; }
.case-list { display: grid; gap: 0.5rem; margin: 0; font-size: var(--step--1); line-height: 1.45; }
.case-list li { position: relative; padding-left: 1.1rem; }
.case-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-accent); }

.cases-note { max-width: 34rem; margin-inline: auto; padding-top: var(--s-5); border-top: var(--outline); text-align: center; color: var(--ink-soft); }

/* ---------- About ---------- */
/* Photo and text row, same rhythm as the project rows */
.about-intro { display: grid; gap: var(--s-4); align-items: center; }
.about-photo { margin: 0; aspect-ratio: 3 / 2; }
.about-copy > * + * { margin-top: var(--s-2); }
.about-copy .eyebrow + h2 { margin-top: 0.6rem; }
.about-copy p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; }
.about-copy p:last-child { margin-top: var(--s-3); }
@media (min-width: 56em) {
  .about-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .about-photo { grid-column: 1 / span 7; }
  .about-copy { grid-column: 9 / span 4; }
}

/* Four short promises, each under a thin brand-colour line */
.expect-list { display: grid; gap: var(--s-4) var(--g); margin: 0; }
.expect-list li { padding-top: var(--s-3); border-top: 3px solid var(--blue-light); }
.expect-list li:nth-child(even) { border-top-color: var(--red-bright); }
.expect-list p { margin-top: 0.5rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
@media (min-width: 40em) { .expect-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .expect-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.directors { display: grid; gap: var(--s-4) var(--g); align-items: start; }
.directors-intro { margin-top: var(--s-2); color: var(--ink-soft); max-width: 22rem; }
.people { display: grid; gap: var(--g); margin: 0; }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: var(--s-4); border: var(--outline); border-radius: var(--r); }
.person h3 { font-size: var(--step-2); }
.person .role { color: var(--ink-soft); margin-bottom: var(--s-1); }
.person a { display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 600; text-decoration: none; }
.person a:hover { text-decoration: underline; }
@media (min-width: 40em) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56em) {
  .directors { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .directors > :first-child { grid-column: 1 / span 4; }
  .people { grid-column: 6 / span 7; }
}

.about-note { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--outline); color: var(--ink-soft); font-size: var(--step--1); max-width: 22rem; }

/* ---------- Areas and city pages ---------- */
.city-intro { display: grid; gap: var(--s-5) var(--g); align-items: start; }
@media (min-width: 56em) {
  .city-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .city-intro > :first-child { grid-column: 1 / span 6; }
  .city-intro > :last-child { grid-column: 8 / span 5; }
}
/* Sub-areas as quiet chips */
.subareas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.subareas li { padding: 0.4rem 0.8rem; border-radius: var(--r-pill); background: var(--paper-alt); border: var(--outline); font-size: var(--step--1); line-height: 1.3; }

.service-links { gap: var(--g); }
@media (min-width: 40em) { .service-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .service-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Simple list of city links: city pages (nearby) and the home page */
.city-links { display: grid; gap: 0.25rem; margin: 0; }
.city-links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-weight: 600; color: var(--ink); text-decoration: none; }
.city-links a .icon { color: var(--red-bright); }
.city-links a:hover { color: var(--blue-deep); }
/* Home page coverage: three short points under "Working across the UK" */
.coverage { display: grid; gap: var(--g); max-width: 64rem; margin: 0 auto; }
@media (min-width: 48em) { .coverage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.coverage li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: var(--s-4) var(--s-3); text-align: center; border: var(--outline); border-radius: var(--r); background: var(--paper); }
.coverage .icon { width: 2.75rem; height: 2.75rem; padding: 0.6rem; margin-bottom: 0.25rem; border-radius: 50%; background: #E6F2FA; color: var(--blue-deep); }
.coverage li:nth-child(2) .icon { background: #FCEBEC; color: var(--red-deep); }
.coverage h3 { font-size: var(--step-1); }
.coverage p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; max-width: 18rem; }

/* Areas hub: one card per city, grouped by nation */
.city-grid { display: grid; gap: var(--g); margin: 0; }
@media (min-width: 40em) { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.city-grid li { display: flex; }
.city-card {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%; padding: var(--s-3) var(--s-3) var(--s-3);
  border: var(--outline); border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.city-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.city-region { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); }
.city-card strong { font-family: var(--font-head); font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
.city-subs { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.areas-note { margin-top: var(--s-5); color: var(--ink-soft); text-align: center; max-width: 38rem; margin-inline: auto; }
.page-hero h1.h1-long { font-size: var(--step-4); max-width: 22ch; }
.city-card .card-more { margin-top: auto; padding-top: var(--s-2); color: var(--blue-deep); }

/* Footer row of city links */
.footer-areas { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid #353533; }
.footer-areas h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; color: #9E9E99; margin-bottom: var(--s-2); }
.footer-areas ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-areas + .footer-bottom { margin-top: var(--s-4); }

/* ---------- Service pages ---------- */
/* Overview: body copy on the left, a tinted "what's included" panel on the right, tops aligned */
.svc-overview { display: grid; gap: var(--s-5) var(--g); align-items: start; }
.svc-body > * + * { margin-top: var(--s-2); }
.svc-body h2 + p { margin-top: var(--s-3); }
.svc-body p { color: var(--ink-soft); line-height: 1.65; max-width: 36rem; }
.svc-body .svc-lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.svc-panel { position: relative; padding: var(--s-4); border-radius: var(--r); background: var(--paper-alt); overflow: hidden; }
.svc-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c-accent); transform-origin: left; }
.svc-panel .aside-title { margin-bottom: var(--s-3); }
@media (min-width: 56em) {
  .svc-overview { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-body { grid-column: 1 / span 6; }
  .svc-panel { grid-column: 8 / span 5; }
}

/* Who it's for: two equal panels, or one panel and a photo matched to its height */
.svc-audience { display: grid; gap: var(--g); }
.svc-aud { padding: var(--s-4); border-radius: var(--r); background: var(--paper); border: var(--outline); }
.svc-aud h3 { display: flex; align-items: center; gap: 0.75rem; font-size: var(--step-2); margin-bottom: var(--s-3); }
.svc-aud h3 .icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--r-sm); background: var(--c-tint); color: var(--c); }
/* The photo takes the height of the panel beside it instead of setting the row height */
.svc-aud-media { margin: 0; min-height: 13rem; }
.svc-aud-media img { position: absolute; inset: 0; }
@media (min-width: 48em) { .svc-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Track record row reuses the project row; these are the service-page extras */
.case-meta-line { margin-top: 0.35rem; color: var(--ink-soft); font-size: var(--step--1); font-weight: 600; }
.case-link { margin-top: var(--s-4); }
/* Three on-site photos for services without a project */
.svc-strip { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-strip .frame { margin: 0; aspect-ratio: 4 / 3; }
.svc-strip .frame:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 48em) {
  .svc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-strip .frame:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* Questions and other services */
.svc-faq { display: grid; gap: var(--s-5) var(--g); align-items: start; }
.svc-faq h2.title-md { margin-bottom: var(--s-4); }
.svc-faq nav .aside-title { margin-bottom: var(--s-3); }
.svc-others { display: grid; margin: 0; border-top: var(--outline); }
.svc-others a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 0.9rem 0; border-bottom: var(--outline); color: var(--ink); text-decoration: none;
}
.svc-others span { display: grid; gap: 0.15rem; }
.svc-others strong { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: var(--step-0); letter-spacing: -0.01em; line-height: 1.3; }
.svc-others strong::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-accent); flex: none; }
.svc-others small { padding-left: 0.95rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }
.svc-others .icon { flex: none; color: var(--ink-soft); transition: transform 180ms var(--ease-out), color 180ms; }
.svc-others a:hover strong { color: var(--c); }
.svc-others a:hover .icon { transform: translateX(3px); color: var(--c); }
@media (min-width: 56em) {
  .svc-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-faq > :first-child { grid-column: 1 / span 7; }
  .svc-faq > :last-child { grid-column: 9 / span 4; padding-top: 0.6rem; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-3); }
.form-row { display: grid; gap: var(--s-3); }
@media (min-width: 40em) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.9rem;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--field); border-radius: var(--r-sm);
  transition: border-color 150ms, box-shadow 150ms;
}
.field textarea { min-height: 9rem; resize: vertical; }
.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='%231B1B1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.125rem; padding-right: 2.6rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(0, 110, 184, 0.18); }
.field .error { display: none; color: var(--red-deep); font-size: var(--step--1); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red-deep); box-shadow: 0 0 0 4px rgba(184, 29, 29, 0.12); }
.field.has-error .error { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { float: left; width: 100%; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.15rem;
  border: 1px solid var(--field); border-radius: var(--r-sm); cursor: pointer; font-weight: 600;
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.choice span:hover { border-color: var(--ink); }
.choice input:checked + span { border-color: var(--blue-deep); background: #E6F2FA; color: var(--blue-deep); box-shadow: inset 0 0 0 1px var(--blue-deep); }
.choice input:focus-visible + span { outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 400; }
.consent input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.2rem 0 0; accent-color: var(--blue-deep); flex: none; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); color: var(--ink-soft); }
.form-status { padding: 0.85rem 1rem; border: 1px solid var(--red-deep); border-radius: var(--r-sm); background: #FCEBEC; color: var(--ink); font-weight: 600; }
.form-status[hidden] { display: none; }

/* ---------- Contact ---------- */
/* Form on the left, contact details on the right, both starting at the same line */
.contact-layout { display: grid; gap: var(--s-5) var(--g); align-items: start; }
@media (min-width: 56em) {
  .contact-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact-layout > .form-card { grid-column: 1 / span 7; }
  .contact-aside { grid-column: 9 / span 4; }
}

.form-card {
  position: relative; overflow: hidden; padding: var(--s-4) var(--s-3);
  background: var(--paper); border: var(--outline); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow-lift);
}
.form-card::before, .form-card::after { content: ""; position: absolute; top: 0; height: 4px; width: 50%; }
.form-card::before { left: 0; background: var(--blue-light); }
.form-card::after { right: 0; background: var(--red-bright); }
@media (min-width: 30em) { .form-card { padding: var(--s-5) var(--s-4); } }
@media (min-width: 64em) { .form-card { padding: var(--s-5); } }
.form-card .form { gap: var(--s-4); }

/* Numbered groups: your details, then the system */
.form-group { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-group + .form-group { padding-top: var(--s-4); border-top: var(--outline); }
/* Floated so the legend sits inside the group like a heading instead of on its border */
.form-group-title { float: left; width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0; font-family: var(--font-head); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; }
.form-group-title span {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #E6F2FA; color: var(--blue-deep); font-size: var(--step--1); font-weight: 800;
}
.form-group + .form-group .form-group-title span { background: #FCEBEC; color: var(--red-deep); }
.form-group .form-note { margin-top: calc(var(--s-3) * -1 + 0.35rem); }
.form-submit { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--outline); }
.form-submit .btn { justify-self: start; }
@media (min-width: 40em) {
  .form-submit { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-4); }
}

/* Side column: phone first, then people, then what happens next */
.contact-aside { display: grid; gap: var(--s-4); }
.contact-urgent { padding: var(--s-3); border-radius: var(--r); background: var(--blue-deep); color: var(--paper); }
.contact-urgent .aside-title { color: #BFE3F6; margin-bottom: 0.4rem; }
.contact-phone { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); text-decoration: none; }
.contact-phone .icon { width: 1.6rem; height: 1.6rem; color: #BFE3F6; }
.contact-phone:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 2px; }
.contact-block .aside-title { margin-bottom: var(--s-2); }
.contact-people { display: grid; margin: 0; border-top: var(--outline); }
.contact-people li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem var(--s-2); padding: 0.8rem 0; border-bottom: var(--outline); }
.contact-people span { display: grid; gap: 0.1rem; }
.contact-people strong { font-size: 0.9375rem; line-height: 1.3; }
.contact-people small { color: var(--ink-soft); font-size: var(--step--1); }
.contact-people a { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-people a:hover { color: var(--blue-deep); text-decoration: underline; }
.contact-steps { display: grid; gap: var(--s-2); margin: 0; counter-reset: step; }
.contact-steps li { position: relative; display: grid; gap: 0.15rem; padding-left: 2.25rem; counter-increment: step; }
.contact-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; border: 1px solid var(--line-strong); font-size: var(--step--2); font-weight: 700; color: var(--ink-soft);
}
.contact-steps strong { font-size: 0.9375rem; line-height: 1.35; }
.contact-steps span { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.contact-areas { color: var(--ink-soft); font-size: var(--step--1); }

.rule { display: block; width: 4.5rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-light) 50%, var(--red-bright) 50%); }

/* ---------- Simple pages ---------- */
.notice { padding: var(--s-4) 0 var(--s-7); }
.big-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--grey-light); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal-delay="1"] { transition-delay: 70ms; }
  .js [data-reveal-delay="2"] { transition-delay: 140ms; }
  .js [data-reveal-delay="3"] { transition-delay: 210ms; }
  .js .card-link[data-reveal].is-in { transition: opacity 650ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms; }
  .card-link:hover { transform: translateY(-3px); }
  .js .card-link[data-reveal].is-in:hover { transform: translateY(-3px); }
  .hero-copy > * { animation: rise 700ms var(--ease-out) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 80ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 240ms; }
  .hero-form { animation: rise 800ms var(--ease-out) 200ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Subtle motion added for service pages and home blocks. JS adds .is-in as blocks scroll into view; with reduced motion it adds it straight away. */
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(2) { --i: 1; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(3) { --i: 2; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(4) { --i: 3; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(5) { --i: 4; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(6) { --i: 5; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(7) { --i: 6; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(8) { --i: 7; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(9) { --i: 8; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(10) { --i: 9; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(11) { --i: 10; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(12) { --i: 11; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(13) { --i: 12; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(14) { --i: 13; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(15) { --i: 14; }
:is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li:nth-child(16) { --i: 15; }
@media (prefers-reduced-motion: no-preference) {
  /* Page headers: copy rises in, photo settles */
  .page-hero .crumbs, .page-hero-copy > * { animation: rise 700ms var(--ease-out) both; }
  .page-hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .page-hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .page-hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .page-hero-media .frame { animation: settle 1100ms var(--ease-out) 120ms both; }

  /* Photos ease out of a slight zoom as their block appears */
  .js [data-reveal] .frame img, .js .frame[data-reveal] img, .js [data-reveal] .card-media img { transition: transform 1200ms var(--ease-out); }
  .js [data-reveal]:not(.is-in) .frame img, .js .frame[data-reveal]:not(.is-in) img, .js [data-reveal]:not(.is-in) .card-media img { transform: scale(1.06); }

  /* Lists fill in one item at a time; check icons pop */
  .js [data-reveal] :is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 150ms); }
  .js [data-reveal]:not(.is-in) :is(.check-list, .case-list, .subareas, .svc-others, .city-links) > li { opacity: 0; transform: translateY(6px); }
  .js [data-reveal]:not(.is-in) .check-list .icon { opacity: 0; }
  .js [data-reveal].is-in .check-list .icon { animation: pop 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 220ms); }

  /* Accent lines draw across or down */
  .js .svc-panel[data-reveal]::before, .js .case-copy[data-reveal]::before { transform-origin: left; transition: transform 900ms var(--ease-out) 250ms; }
  .js .svc-panel[data-reveal]:not(.is-in)::before, .js .case-copy[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
  .js .why-list li[data-reveal]::before { transition: transform 900ms var(--ease-out) 200ms; }
  .js .why-list li[data-reveal]:not(.is-in)::before { transform: scaleY(0); }

  /* Home steps: icon pops, faint number slides up, gentle lift on hover */
  .js .step[data-reveal]:not(.is-in) .step-icon { opacity: 0; }
  .js .step[data-reveal].is-in .step-icon { animation: pop 550ms var(--ease-out) 250ms both; }
  .js .step[data-reveal] .step-num { transition: transform 900ms var(--ease-out) 200ms, opacity 900ms var(--ease-out) 200ms; }
  .js .step[data-reveal]:not(.is-in) .step-num { opacity: 0; transform: translateY(14px); }
  .step { transition: transform 220ms var(--ease-out), border-color 220ms; }
  .js .step[data-reveal].is-in { transition: opacity 650ms var(--ease-out), transform 220ms var(--ease-out), border-color 220ms; }
  .step:hover, .js .step[data-reveal].is-in:hover { transform: translateY(-3px); border-color: #4A4A47; }

  /* Home sectors: icon pops, card lifts on hover */
  .js .sectors li[data-reveal]:not(.is-in) .icon { opacity: 0; }
  .js .sectors li[data-reveal].is-in .icon { animation: pop 500ms var(--ease-out) 200ms both; }
  .js .sectors li[data-reveal].is-in { transition: opacity 650ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms; }
  .js .sectors li[data-reveal].is-in:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

  /* FAQ answers fade in when opened */
  .faq details[open] .answer { animation: faq-open 320ms var(--ease-out); }
}
@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-nav, .cta-section, .skip-link, .hero-form { display: none !important; }
  .site-footer { background: none; color: var(--ink); }
  .site-footer a { color: var(--ink); }
}