/* H&E Anderton Plumbing & Heating
   Blueprint/technical-drawing house style. Ported from the Claude Design artifact
   to plain HTML/CSS so the site loads without a JS framework. */

/* ── Fonts (self-hosted latin subsets; no third-party requests) ───────────── */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/plex-mono-500.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --paper: #f4f2ee;
  --ink: #16181d;
  --navy: #101521;
  --accent: #f0900f;
  --blue: #0077d6;
  --ink-70: rgba(22, 24, 29, 0.7);
  --ink-55: rgba(22, 24, 29, 0.55);
  --rule: rgba(22, 24, 29, 0.18);
  --rule-soft: rgba(22, 24, 29, 0.14);
  --paper-dim: rgba(233, 238, 248, 0.75);

  /* Blueprint (exploded drawing), midnight theme */
  --xbg: #0d1322;
  --xline: #6f9fdd;
  --xline2: rgba(111, 159, 221, 0.5);
  --xfill: rgba(111, 159, 221, 0.07);
  --xtext: #e8eef8;
  --xdim2: rgba(232, 238, 248, 0.6);
  --xhi: #37c3ff;
  --xamber: #f5a020;
  --xgrid: rgba(111, 159, 221, 0.09);
  --xlen: 360vh;
  /* Shorter travel on phones, 360vh of thumb-scrolling is a lot on a handset. */
  --xlen-mobile: 300vh;

  --sans: 'Barlow', Helvetica, Arial, sans-serif;
  --display: 'Barlow Condensed', 'Barlow', Impact, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(24px, 4vw, 64px);
  --section-y: clamp(56px, 7vw, 104px);
  /* Height of the sticky nav. The pinned drawing reserves this so its heading
     is not covered when the section pins to the top of the viewport. */
  --nav-h: 61px;
}

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

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font: 500 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ── Shared type ─────────────────────────────────────────────────────────── */
.eyebrow {
  font: 500 12px var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}

.h2 {
  margin: 10px 0 0;
  font: 600 clamp(40px, 5vw, 72px)/0.95 var(--display);
  text-transform: uppercase;
}

.lede {
  font: 400 16.5px/1.7 var(--sans);
  color: rgba(22, 24, 29, 0.78);
  max-width: 56ch;
}

.section {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font: 600 15px var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: 1.5px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* On the dark navy panels */
.on-dark .btn--primary { border-color: #e9eef8; box-shadow: 3px 3px 0 rgba(233, 238, 248, 0.9); }
.on-dark .btn--primary:hover { box-shadow: 5px 5px 0 rgba(233, 238, 248, 0.9); }
.on-dark .btn--ghost { color: #e9eef8; border-color: #e9eef8; }
.on-dark .btn--ghost:hover { background: #e9eef8; color: var(--ink); }

.btn-outline {
  font: 600 13px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 12px 22px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.btn-outline--accent { color: var(--accent); border-color: var(--accent); }
.btn-outline--accent:hover { background: var(--accent); color: var(--ink); }

/* ── Top strip ───────────────────────────────────────────────────────────── */
.topstrip {
  background: var(--navy);
  color: var(--paper-dim);
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 8px 28px;
  flex-wrap: wrap;
}
.topstrip__right { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.topstrip__accent { color: var(--accent); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 242, 238, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 10px 0; }
.brand img { height: 38px; width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font: 600 21px var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand__sub {
  font: 400 9.5px var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.nav__link {
  font: 500 12px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.nav__link:hover { color: var(--blue); }
.nav__link[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__phone {
  margin-left: 10px;
  background: var(--accent);
  color: var(--ink);
  font: 600 12.5px var(--mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(22, 24, 29, 0.9);
  transition: transform .15s;
}
.nav__phone:hover { transform: translateY(-1px); }

/* Phones: brand and the call button share the top row, links sit beneath on
   their own. Left to wrap naturally the bar grew to three rows and ~154px,
   which is a fifth of a handset screen on every page. Keep in step with the
   --nav-h override in the phone media query below. */
@media (max-width: 720px) {
  .nav { padding: 0 16px; gap: 0; }
  .brand { padding: 7px 0; gap: 9px; }
  .brand img { height: 29px; }
  .brand__name { font-size: 17px; }
  .brand__sub { font-size: 8px; letter-spacing: 0.16em; margin-top: 2px; }
  /* The call button is a child of .nav__links in the markup, so lift it out of
     that flow to sit beside the brand instead of stacking below the links. */
  .nav__phone {
    position: absolute;
    top: 8px;
    right: 16px;
    margin-left: 0;
    padding: 8px 12px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  .nav__links { width: 100%; gap: 0 20px; justify-content: flex-start; }
  .nav__link { padding: 4px 0 8px; font-size: 11px; letter-spacing: 0.1em; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--rule); }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  align-items: stretch;
}

.hero__copy {
  padding: clamp(44px, 6vw, 92px) 28px clamp(44px, 5vw, 76px) clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--rule-soft);
  position: relative;
}

.hero__ref {
  position: absolute;
  top: 16px;
  left: clamp(28px, 4vw, 64px);
  font: 400 10.5px var(--mono);
  letter-spacing: 0.2em;
  color: rgba(22, 24, 29, 0.42);
}

.hero__kicker {
  font: 500 13px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--blue);
  display: inline-block;
  flex: none;
}

.hero__title {
  margin: 0;
  font: 600 clamp(52px, 7.6vw, 132px)/0.92 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero__outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero__mark { background: var(--accent); padding: 0 12px; display: inline-block; }

.hero__body {
  margin: 30px 0 0;
  max-width: 52ch;
  font: 400 17px/1.65 var(--sans);
  color: rgba(22, 24, 29, 0.78);
}

.hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.hero__figure { position: relative; min-height: min(60vw, 480px); background: var(--navy); }
.hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.figbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(16, 21, 33, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(233, 238, 248, 0.25);
  padding: 11px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 11px var(--mono);
  letter-spacing: 0.12em;
  color: rgba(233, 238, 248, 0.85);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.figbar__accent { color: var(--accent); }

.crop {
  position: absolute;
  top: 10px;
  font: 400 16px var(--mono);
  color: rgba(233, 238, 248, 0.9);
}
.crop--l { left: 14px; }
.crop--r { right: 14px; }

/* Trust bar */
.trustbar {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: rgba(22, 24, 29, 0.03);
}
.trustbar > * {
  padding: 15px 12px;
  text-align: center;
  border-right: 1px solid rgba(22, 24, 29, 0.12);
  font: 500 12px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(22, 24, 29, 0.8);
}
.trustbar > *:last-child { border-right: 0; color: var(--ink); }
.trustbar .muted { color: var(--ink-55); }

/* ── Exploded heat pump (pinned scroll) ──────────────────────────────────── */
.explode {
  height: var(--xlen);
  background: var(--xbg);
  position: relative;
}

.explode__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh, not vh/dvh: mobile browsers resize the viewport as the URL bar hides,
     which makes a vh-sized sticky element jump mid-scroll. svh is the stable
     "toolbar visible" height, so the pinned stage never resizes under the user. */
  height: 100svh;
  padding-top: var(--nav-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explode__grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

.explode__head {
  position: absolute;
  top: var(--nav-h); left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px clamp(20px, 3.5vw, 56px);
  z-index: 5;
  pointer-events: none;
}
.explode__eyebrow {
  font: 500 12px var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--xamber);
}
.explode__title {
  margin: 8px 0 0;
  font: 600 clamp(28px, 3.4vw, 52px)/1 var(--display);
  text-transform: uppercase;
  color: var(--xtext);
  letter-spacing: 0.01em;
}
.explode__sub {
  margin: 10px 0 0;
  font: 400 14px/1.55 var(--sans);
  color: var(--xdim2);
  max-width: 42ch;
}
.explode__meta {
  text-align: right;
  font: 400 11.5px var(--mono);
  letter-spacing: 0.12em;
  color: var(--xdim2);
  text-transform: uppercase;
  flex-shrink: 0;
}
.explode__meta div + div { margin-top: 6px; }
.explode__pct-row { color: var(--xtext); }
#explode-pct { color: var(--xamber); }
#explode-stage-name { color: var(--xhi); }

.explode__drawing {
  height: min(calc(96vh - var(--nav-h)), 1350px);
  width: auto;
  max-width: 98vw;
  display: block;
  margin-top: 2vh;
}

.explode__hint {
  position: absolute;
  bottom: 18px;
  left: clamp(20px, 3.5vw, 56px);
  font: 500 11px var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--xtext);
  background: var(--xbg);
  border: 1px solid var(--xline2);
  padding: 9px 14px;
  transition: opacity .4s;
  white-space: nowrap;
}

.explode__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(128, 128, 128, 0.22); }
.explode__progress span { display: block; height: 100%; background: var(--xamber); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Assemblies: each drifts by its own factor as --p goes 0 → 1 */
.asm { transform: translateY(calc(var(--p, 0) * var(--drift, 0) * 1px)); }
.asm__label { opacity: clamp(0, calc((var(--p, 0) - var(--at, 0)) * 7), 1); }
.fade-early { opacity: clamp(0, calc(1 - var(--p, 0) * 2.6), 1); }
.fade-mid { opacity: clamp(0, calc(1 - var(--p, 0) * 3.4), 1); }
.fan-blades { transform-box: view-box; transform-origin: 405px 745px; transform: rotate(calc(var(--p, 0) * 160deg)); }

.dwg-line { fill: none; stroke: var(--xline); stroke-width: 2; }
.dwg-line-thin { fill: none; stroke: var(--xline); stroke-width: 1.4; }
.dwg-faint { fill: none; stroke: var(--xline2); stroke-width: 1; }
.dwg-fill { fill: var(--xfill); stroke: var(--xline); stroke-width: 2; }
.dwg-knock { fill: var(--xbg); stroke: var(--xline); stroke-width: 2; }
.dwg-hi { fill: none; stroke: var(--xhi); stroke-width: 1.8; }
.dwg-leader { stroke: var(--xamber); stroke-width: 1.2; fill: none; }
.dwg-dot { fill: var(--xamber); }
/* Sized in viewBox units. The drawing is height-constrained on desktop, so a
   1700-unit-tall frame renders around 0.42px per unit on a laptop, 15px here
   was under 7px on screen. The frame is widened to match (see the viewBox on
   #explode-drawing); at these sizes the longest left label reaches -222. */
.dwg-txt { font: 500 30px var(--mono); fill: var(--xtext); letter-spacing: 0.06em; }
.dwg-txt-sm { font: 400 22px var(--mono); fill: var(--xdim2); letter-spacing: 0.05em; }
.dwg-txt-xs { font: 400 22px var(--mono); fill: var(--xdim2); letter-spacing: 0.1em; }
/* The title block is a fixed-width box, so its text stays at drawing scale. */
.dwg-title { font-size: 18px; }
.dwg-title-sm { font-size: 15px; }
.dwg-num { fill: var(--xamber); }

/* Part number badges. Desktop reads the full leader-line labels inside the
   drawing; on phones those are unreadable at the available scale, so the
   badges plus the running caption carry the same information instead. */
.asm__num {
  font: 600 34px var(--mono);
  fill: var(--xamber);
  letter-spacing: 0.04em;
  opacity: clamp(0, calc((var(--p, 0) - var(--at, 0)) * 7), 1);
  display: none;
}

/* Caption driven by scroll position, the mobile stand-in for the in-drawing
   labels. Reserves its own height so naming a part cannot shift the drawing. */
.explode__caption {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  padding: 0 18px;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  display: none;
  min-height: 40px;
}
.explode__caption b {
  display: block;
  font: 600 15px var(--mono);
  letter-spacing: 0.08em;
  color: var(--xtext);
  text-transform: uppercase;
}
.explode__caption b i { color: var(--xamber); font-style: normal; }
.explode__caption span {
  display: block;
  margin-top: 4px;
  font: 400 11.5px var(--mono);
  letter-spacing: 0.05em;
  color: var(--xdim2);
  text-transform: uppercase;
}

/* ── Phones: keep the pinned scroll, restage it for a narrow screen ──────── */
@media (max-width: 720px) {
  /* The nav wraps to two rows here, and the pinned stage has to reserve the
     real height or the section heading sits underneath it. */
  :root { --nav-h: 78px; }

  .explode { height: var(--xlen-mobile, 300vh); }
  .explode__stage { padding-top: calc(var(--nav-h) + 4px); }

  /* JS crops the viewBox to the unit column, so the side label gutters are no
     longer in frame and the drawing can fill the width of the phone. */
  .explode__drawing {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - var(--nav-h) - 150px);
    margin-top: 76px;
  }

  .explode__head { padding: 10px 18px 0; gap: 8px; display: block; }
  .explode__title { font-size: 26px; margin-top: 4px; }
  .explode__sub { display: none; }
  .explode__meta {
    text-align: left;
    margin-top: 6px;
    font-size: 10.5px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .explode__meta div + div { margin-top: 0; }
  .explode__meta div:first-child { display: none; }

  .asm__label { display: none; }
  .asm__num { display: block; }
  .explode__caption { display: block; }
  /* Annotations that sit outside the cropped frame, or are too small to read
     once the drawing is phone-sized. */
  .fade-early, .fade-mid, .dwg-aside, .dwg-titleblock { display: none; }

  .explode__hint { bottom: 68px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.18em; }
}

/* Landscape phones and anything genuinely too short to pin: static drawing. */
@media (max-height: 450px) {
  .explode { height: auto; }
  .explode__stage { position: static; height: auto; padding: 24px 0 40px; display: block; }
  .explode__head { position: static; top: auto; padding: 0 clamp(20px, 5vw, 40px) 8px; display: block; }
  .explode__meta { text-align: left; margin-top: 14px; }
  .explode__drawing { height: auto; width: 100%; max-width: 100%; margin: 8px auto 0; max-height: none; }
  .explode__hint, .explode__progress, .explode__grid, .explode__caption { display: none; }
  .asm, .fan-blades { transform: none; }
  .asm__label { display: block; opacity: 1; }
  .asm__num { display: none; }
  .fade-early, .fade-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .explode { height: auto; }
  .explode__stage { position: static; height: auto; padding: 24px 0 40px; display: block; }
  .explode__head { position: static; top: auto; padding: 0 clamp(20px, 5vw, 40px) 8px; display: block; }
  .explode__meta { text-align: left; margin-top: 14px; }
  .explode__drawing { height: auto; width: 100%; max-width: 100%; margin: 8px auto 0; max-height: none; }
  .explode__hint, .explode__progress, .explode__grid, .explode__caption { display: none; }
  .asm, .fan-blades { transform: none; }
  .asm__label { display: block; opacity: 1; }
  .asm__num { display: none; }
  .fade-early, .fade-mid { display: none; }
}

/* ── Bridge CTA under the drawing ────────────────────────────────────────── */
.bridge {
  background: var(--navy);
  border-top: 1px solid rgba(111, 159, 221, 0.25);
  padding: 26px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}
.bridge p {
  margin: 0;
  font: 400 14px/1.5 var(--sans);
  color: rgba(233, 238, 248, 0.7);
  max-width: 60ch;
  text-align: center;
}

/* ── Service cards ───────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 24px 22px 26px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, color .15s;
  position: relative;
}
.card:hover { background: var(--navy); color: var(--paper); }

.card__top {
  display: flex;
  justify-content: space-between;
  font: 500 13px var(--mono);
  letter-spacing: 0.1em;
  color: inherit;
}
.card__ref { color: var(--blue); }
.card:hover .card__ref { color: var(--accent); }

.card__title {
  display: block;
  font: 600 27px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.card__desc {
  display: block;
  margin-top: 10px;
  font: 400 14.5px/1.55 var(--sans);
  opacity: 0.72;
}

.card__flag {
  position: absolute;
  top: -1.5px;
  right: -1.5px;
  background: var(--accent);
  color: var(--ink);
  font: 600 10px var(--mono);
  letter-spacing: 0.14em;
  padding: 5px 9px;
  border: 1.5px solid var(--ink);
}

/* ── Split section (About / generic image + copy) ────────────────────────── */
.split { border-bottom: 1px solid var(--rule); }
.split__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  align-items: stretch;
}
.split__figure {
  position: relative;
  min-height: min(70vw, 460px);
  background: var(--navy);
  border-right: 1px solid var(--rule-soft);
}
.split__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split__copy {
  padding: clamp(44px, 5vw, 80px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__title {
  margin: 10px 0 0;
  font: 600 clamp(40px, 4.6vw, 66px)/0.95 var(--display);
  text-transform: uppercase;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 36px;
  border-top: 1.5px solid var(--ink);
}
.stats > div { padding: 16px 18px 0; border-left: 1px solid var(--rule); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats__n { font: 600 44px/1 var(--display); }
.stats__n em { color: var(--accent); font-style: normal; }
.stats__k {
  font: 400 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-top: 6px;
}

/* ── Numbered list (Why us / process) ────────────────────────────────────── */
.numlist { border-top: 1.5px solid var(--ink); }
.numlist__row {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 120px) 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.numlist__n {
  font: 600 34px/1 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.numlist__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 8px 40px;
  align-items: baseline;
}
.numlist__body h3 { margin: 0; font: 600 26px/1.05 var(--display); text-transform: uppercase; }
.numlist__body p { margin: 0; font: 400 15.5px/1.6 var(--sans); color: rgba(22, 24, 29, 0.72); }

/* ── Work gallery ────────────────────────────────────────────────────────── */
.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 22px;
  align-items: stretch;
}
.work figure { margin: 0; position: relative; border: 1.5px solid var(--ink); background: var(--navy); display: flex; flex-direction: column; }
.work figure img { width: 100%; display: block; }
.work__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.work__stack img { flex: 1; min-height: 0; object-fit: cover; }
.work__lead img { aspect-ratio: 3 / 2; object-fit: cover; }
.work figcaption {
  background: var(--navy);
  color: rgba(233, 238, 248, 0.85);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 11.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.work__stack figcaption { padding: 11px 16px; font-size: 11px; }
.work__flag {
  position: absolute;
  top: 0; left: 0;
  background: var(--accent);
  color: var(--ink);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

/* ── Big CTA ─────────────────────────────────────────────────────────────── */
.cta {
  background: var(--navy);
  color: #e9eef8;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta__eyebrow {
  font: 500 12px var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(233, 238, 248, 0.6);
}
.cta__title {
  margin: 20px auto 0;
  font: 600 clamp(52px, 7vw, 120px)/0.95 var(--display);
  text-transform: uppercase;
  max-width: 12ch;
  text-wrap: balance;
}
.cta__title em { color: var(--accent); font-style: normal; }
.cta__phone {
  display: inline-block;
  margin-top: 34px;
  font: 600 clamp(30px, 4vw, 54px)/1 var(--display);
  letter-spacing: 0.06em;
  color: #e9eef8;
  text-decoration: none;
  transition: color .15s;
}
.cta__phone:hover { color: var(--accent); }
.cta__actions { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(44px, 5vw, 72px) var(--gutter) 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 36px 44px;
}
.footer__blurb { margin: 18px 0 0; font: 400 14px/1.65 var(--sans); color: var(--ink-70); max-width: 32ch; }
.footer__h {
  font: 500 11px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.footer__body { font: 400 14.5px/1.7 var(--sans); color: rgba(22, 24, 29, 0.78); }
.footer__body a { color: rgba(22, 24, 29, 0.78); text-decoration: underline; text-underline-offset: 3px; }
.footer__body a.strong { color: var(--ink); text-decoration: none; font-weight: 600; }
.footer__base {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  font: 400 10.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(22, 24, 29, 0.5);
}
.footer__base a { color: inherit; }
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Services page ───────────────────────────────────────────────────────── */
.pagehead {
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pagehead__ref {
  font: 400 10.5px var(--mono);
  letter-spacing: 0.2em;
  color: rgba(22, 24, 29, 0.42);
  margin-bottom: 18px;
}
.pagehead__title {
  margin: 10px 0 0;
  font: 600 clamp(52px, 7.4vw, 116px)/0.92 var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}
.pagehead__lede { margin: 24px 0 0; font: 400 17px/1.65 var(--sans); color: rgba(22, 24, 29, 0.78); max-width: 60ch; }

.svc {
  display: grid;
  grid-template-columns: clamp(70px, 9vw, 150px) 1fr;
  gap: 20px 24px;
  padding: clamp(30px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rule);
}
.svc:last-child { border-bottom: 0; }
.svc__ref {
  font: 500 13px var(--mono);
  letter-spacing: 0.12em;
  color: var(--blue);
}
.svc__ref span {
  display: block;
  margin-top: 10px;
  font: 600 42px/1 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.svc__title { margin: 0; font: 600 clamp(30px, 3.4vw, 46px)/1 var(--display); text-transform: uppercase; }
.svc__desc { margin: 14px 0 0; font: 400 16px/1.65 var(--sans); color: rgba(22, 24, 29, 0.78); max-width: 62ch; }
.svc__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px 28px;
}
.svc__list li {
  font: 400 14.5px/1.5 var(--sans);
  color: var(--ink-70);
  padding-left: 20px;
  position: relative;
}
.svc__list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.svc__flag {
  display: inline-block;
  margin-bottom: 12px;
  background: var(--accent);
  color: var(--ink);
  font: 600 10px var(--mono);
  letter-spacing: 0.14em;
  padding: 5px 9px;
  border: 1.5px solid var(--ink);
  text-transform: uppercase;
}

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.areas > div {
  padding: 20px 22px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.areas__k {
  font: 500 11px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.areas__v { margin-top: 10px; font: 400 15px/1.6 var(--sans); color: rgba(22, 24, 29, 0.78); }

/* ── Contact page ────────────────────────────────────────────────────────── */
/* Phone is the conversion path for a trade business, so it gets its own band
   rather than competing with three equal-weight cards. */
.contact-lead {
  background: var(--navy);
  color: #e9eef8;
  border: 1.5px solid var(--ink);
  padding: clamp(28px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px 48px;
  align-items: center;
}
.contact-lead__k {
  font: 500 11px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-lead__num {
  display: inline-block;
  margin-top: 14px;
  font: 600 clamp(40px, 5.4vw, 76px)/1 var(--display);
  letter-spacing: 0.04em;
  color: #e9eef8;
  text-decoration: none;
  transition: color .15s;
}
.contact-lead__num:hover { color: var(--accent); }
.contact-lead__note {
  margin: 0;
  font: 400 16px/1.7 var(--sans);
  color: rgba(233, 238, 248, 0.72);
  max-width: 44ch;
}
.contact-lead__hours {
  margin-top: 14px;
  font: 500 12px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 238, 248, 0.9);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
  margin-top: 22px;
}
.contact-card {
  padding: clamp(26px, 3vw, 40px);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-card__k {
  font: 500 11px var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.contact-card__v {
  font: 600 clamp(24px, 2.6vw, 34px)/1.1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Long unbroken strings (the gmail address) must wrap inside the card
     rather than spill over the border into the next one. */
  overflow-wrap: anywhere;
}
.contact-card__v a { color: var(--ink); text-decoration: none; }
.contact-card__v a:hover { color: var(--blue); }

/* An email address is not display copy, set it as text, at a size that fits. */
.contact-card__v--email {
  font: 600 clamp(15px, 1.35vw, 19px)/1.45 var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.contact-card__v--email a { text-decoration: underline; text-underline-offset: 4px; }

.contact-card__note { margin: 0; font: 400 15px/1.6 var(--sans); color: var(--ink-70); }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 15.5px/1.4 var(--sans);
  color: rgba(22, 24, 29, 0.78);
}
.hours th {
  font: 500 11.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  width: 40%;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours td.closed { color: var(--ink-55); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 10vw, 140px) var(--gutter);
  gap: 18px;
}
.notfound h1 { margin: 0; font: 600 clamp(72px, 14vw, 200px)/0.9 var(--display); }