/* ==========================================================================
   Quick Fit Roofing Solutions Ltd
   Design system + components
   Palette sampled directly from the company logo.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — sampled from logo.png */
  --navy-900: #021428;
  --navy-800: #021c39;
  --navy-700: #032952;   /* logo navy */
  --navy-600: #0a3a6d;
  --navy-500: #14508f;
  --navy-100: #e7edf5;
  --navy-050: #f3f6fa;

  --gold-600: #c9a500;
  --gold-500: #fdd206;   /* logo gold */
  --gold-400: #ffe04d;
  --gold-100: #fff6cc;

  --slate-600: #454f60;
  --slate-500: #5b6577;
  --slate-400: #667186;  /* muted text */
  --slate-decor: #8a94a6; /* logo grey — decorative use only */
  --slate-200: #d7dce4;
  --slate-100: #eceff4;

  --ink: #0c1420;
  --paper: #ffffff;
  --paper-alt: #f6f8fb;

  --danger: #c8341f;
  --success: #14804a;

  /* Type */
  --ff-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0rem;
  --fs-md: clamp(1.05rem, 0.99rem + 0.28vw, 1.19rem);
  --fs-lg: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
  --fs-xl: clamp(1.55rem, 1.3rem + 1.2vw, 2.3rem);
  --fs-2xl: clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
  --fs-3xl: clamp(2.4rem, 1.65rem + 3.4vw, 4.4rem);
  --fs-4xl: clamp(2.5rem, 1.75rem + 3.4vw, 4.35rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 4.5rem;   --sp-10: 6rem;    --sp-11: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 780px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(2, 20, 40, .06), 0 2px 6px rgba(2, 20, 40, .05);
  --shadow: 0 4px 10px rgba(2, 20, 40, .07), 0 14px 34px rgba(2, 20, 40, .09);
  --shadow-lg: 0 10px 24px rgba(2, 20, 40, .10), 0 30px 70px rgba(2, 20, 40, .16);
  --shadow-gold: 0 8px 22px rgba(201, 165, 0, .34);

  --ring: 0 0 0 3px rgba(253, 210, 6, .55);
  --ease: cubic-bezier(.22, .68, .36, 1);

  --header-h: 76px;
  --bar-h: 0px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; --bar-h: 66px; }
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--slate-600);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--navy-700);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;
  /* balance can compute a line wider than the box on very narrow screens */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 800; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
a { color: var(--navy-600); text-decoration-color: rgba(10, 58, 109, .3); text-underline-offset: 3px; }
a:hover { color: var(--navy-700); text-decoration-color: currentColor; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
strong { color: var(--navy-700); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--slate-200); margin: var(--sp-7) 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
::selection { background: var(--gold-500); color: var(--navy-800); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold-500); color: var(--navy-800); padding: .8rem 1.2rem;
  font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1440px; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--paper-alt); }
.section--navy { background: var(--navy-700); color: rgba(255,255,255,.82); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy strong { color: #fff; }
.section--navy a { color: var(--gold-400); }
.section--deep { background: var(--navy-900); color: rgba(255,255,255,.78); }
.section--deep h2, .section--deep h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split > *, .with-aside > *, .grid > *, .steps > *, .areagrid > *,
.stockgrid > *, .symptoms > *, .project__stages > *,
.method > li, .method li > *, .leakmap > *, .leakmap__key li > *,
.factbar > *, .optcard > *, .footer__top > *, .ctaband__in > *,
.form > *, .form__row > *, .field > *, .aside-sticky > *,
.btn-row > *, .linkgrid > *, .arealist > * { min-width: 0; }

/* Long unbroken strings — email addresses, URLs — must not widen a track. */
.method span, .footer__contact li, .aside-card, .prose li, .prose p { overflow-wrap: anywhere; }
.split--wide-left { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.split--wide-right { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width: 900px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .split__media--first { order: -1; }
}

/* ---------- 4. Brand motifs --------------------------------------------- */
/* The roof-pitch: a shallow angled edge echoing the logo's chevron. */
.pitch-top { clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.2vw; padding-top: calc(var(--section-y) + 3.2vw); }
.pitch-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); padding-bottom: calc(var(--section-y) + 3.2vw); }
@media (max-width: 700px) {
  .pitch-top { clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); margin-top: -5vw; padding-top: calc(var(--section-y) + 5vw); }
  .pitch-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); padding-bottom: calc(var(--section-y) + 5vw); }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--navy-600); margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 4px; background: var(--gold-500);
  border-radius: 2px; flex: none;
}
.section--navy .eyebrow, .section--deep .eyebrow { color: var(--gold-400); }

.lead { font-size: var(--fs-md); color: var(--slate-500); line-height: 1.68; }
.section--navy .lead, .section--deep .lead { color: rgba(255,255,255,.78); }

.rule-gold { width: 64px; height: 5px; background: var(--gold-500); border-radius: 3px; margin-bottom: var(--sp-5); }

/* Slate-texture: faint diagonal lines echoing roof battens */
.batten-bg { position: relative; isolation: isolate; }
.batten-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(3,41,82,.045) 0 1px, transparent 1px 14px);
}
.section--navy .batten-bg::before, .section--deep .batten-bg::before {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 1px, transparent 1px 14px);
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1rem;
  padding: .95rem 1.6rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  line-height: 1.15; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--gold { background: var(--gold-500); color: var(--navy-800); box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: var(--gold-400); color: var(--navy-900); box-shadow: 0 12px 30px rgba(201,165,0,.42); }

.btn--navy { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--navy:hover { background: var(--navy-600); color: #fff; box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--slate-200); }
.btn--ghost:hover { border-color: var(--navy-700); color: var(--navy-700); background: var(--navy-050); }

.btn--ghost-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn--wa { background: #25d366; color: #04331a; }
.btn--wa:hover { background: #38e478; color: #04331a; }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 6. Header ---------------------------------------------------- */
.topbar {
  background: var(--navy-900); color: rgba(255,255,255,.7);
  font-size: var(--fs-sm); border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 40px; }
.topbar__list { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.topbar__list svg { width: 15px; height: 15px; color: var(--gold-500); flex: none; }
.topbar a { color: rgba(255,255,255,.82); text-decoration: none; }
.topbar a:hover { color: var(--gold-400); }
.topbar__badge { color: var(--gold-400); font-weight: 600; }
@media (max-width: 860px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--slate-100);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(2,20,40,.10); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 54px; color: var(--navy-700); flex: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: -.028em; color: var(--navy-700); white-space: nowrap;
}
.brand__sub {
  font-family: var(--ff-display); font-weight: 600; font-size: .6rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500);
  margin-top: 3px; white-space: nowrap;
}
@media (max-width: 420px) {
  .brand__mark { width: 42px; }
  .brand__name { font-size: 1.06rem; }
  .brand__sub { font-size: .5rem; letter-spacing: .12em; }
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  color: var(--navy-700); text-decoration: none; padding: .55rem .8rem;
  border-radius: var(--radius-sm); position: relative; white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { background: var(--navy-050); }
.nav a[aria-current="page"] { color: var(--navy-600); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .18rem;
  height: 3px; border-radius: 2px; background: var(--gold-500);
}
.header__cta { display: flex; align-items: center; gap: .6rem; }
.header__phone {
  display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.1;
  padding-right: .3rem;
}
.header__phone span:first-child { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate-400); font-weight: 600; }
.header__phone span:last-child { font-family: var(--ff-display); font-weight: 800; font-size: 1.06rem; color: var(--navy-700); letter-spacing: -.02em; }
.header__phone:hover span:last-child { color: var(--navy-500); }

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--slate-200);
  background: #fff; border-radius: var(--radius-sm); cursor: pointer;
  align-items: center; justify-content: center; flex: none; padding: 0;
}
.burger span { display: block; width: 21px; height: 2px; background: var(--navy-700); border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 21px; height: 2px; background: var(--navy-700);
  border-radius: 2px; transition: transform .24s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -6.5px; }
.burger span::after { top: 6.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Seven nav items plus a phone number plus a CTA is tight between the
   burger breakpoint and a wide desktop. Step it down rather than wrap. */
@media (max-width: 1440px) {
  .nav a { font-size: .9rem; padding: .5rem .58rem; }
  .nav a[aria-current="page"]::after { left: .58rem; right: .58rem; }
  .header__phone span:first-child { display: none; }
  .header__phone span:last-child { font-size: 1rem; }
  .header__cta .btn { padding: .8rem 1.1rem; font-size: .92rem; }
}
@media (max-width: 1240px) {
  .nav a { font-size: .855rem; padding: .5rem .45rem; }
  .brand__sub { display: none; }
}
.header .btn, .header__phone span:last-child { white-space: nowrap; }
@media (max-width: 1120px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__cta .btn { display: none; }
}
@media (max-width: 560px) { .header__phone { display: none; } }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 88;
  background: var(--navy-800); color: #fff;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-8) + var(--bar-h));
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.mobile-nav.is-open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.mobile-nav ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.1rem;
  color: #fff; text-decoration: none; padding: .95rem .2rem;
}
.mobile-nav a[aria-current="page"] { color: var(--gold-400); }
.mobile-nav .btn-row a.btn { color: inherit; }
.mobile-nav .btn-row a.btn::after { content: none; }
.mobile-nav .btn-row a.btn--gold { color: var(--navy-800); }
.mobile-nav .btn-row a.btn--wa { color: #04331a; }
.mobile-nav .btn-row a.btn--ghost-light { color: #fff; }
.mobile-nav a::after { content: "→"; color: var(--gold-500); opacity: .7; }
.mobile-nav .btn-row { flex-direction: column; }
body.nav-open { overflow: hidden; }

/* ---------- 7. Mobile action bar ---------------------------------------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; background: var(--navy-800);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -6px 24px rgba(2,20,40,.24);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; padding: .68rem .3rem; text-decoration: none;
  font-family: var(--ff-display); font-weight: 700; font-size: .72rem;
  color: #fff; letter-spacing: .01em;
  border-right: 1px solid rgba(255,255,255,.1);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { width: 21px; height: 21px; }
.actionbar a.is-call { color: #fff; }
.actionbar a.is-call svg { color: var(--gold-500); }
.actionbar a.is-wa svg { color: #4ce27a; }
.actionbar a.is-quote { background: var(--gold-500); color: var(--navy-800); }
.actionbar a.is-quote svg { color: var(--navy-800); }
@media (max-width: 860px) {
  .actionbar { display: block; }
  body { padding-bottom: var(--bar-h); }
}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Corner wash: sinks the busy scaffolding in the bottom-right and keeps
       the eye on the clean run of slate. */
    radial-gradient(ellipse 78% 88% at 100% 100%,
      rgba(2,20,40,.97) 0%, rgba(2,20,40,.9) 26%, rgba(2,20,40,.62) 50%, rgba(2,20,40,0) 76%),
    linear-gradient(100deg, rgba(2,20,40,.94) 0%, rgba(2,20,40,.86) 42%, rgba(2,20,40,.5) 72%, rgba(2,20,40,.34) 100%),
    linear-gradient(to top, rgba(2,20,40,.72), rgba(2,20,40,0) 45%);
}
@media (max-width: 900px) {
  .hero__scrim {
    background:
      radial-gradient(ellipse 110% 45% at 100% 100%,
        rgba(2,20,40,.95) 0%, rgba(2,20,40,.7) 42%, rgba(2,20,40,0) 80%),
      linear-gradient(to bottom, rgba(2,20,40,.86) 0%, rgba(2,20,40,.6) 46%, rgba(2,20,40,.82) 100%);
  }
  /* Frame away from the scaffolding on a narrow crop */
  .hero__bg img { object-position: 34% 46%; }
}
.hero__in { padding-block: clamp(3.2rem, 2rem + 7vw, 7.5rem); position: relative; }
.hero__col { max-width: 690px; }
.hero h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--sp-5); max-width: 15ch; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--gold-500); }
.hero__lead { font-size: var(--fs-md); color: rgba(255,255,255,.85); margin-bottom: var(--sp-6); max-width: 55ch; }
.hero .btn-row { margin-bottom: var(--sp-6); }

.hero__flag {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-5);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .42rem .95rem .42rem .5rem;
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  backdrop-filter: blur(6px);
}
.hero__flag svg { width: 15px; height: 15px; color: var(--gold-500); flex: none; }
.hero__flag .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #3fe07a; flex: none;
  box-shadow: 0 0 0 4px rgba(63,224,122,.22);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(63,224,122,.22); } 50% { box-shadow: 0 0 0 8px rgba(63,224,122,.06); } }

.hero__trust {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-5) var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--sp-5); max-width: 620px;
}
@media (max-width: 560px) { .hero__trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hero__trust b { display: block; font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.45rem,1.2rem + .7vw,1.75rem); color: var(--gold-500); line-height: 1; letter-spacing: -.03em; }
.hero__trust span { font-size: var(--fs-sm); color: rgba(255,255,255,.72); }

/* Compact page hero for inner pages */
.phero { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; isolation: isolate; }
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(2,28,57,.96) 20%, rgba(2,28,57,.7) 100%);
}
.phero__in { padding-block: clamp(2.6rem, 1.8rem + 4.5vw, 5rem); }
.phero h1 { color: #fff; margin-bottom: var(--sp-4); max-width: 20ch; }
.phero .lead { max-width: 62ch; margin-bottom: var(--sp-5); }
.phero .btn-row { margin-top: var(--sp-5); }

.crumbs { font-size: var(--fs-sm); margin-bottom: var(--sp-4); color: rgba(255,255,255,.6); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; }
.crumbs li + li::before { content: "/"; opacity: .45; }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover { color: var(--gold-400); text-decoration: underline; }
.crumbs [aria-current] { color: var(--gold-400); }

/* ---------- 9. Cards ----------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position: relative; overflow: hidden;
}
.card h3 { margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; display: block; color: inherit; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy-100); }
.card--link:hover h3 { color: var(--navy-500); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy-600); margin-bottom: var(--sp-4);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.card__icon svg { width: 26px; height: 26px; }
.card--link:hover .card__icon { background: var(--gold-500); color: var(--navy-800); }
.card__more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--sp-4);
  font-family: var(--ff-display); font-weight: 700; font-size: .92rem; color: var(--navy-600);
}
.card__more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.card--link:hover .card__more svg { transform: translateX(4px); }

/* Service card with photo */
.scard {
  display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; border: 1px solid var(--slate-100);
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .22s var(--ease);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.scard__img { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-100); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.05); }
.scard__body { padding: var(--sp-5); }
.scard__body h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.scard__body p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--radius-lg); overflow: hidden; }
.stats > div { background: var(--navy-700); padding: var(--sp-6) var(--sp-4); text-align: center; }
.stats b { display: block; font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.9rem,1.4rem + 1.8vw,2.7rem); color: var(--gold-500); line-height: 1; letter-spacing: -.03em; margin-bottom: .4rem; }
.stats span { font-size: var(--fs-sm); color: rgba(255,255,255,.76); }
@media (max-width: 1180px) { .stats { grid-template-columns: repeat(2,1fr); } }
.stats span { line-height: 1.4; }

/* ---------- 10. Feature list -------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; line-height: 1.55; }
.ticks li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032952' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.ticks--2 { grid-template-columns: 1fr 1fr; gap: .7rem var(--sp-5); }
@media (max-width: 640px) { .ticks--2 { grid-template-columns: 1fr; } }

/* ---------- 11. Process steps ------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--ff-display); font-weight: 800; font-size: 2.9rem; line-height: .8;
  color: var(--navy-100); letter-spacing: -.04em; display: block; margin-bottom: var(--sp-3);
}
.section--navy .step::before, .section--deep .step::before { color: rgba(255,255,255,.16); }
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 5px;
  background: var(--gold-500); border-radius: 3px;
}
.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); margin: 0; }

/* ---------- 12. Before / after slider ----------------------------------- */
.ba {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  /* Source is a split from a 447px collage, super-resolved to 732px wide.
     Cap the display width so it is never scaled past the real detail. */
  max-width: 490px; margin-inline: auto;
  box-shadow: var(--shadow-lg); background: var(--navy-800);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: ew-resize; aspect-ratio: var(--ba-ratio, 823/1305);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: #fff; transform: translateX(-1.5px);
  box-shadow: 0 0 0 1px rgba(2,20,40,.28), 0 0 20px rgba(2,20,40,.4); pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 50px; height: 50px; border-radius: 50%; background: var(--gold-500);
  display: grid; place-items: center; box-shadow: 0 4px 18px rgba(2,20,40,.4);
  color: var(--navy-800);
}
.ba__knob svg { width: 26px; height: 26px; }
.ba__tag {
  position: absolute; top: 14px; z-index: 3;
  font-family: var(--ff-display); font-weight: 800; font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; padding: .38rem .8rem; border-radius: 999px; pointer-events: none;
  backdrop-filter: blur(6px);
}
.ba__tag--b { left: 14px; background: rgba(2,20,40,.78); color: #fff; }
.ba__tag--a { right: 14px; background: var(--gold-500); color: var(--navy-800); }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 4;
}
.ba:focus-within .ba__knob { box-shadow: 0 0 0 4px rgba(253,210,6,.5), 0 4px 18px rgba(2,20,40,.4); }

/* Light components sitting inside a dark section must reset their own colours */
.section--navy .card, .section--deep .card,
.section--navy .review, .section--deep .review,
.section--navy .project, .section--deep .project,
.section--navy .form-panel, .section--deep .form-panel { color: var(--slate-600); }
.section--navy .card h3, .section--deep .card h3,
.section--navy .project h3, .section--deep .project h3,
.section--navy .review__who, .section--deep .review__who,
.section--navy .form-panel h2, .section--navy .form-panel h3,
.section--deep .form-panel h2, .section--deep .form-panel h3 { color: var(--navy-700); }
.section--navy .card a, .section--deep .card a,
.section--navy .project a, .section--deep .project a { color: var(--navy-600); }

/* ---------- 13. Project / gallery --------------------------------------- */
.project { border-radius: var(--radius-xl); overflow: hidden; background: #fff; border: 1px solid var(--slate-100); box-shadow: var(--shadow); }
.project__stages { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--slate-100); }
@media (max-width: 760px) { .project__stages { grid-template-columns: 1fr; } }
.stage { background: #fff; position: relative; }
.stage figure { margin: 0; }
.stage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.stage figcaption { padding: var(--sp-4) var(--sp-5) var(--sp-5); color: var(--slate-600); }
.stage figcaption h3 { color: var(--navy-700); }
.stage__no {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-600);
}
.stage__no i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-500); color: var(--navy-800); display: grid; place-items: center; font-size: .74rem; }
.stage figcaption p { font-size: var(--fs-sm); margin: 0; }
.stage h3 { font-size: var(--fs-base); margin-bottom: .35rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); }
.gitem { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-100); box-shadow: var(--shadow-sm); }
.gitem img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); }
.gitem:hover img { transform: scale(1.05); }
.gitem figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .95rem .8rem;
  background: linear-gradient(to top, rgba(2,20,40,.9), rgba(2,20,40,0));
  color: #fff; font-size: var(--fs-sm); font-weight: 500;
}
.gitem figcaption b { display: block; font-family: var(--ff-display); font-weight: 700; color: #fff; }
.gitem figcaption span { color: rgba(255,255,255,.7); font-size: var(--fs-xs); }
.gitem--tall img { aspect-ratio: 3/4; }

/* ---------- 14. Reviews -------------------------------------------------- */
.rating-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
.stars svg { width: 20px; height: 20px; }
.review {
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  position: relative;
}
.review::before {
  content: "\201C"; position: absolute; top: 6px; right: 20px;
  font-family: var(--ff-display); font-size: 5rem; line-height: 1; color: var(--navy-100);
}
.review .stars { margin-bottom: var(--sp-3); position: relative; z-index: 1; }
.review blockquote { margin: 0 0 var(--sp-4); font-size: var(--fs-base); color: var(--slate-600); line-height: 1.68; position: relative; z-index: 1; }
.review footer { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.review__av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy-700); color: #fff;
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; flex: none;
}
.review__who { font-family: var(--ff-display); font-weight: 700; color: var(--navy-700); font-size: .95rem; line-height: 1.25; }
.review__src { font-size: var(--fs-xs); color: var(--slate-400); }

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { border-top: 1px solid var(--slate-200); }
.faq details { border-bottom: 1px solid var(--slate-200); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sp-5) 2.6rem var(--sp-5) 0;
  font-family: var(--ff-display); font-weight: 650; font-size: var(--fs-md); color: var(--navy-700);
  position: relative; transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy-500); }
.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 22px; height: 22px;
  margin-top: -11px; border-radius: 50%; background: var(--navy-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032952' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
  transition: transform .24s var(--ease), background-color .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--gold-500); }
.faq .faq__a { padding: 0 2.6rem var(--sp-5) 0; }
.faq .faq__a > :last-child { margin-bottom: 0; }
.section--navy .faq, .section--deep .faq { border-color: rgba(255,255,255,.16); }
.section--navy .faq details, .section--deep .faq details { border-color: rgba(255,255,255,.16); }
.section--navy .faq summary, .section--deep .faq summary { color: #fff; }

/* ---------- 16. Forms ---------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--ff-display); font-weight: 650; font-size: var(--fs-sm); color: var(--navy-700); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  font-family: var(--ff-body); font-size: 1rem; color: var(--ink);
  padding: .82rem .95rem; border: 1.5px solid var(--slate-200); border-radius: var(--radius);
  background: #fff; width: 100%; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 17px; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(20,80,143,.14);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: var(--fs-xs); color: var(--slate-400); margin: 0; }
.form-panel {
  background: #fff; border-radius: var(--radius-xl); padding: clamp(1.4rem,1rem + 2vw,2.4rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--slate-100);
}
.form-panel h2, .form-panel h3 { margin-bottom: var(--sp-2); }
.hp { position: absolute; left: -9999px; }

/* ---------- 17. Areas ---------------------------------------------------- */
.arealist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,190px),1fr)); gap: .5rem; }
.arealist li { margin: 0; }
.arealist span, .arealist a {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem;
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--slate-600); text-decoration: none;
}
.arealist svg { width: 14px; height: 14px; color: var(--gold-600); flex: none; }
.section--alt .arealist span, .section--alt .arealist a { background: #fff; }
.section--navy .arealist span, .section--navy .arealist a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }

/* ---------- 18. CTA band ------------------------------------------------- */
.ctaband { position: relative; overflow: hidden; background: var(--navy-700); color: #fff; isolation: isolate; }
.ctaband::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background: radial-gradient(ellipse at 78% 18%, var(--gold-500), transparent 58%);
}
.ctaband__in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-6) var(--sp-7); align-items: center; }
@media (max-width: 860px) { .ctaband__in { grid-template-columns: 1fr; } }
.ctaband h2 { color: #fff; margin-bottom: var(--sp-3); }
.ctaband p { color: rgba(255,255,255,.82); margin-bottom: 0; }
.ctaband .btn-row { justify-content: flex-start; }
@media (min-width: 861px) { .ctaband .btn-row { justify-content: flex-end; flex-wrap: nowrap; } }

/* ---------- 19. Footer --------------------------------------------------- */
.footer { background: var(--navy-900); color: rgba(255,255,255,.62); font-size: var(--fs-sm); }
.footer__top { display: grid; grid-template-columns: 1.6fr .8fr .8fr .8fr 1.2fr; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-7); }
@media (max-width: 1100px) { .footer__top { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; gap: var(--sp-5); } }
.footer h3 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--sp-4); font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: rgba(255,255,255,.68); text-decoration: none; }
.footer a:hover { color: var(--gold-400); }
.footer__brand .brand__mark { width: 62px; color: #fff; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: rgba(255,255,255,.62); }
.footer__brand p { margin-top: var(--sp-4); max-width: 34ch; }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; color: var(--gold-500); flex: none; margin-top: 4px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.45);
}
.footer__bottom a { color: rgba(255,255,255,.55); }
.social { display: flex; gap: .55rem; margin-top: var(--sp-5); }
.social a {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-800); }
.social svg { width: 19px; height: 19px; }

/* ---------- 20. Prose ---------------------------------------------------- */
.prose > h2 { margin-top: var(--sp-8); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: var(--sp-6); }
.prose ul:not(.ticks):not(.arealist) { padding-left: 1.2rem; }
.prose ul:not(.ticks):not(.arealist) li::marker { color: var(--gold-600); }
.prose figure { margin: var(--sp-6) 0; }
.prose figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.prose figcaption { font-size: var(--fs-sm); color: var(--slate-400); margin-top: .6rem; }

.callout {
  border-left: 5px solid var(--gold-500); background: var(--navy-050);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--sp-6) 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }

.pricebox { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; }
.pricebox table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pricebox th, .pricebox td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--slate-100); }
.pricebox th { background: var(--navy-050); font-family: var(--ff-display); color: var(--navy-700); font-weight: 700; }
.pricebox tr:last-child td { border-bottom: 0; }
.pricebox td:last-child { font-family: var(--ff-display); font-weight: 700; color: var(--navy-700); white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sidebar layout for service pages */
.with-aside { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,350px); gap: clamp(2rem,1rem + 3vw,3.5rem); align-items: start; }
@media (max-width: 1000px) { .with-aside { grid-template-columns: 1fr; } }
.aside-sticky { position: sticky; top: calc(var(--header-h) + 1.25rem); display: grid; gap: var(--sp-4); }
@media (max-width: 1000px) { .aside-sticky { position: static; } }
.aside-card {
  background: var(--navy-700); color: rgba(255,255,255,.82); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow);
}
.aside-card h3 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.aside-card p { font-size: var(--fs-sm); }
.aside-card .btn { width: 100%; }
.aside-card .btn + .btn { margin-top: .6rem; }
.aside-card__phone {
  display: block; font-family: var(--ff-display); font-weight: 800; font-size: 1.5rem;
  color: var(--gold-500); text-decoration: none; letter-spacing: -.02em; margin-bottom: .2rem;
}
.aside-list { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.aside-list h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.aside-list ul { list-style: none; padding: 0; margin: 0; }
.aside-list li { margin: 0; border-bottom: 1px solid var(--slate-100); }
.aside-list li:last-child { border-bottom: 0; }
.aside-list a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; font-size: var(--fs-sm); text-decoration: none; color: var(--slate-600); font-weight: 500; }
.aside-list a:hover { color: var(--navy-600); }
.aside-list a[aria-current] { color: var(--navy-600); font-weight: 650; }
.aside-list a::after { content: "→"; color: var(--gold-600); opacity: .65; }

/* ---------- 21. Utilities ------------------------------------------------ */
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .rule-gold { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mw-60 { max-width: 62ch; }
.center .mw-60 { margin-inline: auto; }
.media-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-frame img { width: 100%; }
.media-stack { position: relative; }
.media-stack__badge {
  position: absolute; right: -10px; bottom: -26px; background: var(--gold-500); color: var(--navy-800);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .85rem; max-width: 268px;
}
.media-stack__badge b { font-family: var(--ff-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; flex: none; }
.media-stack__badge span { font-size: .82rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 900px) { .media-stack { margin-bottom: var(--sp-6); } }
@media (max-width: 560px) {
  .media-stack__badge { right: 8px; bottom: -20px; padding: var(--sp-3) var(--sp-4); max-width: 240px; }
  .media-stack__badge b { font-size: 1.6rem; }
}

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* Print */
@media print {
  .header, .topbar, .actionbar, .mobile-nav, .ctaband, .btn { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Flash the service select when a service link prefills it */
@keyframes fieldFlash {
  0%, 100% { border-color: var(--slate-200); box-shadow: none; }
  25%, 60% { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(253,210,6,.28); }
}
.field select.is-flash { animation: fieldFlash 1.4s var(--ease); }

/* Anchor offset so sticky header never covers a heading */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* Areas: grouped chip lists */
.areagrid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .areagrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .areagrid { grid-template-columns: 1fr; } }
.areagroup h3 {
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-400); margin-bottom: .7rem; font-weight: 700;
}
.areagroup .arealist { grid-template-columns: repeat(auto-fill, minmax(min(100%,118px),1fr)); gap: .4rem; }
.areagroup .arealist span { padding: .45rem .6rem; font-size: .8rem; }
.areagroup .arealist svg { width: 12px; height: 12px; }

/* Accent card — closes out the services grid */
.card--accent { background: var(--navy-700); border-color: var(--navy-700); color: rgba(255,255,255,.8); }
.card--accent h3 { color: #fff; }
.card--accent .card__icon { background: rgba(255,255,255,.1); color: var(--gold-500); }
.card--accent .card__more { color: var(--gold-400); }
.card--accent:hover { border-color: var(--navy-600); }
.card--accent:hover h3 { color: var(--gold-400); }
.card--accent:hover .card__icon { background: var(--gold-500); color: var(--navy-800); }

/* Tighter service cards in the 4-up grid */
@media (min-width: 981px) {
  .grid-4 .card { padding: var(--sp-5); }
  .grid-4 .card h3 { font-size: var(--fs-md); }
  .grid-4 .card p { font-size: var(--fs-sm); }
  .grid-4 .card__icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: var(--sp-3); }
  .grid-4 .card__icon svg { width: 23px; height: 23px; }
}
.hero__trust span { line-height: 1.35; display: block; }

/* ---------- 22. Review wall ---------------------------------------------- */
.reviewwall { columns: 3; column-gap: var(--sp-5); }
@media (max-width: 1000px) { .reviewwall { columns: 2; } }
@media (max-width: 640px)  { .reviewwall { columns: 1; } }
.reviewwall .review {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 var(--sp-5); display: block;
}
.reviewwall--more { margin-top: var(--sp-5); }
.reviewwall--more[hidden] { display: none; }

.review__tag {
  display: inline-block; margin: var(--sp-4) 0 0; max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--ff-display); font-weight: 700; font-size: .64rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy-600); background: var(--navy-050);
  border: 1px solid var(--navy-100); border-radius: 999px; padding: .3rem .7rem;
}
.review blockquote { font-size: .95rem; }
.review footer {
  padding-top: var(--sp-4); margin-top: var(--sp-4);
  border-top: 1px solid var(--slate-100);
  display: flex; align-items: center; gap: .75rem;
}
.review__id { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.review__who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review__src { white-space: nowrap; }

[data-review-toggle][aria-expanded="true"] svg { transform: rotate(90deg); }
[data-review-toggle] svg { transition: transform .2s var(--ease); }

/* ---------- 23. Technical diagrams --------------------------------------- */
.diagram {
  --dg-ink: var(--navy-700); --dg-accent: var(--gold-500); --dg-line: #c2cbdb;
  --dg-fill: var(--navy-100); --dg-fill2: var(--paper-alt);
  --dg-text: var(--slate-600); --dg-muted: var(--slate-400);
  margin: 0 0 var(--sp-5); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-alt); border: 1px solid var(--slate-100);
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption {
  padding: .85rem 1.1rem; font-size: var(--fs-sm); color: var(--slate-500);
  border-top: 1px solid var(--slate-100); background: #fff;
}
.section--navy .diagram, .section--deep .diagram {
  --dg-ink: #ffffff; --dg-line: rgba(255,255,255,.34);
  --dg-fill: rgba(255,255,255,.10); --dg-fill2: rgba(255,255,255,.05);
  --dg-text: rgba(255,255,255,.86); --dg-muted: rgba(255,255,255,.62);
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14);
}
.section--navy .diagram figcaption, .section--deep .diagram figcaption {
  background: rgba(255,255,255,.05); border-top-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
}

/* Leak hotspot map + its key */
.leakmap { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1180px) { .leakmap { grid-template-columns: 1fr; } }
.leakmap__key { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.leakmap__key li {
  display: flex; gap: .7rem; align-items: flex-start; margin: 0;
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius);
  padding: .65rem .8rem;
}
.leakmap__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-500);
  color: var(--navy-800); display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 800; font-size: .8rem;
}
.leakmap__key li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.leakmap__key b { font-family: var(--ff-display); font-size: .92rem; color: var(--navy-700); font-weight: 700; }
.leakmap__key span span { font-size: var(--fs-xs); color: var(--slate-400); }

/* ---------- 24. Symptom list (symptom-first content) --------------------- */
.symptoms { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
@media (max-width: 720px) { .symptoms { grid-template-columns: 1fr; } }
.symptoms li {
  margin: 0; background: #fff; border: 1px solid var(--slate-100);
  border-left: 4px solid var(--gold-500); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm);
}
.symptoms b { display: block; font-family: var(--ff-display); font-size: .98rem; color: var(--navy-700); margin-bottom: .25rem; font-weight: 700; }
.symptoms span { font-size: var(--fs-sm); color: var(--slate-500); line-height: 1.55; }

/* ---------- 25. Numbered method list ------------------------------------ */
.method { counter-reset: m; list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-4); }
.method li { margin: 0; display: grid; grid-template-columns: 46px 1fr; gap: var(--sp-4); align-items: start; }
.method li::before {
  counter-increment: m; content: counter(m);
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy-700); color: #fff;
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 800; font-size: .95rem;
}
.method b { display: block; font-family: var(--ff-display); font-size: 1.02rem; color: var(--navy-700); margin-bottom: .2rem; font-weight: 700; }
.method span { color: var(--slate-600); line-height: 1.6; }
.section--navy .method li::before, .section--deep .method li::before { background: var(--gold-500); color: var(--navy-800); }
.section--navy .method b, .section--deep .method b { color: #fff; }
.section--navy .method span, .section--deep .method span { color: rgba(255,255,255,.82); }

/* ---------- 26. Option / material comparison ---------------------------- */
.options { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.optcard {
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); align-items: start;
}
@media (max-width: 700px) { .optcard { grid-template-columns: 1fr; gap: var(--sp-3); } }
.optcard h3 { margin: 0 0 .3rem; font-size: var(--fs-md); }
.optcard__life {
  display: inline-block; font-family: var(--ff-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy-800);
  background: var(--gold-500); border-radius: 999px; padding: .28rem .7rem;
}
.optcard p { margin: 0; font-size: var(--fs-sm); color: var(--slate-600); line-height: 1.62; }

/* ---------- 27. Local area page bits ------------------------------------ */
.stockgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-5); }
@media (max-width: 720px) { .stockgrid { grid-template-columns: 1fr; } }
.stockcard { background: var(--navy-050); border: 1px solid var(--navy-100); border-radius: var(--radius); padding: var(--sp-5); }
.stockcard h3 { font-size: var(--fs-base); margin-bottom: .4rem; }
.stockcard p { font-size: var(--fs-sm); margin: 0; color: var(--slate-600); line-height: 1.6; }

.factbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--slate-100); border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-6);
}
@media (max-width: 700px) { .factbar { grid-template-columns: repeat(2,1fr); } }
.factbar > div { background: #fff; padding: var(--sp-4) var(--sp-4); }
.factbar dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--slate-400); font-weight: 600; margin-bottom: .25rem; }
.factbar dd { margin: 0; font-family: var(--ff-display); font-weight: 700; color: var(--navy-700); font-size: .98rem; line-height: 1.3; }

/* Link grid for hubs */
.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,240px),1fr)); gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.linkgrid li { margin: 0; }
.linkgrid a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: #fff; border: 1px solid var(--slate-100); border-radius: var(--radius);
  padding: .85rem 1rem; text-decoration: none; color: var(--navy-700);
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.linkgrid a:hover { border-color: var(--navy-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.linkgrid a::after { content: "→"; color: var(--gold-600); }
.linkgrid small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--slate-400); }
.linkgrid a > span { display: flex; flex-direction: column; line-height: 1.3; }

/* Urgent banner for the emergency page */
.urgentbar {
  background: var(--danger); color: #fff; border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between; margin-bottom: var(--sp-6);
}
.urgentbar p { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-md); }
.urgentbar .btn { background: #fff; color: var(--danger); border-color: #fff; }
.urgentbar .btn:hover { background: #fff; color: #8f2415; }


/* Nothing may push the document sideways on a narrow screen. */
html, body { max-width: 100%; }


/* Very narrow phones (320px). Trim the padding that pushes cards past the edge. */
@media (max-width: 380px) {
  .aside-card, .aside-list, .form-panel, .card, .review { padding: var(--sp-4); }
  .btn { padding: .85rem 1rem; font-size: .95rem; }
  .btn--lg { padding: .95rem 1.15rem; font-size: 1rem; }
}

/* Breadcrumbs on a light background (the crumbs component is dark-hero first) */
.crumbs--light { color: var(--slate-400); }
.crumbs--light a { color: var(--slate-500); }
.crumbs--light a:hover { color: var(--navy-600); }
.crumbs--light [aria-current] { color: var(--navy-700); font-weight: 600; }