/* ==========================================================================
   Leamington Spray Foam Insulation — stylesheet

   DESIGN NOTE, READ BEFORE CHANGING ANYTHING

   This is a deliberate departure from the layout used by the other sites in
   this portfolio. Those are built on rounded cards, drop shadows and a
   centred hero with text sitting on a photograph. This one is flat and
   rule-led: nothing has a radius, nothing has a shadow, and definition comes
   from 1px hairlines, accent rules and whitespace instead.

   The reason is not taste. Four spray foam domains now serve adjacent
   Ontario markets, and Windsor's own service area list contains the string
   "Leamington". Two sites in the same trade competing for the same searches
   should not share a visual template. The palette was already unique to this
   site; the structure now is too.

   THREE RULES THAT ARE LOAD-BEARING

   1. Every colour pair below is computed, never estimated. WCAG AA wants
      4.5:1 for normal text, 3:1 for large text and for UI component borders.
      Text shadows earn no credit and are not used anywhere.

   2. Nothing sets a colour inline in build.py any more. An earlier build did,
      and two of those inline values were invisible: footer links measured
      1.87:1 and the footer phone 1.84:1, both dark-on-dark. They passed
      unnoticed because the contrast audit only tested the variables in
      :root and never the elements that bypassed them. Colours live here.

   3. Do not write a comment-close sequence inside a token comment block.
      An earlier template did, CSS error recovery swallowed the next
      declaration, and --color-accent-dark was silently never defined while
      being referenced ten times.
   ========================================================================== */

:root {
  /* --- Brand. Carried over unchanged: the teal and tomato are what separate
         this site from Windsor's navy, Grimsby's charcoal and the epoxy
         sites' graphite. Only the structure around them has changed. ------ */
  --color-primary:        #10373d;   /* Deep lake teal. White on it: 12.84:1 */
  --color-primary-dark:   #0a262b;   /* Footer, deep bands. White: 15.85:1 */
  --color-primary-light:  #1f545c;   /* SURFACES AND BORDERS ONLY.
                                        Never text on a dark ground - it
                                        measures 1.87:1 on the footer. */

  --color-accent:         #b3341f;   /* Tomato. White on it 6.13:1, and it
                                        reads 6.13:1 as text on white. */
  --color-accent-dark:    #8d2716;   /* Hover on LIGHT grounds only.
                                        White on it: 8.63:1 */

  /* --- Ink for dark surfaces. These exist because the dark teal header and
         footer need their own text ramp; the light-ground neutrals are all
         far too dark to reuse there. ------------------------------------- */
  --color-on-dark:        #e8f0ee;   /* Body text on teal.  13.4:1 on footer */
  --color-on-dark-muted:  #bcd2ce;   /* Secondary on teal.  10.0:1 on footer */
  --color-on-dark-accent: #f4a184;   /* Accent on teal.      7.8:1 on footer,
                                        6.3:1 on the header teal */
  --color-on-dark-rule:   #5b8b94;   /* Hairlines and control borders on teal.
                                        These separate list rows and outline the
                                        burger button, so they are treated as UI
                                        components needing 3:1, not decoration.
                                        4.20:1 on the footer, 3.40:1 on the
                                        header. The first value tried, #2b555c,
                                        measured 1.93 and 1.56 and failed. */

  /* --- Light-ground neutrals -------------------------------------------- */
  --color-text:           #23312f;   /* 13.53:1 on white (AAA) */
  --color-text-muted:     #4a5957;   /* 7.24:1 on white */
  --color-heading:        #12211f;   /* 16.63:1 on white */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f4f7f6;   /* Section stripe */
  --color-bg-deep:        #e9f0ee;   /* Wells and quote band */
  --color-accent-soft:    #fdf1ee;   /* Warm tint */

  /* --- Rules and borders. border-strong is a CONTROL border: it sits on
         form inputs and outline buttons, so WCAG 1.4.11 wants 3:1 against
         the adjacent colour. The value shipped with the template measured
         1.90:1 and failed. ------------------------------------------------ */
  --color-rule:           #d7e2df;   /* Hairline, decorative */
  --color-border-strong:  #6d817e;   /* Control borders. 4.35:1 on white */

  /* --- Feedback --------------------------------------------------------- */
  --color-success:        #146b45;   /* 6.02:1 on white */
  --color-success-bg:     #e6f4ed;
  --color-error:          #a3231b;   /* 7.24:1 on white */
  --color-error-bg:       #fdeceb;

  /* --- Type. One system stack. No webfont, so no third-party request and
         no layout shift; character comes from weight, tracking and scale
         contrast rather than from a typeface. ----------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;

  /* --- Space: a 4px base, doubling. ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --rule:        1px;
  --rule-thick:  3px;
  --maxw:        1180px;
  --maxw-narrow: 760px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.2vw, var(--fs-3xl)); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.5rem, 3vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-md); }

p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

a { color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-dark); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
/* The tomato focus ring measures 2.10:1 on the teal surfaces and would be
   effectively invisible there, so dark grounds get a white ring instead
   (12.84:1 on the header, 15.85:1 on the footer). A focus indicator that
   cannot be seen is the same as no focus indicator. */
.topbar :focus-visible,
.site-header :focus-visible,
.hero :focus-visible,
.trust-strip :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.call-bar :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--color-white);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--space-9); }
.section--alt {
  background: var(--color-bg-alt);
  border-block: var(--rule) solid var(--color-rule);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--color-primary-dark); color: var(--color-white);
  padding: var(--space-3) var(--space-5); z-index: 200; font-weight: 700;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

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

/* --- Section head. The eyebrow carries a short leading rule instead of
       sitting in a pill, which is the motif the whole page repeats. ------- */
.section-head { margin-bottom: var(--space-7); max-width: 68ch; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head .lead { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
}
.is-centered .eyebrow { justify-content: center; }

.lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.prose > * + * { margin-top: var(--space-5); }
.content-block { margin-bottom: var(--space-7); }
.content-block:last-child { margin-bottom: 0; }
.content-block h2 {
  padding-top: var(--space-4);
  border-top: var(--rule-thick) solid var(--color-primary);
}
.content-block h3 {
  margin-top: var(--space-6);
  color: var(--color-primary);
}

/* ==========================================================================
   TOPBAR + HEADER
   Flat teal, separated from the page by an accent rule rather than a shadow.
   ========================================================================== */
.topbar {
  background: var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-sm);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--space-2);
}
.topbar a { color: var(--color-on-dark-accent); font-weight: 700; }
.topbar a:hover { color: var(--color-white); }

/* The tomato rule under the header measures 2.10:1 against the teal above it
   but 6.13:1 against the white page below, which is the edge that matters.
   It is a decorative divider between two surfaces, not a control boundary,
   so 1.4.11 does not apply. Noted rather than silently ignored. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-primary);
  border-bottom: var(--rule-thick) solid var(--color-accent);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  min-height: 74px;
}

.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo img { width: 40px; height: 40px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.02em;
  color: var(--color-white);
}
.logo__tag {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--color-on-dark-accent);
}

.nav__list {
  display: flex; align-items: center; gap: var(--space-1);
  margin: 0; padding: 0; list-style: none;
}
.nav__link, .nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-on-dark); text-decoration: none;
  background: none; border: 0; border-bottom: 3px solid transparent;
  cursor: pointer;
}
.nav__link:hover, .nav__toggle:hover { color: var(--color-white); border-bottom-color: var(--color-on-dark-accent); }
.nav__link[aria-current="page"] { color: var(--color-white); border-bottom-color: var(--color-accent); }

.nav__item--has-menu { position: relative; }
.nav__submenu {
  position: absolute; top: 100%; left: 0; min-width: 268px;
  margin: 0; padding: var(--space-2) 0; list-style: none;
  background: var(--color-white);
  border: var(--rule) solid var(--color-rule);
  border-top: var(--rule-thick) solid var(--color-accent);
  display: none;
}
.nav__item--has-menu:hover .nav__submenu,
.nav__submenu.is-open { display: block; }
.nav__submenu a {
  display: block; padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
.nav__submenu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }

.header-cta { display: flex; align-items: center; gap: var(--space-3); }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 2px solid var(--color-on-dark-muted);
  color: var(--color-white); cursor: pointer;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  content: ""; display: block;
  width: 20px; height: 2px; background: currentColor;
}
.nav-burger span { position: relative; }
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after  { position: absolute; top: 6px; }

.call-bar { display: none; }

/* ==========================================================================
   HERO
   The home hero no longer sets type over a photograph. The masthead sits on
   flat teal and the photograph runs beneath it as a band of its own. That
   removes the contrast problem at source rather than mitigating it with a
   scrim, and it means a future photo swap cannot break legibility.
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-8);
  text-align: center;
}
.hero__inner { position: relative; z-index: 2; }
.hero h1 { color: var(--color-white); }
.hero p { color: var(--color-on-dark); }

/* Masthead: centred on a single axis, brand over place line. */
.hero__brand {
  margin: 0 0 var(--space-2);
  font-size: clamp(2.1rem, 5.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-white);
  max-width: 18ch;
  margin-inline: auto;
}

/* Place line sits under the name with a short rule either side, so the
   whole masthead reads as one centred block. */
.hero__place {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-on-dark-accent);
}
.hero__place::before,
.hero__place::after {
  content: ""; flex: none; width: 34px; height: 2px;
  background: currentColor; opacity: .5;
}

.hero--home { padding-block: var(--space-8) 0; }

/* NOTE ON STRUCTURE: build.py nests .hero__badges INSIDE .hero__intro, so
   .hero__inner has only three children and the badges are not a grid item of
   it. An earlier draft of this file put the badges in a second grid column
   and the masthead broke apart, because .hero__brand and .hero__place became
   the grid items instead. Layout here is driven off the real DOM: one column,
   with the badges as a ruled ledger across the full width. */
.hero--home .hero__intro { max-width: 62ch; margin-inline: auto; }
.hero--home .hero__intro h1 {
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
}
.hero--home .btn-row { justify-content: center; margin-top: var(--space-6); }

/* Badges: one centred row under the headline, not pills.
   This was a three-column auto-fit grid. Each item centred inside its own
   column, but the columns filled the container, so the three read as spread
   across the page rather than as a centred group. A wrapping flex row sizes
   each item to its content and centres the group as a whole. The rule moved
   from the individual items to the list, so there is one line above the set
   instead of three uneven ones. */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  max-width: 70ch;
  margin: var(--space-6) auto 0;
  padding: var(--space-4) 0 0;
  border-top: var(--rule) solid var(--color-on-dark-rule);
  list-style: none;
}
.hero__badges li {
  display: flex; align-items: baseline;
  gap: var(--space-3);
  margin: 0; padding: 0; border: 0;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-on-dark);
}
.hero__badges li::before {
  content: "";
  flex: none; width: 10px; height: 10px;
  background: var(--color-on-dark-accent);
  transform: translateY(-1px);
}

/* The photograph, as a band. Full bleed, fixed aspect, nothing over it. */
.hero__bg {
  position: relative;
  margin-top: var(--space-8);
  border-top: var(--rule-thick) solid var(--color-accent);
}
.hero__bg img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.hero__scrim { display: none; }   /* no longer needed; kept so build.py output stays valid */

/* Interior page hero: compact, left aligned, same masthead language. */
.hero--page { padding-block: var(--space-7); }
.hero--page .hero__inner { max-width: 74ch; margin-inline: auto; }
.hero--page .hero__intro p { margin-inline: auto; max-width: 68ch; }
.hero .eyebrow { justify-content: center; color: var(--color-on-dark-accent); }
.hero--page h1 { margin-bottom: var(--space-4); }

.hero--split .hero__inner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-7); align-items: center;
}
.hero--split .btn-row { justify-content: center; }
.hero__media img { width: 100%; border: var(--rule-thick) solid var(--color-accent); }

/* ==========================================================================
   INTRO BAND + QUOTE BAND
   ========================================================================== */
.intro-band {
  background: var(--color-white);
  padding-block: var(--space-8);
  border-bottom: var(--rule) solid var(--color-rule);
}
.intro-band__inner { max-width: var(--maxw-narrow); }
.intro-band p { font-size: var(--fs-md); line-height: 1.65; }
.intro-band p:first-child {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.015em;
  padding-left: var(--space-5);
  border-left: var(--rule-thick) solid var(--color-accent);
}
.intro-band p + p { margin-top: var(--space-5); }
.intro-band p:last-child { color: var(--color-text-muted); }

.quote-band {
  background: var(--color-bg-deep);
  border-bottom: var(--rule) solid var(--color-rule);
  padding-block: var(--space-8);
}
.quote-band__inner { max-width: 940px; }

/* ==========================================================================
   TRUST STRIP — a ruled index of services, not a pill row.
   ========================================================================== */
.trust-strip {
  background: var(--color-primary-dark);
  padding-block: var(--space-4);
}
.trust-strip ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.trust-strip li { margin: 0; border-top: var(--rule) solid var(--color-on-dark-rule); }
.trust-strip a {
  display: block; padding: var(--space-3) 0;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-on-dark); text-decoration: none;
}
.trust-strip a:hover { color: var(--color-on-dark-accent); }

/* ==========================================================================
   BUTTONS — squared, 2px borders, no radius, no shadow.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.4rem;
  font: inherit; font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

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

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

.btn--outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}
.btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }

/* Ghost sits on the teal hero, so its border and label are the on-dark ramp. */
.btn--ghost {
  background: transparent;
  border-color: var(--color-on-dark-muted);
  color: var(--color-white);
}
.btn--ghost:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-primary-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row.is-centered { justify-content: center; }

/* ==========================================================================
   CARDS AND GRIDS
   Bordered blocks with an accent rule on top. Hover thickens the rule rather
   than lifting the card, because nothing on this site floats.
   ========================================================================== */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card, .panel {
  background: var(--color-white);
  border: var(--rule) solid var(--color-rule);
  border-top: var(--rule-thick) solid var(--color-primary);
  padding: var(--space-5);
}
.panel { background: var(--color-bg-alt); }

.service-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: var(--rule) solid var(--color-rule);
  border-top: var(--rule-thick) solid var(--color-primary);
  transition: border-color .12s linear;
}
.service-card:hover { border-top-color: var(--color-accent); border-color: var(--color-border-strong); }
.service-card__media { overflow: hidden; border-bottom: var(--rule) solid var(--color-rule); }
.service-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.service-card__body { padding: var(--space-5); flex: 1 1 auto; display: flex; flex-direction: column; }
.service-card__body h3 { margin-bottom: var(--space-3); }
.service-card__body h3 a { color: inherit; text-decoration: none; }
.service-card:hover .service-card__body h3 a { color: var(--color-accent); }
.service-card__body p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.service-card__link {
  margin-top: auto; padding-top: var(--space-4);
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent); text-decoration: none;
}
.service-card__link::after { content: " \2192"; }
.service-card:hover .service-card__link { text-decoration: underline; }

/* Benefit items: a ruled list, numbered by CSS counter. */
.grid--3 { counter-reset: feature; }
.feature {
  counter-increment: feature;
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-top: var(--rule) solid var(--color-rule);
}
.feature::before {
  content: counter(feature, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.feature__icon { display: none; }
.feature p { color: var(--color-text); }

/* Process steps: big ordinal in the margin. */
.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.step {
  counter-increment: step;
  position: relative;
  margin: 0; padding: var(--space-5) 0 var(--space-5) var(--space-9);
  border-top: var(--rule) solid var(--color-rule);
}
.step:last-child { border-bottom: var(--rule) solid var(--color-rule); }
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: var(--space-4);
  font-size: var(--fs-2xl); font-weight: 800;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--color-primary);
  opacity: .28;
}

/* ==========================================================================
   CTA BANDS
   ========================================================================== */
.cta-band {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-8);
  border-block: var(--rule-thick) solid var(--color-accent);
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: var(--color-on-dark); max-width: 62ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-6); }

.cta-inline {
  margin: var(--space-7) 0;
  padding: var(--space-5);
  background: var(--color-accent-soft);
  border-left: var(--rule-thick) solid var(--color-accent);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-heading);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-wrap, .hero-form, .lead-form { width: 100%; }

.hero-form {
  background: var(--color-white);
  border: var(--rule) solid var(--color-rule);
  border-top: var(--rule-thick) solid var(--color-accent);
  padding: var(--space-6);
}
.hero-form__title { margin-bottom: var(--space-2); font-size: var(--fs-xl); }
.hero-form__sub { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.field__optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.req { color: var(--color-error); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit; font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--rule) solid var(--color-border-strong);
  border-radius: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}
.field__error {
  font-size: var(--fs-xs); font-weight: 700; color: var(--color-error);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--color-error); }

.form-note { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); }

.form-success {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-success-bg);
  border-left: var(--rule-thick) solid var(--color-success);
  color: #0f4f33;
  font-weight: 600;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq { border-top: var(--rule) solid var(--color-rule); }
.faq__item { border-bottom: var(--rule) solid var(--color-rule); }
.faq__trigger {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); width: 100%;
  padding: var(--space-5) 0;
  font: inherit; font-size: var(--fs-md); font-weight: 700;
  text-align: left; color: var(--color-heading);
  background: none; border: 0; cursor: pointer;
}
.faq__trigger:hover { color: var(--color-accent); }
.faq__question { flex: 1 1 auto; }
.faq__icon {
  flex: none; width: 22px; height: 22px; margin-top: 4px;
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--color-accent);
}
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after  { width: 2px; height: 100%; transition: transform .15s linear; }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__panel { padding: 0 0 var(--space-5); max-width: 74ch; color: var(--color-text); }
.faq__panel[hidden] { display: none; }

/* ==========================================================================
   BREADCRUMBS, SPLIT LAYOUT, SIDEBAR
   ========================================================================== */
.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-bottom: var(--rule) solid var(--color-rule);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-8);
  align-items: start;
}
.sidebar {
  position: sticky; top: 104px;
  background: var(--color-bg-alt);
  border: var(--rule) solid var(--color-rule);
  border-top: var(--rule-thick) solid var(--color-primary);
  padding: var(--space-5);
}
.sidebar h2, .sidebar h3 { font-size: var(--fs-lg); }
.sidebar p { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ==========================================================================
   FOOTER
   Every colour here is from the on-dark ramp. The previous build set these
   inline in build.py to --color-primary-light and --color-accent-dark, which
   measured 1.87:1 and 1.84:1 against this background - effectively invisible.
   ========================================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  border-top: var(--rule-thick) solid var(--color-accent);
  padding-block: var(--space-8) var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-7);
}
.footer-brand p { color: var(--color-on-dark-muted); font-size: var(--fs-sm); }
.footer-logo { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); text-decoration: none; }
.footer-logo img { width: 150px; height: auto; }

.site-footer h3 {
  margin-bottom: var(--space-4); padding-bottom: var(--space-2);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-white);
  border-bottom: var(--rule) solid var(--color-on-dark-rule);
}
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: var(--space-2); }
.footer-list a,
.site-footer a { color: var(--color-on-dark); text-decoration: none; font-size: var(--fs-sm); }
.footer-list a:hover, .site-footer a:hover { color: var(--color-on-dark-accent); text-decoration: underline; }

.footer-phone {
  display: inline-block; margin-bottom: var(--space-3);
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em;
  color: var(--color-on-dark-accent) !important;
  text-decoration: none;
}
.footer-phone:hover { color: var(--color-white) !important; }

.footer-map { margin-top: var(--space-4); }
.footer-map__frame {
  border: var(--rule) solid var(--color-on-dark-rule);
  line-height: 0;
}
.footer-map iframe { width: 100%; height: 200px; border: 0; filter: grayscale(1) contrast(1.05); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: center; justify-content: space-between;
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: var(--rule) solid var(--color-on-dark-rule);
  font-size: var(--fs-xs);
  color: var(--color-on-dark-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.footer-legal li { margin: 0; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .15s linear, visibility .15s linear;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* ==========================================================================
   LIGHTBOX
   No gallery ships on this build, but script.js binds to these nodes and
   build.py still emits the dialog. Kept so nothing throws.
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: rgba(10, 38, 43, .95);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 1000px; }
.lightbox__img { width: 100%; height: auto; border: var(--rule-thick) solid var(--color-accent); }
.lightbox__caption { margin-top: var(--space-3); color: var(--color-on-dark); font-size: var(--fs-sm); text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 2px solid var(--color-on-dark-muted);
  color: var(--color-white); width: 46px; height: 46px; font-size: 1.5rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: var(--space-5); right: var(--space-5); }
.lightbox__nav--prev { left: var(--space-5); }
.lightbox__nav--next { right: var(--space-5); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.gallery__btn { display: block; width: 100%; padding: 0; background: none; border: var(--rule) solid var(--color-rule); cursor: pointer; }
.gallery__caption { display: block; padding: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: left; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .layout-split { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .hero--split .hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --space-8: 3rem; --space-9: 4rem; }

  .topbar__inner { justify-content: center; text-align: center; }

  .nav-burger { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-primary-dark);
    border-bottom: var(--rule-thick) solid var(--color-accent);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: var(--space-3) var(--space-5); }
  .nav__link, .nav__toggle {
    width: 100%; justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: var(--rule) solid var(--color-on-dark-rule);
  }
  .nav__submenu { position: static; display: none; border: 0; background: transparent; padding-left: var(--space-4); }
  .nav__submenu.is-open { display: block; }
  .nav__submenu a { color: var(--color-on-dark); padding: var(--space-2) 0; }
  .nav__submenu a:hover { background: none; color: var(--color-on-dark-accent); }
  .header-cta .btn { display: none; }

  /* Persistent call bar on small screens, where tapping to call is the point. */
  .call-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--color-accent);
    border-top: 2px solid var(--color-accent-dark);
  }
  .call-bar a {
    display: block; padding: var(--space-4);
    font-size: var(--fs-base); font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-white); text-decoration: none; text-align: center;
  }
  body { padding-bottom: 62px; }
  .to-top { bottom: 74px; }

  .hero__brand { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .container { padding-inline: var(--space-4); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .intro-band p:first-child { padding-left: var(--space-4); }
  .step { padding-left: var(--space-7); }
  .step::before { font-size: var(--fs-xl); }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .topbar, .site-header, .trust-strip, .cta-band, .quote-band,
  .to-top, .call-bar, .footer-map, .btn-row { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { background: none; color: #000; padding-block: 0; }
  .hero h1, .hero__brand, .hero p { color: #000; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}