/* =====================================================================
   HERITAGE SKYLIGHTS OXFORD — Design System
   Ported wholesale from the delivered Aspect Cheltenham system: same layout,
   spacing, radii, shadows, grids and components. ONLY the tokens differ.

   Oxford Blue + Oxford Yellow. Zodiak / Switzer.
   Mobile-first. Built ONCE here; every page inherits it.

   CONTRAST NOTE, and the reason this is not a straight find-and-replace:
   Aspect's brass (#BD8B3C) is dark enough to serve as text on light and as a
   button fill under white text. Oxford Yellow (#FFE500) does neither. Yellow
   text on paper is 1.28:1 and is banned by rule in STYLE-GUIDE.md. So yellow
   is DECORATIVE here (rules, borders, marks, fills under ink), and every
   brass-as-text usage is remapped to Oxford Blue.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (STYLE-GUIDE.md) */
  --slate:        #002147;  /* Oxford Blue, primary */
  --slate-700:    #0B3161;  /* navy soft */
  --slate-900:    #00152E;  /* navy deep */
  --brass:        #FFE500;  /* Oxford Yellow — DECORATIVE ONLY (rules, borders, marks) */
  --brass-cta:    #FFE500;  /* button fill; label is INK, never white */
  --brass-600:    #002147;  /* what Aspect used as brass TEXT. Yellow cannot: use navy */
  --daylight:     #8FA8C4;  /* soft secondary */
  --daylight-100: #E7EEF5;

  /* Neutrals */
  --white:    #FFFFFF;
  --paper:    #F5F7F9;  /* page bg */
  --paper-2:  #EDF1F5;  /* alt section bg */
  --ink:      #141A21;  /* body text — never pure black */
  --heading:  #002147;
  --muted:    #5B6672;
  --hairline: #E3E7EC;

  /* Semantic */
  --success: #2E7D5B;
  --warning: #C9942A;
  --danger:  #B23A2E;

  /* Type */
  --font-display: "Zodiak", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing / layout */
  --container: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,21,46,.06), 0 2px 8px rgba(0,21,46,.05);
  --shadow-md: 0 8px 30px rgba(0,21,46,.10);
  --shadow-lg: 0 24px 60px rgba(0,21,46,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--slate); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brass); }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.08;
  font-weight: 540;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p { max-width: 68ch; }
.eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-600);
  display: inline-block;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--slate-700); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
}
.section { padding-block: clamp(56px, 9vw, 120px); }
.section--paper2 { background: var(--paper-2); }
.section--slate { background: var(--slate); color: #d8e2e7; }
.section--slate h2, .section--slate h3 { color: #fff; }
.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.center { text-align: center; }
/* Compact hero (contact page) */
.page-hero--tight { padding-block: clamp(24px, 4vw, 44px) !important; }
.page-hero--tight .container { padding-block: 0; }
/* Contact page — contact-point cards + coverage map */
.contact-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 14px; background: #fff; border: 1px solid var(--daylight-100, #e7ecea); box-shadow: 0 6px 20px rgba(21,50,63,.06); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,50,63,.12); }
.contact-card svg { color: var(--slate); }
.contact-card__k { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #5a6b73); margin-top: 6px; }
.contact-card__v { font-weight: 600; font-size: 1.05rem; word-break: break-word; }
.map-embed { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(21,50,63,.12); line-height: 0; }
.map-embed iframe { display: block; width: 100%; }
/* Inline content figures — images scattered through the body copy, magazine-style */
.content-figure { margin: 20px 0; border-radius: 14px; overflow: hidden; background: #eef1f0; box-shadow: 0 6px 20px rgba(21,50,63,.08); }
.content-figure img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.content-figure:hover img { transform: scale(1.04); }
.content-figure figcaption { font-size: .82rem; line-height: 1.4; color: #5a6b73; padding: 8px 12px 10px; background: #f6f8f7; }
@media (min-width: 900px) {
  .content-figure { width: 44%; margin-block: 6px; }
  .content-figure--right { float: right; margin-left: 30px; }
  .content-figure--left  { float: left;  margin-right: 30px; }
}
/* Keep headings clear of floated figures, and contain floats within the body */
.prose h2 { clear: both; }
.service-body.prose::after, .prose::after { content: ""; display: block; clear: both; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: 10px; }
.section-head p { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease);
  line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--brass-cta); color: var(--ink); box-shadow: 0 6px 18px rgba(0,33,71,.22); }
.btn--primary:hover { background: #E5CE00; color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,33,71,.32); }
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn--ghost:hover { background: var(--slate); color: #fff; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--slate); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--slate); }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,244,239,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
/* WCAG 1.4.4 (resize text to 200%). This row is brand + nav + phone + CTA.
   With the phone number populated it no longer fits on one line at 200% text
   size and forced the whole page 1519px wide in a 1366px viewport, which is
   horizontal scrolling to read — a straight AA failure. It passed before only
   because the phone was an empty placeholder and rendered nothing.
   Wrapping costs nothing at normal sizes and removes the overflow entirely. */
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 74px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--slate); letter-spacing: -.01em; }
.brand:hover { color: var(--slate); }
.brand__mark { width: 40px; height: 40px; flex: 0 0 40px; }
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-600); margin-top: 2px; }
.nav { display: none; align-items: center; gap: 30px; }
.nav a { font-weight: 500; font-size: .98rem; color: var(--slate-700); }
.nav a:hover { color: var(--brass); }
.header-cta { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
.header-tel { display: none; font-weight: 600; color: var(--slate); }
.header-tel svg { width: 18px; height: 18px; display: inline; vertical-align: -3px; margin-right: 6px; }
.menu-toggle { display: inline-flex; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--slate); }
.menu-toggle svg { width: 26px; height: 26px; }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .header-tel { display: inline-flex; align-items: center; }
  .menu-toggle { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, var(--daylight-100) 100%); }
.hero .container { display: grid; gap: clamp(32px, 5vw, 56px); padding-block: clamp(48px, 8vw, 96px); grid-template-columns: 1fr; align-items: center; }
.hero .container > * { min-width: 0; }
.hero__eyebrow { margin-bottom: 18px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .hl { color: var(--brass-600); font-style: italic; }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--slate-700); max-width: 30ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__badge {
  position: absolute; left: -10px; bottom: 24px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 14px 18px; display: flex; align-items: center; gap: 12px; max-width: 260px;
}
.hero__badge .stars { color: var(--brass); font-size: 1rem; letter-spacing: 2px; }
.hero__badge strong { color: var(--slate); display:block; font-size:.95rem; }
.hero__badge span { font-size: .8rem; color: var(--muted); }
@media (min-width: 900px) {
  .hero .container { grid-template-columns: 1.05fr .95fr; }
  .hero__media img { aspect-ratio: 4 / 5; }
}

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--slate); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: center; padding-block: 22px; }
.trust-strip .ti { display: flex; align-items: center; gap: 10px; color: #cfdae0; font-weight: 500; font-size: .92rem; }
.trust-strip .ti svg { width: 22px; height: 22px; color: var(--daylight); flex: 0 0 22px; }

/* ---------- Pillars / specialist difference ---------- */
.pillar { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar__icon { width: 52px; height: 52px; max-width: 52px; max-height: 52px; color: var(--brass); margin-bottom: 16px; }
.pillar__icon svg { width: 52px; height: 52px; }
.pillar h3 { margin-bottom: 10px; }

/* ---------- Service cards ---------- */
.svc { position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; flex-direction: column; }
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc__media { aspect-ratio: 16/10; background: var(--daylight-100); overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__body h3 { font-size: 1.3rem; }
.svc__link { margin-top: auto; font-weight: 600; color: var(--brass-600); display: inline-flex; align-items: center; gap: 6px; }
.svc__link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.svc:hover .svc__link svg { transform: translateX(4px); }

/* ---------- Process steps ---------- */
.step { position: relative; padding-left: 0; }
.step__n { font-family: var(--font-display); font-size: 2.6rem; color: var(--daylight); line-height: 1; margin-bottom: 10px; display: block; }
.step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.section--slate .step__n { color: var(--brass); }
.section--slate .step p { color: #b9c7ce; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 24px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 768px){ .stats { grid-template-columns: repeat(4,1fr); } }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--brass); line-height: 1; }
.stat__label { color: var(--muted); font-size: .92rem; margin-top: 8px; letter-spacing: .02em; }
.section--slate .stat__label { color: #9fb0b8; }

/* ---------- Testimonials ---------- */
.quote { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.quote .stars { color: var(--brass); letter-spacing: 2px; margin-bottom: 12px; }
.quote blockquote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: var(--slate); margin-bottom: 16px; }
.quote cite { font-style: normal; font-weight: 600; color: var(--slate); }
.quote cite span { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); }

/* ---------- Areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 10px; }
.areas a { background: #fff; border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 16px; font-size: .92rem; font-weight: 500; color: var(--slate-700); }
.areas a:hover { border-color: var(--brass); color: var(--brass); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--slate) 0%, var(--slate-700) 100%); color: #fff; border-radius: clamp(16px, 3vw, 28px); padding: clamp(36px, 6vw, 72px); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: #cfdae0; margin: 0 auto 28px; }
.cta-band .hero__cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--slate-900); color: #aebcc3; padding-block: clamp(48px, 6vw, 72px) 28px; font-size: .95rem; }
.site-footer a { color: #cfdae0; }
.site-footer a:hover { color: var(--brass); }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-grid h3 { color: #fff; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid li { margin-bottom: 9px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { color: #94a4ac; margin-top: 14px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; align-items: center; font-size: .85rem; color: #7f9099; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: #9fb0b8; }
.footer-legal a:hover { color: var(--brass); }
.footer-builtby { color: #7f9099; }
.footer-builtby a { color: #9fb0b8; text-decoration: none; }
.footer-builtby a:hover { color: var(--brass); }

/* ---------- Sticky mobile CTA (added properly in Sonic Boom; base here) ---------- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 1px; background: var(--hairline); box-shadow: 0 -4px 20px rgba(14,36,45,.14); }
.mobile-cta a { flex: 1; text-align: center; padding: 15px 8px; font-weight: 600; font-size: .98rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mobile-cta a svg { width: 18px; height: 18px; }
.mobile-cta .mc-call { background: #fff; color: var(--slate); }
.mobile-cta .mc-quote { background: var(--brass-cta); color: var(--ink); }
.mobile-cta .mc-quote:hover, .mobile-cta .mc-call:hover { color: inherit; }
body { padding-bottom: 0; }
@media (max-width: 1023px){ body.has-mobile-cta { padding-bottom: 58px; } }
@media (min-width: 1024px){ .mobile-cta { display: none; } }

/* ---------- Cookie consent banner ---------- */
.cookie-banner { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 64px; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 12px 40px rgba(14,36,45,.22); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cookie-banner__text { flex: 1 1 300px; min-width: 0; margin: 0; font-size: .92rem; color: var(--slate-700); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__actions .btn { padding: 11px 20px; font-size: .95rem; }
@media (min-width: 1024px){ .cookie-banner { left: 20px; right: 20px; bottom: 20px; } }

/* ---------- Motion (on-load, subtle). Content visible by default; JS adds .is-armed to animate. ---------- */
.sonic-fade-up { opacity: 1; }
.js .sonic-fade-up.is-armed { opacity: 0; transform: translateY(16px); }
.js .sonic-fade-up.is-played { opacity: 1; transform: translateY(0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.sonic-stagger-children > * { opacity: 1; }
.js .sonic-stagger-children.is-armed > * { opacity: 0; transform: translateY(18px); }
.js .sonic-stagger-children.is-played > * { opacity: 1; transform: translateY(0); transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, .js .sonic-fade-up.is-armed, .js .sonic-stagger-children.is-armed > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Generic page (service pages inherit) ---------- */
.page-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--daylight-100) 100%); padding-block: clamp(48px, 7vw, 90px); }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumbs a { color: var(--slate-700); }
.prose h2 { margin-top: 2em; margin-bottom: .5em; }
.prose h3 { margin-top: 1.6em; margin-bottom: .4em; }
.prose p, .prose ul { margin-bottom: 1.1em; }
.prose ul li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 2px; background: var(--brass); transform: rotate(45deg); }

/* =====================================================================
   SONIC BOOM — conversion layer (Stage 3.5)
   ===================================================================== */

/* Hero trust row */
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; align-items: center; }
.hero__trust .ht { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 500; color: var(--slate-700); }
.hero__trust .ht svg { width: 18px; height: 18px; color: var(--brass); flex: 0 0 18px; }
.hero__trust .ht .stars { color: var(--brass); letter-spacing: 1px; }

/* Problem section */
.pains { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .pains { grid-template-columns: repeat(2,1fr); } }
.pain { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--brass); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.pain svg { width: 24px; height: 24px; color: var(--brass); flex: 0 0 24px; margin-top: 2px; }
.pain strong { color: var(--slate); display: block; margin-bottom: 2px; }
.pain span { font-size: .96rem; color: var(--ink); }
.pain-pivot { text-align: center; margin-top: 34px; font-family: var(--font-display); font-size: clamp(1.3rem,2.4vw,1.7rem); color: var(--slate); }
.pain-pivot b { color: var(--brass-600); font-style: italic; font-weight: 540; }

/* Named process badge */
.process-name { display:inline-flex; align-items:center; gap:8px; background: rgba(143,180,206,.16); border:1px solid rgba(143,180,206,.4); color:#cfe0ec; padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

/* Testimonial avatar */
.quote cite { display: flex; align-items: center; gap: 12px; }
.quote .avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--slate); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size: 1.05rem; }
.quote cite .meta { display: flex; flex-direction: column; }

/* ---- Multi-step quote form (Action) ---- */
.quote-wrap { display: grid; gap: clamp(28px,4vw,48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px){ .quote-wrap { grid-template-columns: .9fr 1.1fr; } }
.quote-aside h2 { margin-bottom: 14px; }
.quote-aside .lead { color: var(--slate-700); margin-bottom: 22px; }
.quote-reassure { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.quote-reassure li { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--slate); }
.quote-reassure li svg { width: 20px; height: 20px; color: var(--success); flex: 0 0 20px; }
.quote-call { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.quote-call span { display:block; color: var(--muted); font-size:.85rem; margin-bottom: 4px; letter-spacing:.04em; text-transform:uppercase; }
.quote-call a { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2rem); color: var(--slate); }
.quote-call a:hover { color: var(--brass); }

.qform { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(22px,3vw,32px); }
.qform__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.qform__bar { flex: 1; height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.qform__bar i { display: block; height: 100%; width: 33%; background: var(--brass); border-radius: 999px; transition: width .35s var(--ease); }
.qform__step-label { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.qstep { display: none; }
.qstep.active { display: block; animation: qfade .35s var(--ease); }
@keyframes qfade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.qstep h3 { font-size: 1.3rem; margin-bottom: 4px; }
.qstep p.hint { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1.5px solid var(--hairline); border-radius: 999px; font-weight: 500; font-size: .96rem; cursor: pointer; transition: all .2s var(--ease); }
.chip input:checked + span { border-color: var(--brass); background: rgba(189,139,60,.08); color: var(--brass-600); }
.chip input:focus-visible + span { outline: 2px solid var(--slate); outline-offset: 2px; }
.qfield { margin-bottom: 16px; }
.qfield label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--slate); }
.qfield input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--hairline); border-radius: var(--radius-sm); font: inherit; font-size: 1rem; background: var(--paper); transition: border-color .2s var(--ease); }
.qfield input:focus { outline: none; border-color: var(--brass); background: #fff; }
.qfield-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px){ .qfield-row { grid-template-columns: 1fr 1fr; } }
.qform__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.qform__nav .btn { flex: 0 0 auto; }
.qback { background: none; border: 0; color: var(--muted); font-weight: 600; cursor: pointer; padding: 10px; }
.qback:hover { color: var(--slate); }
.qform__done { text-align: center; padding: 20px 0; }
.qform__done .tick { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: rgba(46,125,91,.12); color: var(--success); display: flex; align-items: center; justify-content: center; }
.qform__done .tick svg { width: 34px; height: 34px; }
.qform__done h3 { margin-bottom: 8px; }
.qerror { color: var(--danger); font-size: .88rem; margin-top: 8px; display: none; }
.qerror.show { display: block; }

/* =====================================================================
   SERVICE / LOCATION PAGE TEMPLATE (Stage 4)
   ===================================================================== */
.page-hero .hero__cta { margin-top: 26px; }
.page-hero .hero__trust { margin-top: 22px; }
.page-hero__media { margin-top: 28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); max-height: 420px; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21/9; }

.service-layout { display: grid; gap: clamp(28px,4vw,56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px){ .service-layout { grid-template-columns: 1fr 340px; } }

.service-body .prose > h2:first-child { margin-top: 0; }
.service-body .benefit-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 1.5em 0; }
@media (min-width: 600px){ .service-body .benefit-grid { grid-template-columns: 1fr 1fr; } }
.benefit { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.benefit svg { width: 22px; height: 22px; color: var(--brass); flex: 0 0 22px; margin-top: 3px; }
.benefit strong { display:block; color: var(--slate); }
.benefit span { font-size: .95rem; }

/* sticky sidebar quote card */
.service-aside { position: sticky; top: 96px; }
.aside-card { background: var(--slate); color: #d8e2e7; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-md); }
.aside-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 8px; }
.aside-card p { color: #b9c7ce; font-size: .96rem; margin-bottom: 18px; }
.aside-card .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.aside-card .aside-tel { display:block; text-align:center; color:#fff; font-family:var(--font-display); font-size:1.4rem; margin-top:10px; }
.aside-card .aside-tel:hover { color: var(--brass); }
.aside-trust { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px; }
.aside-trust li { display:flex; gap:9px; align-items:center; font-size:.92rem; color:#cfdae0; }
.aside-trust li svg { width:18px; height:18px; color: var(--daylight); flex:0 0 18px; }

/* FAQ */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { cursor: pointer; padding: 20px 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--slate); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.6rem; color: var(--brass); line-height: 1; transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; color: var(--ink); max-width: none; }

/* related services */
.related-grid { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .related-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .related-grid { grid-template-columns:1fr 1fr 1fr; } }
.related-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow-sm); font-weight:600; color:var(--slate); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.related-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); color:var(--brass-600); }
.related-card svg { width:22px; height:22px; color:var(--brass); flex:0 0 22px; }

/* service card links (Stage 4 nav fix) */
a.svc__media { display: block; }
.svc__body h3 a { color: inherit; }
.svc__body h3 a:hover { color: var(--brass); }

/* =====================================================================
   ACCESSIBILITY — visible focus (WCAG 2.4.7) + reduced motion already handled
   ===================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 2px;
  border-radius: 3px;
}
/* On dark sections, use a light ring so it stays visible */
.section--slate a:focus-visible,
.trust-strip a:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible,
.aside-card a:focus-visible,
.mobile-cta a:focus-visible {
  outline-color: #fff;
}

/* AKA cluster cards + all-services card */
.related-card { align-items: center; }
.related-card__text { display: flex; flex-direction: column; line-height: 1.3; }
.related-card__kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--brass-600); font-weight: 700; margin-bottom: 2px; }
.related-card--all { background: var(--slate); color: #fff; }
.related-card--all:hover { background: var(--slate-700); color: #fff; }
.related-card--all svg { color: var(--brass); }

/* =====================================================================
   DROPDOWN NAVIGATION
   ===================================================================== */
.menu { list-style: none; margin: 0; padding: 0; }
.menu-item > a { color: var(--slate-700); font-weight: 500; font-size: .98rem; }
.menu-item > a:hover { color: var(--brass-600); }
.submenu { list-style: none; margin: 0; padding: 0; }
.submenu-all { font-weight: 600; color: var(--brass-600) !important; }
.sub-toggle { background: none; border: 0; cursor: pointer; color: var(--slate); }

/* Desktop: horizontal menu with hover/focus dropdowns */
@media (min-width: 1024px) {
  .menu { display: flex; align-items: center; gap: 28px; }
  .menu-item { position: relative; }
  .menu-item.has-sub > a::after { content: "\25BE"; font-size: .7em; margin-left: 5px; color: var(--muted); }
  .sub-toggle { display: none; }
  .submenu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
    min-width: 290px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 60;
  }
  .menu-item.has-sub:hover > .submenu,
  .menu-item.has-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .submenu li a { display: block; padding: 10px 14px; border-radius: 6px; font-size: .95rem; color: var(--slate); white-space: nowrap; }
  .submenu li a:hover { background: var(--paper-2); color: var(--brass-600); }
  .submenu-all { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 6px; }
}

/* Mobile: slide-down panel + tap-to-expand submenus */
@media (max-width: 1023px) {
  .nav { position: fixed; left: 0; right: 0; top: 74px; background: #fff; border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-md); display: none; max-height: calc(100dvh - 74px); overflow-y: auto; }
  .nav.open { display: block; }
  .menu { display: flex; flex-direction: column; padding: 6px 0; }
  .menu-item { border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; }
  .menu-item > a { flex: 1; padding: 15px 22px; display: block; }
  .sub-toggle { padding: 15px 22px; font-size: 1.05rem; }
  .submenu { display: none; flex-basis: 100%; width: 100%; background: var(--paper); padding: 4px 0 10px; }
  .menu-item.sub-open .submenu { display: block; }
  .menu-item.sub-open .sub-toggle { transform: rotate(180deg); }
  .submenu li a { display: block; padding: 12px 34px; color: var(--slate); font-size: .96rem; }
  .submenu li a:hover { color: var(--brass-600); }
}

/* AKA parent-hub link on Knowledge pages */
.hub-link { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--slate-700); margin-top: 10px; }
.hub-link svg { width: 16px; height: 16px; color: var(--brass); transform: rotate(180deg); }
.hub-link a { color: var(--brass-600); font-weight: 600; }


/* ---------- Heritage contrast guards ----------
   Oxford Yellow is legible on Oxford Blue (12.58:1) and illegible on paper
   (1.28:1). Aspect used brass for a few text elements that sit on light
   grounds. These guards keep yellow on dark only, so a component moved to a
   light section later cannot silently become unreadable.
*/
.stat__num { color: var(--slate); }
.section--slate .stat__num,
.cta-band .stat__num { color: var(--brass); }
.brand small { color: var(--slate-700); }
.pain { border-left-color: var(--brass); }
.btn--primary:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; }

/* ---------- Icon contrast on light grounds ----------
   Aspect's brass (#BD8B3C) clears the 3:1 graphical bar on white. Oxford
   Yellow does not: it is 1.28:1, so any icon inheriting --brass on a light
   card is effectively invisible. Icons on light take Oxford Blue; yellow is
   kept for icons sitting on the slate band, where it reads at 12.58:1.
*/
.pillar__icon { color: var(--slate); }
.pain svg { color: var(--slate); }
.ticks svg { color: var(--slate); }
.section--slate .pillar__icon,
.section--slate .pain svg,
.section--slate .ticks svg { color: var(--brass); }

/* ---------- TEXT contrast on dark grounds ----------
   THIRD AND FOURTH OCCURRENCE of this build's recurring failure: a component
   whose default colour is tuned for a light ground gets placed inside a dark
   band, and nothing scoped overrides it. Found at the §6 WCAG gate:

     .eyebrow      var(--brass-600) = #002147 on .section--slate #002147
                   = 1:1. Literally invisible. "Get a quote" on the global
                   enquiry band, i.e. on nearly every page of the site.
     .lead         var(--slate-700) = #0B3161 on #002147 = 1.24:1.
     .brand small  var(--slate-700) = #0B3161 on --slate-900 #00152E = 1.42:1,
                   the footer brand sub-label.

   --brass-600 is Oxford Blue by design (Oxford Yellow cannot be text on light).
   That remap is correct on paper and silently wrong the moment the component
   sits on navy. Oxford Yellow on Oxford Blue is 12.58:1, so on DARK grounds the
   accent goes back to yellow and the body copy takes the band's own light ink.

   The lesson, for the third time: contrast CSS must OUTRANK, not merely exist.
   These are scoped one level deeper than the rules they correct, so they win.
*/
.section--slate .eyebrow,
.cta-band .eyebrow,
.site-footer .eyebrow { color: var(--brass); }

.section--slate .lead,
.cta-band .lead,
.site-footer .lead { color: #d8e2e7; }

.site-footer .brand small { color: var(--brass); }

/* Ticks list, used on the about and quote panels. */
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.ticks svg { flex: 0 0 18px; margin-top: 3px; }
.section--slate .ticks li { color: #cfdae0; }

/* Long-read intro paragraph, one step up from body. */
.read-intro p { font-size: 1.15rem; line-height: 1.65; color: var(--heading); }

/* Answer lead: the answer foregrounded before the detail. */
.answer-lead { background: var(--white); border: 1px solid var(--hairline);
  border-left: 4px solid var(--brass); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 32px; box-shadow: var(--shadow-sm); }
.answer-lead p { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; color: var(--heading); margin: 0; }

/* Quote panel holding the CRM embed on the slate band. */
.quote-panel { background: var(--white); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-lg); color: var(--ink); }

/* Wide tables scroll inside their own container; the body never scrolls. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  margin: 26px 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); }
.tablewrap table { margin: 0; min-width: 32rem; }

/* Link hover inherited --brass from Aspect. Yellow on paper is 1.28:1, so a
   hovered link would vanish. Hover deepens to navy-soft and gains an underline
   instead, which also stops hover being colour-only. */
a:hover { color: var(--slate-700); }
.prose a { color: var(--slate); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--slate-700); text-decoration-color: var(--slate-700); }
.section--slate a:hover, .site-footer a:hover { color: var(--brass); }


/* Long-read standfirst: one step up from body copy, ruled off from it. */
.read-intro { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.read-intro p { font-size: 1.2rem; line-height: 1.6; color: var(--slate-700); max-width: none; }
/* Prose rhythm inside the service body. */
.service-body.prose h2 { margin-top: 1.9em; margin-bottom: .5em; }
.service-body.prose h3 { margin-top: 1.6em; margin-bottom: .4em; }
.service-body.prose p { margin-bottom: 1.15em; max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }


/* A figure only floats when the section has enough prose to wrap it; otherwise
   it renders as a full-width block. Both cases are handled explicitly so a
   short section can never leave a dead gap beside a floated plate. */
.content-figure--block { width: 100%; float: none; margin: 26px 0; }
@media (max-width: 899px) {
  .content-figure, .content-figure--left, .content-figure--right { width: 100%; float: none; margin: 22px 0; }
}

/* Grid items default to min-width:auto, so they refuse to shrink below their
   widest child. A table with min-width:32rem inside the prose column therefore
   forced the whole column to 534px at a 390px viewport and pushed the page
   sideways. min-width:0 lets the column shrink; the table then scrolls inside
   its own wrapper, which is where the horizontal scroll belongs. */
.service-layout > * { min-width: 0; }
.prose, .service-body { min-width: 0; max-width: 100%; }
.prose img, .service-body img { max-width: 100%; }

/* ============================================ DATA TABLES
 * The ported system had NO table styling, because the sister build's content
 * never used tables. Ours use them heavily (spec comparisons, cost drivers,
 * covering choices), so they were rendering as bare browser default: hairline
 * borders, cramped cells, no hierarchy. Styled here to match the rest of the
 * system, radius and shadow included.
 *
 * Content markup uses a plain first row of <th> rather than <thead>, so both
 * forms are handled.
 */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 28px 0;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tablewrap table { margin: 0; min-width: 32rem; box-shadow: none; border: 0; }

.prose table,
.service-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.55;
  background: var(--white);
}

/* header row: dark, small caps, tracked */
.prose thead th,
.prose tr:first-child th,
.service-body thead th,
.service-body tr:first-child th {
  background: var(--slate);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border: 0;
  vertical-align: middle;
}

.prose td,
.service-body td {
  padding: 15px 18px;
  border-top: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink);
}

/* zebra, and the first column carries the label weight */
.prose tbody tr:nth-child(odd) td,
.prose tr:nth-child(even) td,
.service-body tbody tr:nth-child(odd) td,
.service-body tr:nth-child(even) td { background: var(--paper); }

.prose td:first-child,
.service-body td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--heading);
  white-space: normal;
}

/* a th used as a ROW header down the side, not just across the top */
.prose tbody th,
.service-body tbody th {
  background: var(--paper);
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: left;
  padding: 15px 18px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 640px) {
  .prose table, .service-body table { font-size: .9rem; }
  .prose td, .service-body td,
  .prose thead th, .prose tr:first-child th,
  .service-body thead th, .service-body tr:first-child th { padding: 12px 14px; }
}