/* ==========================================================================
   Lifecycle Homes: styles.css
   Lifecycle Development Ltd · lifecyclehomes.co.uk

   Design language from the company brochure and flyer:
   white canvas, deep green sweeping curves traced by a green-teal-blue
   gradient ribbon, circular gradient-ring numerals, gold seal accents.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subsets) ----------
   Hosted locally to remove third-party requests and the font-swap layout
   shift. Fallback faces below carry size-adjust metrics so text set in
   Arial while the webfont loads occupies the same space. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial");
  size-adjust: 112.16%;
  ascent-override: 93.77%;
  descent-override: 31.25%;
  line-gap-override: 8.93%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.0%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  --navy-950: #0C3624;
  --navy-900: #134C34;
  --navy-800: #1A5C40;
  --navy-700: #23744F;
  --ink: #133A29;
  --body: #46604F;
  --muted: #546F5E; /* was #5E7A69: darkened 26/07/2026 to pass AA on tinted backgrounds (5.08 on --ice-bg, 5.51 on white) */
  --cyan: #2FAE6C;
  --cyan-strong: #1B7448;
  --ice: #BFE9CE;
  --ice-bg: #EFF8F1;
  --line: #DCEDE0;

  /* Bright brand ribbon: decorative rims, rings and hairlines only (no text on it) */
  --grad: linear-gradient(95deg, #40B467 0%, #319D92 60%, #1B7FBF 130%);
  /* Deep ribbon: AA-safe for white text (kickers, pills, badges) */
  --grad-ink: linear-gradient(95deg, #157347 0%, #146D68 55%, #1A6396 120%);

  /* Gold seal accents (brochure "Why Choose Us" / "Price Match" badges) */
  --gold: #C9A24B;
  --gold-soft: #EAD9A8;
  --gold-pale: #FBF6E7;
  --gold-line: #E6D5A9;
  --gold-ink: #6B5417;

  --footer-dark: #10241B;
  --whatsapp: #0E7F3B;
  --whatsapp-dark: #0A6A33;
  --white: #FFFFFF;

  --radius: 24px;
  --radius-lg: 28px;
  --radius-sm: 16px;

  /* Spacing scale (elevation pass 26/07/2026): 8px rhythm. New work uses these;
     existing values already sit on or near the grid. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 56px;
  --sp-8: 64px;
  --shadow: 0 2px 6px rgba(6, 35, 26, 0.05), 0 14px 38px rgba(6, 35, 26, 0.09);
  --shadow-lg: 0 4px 10px rgba(6, 35, 26, 0.06), 0 30px 70px rgba(6, 35, 26, 0.15);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sect: clamp(72px, 8.5vw, 104px);
  --font-head: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

  /* Type scale (26/07/2026): every fixed px size on the site maps onto
     these nine steps plus the display clamps. Do not add sizes off-scale. */
  --fs-2xs: 11.5px;
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-base: 15.5px;
  --fs-md: 16.5px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 24px;
  --fs-stat: 44px;
  --fs-h1: clamp(35px, 4.6vw, 54px);
  --fs-h2: clamp(30px, 3.6vw, 42px);
  --fs-h3: clamp(22px, 3vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: var(--navy-900); color: #fff; }

img { max-width: 100%; display: block; }
a { color: var(--cyan-strong); text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cyan-strong); /* was --cyan: darkened 26/07/2026, 2.84:1 on white failed the 3:1 non-text minimum */
  outline-offset: 3px;
}

/* Light focus ring where the background is dark (footer, dark bands, mobile bar) */
.site-footer :is(a, button):focus-visible,
.why-aircon :is(a, button):focus-visible,
.contact :is(a, button):focus-visible,
.wa-banner :is(a, button):focus-visible,
.mobile-bar :is(a, button):focus-visible {
  outline-color: var(--ice);
}

/* Links inside running text are underlined so colour is not the only cue
   (WCAG 1.4.1; 74 axe link-in-text-block nodes fixed 26/07/2026). Buttons,
   nav, cards and footer link lists keep their own affordances. */
p a:not(.btn),
li a:not(.btn),
.faq-a a,
.form-note a,
.included-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.site-footer .footer-grid ul a,
.main-nav a,
.mobile-nav a { text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 800;
  text-wrap: balance; /* stops orphan words on wrapped display type at arbitrary widths */
}

.container { width: min(1160px, 92%); margin: 0 auto; }

section { padding: var(--sect) 0; }

.kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--grad-ink);
  padding: 7px 17px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(19, 76, 52, 0.16);
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 18px;
}
.section-lead { max-width: 640px; font-size: var(--fs-lg); }
.section-head { margin-bottom: 54px; }
.section-head.center { text-align: center; }
.section-head.center .section-lead { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { cursor: wait; opacity: 0.72; transform: none; }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 10px 26px rgba(14, 127, 59, 0.32); }
.btn-whatsapp:hover { background: var(--whatsapp-dark); }
.btn-whatsapp:active { box-shadow: 0 4px 12px rgba(14, 127, 59, 0.3); }

.btn-primary {
  background: linear-gradient(100deg, #1B7E4E 0%, #14695E 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(20, 105, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { background: linear-gradient(100deg, #166B41 0%, #0F574E 100%); box-shadow: 0 14px 32px rgba(20, 105, 94, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary:active { box-shadow: 0 4px 12px rgba(20, 105, 94, 0.3); }

.btn-outline-light { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.06); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

.btn-outline-dark { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline-dark:hover { border-color: var(--cyan); color: var(--cyan-strong); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan) 0%, #1D9F8A 100%);
  display: grid; place-items: center;
  color: var(--navy-950);
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-text { line-height: 1.15; }
.brand-logo { height: 46px; width: auto; display: block; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md); color: var(--ink); letter-spacing: -0.01em; }
.brand-sub { font-size: var(--fs-2xs); color: var(--cyan-strong); letter-spacing: 0.08em; text-transform: uppercase; }

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 4px 0;
  background: var(--grad) no-repeat left bottom / 0 2.5px;
  transition: color 0.18s ease, background-size 0.28s var(--ease);
}
.main-nav a:hover { color: var(--cyan-strong); background-size: 100% 2.5px; }

.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone { color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 8px; }
.header-phone svg { width: 17px; height: 17px; }
.header-cta .btn { padding: 11px 22px; font-size: var(--fs-sm); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ----------
   Brochure cover translated to the web: light canvas, ambient brand circles,
   and a bottom edge cut by a huge sweeping curve traced with the gradient
   ribbon. The white sweep flows into the section that follows. */
.hero {
  position: relative;
  padding: 148px 0 168px;
  background:
    radial-gradient(620px 620px at 90% -16%, rgba(64, 180, 103, 0.14), transparent 62%),
    radial-gradient(520px 520px at -8% 30%, rgba(49, 157, 146, 0.10), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F3FAF5 58%, var(--ice-bg) 100%);
  color: var(--body);
  overflow: hidden;
  box-shadow: inset 0 -3px 0 var(--white);
}
/* Gradient crescent rim tracing the sweep */
.hero::before {
  content: "";
  position: absolute;
  left: -17%; bottom: -592px;
  width: 170%; height: 760px;
  border-radius: 50%;
  background: var(--grad);
}
/* The white sweep itself */
.hero::after {
  content: "";
  position: absolute;
  left: -17%; bottom: -606px;
  width: 170%; height: 760px;
  border-radius: 50%;
  background: var(--white);
}
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-ink);
  border: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 17px;
  border-radius: 999px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(19, 76, 52, 0.16);
}
.hero-badge svg { width: 15px; height: 15px; }

.hero h1 {
  color: var(--navy-900);
  font-size: var(--fs-h1);
  letter-spacing: -0.032em;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--cyan-strong); }

.hero-sub {
  font-size: var(--fs-lg);
  color: var(--body);
  max-width: 560px;
  margin-bottom: 30px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero-ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 22px; }
.hero-ticks li {
  list-style: none;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600;
}
.hero-ticks svg { width: 17px; height: 17px; color: var(--cyan-strong); flex: none; }

.hero-trust { max-width: 560px; font-size: var(--fs-sm); color: var(--muted); }
.hero .btn-outline-light { border-color: var(--navy-900); color: var(--navy-900); background: #fff; }
.hero .btn-outline-light:hover { border-color: var(--cyan-strong); color: var(--cyan-strong); background: #fff; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb a { color: var(--cyan-strong); font-weight: 700; }

/* Hero quote card: the premium object on the page.
   A deep green organic shape with a gradient rim sweeps behind it,
   echoing the brochure cover. */
.hero-visual { position: relative; scroll-margin-top: 96px; }
/* Any card in the hero visual sits above the decorative blob and rim */
.hero-visual > * { position: relative; z-index: 2; }
/* Heroes without a visual column span the full width instead of leaving a hole */
.hero .container:has(> .hero-copy:only-child) { grid-template-columns: 1fr; }
.hero .container > .hero-copy:only-child { max-width: 840px; }
.hero-visual::after {
  content: "";
  position: absolute;
  top: -46px; right: -58px;
  width: 62%; height: 58%;
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
  background: var(--grad);
  z-index: 0;
}
.hero-visual::before {
  content: "";
  position: absolute;
  top: -34px; right: -42px;
  width: 62%; height: 58%;
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  z-index: 1;
}
.quote-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(19, 76, 52, 0.09);
  padding: 32px 32px 26px;
  box-shadow: 0 2px 5px rgba(12, 54, 36, 0.06), 0 34px 80px rgba(12, 54, 36, 0.20);
}
.quote-card::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: var(--grad);
}
.quote-card h2,
.quote-card h3 { font-size: var(--fs-2xl); margin-bottom: 7px; }
.quote-card .quote-sub { font-size: var(--fs-sm); color: var(--body); margin-bottom: 20px; }
.quote-card .form-group { margin-bottom: 13px; }
.quote-card .btn { width: 100%; margin-top: 4px; }
.quote-card .form-note { margin-top: 12px; }
.quote-alt { text-align: center; font-size: var(--fs-sm); color: var(--muted); margin-top: 14px; }
.quote-alt a { font-weight: 700; }
.quote-assure {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote-assure span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--body);
}
.quote-assure svg { width: 13px; height: 13px; color: var(--cyan-strong); flex: none; }

.quote-success { text-align: center; padding: 34px 8px; }
.success-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 5px solid transparent;
  background: linear-gradient(#E8FAEF, #E8FAEF) padding-box, var(--grad) border-box;
  display: grid; place-items: center;
  color: #16794C;
}
.success-icon svg { width: 30px; height: 30px; }
.hero-copy .success-icon { margin: 0 0 22px; }
.quote-success h3 { margin-bottom: 8px; }
.quote-success p { font-size: var(--fs-base); color: var(--body); }

/* ---------- Accreditation badges ---------- */
.accreditations { background: transparent; padding: 30px 0 8px; }
.accreditation-label {
  margin-bottom: 22px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.accreditations .badge-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 24px 52px;
}
.accreditations img { height: 52px; width: auto; opacity: 0.92; transition: opacity 0.2s ease, transform 0.2s var(--ease); }
.accreditations img:hover { opacity: 1; transform: translateY(-2px); }

/* ---------- Services ---------- */
.services {
  background: radial-gradient(1100px 460px at 50% -140px, rgba(47, 174, 108, 0.07), transparent 70%);
}
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.services-grid--two { grid-template-columns: repeat(2, 1fr); }
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 30px 32px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 26px; right: 26px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47, 174, 108, 0.45); }
.service-icon {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 8px 20px rgba(27, 127, 191, 0.14);
  display: grid; place-items: center;
  color: var(--cyan-strong);
  margin-bottom: 22px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: var(--fs-2xl); margin-bottom: 12px; }
.service-card p { flex: 1; font-size: var(--fs-base); margin-bottom: 22px; }
.service-link { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); color: var(--cyan-strong); }
.service-link svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-left: 6px; transition: transform 0.2s var(--ease); }
.service-link:hover svg { transform: translateX(4px); }
.service-actions { display: grid; gap: 10px; }
.service-guide-link { margin-bottom: 2px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.inline-actions .btn { margin-top: 0; }
.service-hero .form-group textarea { min-height: 74px; }

/* ---------- Dark band sections ----------
   The brochure's deep green shapes with huge rounded corners, each traced
   by an offset gradient ribbon crescent. */
.why-aircon,
.contact {
  position: relative;
  color: rgba(255,255,255,0.86);
  width: min(1400px, calc(100% - 28px));
  margin: 28px auto;
  padding: clamp(64px, 7vw, 92px) 0;
  z-index: 0;
}
.why-aircon { border-radius: 56px 56px 56px 220px / 56px 56px 56px 150px; }
.contact { border-radius: 56px 56px 220px 56px / 56px 56px 150px 56px; }
/* Band fill lives on ::after (z -1) so the ::before rim (z -2) can sit underneath it */
.why-aircon::after,
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
}
.why-aircon::after {
  background:
    radial-gradient(800px 420px at 110% 0%, rgba(64,180,103,0.20), transparent 55%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950));
}
.contact::after {
  background:
    radial-gradient(700px 400px at -10% 0%, rgba(64,180,103,0.18), transparent 55%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950));
}
.why-aircon::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  z-index: -2;
}
.why-aircon::before { transform: translate(-16px, 18px); }
.contact::before { transform: translate(16px, 18px); }
.why-aircon .section-title { color: #fff; }
.why-aircon-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.why-aircon .section-lead { color: rgba(255,255,255,0.80); }

.pain-list { margin: 28px 0 34px; }
.pain-list li {
  list-style: none;
  display: flex; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-base);
}
.pain-list li:last-child { border-bottom: 0; }
.pain-list svg { width: 20px; height: 20px; color: var(--cyan); flex: none; margin-top: 2px; }

.stats-stack { display: grid; gap: 20px; }
.stat-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 26px 30px;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--grad);
}
.stat-value {
  font-family: var(--font-head);
  font-size: var(--fs-stat); font-weight: 800; color: var(--cyan);
  line-height: 1.1;
}
.stat-value .unit { font-size: var(--fs-3xl); }
.stat-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.72); margin-top: 6px; }

/* ---------- 12-point install standard ---------- */
.included { background: radial-gradient(1100px 460px at 50% -140px, rgba(49, 157, 146, 0.06), transparent 70%); }
.points-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; margin-top: 8px; }
.point {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(120deg, #EAF6EE 0%, #FDFFFE 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  transition: border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.point:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: var(--shadow); }
.point-num {
  font-family: var(--font-head);
  font-weight: 800; font-size: var(--fs-sm);
  color: var(--cyan-strong);
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  display: grid; place-items: center;
}
.point p { font-size: var(--fs-base); color: var(--ink); font-weight: 600; line-height: 1.45; margin-top: 6px; }
/* Spec lines still being confirmed: amber ellipsis ring instead of a tick,
   so unconfirmed lines never borrow the confidence of confirmed ones. */
.point--pending .point-num {
  color: var(--gold-ink);
  background: linear-gradient(var(--gold-pale), var(--gold-pale)) padding-box,
              linear-gradient(145deg, var(--gold-soft), var(--gold)) border-box;
}
.included-note {
  margin-top: 34px;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--body);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}

/* ---------- Process: circular gradient-ring timeline ----------
   The brochure's "What Happens Next" numerals: white circles wrapped in a
   thick gradient ring, joined by a ribbon line. */
.process { background: radial-gradient(1100px 460px at 50% -140px, rgba(47, 174, 108, 0.07), transparent 70%); }
.steps-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.steps-grid::before {
  content: "";
  position: absolute;
  top: 39px; left: 16%; right: 16%;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
  opacity: 0.35;
}
.step-card {
  position: relative;
  background: none;
  border: 0;
  padding: 0 26px;
  text-align: center;
}
.step-num {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 6px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 12px 28px rgba(27, 127, 191, 0.16), 0 6px 16px rgba(64, 180, 103, 0.18);
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-size: var(--fs-3xl); font-weight: 800;
  color: var(--cyan-strong);
  line-height: 1;
  -webkit-text-stroke: 0;
}
.step-card h3 { font-size: var(--fs-xl); margin-bottom: 10px; }
.step-card p { font-size: var(--fs-base); }
.process-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}
.process-cta p { color: var(--ink); font-family: var(--font-head); font-weight: 700; }

/* ---------- Why us ---------- */
.why-us { background: #fff; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.why-feature {
  position: relative;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius) var(--radius) var(--radius) 88px;
  color: rgba(255,255,255,0.84);
  padding: 42px 38px;
  overflow: hidden;
}
.why-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
}
.why-feature h3 { color: #fff; font-size: var(--fs-3xl); margin-bottom: 14px; }
.why-feature p { font-size: var(--fs-base); margin-bottom: 22px; }
.why-feature ul { display: grid; gap: 12px; }
.why-feature li { list-style: none; display: flex; gap: 11px; font-size: var(--fs-base); font-weight: 600; color: #fff; }
.why-feature svg { width: 19px; height: 19px; color: var(--cyan); flex: none; margin-top: 2px; }

.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.why-card {
  background: linear-gradient(150deg, #F1F9F3, #FDFFFE);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px 22px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(47, 174, 108, 0.4); }
.why-card svg { width: 26px; height: 26px; color: var(--cyan-strong); margin-bottom: 14px; }
.why-card h4, .why-card h3 { font-size: var(--fs-md); margin-bottom: 7px; }
.why-card p { font-size: var(--fs-sm); }

/* Gold seal treatment: brochure "Price Promise" badge as a card accent */
.why-card.gold {
  background: linear-gradient(150deg, #FDF8EA, #FFFDF6);
  border-color: var(--gold-line);
  box-shadow: 0 10px 30px rgba(201, 162, 75, 0.14);
}
.why-card.gold:hover { border-color: var(--gold); box-shadow: 0 16px 38px rgba(201, 162, 75, 0.2); }
.why-card.gold svg {
  width: 44px; height: 44px;
  padding: 9px;
  border-radius: 50%;
  color: #533F0E;
  border: 3px solid transparent;
  background: linear-gradient(145deg, #F3E3B2, #D9B96A) padding-box,
              linear-gradient(145deg, #EBD9A4 0%, #C9A24B 55%, #A98332 100%) border-box;
  box-shadow: 0 6px 16px rgba(169, 131, 50, 0.28);
}
.why-card.gold h4 { color: #533F0E; }
.why-card.gold p { color: #6B5A2B; }

/* Gold pill variant for a price promise sub-heading */
h3.gold {
  display: inline-block;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
  color: #533F0E;
  background: linear-gradient(120deg, #F3E3B2, #E2C878);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: 0 4px 14px rgba(169, 131, 50, 0.18);
}

/* ---------- Who we help ---------- */
.who { background: #fff; text-align: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 860px; margin: 0 auto; }
.chip {
  background: linear-gradient(120deg, #EAF6EE 0%, #FDFFFE 80%);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-base);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px;
  transition: border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: var(--shadow); }
.chip svg { width: 18px; height: 18px; color: var(--cyan-strong); }

/* ---------- Areas ---------- */
.areas { background: #fff; }
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Brochure photo mask: big rounded blob with a gradient ring border */
.map-wrap {
  position: relative;
  border-radius: 36px 36px 36px 130px;
  border: 6px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.4;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; border-radius: 30px 30px 30px 124px; }
.areas-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.areas-list span {
  background: var(--ice-bg);
  border: 1px solid var(--line);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}

/* ---------- Photo-ready containers ----------
   Brochure-style circular and rounded image masks. Empty slots render a
   soft branded placeholder; drop an <img> in and it fills the mask. */
.photo-slot {
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 96px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(64, 180, 103, 0.16), transparent 55%),
    linear-gradient(160deg, #EDF7F0, #DFF0E5);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 220px;
}
.photo-slot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 74px; height: 74px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 0 50% 50% 50%;
  background: linear-gradient(135deg, rgba(47, 174, 108, 0.35), rgba(27, 127, 191, 0.25));
}
.photo-slot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 46px;
  transform: translate(-50%, 6px) rotate(45deg);
  border-radius: 4px;
  background: rgba(19, 76, 52, 0.28);
}
.photo-slot--circle {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: 0;
  border: 6px solid transparent;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(64, 180, 103, 0.16), transparent 55%),
    linear-gradient(160deg, #EDF7F0, #DFF0E5) padding-box,
    var(--grad) border-box;
}
.photo-slot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-slot > img ~ *, .photo-slot:has(> img)::before, .photo-slot:has(> img)::after { display: none; }
.photo-band {
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 1.1fr;
  gap: 26px;
  align-items: center;
  margin-top: 56px;
}
.photo-band .photo-slot { min-height: 250px; }
.photo-band .photo-slot--circle { min-height: 0; }

/* ---------- FAQ: soft floating band ---------- */
.faq {
  position: relative;
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: clamp(60px, 6.5vw, 84px) 0;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(64, 180, 103, 0.10), transparent 60%),
    linear-gradient(165deg, #F2FAF4, #E9F5ED);
  border: 1px solid var(--line);
  border-radius: 48px 48px 48px 150px;
}
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s var(--ease);
}
.faq-item:hover { border-color: rgba(47, 174, 108, 0.4); }
.faq-item.open { border-color: rgba(47, 174, 108, 0.5); box-shadow: var(--shadow); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  padding: 22px 26px;
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-md);
  color: var(--ink);
}
.faq-q svg { width: 20px; height: 20px; color: var(--cyan-strong); flex: none; transition: transform 0.25s var(--ease); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 26px 24px; font-size: var(--fs-base); }
.faq-cta { text-align: center; margin-top: 36px; font-size: var(--fs-md); }

/* ---------- Contact ---------- */
.contact .section-title { color: #fff; }
.contact .section-lead { color: rgba(255,255,255,0.78); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }

.contact-channels { display: grid; gap: 16px; }
.channel {
  display: flex; gap: 18px; align-items: flex-start;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease);
}
.channel:hover { border-color: rgba(47,174,108,0.6); background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.channel-icon {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  border: 3px solid transparent;
  background: linear-gradient(var(--navy-900), var(--navy-900)) padding-box, var(--grad) border-box;
  display: grid; place-items: center;
  color: var(--ice);
}
.channel-icon svg { width: 22px; height: 22px; }
.channel h4 { color: #fff; font-size: var(--fs-md); margin-bottom: 4px; }
.channel p { font-size: var(--fs-sm); color: rgba(255,255,255,0.68); margin-bottom: 6px; }
.channel .channel-value { font-family: var(--font-head); font-weight: 700; color: var(--ice); font-size: var(--fs-base); }

.lead-form {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  box-shadow: 0 2px 5px rgba(6, 20, 14, 0.10), 0 34px 80px rgba(4, 16, 11, 0.35);
}
.lead-form::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: var(--grad);
}
.lead-form h3 { font-size: var(--fs-2xl); margin-bottom: 6px; }
.lead-form .form-sub { font-size: var(--fs-sm); margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}
.form-group label .opt { color: var(--muted); font-weight: 500; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: #F4FAF6;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(47, 174, 108, 0.16);
  background: #fff;
}
.form-group textarea { resize: vertical; min-height: 104px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-actions { display: grid; gap: 12px; margin-top: 22px; }
.form-actions .btn { width: 100%; }
.form-divider {
  text-align: center; font-size: var(--fs-sm); color: var(--muted);
  display: flex; align-items: center; gap: 14px;
}
/* Hide the "or" divider when the optional WhatsApp button after it is hidden */
.form-divider:has(+ .btn-whatsapp[hidden]) { display: none; }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form-trust {
  font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--body);
  margin-top: 18px;
  text-align: center;
}
.form-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; text-align: center; }
.form-note a { color: var(--cyan-strong); }

.form-status {
  display: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: var(--fs-sm); font-weight: 600;
  margin-top: 16px;
}
.form-status.success { display: block; background: #E8FAEF; color: #16794C; border: 1px solid #B5EBCC; }
.form-status.error { display: block; background: #FDEEEE; color: #B3372E; border: 1px solid #F5C8C4; }

/* ---------- Footer ----------
   Near-black green with a convex sweeping top edge, traced by the ribbon. */
.site-footer {
  position: relative;
  background: var(--footer-dark);
  color: rgba(255,255,255,0.68);
  margin-top: 104px;
  padding: 40px 0 0;
  font-size: var(--fs-sm);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: -95%; top: -82px;
  width: 250%; height: 300px;
  border-radius: 50%;
  background: var(--grad);
  pointer-events: none;
}
.site-footer::after {
  content: "";
  position: absolute;
  left: -95%; top: -70px;
  width: 250%; height: 300px;
  border-radius: 50%;
  background: var(--footer-dark);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.footer-brand img { height: 54px; width: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 360px; margin-bottom: 18px; }
.footer-contact { display: grid; gap: 8px; }
.footer-contact a { color: var(--ice); font-weight: 600; }
.site-footer h4,
.site-footer .footer-heading {
  color: #fff;
  font-size: var(--fs-base);
  margin-bottom: 16px;
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 800;
}
.site-footer ul { display: grid; gap: 10px; }
.site-footer li { list-style: none; }
.site-footer li a { color: rgba(255,255,255,0.64); transition: color 0.15s ease; }
.site-footer li a:hover { color: var(--ice); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: var(--fs-sm);
}
.footer-bottom a { color: rgba(255,255,255,0.64); }

/* ---------- Sticky mobile bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: rgba(12, 54, 36, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--grad);
}
.mobile-bar .btn { flex: 1; padding: 13px 10px; font-size: var(--fs-sm); }

/* ---------- Scroll animations ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
.js :is(.services-grid, .steps-grid, .why-cards, .types-grid, .testi-grid, .signs-grid, .points-grid) > .reveal:nth-child(2) { transition-delay: 0.08s; }
.js :is(.services-grid, .steps-grid, .why-cards, .types-grid, .testi-grid, .signs-grid, .points-grid) > .reveal:nth-child(3) { transition-delay: 0.16s; }
.js :is(.services-grid, .steps-grid, .why-cards, .types-grid, .testi-grid, .signs-grid, .points-grid) > .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 480px; width: 100%; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: 0; }
  .steps-grid::before { display: none; }
  .step-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0 24px;
    text-align: left;
    padding: 0 0 34px;
  }
  .step-card::before {
    content: "";
    position: absolute;
    left: 35px; top: 76px; bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--grad);
    opacity: 0.35;
  }
  .step-card:last-child { padding-bottom: 0; }
  .step-card:last-child::before { display: none; }
  .step-num { width: 72px; height: 72px; margin: 0; grid-row: 1 / 3; font-size: var(--fs-2xl); }
  .step-card h3 { align-self: center; margin-bottom: 6px; }
  .step-card p { grid-column: 2; }
  .why-aircon-grid, .why-grid, .areas-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .photo-band { grid-template-columns: 1fr 1fr; }
  .photo-band .photo-slot--circle { display: none; }
  .main-nav { display: none; }
  .header-cta .btn { display: none; }
  .nav-toggle { display: grid; place-items: center; }
}

@media (max-width: 680px) {
  :root { --sect: 60px; }
  .why-aircon, .contact { border-radius: 28px 28px 28px 84px; width: calc(100% - 16px); margin: 16px auto; }
  .contact { border-radius: 28px 28px 84px 28px; }
  .why-aircon::before { transform: translate(-9px, 11px); }
  .contact::before { transform: translate(9px, 11px); }
  .wa-banner { border-radius: 28px 28px 84px 28px; width: calc(100% - 16px); }
  .wa-banner::before { transform: translate(9px, 11px); }
  .faq { width: calc(100% - 16px); border-radius: 28px 28px 28px 72px; }
  .hero { padding: 112px 0 96px; }
  .hero::before { left: -40%; width: 200%; bottom: -382px; height: 480px; }
  .hero::after { left: -40%; width: 200%; bottom: -392px; height: 480px; }
  .hero-visual::before { top: -20px; right: -18px; }
  .hero-visual::after { top: -28px; right: -28px; }
  .hero-badge {
    margin-bottom: 18px; padding: 7px 13px;
    font-size: var(--fs-2xs);
    /* Long county badges wrap; keep the pill reading as a label, not a button */
    max-width: 100%;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.07em;
    border-radius: 18px;
  }
  .hero h1 { margin-bottom: 18px; }
  .hero-sub { font-size: var(--fs-md); }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-outline-light { display: none; }
  .hero-ticks { margin-bottom: 18px; }
  .hero-trust { display: none; }
  .quote-card { padding: 26px 20px 20px; }
  .quote-assure { gap: 6px 12px; }
  .accreditations { padding: 20px 0 0; }
  .accreditations .badge-row { gap: 22px 28px; }
  .accreditations img { height: 42px; }
  .services-grid, .points-grid, .why-cards, .form-row { grid-template-columns: 1fr; }
  .step-card { grid-template-columns: 60px 1fr; gap: 0 18px; }
  .step-num { width: 60px; height: 60px; font-size: var(--fs-xl); border-width: 5px; }
  .step-card::before { left: 29px; top: 64px; }
  .header-phone span { display: none; }
  .mobile-bar { display: flex; }
  body:has(.mobile-bar) { padding-bottom: 74px; }
  .lead-form { padding: 30px 22px; }
  .process-cta { align-items: stretch; flex-direction: column; gap: 14px; text-align: center; border-radius: var(--radius); }
  .process-cta .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .site-footer { margin-top: 72px; }
  .site-footer::before { top: -52px; height: 220px; }
  .site-footer::after { top: -44px; height: 220px; }
  .map-wrap { border-radius: 28px 28px 28px 84px; border-width: 5px; }
  .map-wrap iframe { border-radius: 23px 23px 23px 79px; }
  .photo-band { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .photo-band .photo-slot { min-height: 190px; }
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 auto 0;
  z-index: 99;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 18px 6%;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-md);
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ---------- CTA banner (deep green band, flyer style) ---------- */
.wa-banner {
  position: relative;
  padding: 56px 0;
  width: min(1400px, calc(100% - 28px));
  margin: 28px auto;
  border-radius: 48px 48px 170px 48px / 48px 48px 120px 48px;
  z-index: 0;
}
.wa-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(64, 180, 103, 0.22), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  z-index: -1;
}
.wa-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  transform: translate(14px, 16px);
  z-index: -2;
}
.wa-banner .btn-primary { background: #fff; color: var(--navy-900); box-shadow: 0 10px 26px rgba(4, 16, 11, 0.35); }
.wa-banner .btn-primary:hover { background: var(--ice-bg); }
.wa-banner .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 40px;
}
.wa-banner h2 { color: #fff; font-size: var(--fs-h3); margin-bottom: 8px; }
.wa-banner p { color: rgba(255,255,255,0.80); font-size: var(--fs-md); max-width: 560px; }
.wa-banner-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Unit types ---------- */
.unit-types { background: radial-gradient(1100px 460px at 50% -140px, rgba(49, 157, 146, 0.06), transparent 70%); }
.types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.type-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}
.type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(47, 174, 108, 0.4); }
.type-card svg { width: 30px; height: 30px; color: var(--cyan-strong); margin-bottom: 14px; }
.type-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.type-card p { font-size: var(--fs-sm); }
.type-card .type-fit { display: block; margin-top: 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--cyan-strong); font-family: var(--font-head); }
.types-note { text-align: center; margin-top: 32px; font-size: var(--fs-md); color: var(--body); }
.types-note a { font-weight: 700; }

/* ---------- Maintenance ---------- */
.maintenance { background: #fff; }
.maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.maint-card {
  position: relative;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius) var(--radius) 88px var(--radius);
  color: rgba(255,255,255,0.84);
  padding: 38px 34px;
  overflow: hidden;
}
.maint-card::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
}
.maint-card h3, .maint-card h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: 18px; }
.maint-card ul { display: grid; gap: 12px; margin-bottom: 22px; }
.maint-card li { list-style: none; display: flex; gap: 11px; font-size: var(--fs-base); color: #fff; font-weight: 600; }
.maint-card li svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 2px; }
.maint-card .maint-small { font-size: var(--fs-sm); color: rgba(255,255,255,0.62); }
.maint-copy h3, .maint-copy h2 { font-size: var(--fs-xl); margin: 30px 0 10px; position: relative; padding-top: 14px; }
.maint-copy h3::before, .maint-copy h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 4px;
  border-radius: 4px;
  background: var(--grad);
}
.maint-copy h3:first-child, .maint-copy h2:first-child { margin-top: 0; }
.maint-copy h3.gold, .maint-copy h2.gold { padding-top: 8px; }
.maint-copy h3.gold::before, .maint-copy h2.gold::before { display: none; }
.maint-copy p { font-size: var(--fs-base); margin-bottom: 12px; }
.maint-copy .btn { margin-top: 12px; }

/* ---------- Warning signs ---------- */
.signs { background: radial-gradient(1100px 460px at 50% -140px, rgba(47, 174, 108, 0.06), transparent 70%); }
.signs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.sign-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px 20px 26px;
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sign-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
}
.sign-card svg { width: 22px; height: 22px; color: var(--cyan-strong); flex: none; margin-top: 2px; }
.sign-card h4, .sign-card h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.sign-card p { font-size: var(--fs-sm); }
.signs-cta { text-align: center; margin-top: 34px; }
.signs-cta p { margin-bottom: 16px; font-size: var(--fs-md); color: var(--body); }

@media (max-width: 1024px) {
  .types-grid, .signs-grid { grid-template-columns: 1fr 1fr; }
  .maint-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 680px) {
  .types-grid, .signs-grid { grid-template-columns: 1fr; }
  .wa-banner .container { flex-direction: column; align-items: flex-start; }
}

/* ---------- Testimonials ---------- */
.testimonials { background: radial-gradient(1100px 460px at 50% -140px, rgba(64, 180, 103, 0.06), transparent 70%); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.testi-stars { color: #B98A1B; font-size: var(--fs-md); letter-spacing: 3px; margin-bottom: 16px; }
.testi-quote { flex: 1; font-size: var(--fs-base); color: var(--ink); line-height: 1.6; margin-bottom: 20px; }
.testi-who { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--body); }
.testi-who strong { color: var(--ink); }

/* ---------- What happens next ---------- */
.next-steps { display: grid; gap: 10px; margin-top: 20px; }
.next-steps li {
  list-style: none;
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--fs-sm); font-weight: 600; color: var(--body);
}
.next-steps .ns-num {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  color: var(--cyan-strong);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-2xs);
  display: grid; place-items: center;
  margin-top: 1px;
}

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

/* ==========================================================================
   Elevation layer (26/07/2026): shared article system, form validation states,
   pending-state markers, FAQ link rows. Components only; tokens unchanged.
   ========================================================================== */

/* ---------- Article / guide system ----------
   Replaces the per-page inline <style> blocks that every advice article carried.
   Measure is capped at 68ch for reading comfort; on wide screens the freed right
   rail carries the table of contents (built by script.js from the H2s). */
.guide { padding: 140px 0 40px; }
.guide .container { max-width: 800px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.guide h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 14px; }
.guide .guide-meta { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 28px; }
.guide h2 { font-size: var(--fs-3xl); margin: 38px 0 12px; }
.guide h3 { font-size: var(--fs-lg); margin: 24px 0 8px; }
.guide p, .guide li { font-size: var(--fs-md); margin-bottom: 13px; max-width: 68ch; }
.guide ul, .guide ol { padding-left: 22px; margin-bottom: 16px; }
.guide .callout {
  background: var(--ice-bg);
  border: 1px solid var(--line);
  border-left: 5px solid var(--cyan);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 26px 0;
}
.guide .callout p { margin-bottom: 0; }

/* Table of contents: desktop sticky rail; mobile "On this page" jump list */
.guide-toc { display: none; position: sticky; top: 110px; align-self: start; }

@media (min-width: 1100px) {
  .guide .container { max-width: 1160px; }
  .guide-layout { grid-template-columns: minmax(0, 720px) 280px; }
  .guide-toc { display: block; }
}
.guide-toc-title {
  font-family: var(--font-head);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan-strong);
  margin-bottom: 12px;
}
.guide-toc ol { list-style: none; padding: 0; margin: 0 0 22px; border-left: 3px solid var(--line); }
.guide-toc li { margin: 0; }
.guide-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -3px;
  border-left: 3px solid transparent;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--body);
  text-decoration: none;
}
.guide-toc a:hover { color: var(--cyan-strong); border-left-color: var(--cyan); }
.guide-toc .toc-cta {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius-sm) var(--radius-sm) 40px var(--radius-sm);
  padding: 22px 20px;
  color: rgba(255,255,255,0.84);
  font-size: var(--fs-sm);
}
.guide-toc .toc-cta p { color: rgba(255,255,255,0.84); font-size: var(--fs-sm); margin: 0 0 14px; max-width: none; }
.guide-toc .toc-cta strong { color: #fff; }
.guide-toc .toc-cta .btn { width: 100%; padding: 12px 18px; font-size: var(--fs-sm); }
.guide-toc .toc-cta .btn-primary { background: #fff; color: var(--navy-900); box-shadow: 0 10px 26px rgba(4, 16, 11, 0.35); }
.guide-toc .toc-cta .btn-primary:hover { background: var(--ice-bg); }
.guide .guide-toc a { text-decoration: none; }
.toc-mobile { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #F9FCF9; }
.toc-mobile summary {
  cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink);
  padding: 13px 16px;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "+"; font-weight: 700; color: var(--cyan-strong); }
.toc-mobile[open] summary::after { content: "\2212"; }
.toc-mobile ol { list-style: none; padding: 0 16px 12px; margin: 0; }
.toc-mobile a { display: block; padding: 8px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--body); text-decoration: none; border-top: 1px solid var(--line); }
@media (min-width: 1100px) { .toc-mobile { display: none; } }

/* Tinted band for the visible Quick answers block inside guides */
.guide .quick-answers {
  background: var(--ice-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 64px var(--radius);
  padding: 28px 28px 20px;
  margin: 38px 0 26px;
}
.guide .quick-answers h2 { margin-top: 0; }
.guide .quick-answers h3 { margin-top: 18px; }

/* Mid-article contextual CTA */
.guide-cta {
  position: relative;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius) var(--radius) 64px var(--radius);
  padding: 28px 30px;
  margin: 34px 0;
  overflow: hidden;
}
.guide-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
}
.guide-cta p { color: rgba(255,255,255,0.84); margin: 0 0 16px; max-width: none; }
.guide-cta p strong { color: #fff; }
.guide-cta .btn { margin: 0; }

/* ---------- Form validation states ----------
   Inline per-field errors written by script.js; native bubbles suppressed. */
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
  border-color: #C4453B;
  background: #FDF6F5;
}
.form-group.invalid input:focus,
.form-group.invalid select:focus,
.form-group.invalid textarea:focus {
  border-color: #C4453B;
  box-shadow: 0 0 0 4px rgba(196, 69, 59, 0.14);
}
.field-error {
  display: block;
  color: #B3372E;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: 6px;
}
.lead-form .field-error,
.quote-card .field-error { text-align: left; }

/* ---------- Pending-state marker ----------
   One dated marker system for detail that is real but not yet locked
   (spec lines, payment stages, cost bands). The chip carries the meaning so
   surrounding copy does not have to repeat it. */
.pending-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-pale);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  font-family: var(--font-head);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pending-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 2px solid var(--gold);
}
.pending-legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-size: var(--fs-sm); color: var(--body);
  margin: 18px 0 6px;
}
.pending-legend .pending-chip { margin-right: 2px; }

/* ---------- FAQ outro link rows ----------
   Replaces centred paragraphs stuffed with underlined links. */
.faq-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 12px;
  margin-top: 22px;
}
.faq-links a {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-head);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--cyan-strong);
  text-decoration: none;
}
.faq-links a:hover { border-color: var(--cyan); }
.faq-links a svg { width: 15px; height: 15px; }

/* ---------- Tables inside grid columns ----------
   Grid items default to min-width auto, so a wide table forces its column
   past the track and the page clips it. The wrapper scrolls instead. */
.table-wrap { overflow-x: auto; max-width: 100%; }
.maint-grid > *, .guide-body { min-width: 0; }

/* Utility pages keep their trust line on mobile (no other identity below the fold) */
@media (max-width: 680px) {
  .hero-trust.hero-trust--always { display: block; }
}

/* ---------- Mobile bar WhatsApp slot (injected when the number is live) ---------- */
.mobile-bar .wa-mini {
  flex: 0 0 auto;
  width: 52px;
  padding: 15px 0;
}
.mobile-bar .wa-mini svg { width: 22px; height: 22px; }

/* ---------- One primary ask per mobile viewport ----------
   When the hero already contains the quote form, the hero button that merely
   scrolls to it is a duplicate ask on mobile: the form follows immediately. */
@media (max-width: 680px) {
  .hero:has(.hero-visual .quote-card) .hero-ctas { display: none; }
}

/* ---------- About photo band: invisible until real photos exist ----------
   The slots are owner scaffolding (see the TODO in about.html). Empty slots
   must never render as blank placeholders on the trust page. */
.photo-band:not(:has(img)) { display: none; }
.photo-slot:not(:has(img)) { display: none; }

/* ---------- "What happens next" strip (generated county pages) ----------
   Row variant of the ring-number .next-steps pattern. */
.next3 { padding-top: 0; }
.next-steps--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.next-steps--row li { font-size: var(--fs-base); }
@media (max-width: 680px) {
  .next-steps--row { grid-template-columns: 1fr; }
}

/* ---------- Spec register ----------
   The Lifecycle Spec reads as a document: full-width single-column rows
   instead of the 2-across card grid, which left dangling single cards. */
.spec-register { grid-template-columns: 1fr; }
.spec-register .point p { margin-top: 0; }
.spec-register .point-num + p { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn:hover, .btn:active,
  .service-card, .service-card:hover,
  .type-card:hover, .testi-card:hover, .chip:hover, .point:hover,
  .why-card:hover, .channel:hover, .accreditations img:hover {
    transform: none;
    transition: none;
  }
  .main-nav a { transition: color 0.18s ease; }
}