/* ==========================================================================
   Kelp Digital — Master Landing Page Template
   Plain CSS, mobile-first, no build step, no framework.

   PER-CLIENT SWAP POINTS are marked with "SWAP:" comments. In practice
   almost every reskin only touches the :root block below plus the
   placeholder text/images in index.html.
   ========================================================================== */

:root {
  /* Alterra Electrical brand colours (Dani at DesignCo). Role mapping is Kelp's
     call, see the brief. Contrast rules from the brief:
     - Dark Blue carries all text and the dark sections.
     - Orange is for buttons, rules and highlights. Labels on Orange are Dark Blue
       (4.98:1 with the lightened orange below), never white.
     - Orange is under 3:1 against white, so focus rings on light sections are
       Dark Blue; orange rings are kept for the dark sections (see :focus-visible).
     - Light Blue is for icons and accents on dark backgrounds only. Never text on
       white, never behind white text (2.2:1). */
  --brand-primary: #00324B;   /* Dark Blue: header, hero, dark sections, headings and body text */
  --brand-secondary: #42BBE5; /* Light Blue: icons, hero eyebrow, small accents on dark backgrounds */
  /* Light Blue darkened (same 195deg hue) so eyebrows can stay blue on the light
     sections: 5.1:1 on the tinted wash, 5.6:1 on white. Light Blue itself is only
     2.2:1 there. Small text only; never a fill. */
  --brand-secondary-deep: #14708F;
  --brand-accent: #F07E40;    /* Orange, lightened from the brand #ED6C28 (8 Oct 2026) to sit softer against Dark Blue.
                                 The logo artwork keeps the original orange. */

  /* Derived / supporting colours */
  --color-primary-dark: #002438;
  --color-accent-hover: #F28A52; /* lighter, not darker: Dark Blue on it is 5.48:1 */
  --color-text: var(--brand-primary);
  --color-text-muted: #4B5E6A;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F7F9;
  --color-bg-tint: #EEF5F9;   /* faint brand-tinted wash for alternating sections */
  --color-border: #E2E6EC;          /* decorative dividers and card edges */
  --color-input-border: #798A96;    /* form fields: 3.6:1 on white, meets the 3:1 minimum for inputs */
  --color-white: #FFFFFF;

  /* Deepest tone. Shared by the contact section and the footer so the bottom
     of the page reads as one block. Each pair below is a fallback followed by
     the derived value — browsers without color-mix() keep the first. */
  --color-surface-deep: #002A3F;
  --color-surface-deep: color-mix(in srgb, var(--brand-primary) 84%, black);

  /* --- Header theming ---------------------------------------------------
     Default is a solid brand-primary bar with white text. For a light header
     or a transparent-over-hero header, see "Header variants" further down. */
  --header-bg: var(--brand-primary);
  --header-text: var(--color-white);
  --header-text-hover: var(--brand-secondary);
  --header-border: rgba(255, 255, 255, 0.10);
  --nav-drawer-bg: var(--brand-primary); /* mobile drawer, stays solid even if the bar is transparent */

  /* --- Hero scrim -------------------------------------------------------
     Sits heavy on the copy side and fades toward the image side, so the
     headline clears contrast whatever photo goes behind it. */
  --hero-scrim-strong: rgba(0, 50, 75, 0.94);
  --hero-scrim-strong: color-mix(in srgb, var(--brand-primary) 94%, transparent);
  --hero-scrim-mid: rgba(0, 50, 75, 0.84);
  --hero-scrim-mid: color-mix(in srgb, var(--brand-primary) 84%, transparent);
  --hero-scrim-soft: rgba(0, 50, 75, 0.32);
  --hero-scrim-soft: color-mix(in srgb, var(--brand-primary) 32%, transparent);

  /* --- Trust strip ------------------------------------------------------ */
  --trust-bar-bg-top: var(--brand-primary);
  --trust-bar-bg-bottom: #234F64;
  --trust-bar-bg-bottom: color-mix(in srgb, var(--brand-primary) 86%, white);
  --trust-icon-accent: var(--brand-accent);
  --trust-icon-knockout: var(--brand-primary); /* the "cut out" colour inside the icons */

  /* Faded hairline used between the hero and the trust strip, between the
     trust items, and between the contact section and the footer. */
  --rule-accent: var(--brand-accent);

  /* Type, 21 Oct 2026. Anybody (the brand font) is the display face, used only
     for the hero headline and the eyebrows: wide (font-stretch) and in capitals,
     to echo the logo wordmark. The <link> requests Anybody's width (115-150) and
     weight (600-800) axes. Everything else is Inter: all other headings, nav,
     buttons and trust strip labels (--font-heading), and body copy (--font-body). */
  --font-display: 'Anybody', 'Segoe UI', sans-serif;   /* hero h1 and eyebrows only */
  --font-heading: 'Inter', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --container-width: 1160px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 50, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 30, 50, 0.10);
  --shadow-lg: 0 18px 48px rgba(15, 25, 45, 0.18);
  --header-height: 72px;
  --mobile-bar-height: 72px; /* 19px bar labels, see .btn-accent */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
}

@media (min-width: 861px) {
  :root { --header-height: 96px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is what lets the width/height attributes reserve layout space
   without then overriding the aspect-ratio the CSS asks for. Without it every
   sized image renders at its full intrinsic height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--color-primary-dark);
}
p { margin: 0 0 var(--space-2); }
button { font-family: inherit; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--brand-accent);
  color: var(--brand-primary);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  z-index: 200;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}
/* Orange rings only where the background is dark. */
.site-header :focus-visible,
.hero :focus-visible,
.trust-bar :focus-visible,
.contact-info :focus-visible,
.site-footer :focus-visible,
.ty :focus-visible { outline-color: var(--brand-accent); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section[id] { scroll-margin-top: var(--header-height); }

.section { padding-block: var(--space-6); }
@media (min-width: 768px) { .section { padding-block: var(--space-7); } }

.section-heading { max-width: 640px; margin-bottom: var(--space-5); }
.section-heading.centered { margin-inline: auto; text-align: center; max-width: 720px; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 150%;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brand-secondary-deep); /* every eyebrow reads as Light Blue: the deep shade on light sections, the brand Light Blue on dark ones (.hero / .contact) */
  margin-bottom: var(--space-1);
}
/* Phones: narrower width and tighter tracking so the hero eyebrow
   ("Commercial · Industrial · Residential") stays on one line. At 115% it still
   wraps with 0.25em tracking. At 0.7rem, 0.12em fits 375px and up; 0.1em fits 360px. */
@media (max-width: 480px) { .eyebrow { font-stretch: 115%; letter-spacing: 0.12em; } }
@media (max-width: 374px) { .eyebrow { letter-spacing: 0.1em; } }
/* Headings are Inter: h2 at 800, everything else at 700. The hero h1 is the
   one exception, set in Anybody below (see .hero h1). */
h1 { font-size: clamp(2.1rem, 4.2vw + 1rem, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
.section-intro { color: var(--color-text-muted); font-size: 1.05rem; }

.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; vertical-align: -0.15em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  padding: 0.75em 1.4em;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 0.9em 1.8em; font-size: 1.1875rem; }
.btn-sm { padding: 0.55em 1.1em; font-size: 0.88rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--brand-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }

/* Dark Blue label on Orange (4.98:1). Bold 19px labels were first set for
   contrast against the original, darker orange and kept for weight. White on
   Orange is never used. */
.btn-accent { background: var(--brand-accent); color: var(--brand-primary); font-weight: 700; font-size: 1.1875rem; }
.btn-accent:hover { background: var(--color-accent-hover); }


.btn-outline-light { background: rgba(255,255,255,0.06); color: var(--color-white); border-color: rgba(255,255,255,0.65); }
.btn-outline-light:hover { background: rgba(255,255,255,0.16); border-color: var(--color-white); }

/* Header phone button: accent outline, fills on hover. Reads on a dark, light
   or transparent header because it borrows the header's text colour. */
.btn-outline-accent { background: transparent; color: var(--header-text); border-color: var(--brand-accent); }
.btn-outline-accent:hover { background: var(--color-accent-hover); color: var(--brand-primary); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  height: var(--header-height);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.logo {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--header-text);
}
/* Once a real logo file is dropped in. Height-driven so any aspect ratio works;
   crop dead whitespace out of the source file first. */
.logo-img { width: auto; height: 44px; display: block; }
@media (max-width: 379px) { .logo-img { height: 38px; } }
@media (min-width: 861px) { .logo-img { height: 66px; } }

.main-nav ul { display: flex; gap: var(--space-4); }
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  color: var(--header-text);
  white-space: nowrap;
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.main-nav a:hover { color: var(--header-text-hover); border-bottom-color: var(--brand-accent); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-call span { display: none; }
@media (min-width: 480px) { .header-call span { display: inline; } }
/* Phones (same breakpoint as the sticky bar): call button. Tablet and up:
   Get a Free Quote instead. */
.header-quote { display: none; }

/* Social links: Instagram and Facebook marks in the site's colours, an orange
   ring with a white mark, to pair with the orange-outline Get a Free Quote
   button and the orange phone and email icons in the footer. 28px badges in
   40px hit areas in the header, 44px in the footer for thumbs. Header copies
   show from 701px; phones get them in the footer. */
.social-links { display: flex; align-items: center; gap: 0.35rem; }
.social-links a {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.social-links a:hover { transform: scale(1.08); }
.social-links svg { width: 28px; height: 28px; display: block; }
.social-links .sb-disc { fill: none; stroke: var(--brand-accent); stroke-width: 1.6; }
.social-links .sb-fill { fill: var(--color-white); }
.social-links .sb-line { fill: none; stroke: var(--color-white); stroke-width: 1.7; }
.header-social { display: none; }
@media (min-width: 701px) { .header-social { display: flex; } }
@media (min-width: 701px) {
  .header-call { display: none; }
  .header-quote { display: inline-flex; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--header-text); margin-inline: 8px; transition: transform 0.15s ease, opacity 0.15s ease; }

@media (max-width: 860px) {
  .main-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--nav-drawer-bg);
    border-bottom: 0 solid var(--brand-accent); /* only drawn once open */
    /* 0fr -> 1fr beats a magic max-height: the drawer sizes itself to its
       content and there is no dead scroll time at the end of the transition. */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
  }
  .main-nav.is-open { grid-template-rows: 1fr; border-bottom-width: 3px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 0 var(--space-3); overflow: hidden; }
  .main-nav.is-open ul { padding-block: var(--space-2); }
  .main-nav li { border-bottom: 1px solid var(--header-border); }
  .main-nav li:last-child { border-bottom: none; }
  .main-nav a { display: block; padding: var(--space-2) 0; border-bottom: none; }
}
@media (min-width: 861px) {
  .nav-toggle { display: none; }
}

/* ---------- Header variants -------------------------------------------
   SWAP: paste ONE of these into :root (or leave both out for the default
   solid brand-primary bar).

   LIGHT HEADER — white bar, dark text:
     --header-bg: var(--color-white);
     --header-text: var(--color-text);
     --header-text-hover: var(--brand-primary);
     --header-border: var(--color-border);

   TRANSPARENT HEADER — sits over the hero photo, no bar at all.
   Add class="site-header site-header--transparent" to the <header> element
   as well; the rules below handle lifting it out of flow so the hero image
   runs underneath it.
     --header-border: transparent;
   ---------------------------------------------------------------------- */
.site-header--transparent {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
/* Push the hero copy clear of the overlaid bar. */
.site-header--transparent + main .hero { padding-top: calc(var(--header-height) + var(--space-5)); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-6) var(--space-4);
  background: var(--brand-primary);
  color: var(--color-white);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding-block: var(--space-7) var(--space-5); }
}

.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }

/* Brand-led hero (no photo yet): the logo mark sits large on the right as a
   graphic on the Dark Blue background, under the same scrim. On phones the copy
   runs full width, so the mark drops lower and fades right back to keep the
   text clear. Remove the hero-bg--mark class when a real photo goes in. */
.hero-bg--mark img {
  position: absolute;
  right: -18%;
  bottom: -6%;
  width: 95%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  opacity: 0.22;
}
@media (min-width: 768px) {
  .hero-bg--mark img {
    right: max(-4rem, calc((100% - var(--container-width)) / 2 - 2rem));
    top: 50%;
    bottom: auto;
    transform: translateY(-46%);
    width: 50%;
    max-width: 640px;
    opacity: 1;
  }
}

/* Scrim: heavy on the copy side, fading toward the image side, plus a bottom
   fade into the section below so the photo never ends on a hard seam. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 50%, var(--hero-scrim-mid) 82%, var(--brand-primary) 100%),
    linear-gradient(100deg, var(--hero-scrim-strong) 0%, var(--hero-scrim-mid) 42%, var(--hero-scrim-soft) 72%, var(--hero-scrim-soft) 100%),
    linear-gradient(180deg, var(--hero-scrim-mid) 0%, transparent 35%);
}

.hero-inner { position: relative; }
.hero-copy { max-width: 40rem; }
/* Hero headline: Anybody, wide and in capitals. The HTML stays in sentence
   case; the capitals come from text-transform. */
.hero h1 {
  font-family: var(--font-display);
  font-stretch: 130%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-size: clamp(1.875rem, 3.4vw + 1.1rem, 3.5rem);
  color: var(--color-white);
  text-wrap: balance;
}
.hero .eyebrow { color: var(--brand-secondary); }
.hero-subtext { font-size: 1.05rem; color: rgba(255,255,255,0.86); max-width: 48ch; text-wrap: pretty; }
@media (max-width: 560px) { .hero-subtext { font-size: 0.95rem; } }

/* Both CTAs share a width so they read as a matched pair, and go full-width
   once they stack on narrow screens. */
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4) var(--space-3); }
.hero-ctas .btn { min-width: 15.5rem; }
/* Side by side: two equal columns sized to the wider button, so the pair
   always matches whatever the labels are. */
@media (min-width: 561px) {
  .hero-ctas { display: grid; width: fit-content; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { min-width: 0; width: 100%; font-size: 1.0625rem; padding-block: 0.75em; }
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.hero-proof li { display: flex; align-items: center; gap: 0.55em; }
.hero-proof li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}

/* ---------- Trust strip ----------
   After Electric Solutions, a site the client likes: a white line icon over a
   short centred label, four across, no dividers. Two by two on phones. Carries
   the hero's colour down a shade into the light section below. */
.trust-bar {
  position: relative;
  background: linear-gradient(180deg, var(--trust-bar-bg-top) 0%, var(--trust-bar-bg-bottom) 100%);
  padding-block: var(--space-5);
}
/* Hairline marking the hero boundary. Fades out at both ends so it reads as a
   seam rather than a hard border across the full width. */
.trust-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule-accent) 50%, transparent 100%);
  opacity: 0.55;
}

/* Fixed splits rather than auto-fit, so four items never orphan one. Rows
   are equal height on phones so the dividing cross sits dead centre. */
.trust-grid {
  position: relative;
  display: grid;
  gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}
@media (min-width: 760px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

/* Dividers, drawn like the hairline above the strip: 1px of orange fading out
   at both ends. Phones get one cross through the middle of the 2 x 2 grid;
   from 760px, a vertical line sits in each column gap instead. */
.trust-grid::before,
.trust-grid::after,
.trust-card:not(:last-child)::after {
  content: "";
  position: absolute;
  opacity: 0.55;
  pointer-events: none;
}
.trust-grid::before {               /* vertical arm of the cross */
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--rule-accent) 50%, transparent 100%);
}
.trust-grid::after {                /* horizontal arm of the cross */
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, var(--rule-accent) 50%, transparent 100%);
}
.trust-card:not(:last-child)::after { display: none; }
@media (min-width: 760px) {
  .trust-grid::before,
  .trust-grid::after { display: none; }
  .trust-card:not(:last-child)::after {
    display: block;
    top: 0; bottom: 0;
    right: calc(var(--space-3) / -2);
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--rule-accent) 50%, transparent 100%);
  }
}

/* Line icons in the logo's two colours: orange outlines (5.5:1 on navy) with
   Light Blue inner detail (6.1:1), marked .icon-inner. The bolt, "10+" and
   "24/7" are white like the labels, marked .icon-white.
   52px on phones, 80px from 760px, large like the reference. */
.trust-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--brand-accent);
}
@media (min-width: 760px) { .trust-icon { width: 80px; height: 80px; } }
.trust-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-icon text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12.5px;
  fill: currentColor;
  stroke: none;
}
.trust-icon .icon-inner { stroke: var(--brand-secondary); }
.trust-icon .icon-white { stroke: var(--color-white); }
.trust-icon text.icon-white { fill: var(--color-white); stroke: none; }
.trust-icon .icon-text-sm { font-size: 10.5px; } /* "10+" inside the badge */
/* Map: a slightly finer outline so the coastline stays open, South Australia
   filled in Light Blue (6.1:1 on navy), Adelaide in orange with a navy ring. */
.trust-icon--map svg { stroke-width: 2.2; }
.trust-icon .icon-state { fill: var(--brand-secondary); stroke: none; }
.trust-icon .icon-dot { fill: var(--brand-accent); stroke: var(--trust-bar-bg-top); stroke-width: 1.2; }

.trust-card h3 {
  max-width: 15ch;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Services ---------- */
.services {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(66, 187, 229, 0.10) 0%, rgba(66, 187, 229, 0) 60%),
    linear-gradient(180deg, var(--color-bg-tint) 0%, var(--color-bg-alt) 100%);
}

.services-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
/* Three services: one column until three fit side by side. Two-across would
   leave the third card orphaned on its own row. Once side by side, every card
   stretches to the tallest so the row reads as a set. */
@media (min-width: 960px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); row-gap: 0; }
  /* Each card's title, description and list share rows across all three
     cards (subgrid), so the divider above each list lines up whatever the
     description length. row-gap is 0 because subgrid rows inherit it; the
     elements' own margins do the spacing. */
  .service-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}

.service-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* Top strip in Light Blue. Orange is kept for the line under the title and
   the ticks, so each colour has one job in the card. */
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--brand-secondary);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* No icon tiles: the title leads the card, a step larger than other h3s,
   with a short orange line under it (the same line as under the Why Us quote). */
.service-card h3 { color: var(--brand-primary); font-weight: 700; font-size: 1.4rem; margin-top: var(--space-2); }
.service-card h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background: var(--brand-accent);
}
.service-card > p { color: var(--color-text-muted); font-size: 0.95rem; }

.service-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.service-list li {
  position: relative;
  padding-left: 1.7em;
  font-size: 0.9rem;
  color: var(--color-text);
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95em;
  height: 0.5em;
  border-left: 2.5px solid var(--brand-accent);
  border-bottom: 2.5px solid var(--brand-accent);
  transform: rotate(-45deg);
}

.services-footnote {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.98rem;
}
.services-footnote a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Why Us ----------
   Heading, then the client's promise as a pull quote, then three proof points. The template's .why-us-media photo band styles go back
   in alongside a real job photo. */
.why-us { background: var(--color-bg); }
.why-us h2 { max-width: 26ch; }

/* Desktop: the promise on the left, the three points stacked on the right. */
.why-us-body { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
@media (min-width: 960px) { .why-us-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); } }

/* Pull quote: no panel, so it flows with the white section. A large orange
   quote mark above, navy type, a short orange rule below. */
.promise { margin: 0; }
.promise::before {
  content: "\201C";
  display: block;
  height: 0.62em;
  margin-bottom: 0.1em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--brand-accent);
}
.promise p {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.7rem, 1rem + 2.8vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-primary);
  text-wrap: balance;
}
.promise::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: var(--space-3);
  border-radius: 2px;
  background: var(--brand-accent);
}

.feature-list { display: grid; gap: var(--space-4); }
.feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
/* Same icon language as Services and the trust strip: orange outline,
   Light Blue detail (.icon-inner), on a navy tile. */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--brand-accent);
}
.feature-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-icon .icon-inner { stroke: var(--brand-secondary); }
.feature-list strong {
  display: block;
  color: var(--brand-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
}
.feature-list p { margin: 0.25em 0 0; color: var(--color-text-muted); font-size: 0.94rem; }

/* ---------- Where We Work ---------- */
/* Brand-tinted so it reads as a separate block from Why Us above it. */
.areas {
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(66, 187, 229, 0.10) 0%, rgba(66, 187, 229, 0) 60%),
    var(--color-bg-tint);
}
.areas-inner {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) { .areas-inner { grid-template-columns: 1.05fr 0.95fr; } }

.areas-copy h2 { max-width: 18ch; }
.areas-note { font-size: 0.95rem; color: var(--color-text-muted); }
.areas-note a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.areas-map {
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
.areas-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.areas-list { display: flex; flex-direction: column; gap: var(--space-2); }
.areas-list li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.areas-list h3 {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 0.45em;
}
.areas-list .icon { color: var(--brand-accent); width: 1.25em; height: 1.25em; }
.areas-list p { margin: 0; color: var(--color-text-muted); font-size: 0.98rem; }

/* ---------- Contact ----------
   Shares --color-surface-deep with the footer so the bottom of the page reads
   as one dark block. */
.contact {
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(66, 187, 229, 0.18) 0%, rgba(66, 187, 229, 0) 60%),
    var(--color-surface-deep);
  color: var(--color-white);
}
.contact h2 { color: var(--color-white); }
.contact .eyebrow { color: var(--brand-secondary); }
.contact .section-intro { color: rgba(255,255,255,0.82); }

.contact-inner { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .contact-inner { grid-template-columns: 0.9fr 1.1fr; } }

.contact-details { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.contact-details li {
  display: flex;
  align-items: center;
  gap: 0.85em;
  color: rgba(255,255,255,0.90);
  font-size: 0.98rem;
}
.contact-details .icon {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem;
  box-sizing: border-box;
  color: var(--brand-accent);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.contact-details a:hover { color: var(--brand-secondary); }

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.form-row { margin-bottom: var(--space-2); }
.form-row-split { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 480px) { .form-row-split { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.3em; }
input, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65em 0.8em;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
input:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); background: var(--color-white); }
.hidden-field { position: absolute; left: -9999px; }

/* ---------- Footer ----------
   Same surface as the contact section above it. The two are separated by the
   same faded hairline used under the hero, not a hard edge. */
.site-footer {
  position: relative;
  background: var(--color-surface-deep);
  color: rgba(255,255,255,0.85);
  padding-top: var(--space-5);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule-accent) 50%, transparent 100%);
  opacity: 0.55;
}
.footer-inner {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-logo-img { width: auto; height: 56px; margin-bottom: var(--space-2); }
.footer-brand p { font-size: 0.88rem; margin-bottom: 0.3em; color: rgba(255,255,255,0.65); }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.5em; }
.footer-nav a:hover { color: var(--brand-secondary); }
.footer-contact { display: flex; flex-direction: column; gap: 0.6em; }
.footer-contact a { display: flex; align-items: center; gap: 0.65em; }
.footer-contact .icon { color: var(--brand-accent); width: 1.05rem; height: 1.05rem; }
.footer-contact a:hover { color: var(--brand-secondary); }
.footer-contact a:hover .icon { color: var(--brand-accent); }
.footer-social { margin-top: 0.4em; margin-left: -8px; }   /* optically align the badges with the icons above */
.footer-social a { width: 44px; height: 44px; justify-content: center; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1); padding-block: var(--space-3); font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-bottom a { text-decoration: underline; }

/* Room at the bottom on mobile so the sticky call bar doesn't cover the footer */
@media (max-width: 700px) {
  body { padding-bottom: var(--mobile-bar-height); }
}

/* ---------- Sticky mobile call bar ---------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(20,30,50,0.12);
  padding: 0.6rem var(--space-3);
  gap: var(--space-2);
}
.mobile-cta-bar .btn { flex: 1; min-width: 0; font-size: 1.1875rem; padding: 0.45em 0.6em; }
@media (max-width: 700px) {
  .mobile-cta-bar { display: flex; }
}

/* ---------- How We Work ----------
   Four steps on a navy band. The bulbs are line icons that light up (warm
   glass, orange rays, glow) on hover or, on touch screens, as each step
   scrolls into view (.is-lit, set by the script in index.html). */
.hww { background: linear-gradient(180deg, var(--brand-primary) 0%, var(--color-surface-deep) 100%); color: #fff; }
.hww h2 { color: #fff; text-wrap: balance; }
.hww .eyebrow { color: var(--brand-secondary); }
.hww-steps { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hww-steps { gap: var(--space-5) var(--space-4); } }
@media (min-width: 640px) { .hww-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .hww-steps { grid-template-columns: repeat(4, 1fr); }
  /* The "wire": one line joining the four bulbs. */
  .hww-steps::before {
    content: ""; position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 8%, rgba(255,255,255,0.18) 92%, transparent);
  }
}
.hww-step { position: relative; text-align: center; padding: var(--space-2); border-radius: var(--radius-md); }
.hww-bulb {
  position: relative; display: inline-grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--brand-primary);            /* masks the wire behind the bulb */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: box-shadow 0.4s ease;
}
.bulb { width: 64px; height: 64px; overflow: visible; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bulb-glass { stroke: rgba(255,255,255,0.55); fill: rgba(255,255,255,0); transition: fill 0.35s ease, stroke 0.35s ease; }
.bulb-filament { stroke: rgba(255,255,255,0.45); transition: stroke 0.35s ease; }
.bulb-base { stroke: var(--brand-accent); }
.bulb-rays { stroke: var(--brand-accent); opacity: 0; transform: scale(0.85); transform-origin: 32px 30px; transition: opacity 0.35s ease, transform 0.35s ease; }
/* Lit: warm glass, bright filament, rays out, and a soft orange glow. */
.hww-step:hover .bulb-glass, .hww-step.is-lit .bulb-glass { stroke: #FFE9C7; fill: #FFD27F; }
.hww-step:hover .bulb-filament, .hww-step.is-lit .bulb-filament { stroke: #C75010; }
.hww-step:hover .bulb-rays, .hww-step.is-lit .bulb-rays { opacity: 1; transform: scale(1); }
.hww-step:hover .hww-bulb, .hww-step.is-lit .hww-bulb {
  box-shadow: inset 0 0 0 1px rgba(255,210,127,0.7), 0 0 34px 10px rgba(255,176,90,0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .hww-step:hover .bulb, .hww-step.is-lit .bulb { animation: flicker-on 0.45s steps(1, end); }
}
@keyframes flicker-on { 0% { opacity: 0.4; } 20% { opacity: 1; } 35% { opacity: 0.55; } 50% { opacity: 1; } }
.hww-num { margin: var(--space-2) 0 0.15rem; font-family: var(--font-display); font-weight: 600; font-stretch: 150%; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-secondary); }
.hww-step h3 { color: #fff; margin-bottom: 0.4em; }
.hww-step p:last-child { color: rgba(255,255,255,0.82); margin: 0 auto; max-width: 30ch; font-size: 0.95rem; }
.hww-step a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Section edges: two peaks from the logo mark ----------
   Each light or navy section's bottom edge is cut so the next section rises
   into it as two offset peaks, a smaller one then a taller one, like the mark.
   The next section is pulled up underneath so its own background shows
   through the cut. The hero-to-trust-strip and contact-to-footer seams keep
   their faded hairlines. */
:root { --peak: clamp(18px, 2.6vw, 40px); }
.hero, .trust-bar, .services, .hww, .why-us, .areas, .contact { position: relative; }
.hero { z-index: 7; } .trust-bar { z-index: 6; } .services { z-index: 5; } .hww { z-index: 4; }
.why-us { z-index: 3; } .areas { z-index: 2; } .contact { z-index: 1; }
.trust-bar, .services, .hww, .why-us, .areas {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 71% calc(100% - var(--peak)), 65.5% calc(100% - var(--peak) * 0.4), 61% calc(100% - var(--peak) * 0.7), 54% 100%, 0 100%);
}
.trust-bar { padding-bottom: calc(var(--space-5) + var(--peak)); }
.services, .hww, .why-us, .areas, .contact { margin-top: calc(-1 * var(--peak)); padding-top: calc(var(--space-6) + var(--peak)); }
@media (min-width: 768px) {
  .services, .hww, .why-us, .areas, .contact { padding-top: calc(var(--space-7) + var(--peak)); }
}

/* Contact list: the form is the main way in; the phone is labelled for urgent jobs. */
.contact-note { color: rgba(255,255,255,0.7); font-size: 0.9em; }