/* ==========================================================================
   5 Star Drainage Kent — main stylesheet
   Brand: navy #0041AA / orange #FB6600 / white
   Structure: variables & theme -> reset -> layout -> components -> pages -> utilities
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* ---------- Theme variables ---------- */
:root{
  --navy:#0041AA;
  --navy-dark:#00337f;
  --navy-darker:#00265e;
  --orange:#FB6600;
  --orange-dark:#dd5500;
  /* Darker variant used specifically for small text on light backgrounds
     (e.g. the .eyebrow labels) — the base --orange only has ~3:1 contrast
     on white, which fails WCAG AA (needs 4.5:1 for text this size). */
  --orange-text:#b34400;
  --white:#ffffff;

  --bg:#ffffff;
  --bg-alt:#f3f6fb;
  --bg-tint:#eef2fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text:#151b2e;
  --text-muted:#525a70;
  --border:#e2e7f1;
  --header-bg:rgba(255,255,255,.92);
  --shadow:0 10px 30px -12px rgba(15,25,60,.18);
  --shadow-sm:0 4px 14px -6px rgba(15,25,60,.15);
  --focus-ring:0 0 0 3px rgba(251,102,0,.45);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;

  --container:1240px;
  --header-container:1440px;
  --header-h:96px;

  --font-head:"Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fixed "always dark navy" gradient used for hero / page-hero / stat bands /
     CTA banners. Deliberately NOT the same as --navy (which gets remapped to a
     lighter accent colour in dark mode for text/icons) so these surfaces stay
     rich and dark in both themes instead of turning pale in dark mode. */
  --brand-grad-1:#00204d;
  --brand-grad-2:#0041AA;
  --brand-grad-3:#c94900;
  --brand-radial-opacity:.35;

  color-scheme: light;
}

html[data-theme="dark"]{
  --navy:#6f9dff;
  --navy-dark:#4c7ce0;
  --navy-darker:#3a63bd;
  --orange:#ff8a2b;
  --orange-dark:#ff7000;
  --orange-text:#ff8a2b;

  --bg:#0a1120;
  --bg-alt:#0f1830;
  --bg-tint:#111c36;
  --surface:#141f38;
  --surface-2:#182545;
  --text:#eef1f9;
  --text-muted:#a9b3cc;
  --border:#26314f;
  --header-bg:rgba(10,17,32,.85);
  --shadow:0 10px 34px -12px rgba(0,0,0,.55);
  --shadow-sm:0 4px 16px -6px rgba(0,0,0,.5);
  --focus-ring:0 0 0 3px rgba(255,138,43,.5);

  --brand-grad-1:#071023;
  --brand-grad-2:#0f2547;
  --brand-grad-3:#4a1f00;
  --brand-radial-opacity:.24;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:1rem;
  transition:background-color .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
input,textarea,select{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.18; margin:0 0 .6em; color:var(--text); font-weight:700; }
p{ margin:0 0 1em; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:4px; }
video{ max-width:100%; border-radius:var(--radius); display:block; }

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

/* Default fallback sizing for every inline icon SVG (all use aria-hidden="true").
   Component-specific rules below (e.g. .icon-badge svg, .btn svg) override this
   where a different size is needed; this just stops any icon used somewhere
   without a specific rule from rendering at browser-default (huge) size. */
svg[aria-hidden="true"]{ width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-0.15em; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(24px, 5vw, 48px); }
.section{ padding:clamp(3.2rem,6vw,6rem) 0; }
.section-alt{ background:var(--bg-alt); }
.page-hero + .section[style*="padding-top:0"]{ padding-top:clamp(3.2rem,6vw,6rem)!important; }
.section.section-alt:has(> .container > .cta-banner){ padding-top:clamp(3.2rem,6vw,6rem)!important; }
.section-tint{ background:var(--bg-tint); }
.section-navy{ background:linear-gradient(135deg,var(--brand-grad-1),var(--brand-grad-2)); color:#fff; }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-head{ max-width:760px; margin:0 0 2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font:700 .78rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-text); margin-bottom:.9rem;
}
.eyebrow::before{ content:""; width:22px; height:3px; background:var(--orange); border-radius:2px; }
h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
h3{ font-size:clamp(1.15rem,2vw,1.4rem); }
.lead{ font-size:1.15rem; color:var(--text-muted); max-width:60ch; }
.text-muted{ color:var(--text-muted); }
.grid{ display:grid; gap:1.75rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem; border-radius:999px; font-weight:700; font-size:.98rem;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
/* color is a fixed dark tone, not white — white text on this bright orange
   only reaches ~3:1 contrast, below the 4.5:1 AA minimum for this text size. */
.btn-primary{ background:var(--orange); color:#1a0f00; box-shadow:0 8px 20px -8px rgba(251,102,0,.6); }
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 8px 20px -8px rgba(0,65,170,.55); }
.btn-navy:hover{ background:var(--navy-dark); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--navy); }
html[data-theme="dark"] .btn-outline{ color:#fff; }
.btn-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-ghost-white{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.btn-ghost-white:hover{ background:#fff; color:var(--navy); }
.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }

/* Dark mode: solid filled buttons become dark with a coloured border instead
   of a bright saturated fill, so they sit comfortably on a dark page. */
html[data-theme="dark"] .btn-primary{ background:#20130a; color:var(--orange); border-color:var(--orange); box-shadow:none; }
html[data-theme="dark"] .btn-primary:hover{ background:var(--orange); color:#100a05; }
html[data-theme="dark"] .btn-navy{ background:#0a1830; color:var(--navy); border-color:var(--navy); box-shadow:none; }
html[data-theme="dark"] .btn-navy:hover{ background:var(--navy); color:#0a1120; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:2000; isolation:isolate;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
}
/* backdrop-filter deliberately omitted: it makes this element the containing
   block for any position:fixed descendant (per the CSS Filter Effects /
   Backdrop-Filter spec), which broke the full-screen mobile nav overlay
   below — its inset:0 was resolving against the header bar's own small box
   instead of the viewport, so the "full-screen" menu only ever covered the
   header's height and rendered underneath the hero section beneath it. */
.site-header .container{ max-width:var(--header-container); }
.header-inner{ display:flex; align-items:center; gap:1.1rem; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; margin-right:.75rem; flex:none; }
.brand img{ height:64px; width:auto; display:block; }

.main-nav{ display:flex; align-items:center; gap:.5rem; }
.main-nav > ul{ display:flex; align-items:center; gap:.1rem; }
.main-nav a.nav-link{
  display:flex; align-items:center; gap:.3rem; padding:.6rem .7rem; border-radius:999px;
  font-weight:600; font-size:.92rem; color:var(--text); white-space:nowrap;
}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active{ background:var(--bg-tint); color:var(--navy); }
html[data-theme="dark"] .main-nav a.nav-link:hover, html[data-theme="dark"] .main-nav a.nav-link.active{ color:var(--orange); }

.has-dropdown{ position:relative; }
.has-dropdown .chev{ width:.7em; height:.7em; transition:transform .15s ease; }
.has-dropdown:hover .chev, .has-dropdown.open .chev{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:100%; left:0; min-width:260px; padding:.6rem; z-index:2001;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; align-items:center; gap:.6rem; padding:.65rem .7rem; border-radius:var(--radius-sm); font-size:.92rem; font-weight:600; color:var(--text); }
.dropdown a:hover{ background:var(--bg-tint); color:var(--navy); }
.dropdown a svg{ width:1.2em; height:1.2em; color:var(--orange); flex:none; }

.header-actions{ display:flex; align-items:center; gap:.9rem; margin-left:auto; padding-left:.75rem; flex:none; }
.header-cta{ display:flex; align-items:center; gap:.6rem; margin-left:.9rem; }
.header-phone{ display:flex; align-items:center; gap:.4rem; font-weight:700; color:var(--navy); font-size:.92rem; white-space:nowrap; }
html[data-theme="dark"] .header-phone{ color:#fff; }
.header-phone svg{ width:1.2em; height:1.2em; color:var(--orange); }

/* Theme toggle (sun / system / moon segmented slider) */
.theme-toggle{
  display:inline-flex; align-items:center; background:var(--bg-tint); border:1px solid var(--border);
  border-radius:999px; padding:3px; position:relative; gap:2px;
}
.theme-toggle button{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:transparent; border:none; cursor:pointer; color:var(--text-muted);
}
.theme-toggle button svg{ width:17px; height:17px; }
.theme-toggle button.active{ color:var(--navy); }
html[data-theme="dark"] .theme-toggle button.active{ color:var(--orange); }
/* White reads better than orange for the selected dark/system icon against
   the light slider behind it. */
html[data-theme="dark"] .theme-toggle button[data-theme-choice="dark"].active,
html[data-theme="dark"] .theme-toggle button[data-theme-choice="system"].active{ color:#fff; }
/* Extra empirical nudge on top of the icon's own internal centring fix,
   per visual feedback (still read a touch high and left). */
.theme-toggle button[data-theme-choice="dark"] svg{ transform:translate(-1px,2px); }
.theme-toggle .slider{
  position:absolute; top:3px; left:0; width:32px; height:32px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:1;
}
html[data-theme="dark"] .theme-toggle .slider{ background:var(--navy); }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border); background:var(--bg-tint); cursor:pointer; color:var(--navy);
}
html[data-theme="dark"] .nav-toggle{ color:#fff; }
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width:1240px){
  .header-phone span{ display:none; }
}

@media (max-width:980px){
  /* Full-screen takeover: covers the entire viewport (not just the area
     below the header) so hero/content behind can never show through.
     The header bar itself sits above this (higher z-index) and stays
     visible/usable, including the toggle button which becomes the close
     control; padding-top pushes the link list down clear of the header. */
  .main-nav{
    position:fixed; inset:0; z-index:2500; background:var(--bg);
    flex-direction:column; align-items:stretch;
    padding:calc(var(--header-h) + max(16px, env(safe-area-inset-top)) + .6rem) 1.2rem 2rem;
    overflow-y:auto; transform:translateX(100%); transition:transform .3s ease;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .main-nav a.nav-link{ padding:.9rem 1rem; font-size:1.05rem; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 1rem;
    max-height:0; overflow:hidden; transition:max-height .25s ease; display:block; }
  .has-dropdown.open .dropdown{ max-height:400px; }
  .header-cta{ margin-top:1.2rem; flex-direction:column; align-items:stretch; }
  .header-cta .btn{ width:100%; }
  .nav-toggle{ display:inline-flex; position:relative; z-index:2600; }
}

/* iPhone Dynamic Island / notch sits at the top in portrait, but rotates to
   the side in landscape — give the open menu extra top clearance there so
   the first links aren't tucked under the camera housing / rounded corner. */
@media (max-width:980px) and (orientation:landscape){
  .main-nav{ padding-top:calc(var(--header-h) + max(30px, env(safe-area-inset-top) + 18px) + .6rem); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,var(--brand-grad-1),var(--brand-grad-2) 60%,var(--brand-grad-3));
}
.hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(251,102,0,var(--brand-radial-opacity)), transparent 55%); pointer-events:none; }
.hero-inner{ position:relative; z-index:1; padding-block:clamp(1.3rem,3vw,2.75rem); }

.hero-logo-row{ text-align:center; margin-bottom:clamp(0.8rem,1.75vw,1.3rem); }
.hero-logo-row .hero-logo{ height:clamp(112px,12.25vw,154px); width:auto; margin:0 auto; display:inline-block; }

.hero-columns{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.hero h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.4rem); }
.hero .lead{ color:rgba(255,255,255,.88); font-size:1.15rem; }
.hero-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); aspect-ratio:4/3; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media .stat-chip{
  position:absolute; left:1.2rem; bottom:1.2rem; background:rgba(10,17,32,.78); backdrop-filter:blur(6px);
  color:#fff; padding:.9rem 1.2rem; border-radius:var(--radius); display:flex; align-items:center; gap:.8rem; box-shadow:var(--shadow);
}
.stat-chip strong{ font-family:var(--font-head); font-size:1.4rem; display:block; color:var(--orange); }
.stat-chip span{ font-size:.78rem; color:rgba(255,255,255,.8); }

/* Bottom row spans the full hero width, under both columns: CTA buttons on
   the left (roughly under the copy column), badge pills on the right
   (roughly under Kevin's photo), spaced evenly between the two groups. */
.hero-bottom-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem;
  margin-top:clamp(2rem,4vw,2.8rem); padding-top:clamp(1.6rem,3vw,2rem);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:0; }
.hero-badge{ display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:.86rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:.5rem .9rem; border-radius:999px; }
.hero-badge svg{ width:1.2em; height:1.2em; color:var(--orange); }

@media (max-width:900px){
  .hero-columns{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
}

@media (max-width:640px){
  .hero-bottom-row{ flex-direction:column; align-items:stretch; }
  .hero-cta, .hero-badges{ justify-content:center; }
}

/* Page header (non-home pages) */
.page-hero{
  position:relative; color:#fff; padding:clamp(2.6rem,6vw,4rem) 0;
  background:linear-gradient(135deg,var(--brand-grad-1),var(--brand-grad-2));
  overflow:hidden;
}
.page-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(251,102,0,var(--brand-radial-opacity)), transparent 55%); }
.page-hero > .container{ position:relative; z-index:1; }
.page-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.page-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:.5rem; }
.page-hero .lead{ color:rgba(255,255,255,.88); }
.breadcrumb{ display:flex; gap:.4rem; align-items:center; font-size:.85rem; color:rgba(255,255,255,.75); margin-bottom:1rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:#fff; text-decoration:underline; }
.page-hero-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/11; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .page-hero-inner{ grid-template-columns:1fr; } .page-hero-media{ order:-1; } }

/* ==========================================================================
   Cards / components
   ========================================================================== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.icon-badge{ width:54px; height:54px; flex-shrink:0; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--bg-tint); color:var(--navy); margin-bottom:1rem; }
html[data-theme="dark"] .icon-badge{ color:var(--orange); }
.icon-badge svg{ width:28px; height:28px; }

.service-card{ display:flex; flex-direction:column; height:100%; }
.service-card h3{ margin-bottom:.5rem; }
.service-card p{ color:var(--text-muted); flex:1; }
.service-card .card-link{ margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--orange-text); }
.service-card .card-link svg{ width:1.1em; height:1.1em; transition:transform .15s ease; }
.service-card:hover .card-link svg{ transform:translateX(4px); }

.feature-row{ display:flex; gap:1rem; }
.feature-row .icon-badge{ flex:none; margin-bottom:0; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split.reverse .split-media{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:2rem; } .split.reverse .split-media{ order:-1; } }
.split-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover; }
.split-media video{ width:100%; box-shadow:var(--shadow); }
.check-list li{ display:flex; gap:.7rem; margin-bottom:.85rem; align-items:flex-start; }
.check-list svg{ width:1.3em; height:1.3em; color:var(--orange); flex:none; margin-top:.15em; }

/* Accordion (FAQ style used on service pages) */
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-item:first-child{ border-top:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.3rem 0; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--text);
}
.accordion-trigger svg{ width:1.2em; height:1.2em; flex:none; color:var(--orange); transition:transform .2s ease; }
.accordion-item.open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.accordion-panel-inner{ padding-bottom:1.3rem; color:var(--text-muted); }
.accordion-item.open .accordion-panel{ max-height:600px; }

/* Trust / accreditation strip */
.trust-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.4rem,4vw,3.2rem); }
.trust-strip img{ height:46px; width:auto; filter:grayscale(15%); opacity:.92; }
html[data-theme="dark"] .trust-strip img{ background:#fff; padding:.35rem .6rem; border-radius:8px; }

/* In dark mode the plain body background made this band look like an empty
   gap between the hero and the next section — give it the same brand
   gradient used by the "Got a drainage problem right now?" CTA banner
   near the footer, so it reads as an intentional, branded strip. */
html[data-theme="dark"] .trust-band{
  background:linear-gradient(120deg, var(--brand-grad-1), var(--brand-grad-2));
}

/* Testimonials */
.testimonial-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column; }
.stars{ display:flex; gap:.15rem; color:var(--orange); margin-bottom:.9rem; }
.stars svg{ width:18px; height:18px; }
.testimonial-card p{ color:var(--text); flex:1; }
.testimonial-name{ font-weight:700; color:var(--navy); margin-top:.8rem; }
html[data-theme="dark"] .testimonial-name{ color:var(--orange); }

/* Pricing table */
.price-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.price-table th,.price-table td{ padding:1rem 1.3rem; text-align:left; border-bottom:1px solid var(--border); }
.price-table th{ background:var(--bg-tint); font-family:var(--font-head); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.price-table tr:last-child td{ border-bottom:none; }
.price-table td.price{ font-weight:800; color:var(--navy); font-family:var(--font-head); white-space:nowrap; }
html[data-theme="dark"] .price-table td.price{ color:var(--orange); }
.price-note{ font-size:.85rem; color:var(--text-muted); margin-top:1rem; }

/* Comparison / audience signpost cards (Residential vs Commercial) */
.audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
@media (max-width:760px){ .audience-grid{ grid-template-columns:1fr; } }
.audience-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:320px; display:flex; align-items:flex-end;
  padding:2rem; color:#fff; box-shadow:var(--shadow); isolation:isolate;
}
.audience-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.audience-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,20,60,.15),rgba(0,10,30,.92)); z-index:-1; }
.audience-card .icon-mark{
  position:absolute; top:1.4rem; left:1.4rem; width:104px; height:104px; border-radius:50%;
  background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.45);
}
.audience-card .icon-mark svg{ width:52px; height:52px; }
.audience-card .corner-label{
  position:absolute; top:1.5rem; right:1.7rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px); color:#fff; font-weight:800; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.6rem 1.4rem; border-radius:999px;
}
@media (max-width:560px){
  .audience-card .icon-mark{ width:76px; height:76px; }
  .audience-card .icon-mark svg{ width:38px; height:38px; }
  .audience-card .corner-label{ font-size:1rem; padding:.5rem 1.1rem; }
}
.audience-card h3{ color:#fff; font-size:1.6rem; }
.audience-card p{ color:rgba(255,255,255,.85); margin-bottom:0; }

/* Stats bar */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
@media (max-width:760px){ .stats-bar{ grid-template-columns:repeat(2,1fr); } }
.stats-bar strong{ display:block; font-family:var(--font-head); font-size:clamp(1.7rem,3vw,2.4rem); color:var(--orange); }
.stats-bar span{ font-size:.85rem; color:rgba(255,255,255,.72); font-weight:600; }

/* CTA banner */
.cta-banner{ border-radius:var(--radius-lg); background:linear-gradient(120deg,var(--brand-grad-1),var(--brand-grad-2)); color:#fff; padding:clamp(2rem,5vw,3.2rem); display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between; }
.cta-banner h3{ color:#fff; margin-bottom:.35rem; font-size:clamp(1.3rem,2.6vw,1.7rem); }
.cta-banner p{ color:rgba(255,255,255,.85); margin:0; }
.cta-actions{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy-darker); color:rgba(255,255,255,.85); padding:3.5rem 0 1.5rem; }
.site-footer a:hover{ color:#fff; }
/* In light mode the white page background already contrasts cleanly
   against the navy footer, so no extra gap is needed there — it only
   read as a stray blank strip. In dark mode the last section and the
   footer were both dark and blurred together, so keep the breathing
   room (plus a proper dark fill, since --navy-darker is remapped to a
   brighter blue in dark mode for text/icon use elsewhere) there only. */
html[data-theme="dark"] .site-footer{ background:var(--brand-grad-1); margin-top:clamp(1.5rem,3vw,2.75rem); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.footer-brand img{ width:42px; height:42px; }
.footer-brand strong{ font-family:var(--font-head); color:#fff; font-size:1.1rem; }
.footer-col h4{ color:#fff; font-family:var(--font-head); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col li{ margin-bottom:.65rem; font-size:.92rem; }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.footer-contact svg{ width:1.2em; height:1.2em; color:var(--orange); flex:none; margin-top:.15em; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--orange); }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; padding-top:1.5rem; font-size:.82rem; color:rgba(255,255,255,.6); }
.footer-bottom a{ color:rgba(255,255,255,.75); }
.site-credit{ margin:0; padding:0 1rem 1.25rem; text-align:center; background:var(--navy-darker); color:rgba(255,255,255,.6); font-size:.82rem; }
.site-credit a{ color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:.18em; }
.site-credit a:hover{ color:#fff; }
html[data-theme="dark"] .site-credit{ background:var(--brand-grad-1); }

/* ==========================================================================
   Gallery — masonry + lightbox
   ========================================================================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.gallery-filters button{
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-weight:600; font-size:.86rem; cursor:pointer; color:var(--text-muted);
}
.gallery-filters button.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
html[data-theme="dark"] .gallery-filters button.active{ background:var(--orange); border-color:var(--orange); }

.masonry{ column-count:4; column-gap:1rem; }
@media (max-width:1100px){ .masonry{ column-count:3; } }
@media (max-width:760px){ .masonry{ column-count:2; } }
@media (max-width:480px){ .masonry{ column-count:1; } }
.masonry-item{ break-inside:avoid; margin-bottom:1rem; border-radius:var(--radius); overflow:hidden; position:relative; cursor:zoom-in; box-shadow:var(--shadow-sm); }
.masonry-item img{ width:100%; display:block; transition:transform .35s ease; }
.masonry-item:hover img{ transform:scale(1.05); }
.masonry-item .zoom-hint{ position:absolute; top:.6rem; right:.6rem; width:32px; height:32px; border-radius:50%; background:rgba(10,17,32,.55); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease; }
.masonry-item .zoom-hint svg{ width:16px; height:16px; }
.masonry-item:hover .zoom-hint{ opacity:1; }
.masonry-item.hide{ display:none; }

.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(6,10,20,.92); display:flex; align-items:center; justify-content:center; padding:4vh 4vw; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-nav{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lightbox-close:hover, .lightbox-nav:hover{ background:var(--orange); border-color:var(--orange); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-close svg, .lightbox-nav svg{ width:20px; height:20px; }
.lightbox-nav.prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:20px; top:50%; transform:translateY(-50%); }
.lightbox-caption{ position:absolute; bottom:20px; left:0; right:0; text-align:center; color:rgba(255,255,255,.85); font-size:.9rem; }
@media (max-width:640px){ .lightbox-nav{ width:38px; height:38px; } .lightbox-close{ width:38px; height:38px; top:12px; right:12px; } .lightbox-nav.prev{ left:8px; } .lightbox-nav.next{ right:8px; } }

/* ==========================================================================
   Projects
   ========================================================================== */
.project-card{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; height:100%; }
.project-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.project-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.project-card .thumb img{ width:100%; height:100%; object-fit:cover; }
/* color is a fixed dark tone (not #fff) because --orange is bright in both
   themes — white text on it only hits ~2.3-3:1 contrast, below the 4.5:1
   minimum. */
.project-card .thumb .tag{ position:absolute; top:.8rem; left:.8rem; background:var(--orange); color:#1a0f00; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px; }
.project-card .body{ padding:1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.project-card .body h3{ margin-bottom:0; font-size:1.15rem; }
.project-card .meta{ display:flex; gap:.8rem; font-size:.8rem; color:var(--text-muted); font-weight:600; }
.project-card .meta svg{ width:1.1em; height:1.1em; color:var(--orange); vertical-align:-3px; margin-right:.25rem; }
.project-card .body p{ color:var(--text-muted); flex:1; font-size:.94rem; }
.placeholder-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; color:var(--text-muted); background:var(--bg-tint); padding:.3rem .7rem; border-radius:999px; width:fit-content; }

.project-hero-stats{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.4rem; }
.project-hero-stats .stat{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:.8rem 1.1rem; min-width:130px; }
.project-hero-stats .stat strong{ display:block; font-family:var(--font-head); font-size:1.15rem; }
.project-hero-stats .stat span{ font-size:.75rem; color:rgba(255,255,255,.75); }

.before-after{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .before-after{ grid-template-columns:1fr; } }
.before-after figure{ margin:0; }
.before-after img, .before-after video{ border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; }
.before-after figcaption{ margin-top:.6rem; font-weight:700; font-size:.85rem; text-align:center; color:var(--text-muted); letter-spacing:.03em; text-transform:uppercase; }

.project-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .project-gallery{ grid-template-columns:repeat(2,1fr); } }
.project-gallery img{ border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:cover; width:100%; }

.project-video{ max-width:820px; margin:0 auto; }
.project-video-frame{ position:relative; overflow:hidden; border-radius:var(--radius); background:#05070b; box-shadow:var(--shadow); }
.project-video video{ display:block; width:100%; aspect-ratio:5/4; object-fit:contain; background:#05070b; }
.video-play-button{ position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:88px; height:88px; border:3px solid rgba(255,255,255,.92); border-radius:50%; background:var(--orange); box-shadow:0 12px 32px rgba(0,0,0,.42); cursor:pointer; transition:transform .2s ease, background .2s ease; }
.video-play-button::before{ content:""; width:0; height:0; margin-left:7px; border-top:16px solid transparent; border-bottom:16px solid transparent; border-left:25px solid #1a0f00; }
.video-play-button:hover{ transform:translate(-50%,-50%) scale(1.07); background:#ff7b22; }
.video-play-button:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.video-play-button[hidden]{ display:none; }
.project-video figcaption{ margin-top:.8rem; text-align:center; color:var(--text-muted); font-size:.9rem; font-weight:600; }
@media (max-width:640px){ .video-play-button{ width:68px; height:68px; } .video-play-button::before{ border-top-width:12px; border-bottom-width:12px; border-left-width:19px; } }

.placeholder-banner{ display:flex; gap:1rem; align-items:flex-start; background:var(--bg-tint); border:1px dashed var(--border); border-radius:var(--radius); padding:1.3rem 1.5rem; }
.placeholder-banner svg{ width:1.6em; height:1.6em; color:var(--orange); flex:none; }
.placeholder-banner strong{ display:block; margin-bottom:.2rem; }

/* Legal content */
.legal-content{ max-width:860px; margin-inline:auto; }
.legal-content h2{ margin-bottom:1rem; }
.legal-content h3{ margin-top:1.9rem; margin-bottom:.55rem; font-size:1.2rem; }
.legal-content p{ color:var(--text-muted); }
.legal-content a{ color:var(--orange-text); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-weight:700; font-size:.86rem; }
.form-field input, .form-field textarea, .form-field select{
  padding:.85rem 1rem; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface); color:var(--text);
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--navy); }
.form-field textarea{ resize:vertical; min-height:140px; }
.form-note{ font-size:.8rem; color:var(--text-muted); }
.contact-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-submit-note{
  margin-bottom:1rem; padding:1rem 1.1rem; background:var(--bg-tint); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.92rem; font-weight:700;
}
.form-submit-note-success{ border-color:rgba(42,125,58,.38); color:#1f6d35; background:rgba(42,125,58,.1); }
.form-submit-note-error{ border-color:rgba(166,39,39,.38); color:#9b2323; background:rgba(166,39,39,.1); }
[data-theme="dark"] .form-submit-note-success{ color:#8ee1a1; background:rgba(42,125,58,.18); }
[data-theme="dark"] .form-submit-note-error{ color:#ffaaa7; background:rgba(166,39,39,.2); }
.cf-turnstile{ min-height:65px; }
.contact-methods{ display:flex; flex-direction:column; gap:1.2rem; }
.contact-method{ display:flex; gap:1rem; align-items:flex-start; }
.contact-method .icon-badge{ margin-bottom:0; }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* Sticky mobile call bar */
.mobile-call-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--navy-darker); color:#fff;
  padding:.8rem 1rem; align-items:center; justify-content:space-between; gap:.8rem; box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.mobile-call-bar a{ display:flex; align-items:center; gap:.5rem; font-weight:700; }
.mobile-call-bar svg{ width:1.3em; height:1.3em; color:var(--orange); }
@media (max-width:760px){ .mobile-call-bar{ display:flex; } body{ padding-bottom:64px; } }
/* --navy-darker is remapped to a bright blue in dark mode (for text/icon use,
   not backgrounds) — same trap hit earlier on .site-footer. Override with the
   fixed dark brand gradient so this bar stays properly dark, not bright blue. */
html[data-theme="dark"] .mobile-call-bar{ background:var(--brand-grad-1); }

/* Skip link */
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 8px 0; z-index:3000; }
.skip-link:focus{ left:0; top:0; }

/* Back to top */
.back-to-top{ position:fixed; right:1.2rem; bottom:5.5rem; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .2s ease; z-index:800; border:none; cursor:pointer; }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; }
@media (min-width:761px){ .back-to-top{ bottom:1.5rem; } }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }