@charset "utf-8";

/* ============================================================
   Clear Ground Excavations
   Design system + page styles
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@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: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.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');
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --ink: #12100e;
  --ink-deep: #0b0a09;
  --ink-raised: #1d1a17;
  --bone: #f6f4f0;
  --bone-2: #eae6df;
  --paper: #ffffff;

  /* Accent — safety yellow */
  --hi: #ffd400;
  --hi-bright: #ffe14d;
  --hi-ink: #7a5f00; /* 5.5:1 on --bone */

  /* Text on light */
  --text: #12100e;   /* 15.9:1 */
  --text-2: #4a4643; /*  8.5:1 */
  --text-3: #6b6763; /*  5.1:1 */

  /* Text on dark */
  --on-dark: #f6f4f0;   /* 17.4:1 */
  --on-dark-2: #b8b2a9; /*  9.1:1 */
  --on-dark-3: #8f8880; /*  5.5:1 */

  /* Hairlines */
  --rule: rgba(18, 16, 14, 0.14);
  --rule-soft: rgba(18, 16, 14, 0.08);
  --rule-dark: rgba(246, 244, 240, 0.16);
  --rule-dark-soft: rgba(246, 244, 240, 0.09);

  /* Depth — every shadow carries offset + blur */
  --shadow-sm: 0 1px 2px rgba(18, 16, 14, 0.08), 0 2px 6px rgba(18, 16, 14, 0.06);
  --shadow-md: 0 4px 10px rgba(18, 16, 14, 0.10), 0 12px 28px rgba(18, 16, 14, 0.10);
  --shadow-lg: 0 10px 24px rgba(18, 16, 14, 0.14), 0 28px 60px rgba(18, 16, 14, 0.16);

  /* Geometry — squared off, industrial */
  --r-sm: 2px;
  --r-md: 3px;

  /* Layout */
  --page: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 220ms;

  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font: 400 1.0625rem/1.6 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, not `hidden`: hidden makes body a scroll container and breaks
     the sticky header. Safety net only — nothing should overflow. */
  overflow-x: clip;
}

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

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* The attribute must beat any `display` a component sets. */
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 3px solid var(--hi);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-ink :focus-visible { outline-color: var(--hi); }

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

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

/* ---------- Typography ---------- */
h1, h2 {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.25rem); line-height: 0.92; }
h2 { font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem); }

h3 {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.on-ink .lede { color: var(--on-dark-2); }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bone-2); }
.lede-under { margin-top: 1rem; }

.on-ink { background: var(--ink); color: var(--on-dark); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--on-dark); }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--hi);
  color: var(--ink);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--t-base) var(--ease-out);
}
.skip:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Icons ---------- */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color var(--t-fast) ease,
              border-color var(--t-fast) ease,
              color var(--t-fast) ease,
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) ease;
}
.btn:active { transform: translateY(1px); }

.btn-hi { background: var(--hi); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-hi:hover { background: var(--hi-bright); box-shadow: var(--shadow-md); }

.btn-ink { background: var(--ink); color: var(--hi); box-shadow: var(--shadow-sm); }
.btn-ink:hover { background: var(--ink-raised); box-shadow: var(--shadow-md); }

.btn-ghost { border-color: var(--rule); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(18, 16, 14, 0.04); }

.on-ink .btn-ghost { border-color: var(--rule-dark); color: var(--on-dark); }
.on-ink .btn-ghost:hover { border-color: var(--hi); color: var(--hi); background: rgba(255, 212, 0, 0.08); }

.btn-lg { padding: 1.15rem 1.85rem; font-size: 1.125rem; }
.btn-block { width: 100%; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 38px;
  padding-block: 0.5rem;
}
.topbar-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-dark);
}
.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hi);
  flex: none;
}
.topbar-aux {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.topbar-fb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 26px;
  padding-block: 0.2rem;
  color: var(--hi);
  transition: color var(--t-fast) ease;
}
.topbar-fb:hover { color: var(--hi-bright); }

@media (max-width: 860px) {
  .topbar-aux .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .topbar { font-size: 0.75rem; }
  /* Label drops out, so keep the icon a real target — the link carries an
     aria-label for its accessible name. */
  .topbar-fb span { display: none; }
  .topbar-fb { min-width: 30px; justify-content: center; }
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.header[data-stuck='true'] {
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  flex: none;
}
.brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.brand-sub {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-block: 0.35rem;
  transition: color var(--t-fast) ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav a:hover { color: var(--text); }
/* Any aria-current: the scroll spy writes "true", the current-path pass writes
   the more correct "page". Both mean the same thing to this rule. */
.nav a:hover::after,
.nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--text); }

.header-cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--ink);
  color: var(--hi);
  padding: 0.8rem 1.15rem;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  transition: background-color var(--t-fast) ease;
}
.header-call:hover { background: var(--ink-raised); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text);
}
.burger .ico { width: 22px; height: 22px; }
.burger .ico-close { display: none; }
.burger[aria-expanded='true'] .ico-open { display: none; }
.burger[aria-expanded='true'] .ico-close { display: block; }

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .burger { display: inline-flex; }
  .header-call span.num { display: none; }
  .header-call { padding: 0.8rem 0.95rem; }
}
@media (max-width: 420px) {
  .brand-sub { letter-spacing: 0.22em; }
  .brand-mark { width: 38px; height: 38px; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: 1fr;
  background: rgba(11, 10, 9, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}
.drawer[data-open='true'] { opacity: 1; pointer-events: auto; }
.drawer-panel {
  background: var(--bone);
  padding: 1.25rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-self: start;
  width: 100%;
  transform: translateY(-14px);
  transition: transform var(--t-base) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.drawer[data-open='true'] .drawer-panel { transform: translateY(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: 0.75rem;
}
.drawer a.drawer-link[aria-current] { color: var(--hi); }
.drawer a.drawer-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-actions { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--ink);
  color: var(--on-dark);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.25rem, 4vw, 3.5rem)
           clamp(2.75rem, 5.5vw, 5rem) max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
}
.hero-flag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 212, 0, 0.13);
  color: var(--hi);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: 1.15rem; }
.hero h1 .hl { color: var(--hi); display: block; }
.hero .lede { margin-bottom: 2rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}
.hero-facts div { min-width: 7.5rem; }
.hero-facts dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.hero-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--on-dark-3);
}

.hero-media { position: relative; background: var(--ink-deep); min-height: 420px; }
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 58%;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(97deg, rgba(18, 16, 14, 0.72) 0%, rgba(18, 16, 14, 0.12) 38%, rgba(18, 16, 14, 0) 62%);
  pointer-events: none;
}
.hero-note {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 1;
  max-width: 17.5rem;
  background: rgba(11, 10, 9, 0.86);
  backdrop-filter: blur(8px);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.hero-note strong { display: block; font-size: 0.9375rem; line-height: 1.25; }
.hero-note span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--on-dark-3);
}

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy {
    order: 2;
    padding: clamp(2rem, 7vw, 3rem) var(--gutter) clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero-media { order: 1; aspect-ratio: 4 / 3; min-height: 0; }
  .hero-media img { object-position: 52% 55%; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(18, 16, 14, 0.35) 0%, rgba(18, 16, 14, 0) 40%, rgba(18, 16, 14, 0.55) 100%);
  }
}
@media (max-width: 560px) {
  .hero-media { aspect-ratio: 1 / 1; }
  .hero-note { max-width: none; right: clamp(1rem, 2vw, 1.75rem); }
}

/* ============================================================
   Assurance strip
   ============================================================ */
.strip {
  background: var(--hi);
  color: var(--ink);
}
.strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
}
.strip-lead {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.strip li { display: inline-flex; align-items: center; gap: 0.45rem; }
.strip .ico { width: 1.05em; height: 1.05em; stroke-width: 2.5; }

/* ============================================================
   Section headers
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 1.25rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head p { color: var(--text-2); text-wrap: pretty; max-width: 44ch; }
.on-ink .sec-head p { color: var(--on-dark-2); }
@media (max-width: 800px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
}

/* ============================================================
   Capability band + list  (services)
   ============================================================ */
/* Already a direct child of a full-width .section, so no 100vw breakout —
   100vw includes the scrollbar and would push the page sideways. */
.band {
  position: relative;
  width: 100%;
  background: var(--ink-deep);
  overflow: hidden;
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band-wide { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .band-wide { aspect-ratio: 4 / 3; } }
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0.3) 0%, rgba(18, 16, 14, 0) 45%, rgba(18, 16, 14, 0.42) 100%);
}
.band-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(1rem, 3vw, 2rem) 0;
}
.band-caption .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  color: var(--on-dark);
}
.band-caption strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.band-caption span { font-size: 0.9375rem; color: var(--on-dark-2); }

.caps { border-top: 1px solid var(--rule); }
.cap {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-base) ease;
}
.cap:hover { background: rgba(18, 16, 14, 0.025); }
.cap-title { display: flex; align-items: baseline; gap: 0.85rem; }
.cap-title h3 { max-width: 14ch; }
.cap-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  transition: background-color var(--t-base) ease;
}
.cap:hover .cap-rule { background: var(--hi); }
.cap-body p { color: var(--text-2); text-wrap: pretty; max-width: 56ch; }
.cap-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.cap-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
}
.cap-points .ico { width: 0.95em; height: 0.95em; stroke-width: 2.75; color: var(--hi-ink); }

@media (max-width: 800px) {
  .cap { grid-template-columns: 1fr; gap: 0.85rem; }
  .cap-title h3 { max-width: none; }
}

/* ============================================================
   Process
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.process-intro p { margin-bottom: 1.75rem; }
.steps { display: grid; gap: 1px; background: var(--rule-dark-soft); }
.step {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  align-items: start;
  background: var(--ink);
  padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(0.25rem, 1.5vw, 1.4rem);
  transition: background-color var(--t-base) ease;
}
.step:hover { background: var(--ink-raised); }
.step-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 0.8;
  color: var(--hi);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--on-dark-3); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }

@media (max-width: 860px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Work — comparison sliders
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; } }

.compare { display: flex; flex-direction: column; }
.compare-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bone-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.compare-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* The "after" layer is clipped from the left edge to the handle position. */
.compare-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos, 50%));
  will-change: clip-path;
}
.compare-tag {
  position: absolute;
  top: 0.7rem;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.tag-before { left: 0.7rem; background: rgba(11, 10, 9, 0.88); color: var(--on-dark); }
.tag-after { right: 0.7rem; background: var(--hi); color: var(--ink); }

.compare-line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--hi);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(11, 10, 9, 0.35);
}
.compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--hi);
  color: var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}
.compare-knob .ico { width: 22px; height: 22px; stroke-width: 2.25; }

/* Native range input drives the interaction — keyboard + pointer for free. */
.compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.compare-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.compare-range::-moz-range-thumb { width: 46px; height: 999px; border: 0; opacity: 0; }
.compare-frame:has(.compare-range:focus-visible) {
  outline: 3px solid var(--hi);
  outline-offset: 3px;
}

.compare figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.9rem;
}
.compare figcaption strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.compare figcaption span { font-size: 0.9375rem; color: var(--text-3); }

/* Supporting proof shots */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 620px) { .proof-grid { grid-template-columns: 1fr; } }
.proof {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--bone-2);
  aspect-ratio: 4 / 3;
}
.proof img { width: 100%; height: 100%; object-fit: cover; }
.proof figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  background: linear-gradient(transparent, rgba(11, 10, 9, 0.88));
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ============================================================
   Service area
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .areas-grid { grid-template-columns: 1fr; } }

.suburbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.suburbs li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
}
.suburbs li.is-base {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--hi);
}

.map-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--bone-2);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* A bone halo keeps labels legible wherever they cross a road or park. */
.map-label {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 600;
  stroke: #f6f4f0;
  stroke-width: 5;
  stroke-opacity: 0.85;
  paint-order: stroke;
  stroke-linejoin: round;
  /* Sizes live here, not on the SVG, so they can grow with the card.
     Units are viewBox units (the overlay is 1000 wide). */
  font-size: 28px;
}
.map-label.is-sm { font-size: 25px; }

/* Once the card drops to roughly a third of a phone screen, labels set for
   desktop render at ~9px. Scale them up so they stay readable. */
@media (max-width: 880px) {
  .map-label { font-size: 38px; stroke-width: 6.5; }
  .map-label.is-sm { font-size: 33px; }
  /* The base badge is plate + text, so it scales as a unit rather than
     restyling the type, anchored at the edge that meets the marker. */
  .map-badge { transform: scale(1.35); }
}
.map-badge {
  transform-box: view-box;
  transform-origin: 475px 500px;
}
.map-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.2rem 0.45rem;
  background: rgba(246, 244, 240, 0.86);
  border-top-left-radius: var(--r-sm);
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--text-3);
}
.map-credit a { text-decoration: underline; text-underline-offset: 2px; }
.map-credit a:hover { color: var(--text); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.call-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--hi);
  color: var(--ink);
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-md);
  margin-block: 1.75rem 0.75rem;
  box-shadow: var(--shadow-md);
  transition: background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.call-card:hover { background: var(--hi-bright); transform: translateY(-2px); }
.call-card .ico { width: 26px; height: 26px; stroke-width: 2; }
.call-card small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.72;
}
.call-card strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.875rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}

.contact-alt { display: grid; gap: 0.6rem; }
.contact-alt a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.contact-alt a:hover { border-color: var(--hi); background: rgba(255, 212, 0, 0.07); }
.contact-alt .ico { color: var(--hi); }
.contact-alt span { min-width: 0; overflow-wrap: anywhere; }

.hours {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--on-dark-2);
}
.hours div { display: flex; justify-content: space-between; gap: 1rem; }
.hours dt { color: var(--on-dark-3); }

/* A light card inside a dark section must opt out of .on-ink's inherited
   colours, or its text lands bone-on-bone. Declared after every .on-ink
   rule so equal specificity resolves this way. */
.surface-light { color: var(--text); }
.surface-light h1,
.surface-light h2,
.surface-light h3 { color: var(--text); }
.surface-light p,
.surface-light .lede { color: var(--text-2); }
.surface-light .btn-ghost {
  border-color: var(--rule);
  color: var(--text);
  background: transparent;
}
.surface-light .btn-ghost:hover {
  border-color: var(--ink);
  color: var(--text);
  background: rgba(18, 16, 14, 0.04);
}

/* Message builder */
.builder {
  background: var(--bone);
  color: var(--text);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.builder h3 { margin-bottom: 0.4rem; }
.builder > p { color: var(--text-2); font-size: 0.9375rem; margin-bottom: 1.5rem; }

.field { margin-bottom: 1.15rem; }
.field > label,
.field > legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.55rem;
  padding: 0;
}
.field fieldset { border: 0; padding: 0; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--hi);
}
.chip input:focus-visible + span { outline: 3px solid var(--hi); outline-offset: 3px; }

.input,
.textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-3); }
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.45);
}
.textarea { resize: vertical; min-height: 5.5rem; }

.builder-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 460px) { .builder-actions { grid-template-columns: 1fr; } }
.builder-foot {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-3);
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink-deep); color: var(--on-dark-3); }
.footer .wrap { padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
/* Columns are weighted, not equal. Contact carries a 32-character email address
   and Hours carries "Sat 7am–4pm" — giving them the same width wastes space on
   one and starves the other. */
.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule-dark-soft);
}
@media (max-width: 1040px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
  }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer h2, .footer h3 { color: var(--on-dark); }
.footer-brand h2 { font-size: 1.375rem; letter-spacing: 0.055em; }
.footer-brand p { font-size: 0.9375rem; line-height: 1.55; max-width: 34ch; margin-top: 0.75rem; }
.footer-col h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--hi);
  margin-bottom: 0.9rem;
}
/* Keep every footer row a real tap target (WCAG 2.5.8 wants ≥24px). */
.footer-col ul { display: grid; gap: 0.1rem; font-size: 0.9375rem; }
.footer-col li { display: flex; align-items: center; min-height: 30px; min-width: 0; }
/* `min-width: 0` matters: these are flex items, and a flex item defaults to
   min-width:auto, which means it refuses to shrink below its content and spills
   into the next column instead. `anywhere` (not `break-word`) because only
   `anywhere` also shrinks the intrinsic min-content width the grid measures. */
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color var(--t-fast) ease;
}
.footer-col a:hover { color: var(--hi); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 1.25rem;
  font-size: 0.8125rem;
}
/* Build credit: quieter than the copyright beside it, and it should stay that
   way — it is an attribution, not a third call to action. */
.footer-credit { color: var(--on-dark-3); }
/* Underline rather than border-bottom, because the 24px tap target (WCAG 2.5.8,
   as elsewhere in this footer) needs a taller box than the text — and a border
   would sit at the bottom of that box, detached from the word it belongs to.
   A text-decoration stays with the text. */
.footer-credit a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--on-dark-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-dark);
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease;
}
.footer-credit a:hover { color: var(--hi); text-decoration-color: var(--hi); }

/* ============================================================
   Sticky mobile call bar
   ============================================================ */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(18, 16, 14, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule-dark);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out);
}
.callbar[data-show='true'] { transform: translateY(0); }
.callbar .btn { flex: 1; padding: 0.85rem 1rem; font-size: 1rem; }
@media (max-width: 760px) { .callbar { display: flex; } body { padding-bottom: 0; } }

/* ============================================================
   The one authored motion moment:
   on first view each comparison knob sweeps once to teach the drag.
   ============================================================ */
@keyframes revealSweep {
  0%   { --pos: 50%; }
  38%  { --pos: 74%; }
  100% { --pos: 50%; }
}
@property --pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
.compare-frame[data-teach='true'] {
  animation: revealSweep 2200ms var(--ease-out) 1;
}
@media (prefers-reduced-motion: reduce) {
  .compare-frame[data-teach='true'] { animation: none; }
}

/* ============================================================
   Sub-pages: services, insights, articles, 404
   Everything below is used by the pages tools/build-pages.mjs writes.
   ============================================================ */

/* ---------- The hero kicker, now living inside the h1 ----------
   It has to shed almost everything the h1 sets: the condensed display face,
   the 0.92 line-height and the negative tracking would all mangle it. */
.hero h1 .hero-flag {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.13em;
  text-wrap: wrap;
  display: flex;
  width: fit-content;
  max-width: 100%;
}

/* ---------- Inline "more" links ---------- */
.sec-link,
.cap-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--hi-ink);
  border-bottom: 1px solid rgba(122, 95, 0, 0.35);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.sec-link:hover,
.cap-link:hover { color: var(--text); border-bottom-color: var(--text); }
.sec-link .ico,
.cap-link .ico { width: 1em; height: 1em; stroke-width: 2.5; }
.on-ink .sec-link { color: var(--hi); border-bottom-color: rgba(255, 212, 0, 0.4); }
.on-ink .sec-link:hover { color: var(--hi-bright); border-bottom-color: var(--hi-bright); }

.cap-link { margin-top: 1rem; font-size: 0.9375rem; }
.cap-title h3 a { transition: color var(--t-fast) ease; }
.cap-title h3 a:hover { color: var(--hi-ink); }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.faq-item {
  background: var(--bone);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.section-alt .faq-item { background: var(--bone-2); }
.faq-item h3 { max-width: 22ch; }
.faq-a { color: var(--text-2); text-wrap: pretty; }
.faq-a p + p { margin-top: 0.75rem; }
.faq-a a {
  color: var(--hi-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(122, 95, 0, 0.35);
}
.faq-a a:hover { color: var(--text); border-bottom-color: var(--text); }
@media (max-width: 760px) {
  .faq-item { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs { background: var(--ink); color: var(--on-dark-3); }
.crumbs .wrap { padding-top: 1.25rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.65rem; }
.crumbs li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.crumbs a { transition: color var(--t-fast) ease; }
.crumbs a:hover { color: var(--hi); }
.crumbs [aria-current='page'] { color: var(--on-dark); }

/* ---------- Page head ---------- */
.page-head { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.crumbs + .page-head { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.page-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255, 212, 0, 0.13);
  color: var(--hi);
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.page-head h1 { max-width: 20ch; }
.page-head h1 .hl { color: var(--hi); display: block; }
.page-head .lede { margin-top: 1.25rem; max-width: 58ch; }
.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.8125rem;
  color: var(--on-dark-3);
}
.page-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- Prose ----------
   Measure is capped well below the 1240px page: long lines are the fastest
   way to make a page nobody finishes reading. */
.prose-wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.prose { max-width: 68ch; }

/* Hub and 404 pages are mostly card grids, which want the full page width.
   The prose measure moves onto the text children instead, so paragraphs stay
   readable while the grids spread. */
.prose-wide { max-width: none; }
.prose-wide > p,
.prose-wide > h2,
.prose-wide > h3,
.prose-wide > ul,
.prose-wide > ol,
.prose-wide > dl,
.prose-wide > .callout { max-width: 68ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose p { color: var(--text-2); text-wrap: pretty; }
.prose h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.prose h3 { margin-top: 2rem; }
.prose h2 + *, .prose h3 + * { margin-top: 0.85rem; }
.prose strong { color: var(--text); font-weight: 700; }
.prose em { font-style: italic; }
.prose a:not(.btn) {
  color: var(--hi-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(122, 95, 0, 0.35);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.prose a:not(.btn):hover { color: var(--text); border-bottom-color: var(--text); }

.prose-lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text) !important;
  border-left: 3px solid var(--hi);
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
}
.prose-note {
  font-size: 0.875rem;
  color: var(--text-3) !important;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 2.5rem;
}

/* Fallback for plain lists, if prose ever gets written without a helper class */
.prose > ul:not([class]),
.prose > ol:not([class]) { padding-left: 1.4rem; color: var(--text-2); }
.prose > ul:not([class]) { list-style: disc; }
.prose > ol:not([class]) { list-style: decimal; }
.prose > ul:not([class]) li,
.prose > ol:not([class]) li { margin-top: 0.45rem; }

/* ---------- Figure ---------- */
.page-figure { margin-bottom: 2rem; }
.page-figure picture { display: block; background: var(--bone-2); border-radius: var(--r-md); overflow: hidden; }
.page-figure img { width: 100%; }
.page-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-3);
  text-wrap: pretty;
}

/* ---------- Callout ---------- */
.callout {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: var(--r-md);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-sm);
}
.callout > * + * { margin-top: 0.75rem; }
.callout h3 { font-size: 1.25rem; margin-top: 0; }
.callout p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }
.callout-warn { border-left-color: var(--hi); }
.callout .spec { margin-top: 0.9rem; }
.callout .spec div { padding-block: 0.6rem; }

/* ---------- Spec list ---------- */
.spec { display: grid; border-top: 1px solid var(--rule); }
.spec div {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--text);
}
.spec dd { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.spec-tight dt { font-size: 1rem; }
@media (max-width: 640px) {
  .spec div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- Checklists ---------- */
.checklist { display: grid; gap: 0.7rem; }
.checklist li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2.5px solid var(--hi-ink);
  border-bottom: 2.5px solid var(--hi-ink);
  transform: translateY(-50%) rotate(-45deg);
}
/* The "we can't take this" list. A tick would be actively misleading. */
.checklist-no li::before {
  width: 0.72rem;
  height: 0;
  border-left: 0;
  border-bottom: 2.5px solid var(--text-3);
  transform: translateY(-50%);
}

/* ---------- Numbered steps ---------- */
.steps-num { counter-reset: step; display: grid; gap: 1.5rem; }
.steps-num > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
}
.steps-num > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--hi);
  border-radius: var(--r-sm);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.steps-num h3 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.steps-num p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Service cards ---------- */
/* Deliberately 2x2 rather than auto-fit: there are four services and four is
   the whole pitch. A 3+1 row makes the fourth look like an afterthought. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  transition: background var(--t-fast) ease;
}
.svc-card:hover { background: var(--bone); }
.svc-card h2,
.svc-card h3 {
  font-size: 1.375rem;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}
.svc-card p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); margin: 0; }
.svc-points {
  display: grid;
  gap: 0.3rem;
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--text-3);
}
.svc-points li { position: relative; padding-left: 0.85rem; }
.svc-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  background: var(--hi-ink);
}
.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.svc-more .ico { width: 1em; height: 1em; stroke-width: 2.5; transition: transform var(--t-base) var(--ease-out); }
.svc-card:hover .svc-more .ico { transform: translateX(4px); }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Insight cards ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: background var(--t-fast) ease;
}
.post-card:hover { background: var(--bone); }
.post-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hi-ink);
}
.post-card h2 {
  font-size: 1.5rem;
  line-height: 1;
  margin: 0.7rem 0 0;
  padding: 0;
  border: 0;
}
.post-card h2 .hl { display: block; }
.post-card p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0.7rem 0 0;
  text-wrap: pretty;
}
.post-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.post-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.post-more .ico { width: 1em; height: 1em; stroke-width: 2.5; transition: transform var(--t-base) var(--ease-out); }
.post-card:hover .post-more .ico { transform: translateX(4px); }

/* ---------- Related ---------- */
.rel-h {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 1.5rem;
}
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.rel-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.rel-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hi-ink);
}
.rel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}
.rel-title .hl { display: block; }
.rel-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-3);
}
.rel-more .ico { width: 1em; height: 1em; stroke-width: 2.5; transition: transform var(--t-base) var(--ease-out); }
.rel-card:hover .rel-more .ico { transform: translateX(4px); }

/* ---------- Page CTA ---------- */
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 900px) {
  .cta-inner { grid-template-columns: 1fr; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .header, .callbar, .drawer, .builder-actions, .compare-range,
  .crumbs, .cta, .rel-grid { display: none !important; }
  body { background: #fff; color: #000; }
  .on-ink, .hero, .footer, .page-head { background: #fff !important; color: #000 !important; }
  .on-ink h1, .on-ink h2, .on-ink h3, .footer h3, .page-head h1 { color: #000 !important; }
  .page-head h1 .hl, .hero h1 .hl { color: #000 !important; }
  .prose { max-width: none; }
}