@charset "utf-8";
/* ==========================================================================
   Forever Young Lighting — site.css
   The whole design system. One file, no framework, no build step.

   Written against the audit register:
     F-VISUAL-01  nav switches to the menu button at 1024px, not 768px (tablets were breaking)
     F-VISUAL-02  first screen carries a real photo + both price bands + call and text
     F-VISUAL-03  .nav-toggle is a named button with aria-expanded
     F-VISUAL-04  every control has a visible or sr-only <label>
     F-VISUAL-06  every text/background pair below is >= 4.5:1, computed, listed in §1
     F-VISUAL-07  heading order is h1 > h2 > h3; .h2, .h3 classes exist so a heading never gets
                  demoted for looks
     F-VISUAL-09  nav items are real <a href>, never <button>
     F-PERF-04    every image ships width/height; .frame holds aspect-ratio so CLS stays 0
     F-PERF-02    the header and footer mark is the real logo, served as AVIF/WebP at 8–37 KB

   Theme: LIGHT, single theme, restyled 2026-09-10 on Angel's word — "I don't like the colour
   scheme of the whole thing, I feel my old one was better." So this is the old
   foreveryounglights.com palette rebuilt honestly: white page, near-black text, Christmas
   green as the brand colour, red for the estimate CTA, a dark gradient band under the photos
   and a dark footer. Everything is painted explicitly and `color-scheme: light` is declared,
   so the page never inherits the visitor's theme and never renders half-dark.

   The one place the old site is NOT copied: it used green-600 (#16A34A) for green text on
   white, which is 3.30:1 and fails AA — the audit flagged it. Green TEXT here is green-700
   (#15803D, 5.02:1) and green-800 (#166534, 7.13:1); green-600 never appears.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
/*  CONTRAST TABLE — WCAG 2.1, computed, not eyeballed.
    Text pairs need 4.5:1. Borders and focus rings are non-text (1.4.11) and need 3:1.

    ── on white (#FFFFFF) and the gray-50 band (#F9FAFB) ──────────────────────
    --on-ink        #111827  gray-900   on white  17.74:1   on gray-50  16.98:1   body text
    --on-ink-dim    #4B5563  gray-600   on white   7.56:1   on gray-50   7.23:1   secondary
    --glow          #15803D  green-700  on white   5.02:1   on gray-50   4.80:1   brand text
    --glow-soft     #166534  green-800  on white   7.13:1   on gray-50   6.82:1   links
    --berry-ink     #B91C1C  red-700    on white   6.47:1   on gray-50   6.19:1   red text
    --field-ph      #6B7280  gray-500   on white   4.83:1   on gray-50   4.63:1   placeholder
    --glow-soft     #166534  on the green-50 pill (#F0FDF4)             6.81:1   season pill
    (rejected)      #16A34A  green-600  on white   3.30:1  <- the old site's green. Not used.

    ── white ink on a brand surface ──────────────────────────────────────────
    #FFFFFF on --glow      #15803D  green-700   5.02:1   Call button, flags, skip link, selection
    #FFFFFF on --berry     #DC2626  red-600     4.83:1   Text-2-photos / estimate CTA

    ── the dark photo band: gray-900 -> red-950 -> gray-900 ───────────────────
                                        on #111827        on #450A0A (worst point)
    --on-ink        #F9FAFB              16.98:1            15.45:1    headings, copy
    --on-ink-dim    #D1D5DB              12.04:1            10.96:1    captions, notes
    --glow          #4ADE80              10.18:1             9.26:1    links, accents
    stars           #FCD34D              12.30:1            11.20:1    the review star

    ── the dark footer (#111827) ─────────────────────────────────────────────
    #F9FAFB 16.98:1 · #D1D5DB 12.04:1 (links) · #4ADE80 10.18:1 (accent + focus ring)

    ── non-text (3:1) ────────────────────────────────────────────────────────
    --field-line    #7E8695  on white  3.66:1   on gray-50  3.51:1   input / control boundary
    --glow          #15803D  focus ring on white  5.02:1  on gray-50  4.80:1
    --glow(dark)    #4ADE80  focus ring on gray-900             10.18:1
    --ink-line      #E5E7EB  1.24:1 — decorative hairline only, never a control boundary  */

:root {
  color-scheme: light;

  /* --- page surfaces. Names kept from the night build so no rule had to move. --- */
  --ink:            #FFFFFF;   /* page ground */
  --ink-2:          #F9FAFB;   /* raised / alternating band (gray-50) */
  --ink-3:          #FFFFFF;   /* card */
  --ink-line:       #E5E7EB;   /* decorative hairline (gray-200) */
  --ink-line-soft:  #F3F4F6;   /* gray-100 */

  /* --- type colours --- */
  --on-ink:         #111827;   /* gray-900. 17.74:1 on white */
  --on-ink-dim:     #4B5563;   /* gray-600.  7.56:1 on white */

  /* --- brand --- */
  --glow:           #15803D;   /* green-700 — the brand. 5.02:1 on white, and white is 5.02:1 on it */
  --glow-soft:      #166534;   /* green-800 — links + hover. 7.13:1 on white */
  --glow-ink:       #15803D;   /* alias: accent on a light band */
  --on-brand:       #FFFFFF;   /* ink that goes on a brand surface */
  --pine:           #15803D;   /* green surface */
  --pine-lt:        #15803D;   /* green text */
  --pine-ink:       #166534;   /* green text, stronger */
  --berry:          #DC2626;   /* red-600 — the estimate CTA. white on it is 4.83:1 */
  --berry-hover:    #B91C1C;   /* red-700 */
  --berry-lt:       #B91C1C;   /* red text */
  --berry-ink:      #B91C1C;   /* red-700. 6.47:1 on white */

  /* --- paper surfaces (long copy) — same light system, kept as its own name --- */
  --paper:          #F9FAFB;
  --paper-2:        #FFFFFF;
  --on-paper:       #111827;
  --on-paper-dim:   #4B5563;
  --paper-line:     #E5E7EB;
  --paper-accent:   #15803D;

  /* --- the dark bands: the gallery/photo strip and the footer --- */
  --night:          #111827;   /* gray-900 */
  --night-red:      #450A0A;   /* red-950 — the middle of the Our Work gradient */
  --night-2:        #1F2937;   /* gray-800, a raised block on a dark band */
  --night-line:     #374151;   /* gray-700 */
  --on-night:       #F9FAFB;
  --on-night-dim:   #D1D5DB;   /* gray-300 */
  --glow-night:     #4ADE80;   /* green-400 — the only green that passes on gray-900 */
  --star:           #FCD34D;   /* amber-300, the review star on a dark band */

  /* --- form controls --- */
  --field-bg:       #FFFFFF;
  --field-line:     #7E8695;   /* 3.66:1 on white — a real control boundary, not a hairline */
  --field-line-hi:  var(--glow);
  --field-ink:      #111827;
  --field-ph:       #6B7280;   /* gray-500. 4.83:1 on white */

  /* --- type --- */
  /* Angel's old site ran the default UI sans the whole way down and he asked for that back, so
     display and text are one family, separated by weight. Resident on every target OS: no font
     request, no swap, no CLS — which is exactly what a 4.8s mobile LCP could not afford. */
  --font-text:    system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Fluid modular scale, minor third on mobile widening to a perfect fourth at 1280px. */
  --step--2: clamp(0.75rem,  0.735rem + 0.07vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.855rem + 0.09vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.031rem + 0.14vw, 1.125rem);
  --step-1:  clamp(1.1875rem, 1.11rem + 0.34vw, 1.375rem);
  --step-2:  clamp(1.4375rem, 1.29rem + 0.64vw, 1.8125rem);
  --step-3:  clamp(1.75rem,  1.49rem + 1.15vw, 2.375rem);
  --step-4:  clamp(2.0625rem, 1.63rem + 1.92vw, 3.125rem);
  --step-5:  clamp(2.4375rem, 1.76rem + 3.01vw, 4.0625rem);

  --lh-tight: 1.08;
  --lh-head:  1.15;
  --lh-body:  1.62;
  --measure:  64ch;
  --measure-tight: 46ch;

  /* --- space (4px base) --- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --band-y: clamp(3rem, 1.6rem + 6vw, 6rem);
  --gutter: clamp(1.125rem, 0.7rem + 1.8vw, 2rem);
  --wrap: 76rem;
  --wrap-narrow: 46rem;

  /* --- shape --- */
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 24px; --r-pill: 999px;
  --ring: 0 0 0 3px var(--ink), 0 0 0 6px var(--glow);
  --shadow-1: 0 1px 2px rgb(17 24 39 / .07), 0 1px 1px rgb(17 24 39 / .04);
  --shadow-2: 0 12px 34px -14px rgb(17 24 39 / .28), 0 2px 6px rgb(17 24 39 / .05);
  --shadow-card: 0 1px 3px rgb(17 24 39 / .07), 0 1px 2px rgb(17 24 39 / .04);
  --shadow-glow: 0 0 0 1px rgb(21 128 61 / .35), 0 12px 32px -16px rgb(21 128 61 / .35);

  --header-h: 60px;
  --dock-h: 0px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
@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 {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  padding-bottom: var(--dock-h);
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--ink-2); }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:where(h1,h2,h3,h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--ink-line); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
::selection { background: var(--glow); color: var(--on-brand); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
  transform: translateY(-200%); transition: transform .15s;
  background: var(--glow); color: var(--on-brand); padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2); font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   One family, separated by weight — the way the old site read.
   -------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: var(--lh-head);
}
h1, .h1 { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: -0.028em; }
h2, .h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.008em; }
h4, .h4 { font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; letter-spacing: 0; }

.display { font-size: var(--step-4); }
.lede    { font-size: var(--step-1); line-height: 1.45; color: var(--on-ink-dim); max-width: var(--measure-tight); }
.paper .lede { color: var(--on-paper-dim); }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: var(--s-3);
}
.paper .eyebrow { color: var(--paper-accent); }

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose p, .prose li { max-width: var(--measure); }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 1.55em; }
.prose ul > li + li { margin-top: var(--s-2); }
.prose ul > li::before {
  content: ""; position: absolute; left: .35em; top: .62em;
  width: .46em; height: .46em; border-radius: 50%;
  background: var(--glow);
}
.paper .prose ul > li::before { background: var(--paper-accent); }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ol > li + li { margin-top: var(--s-2); }
.prose a { color: var(--glow-soft); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--glow); }
.paper .prose a { color: var(--glow-soft); }
/* A component dropped inside .prose keeps its own ink. `.prose a` (0,1,1) out-specifies
   `.btn` (0,1,0), which is how service-areas.html ended up painting a green label on a
   green button — caught by the live contrast sweep, not by reading the file. */
.prose a.btn { color: var(--btn-ink); }
.prose a.chip { color: var(--on-ink); }
.paper .prose a.chip { color: var(--on-paper); }
.prose a.chip:hover { color: var(--glow); }
.prose strong { font-weight: 700; color: var(--on-ink); }
.paper .prose strong { color: var(--on-paper); }
.note { font-size: var(--step--1); color: var(--on-ink-dim); }
.paper .note { color: var(--on-paper-dim); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   Band rhythm, old-site order: white page, gray-50 alternates, one dark
   gradient band under the photos, dark footer.
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.band { padding-block: var(--band-y); }
.band--night { background: var(--ink); color: var(--on-ink); }          /* white */
.band--night-2 { background: var(--ink-2); color: var(--on-ink); }      /* gray-50 */
.band--paper  { background: var(--paper); color: var(--on-paper); }     /* gray-50 */
.band--paper-2 { background: var(--paper-2); color: var(--on-paper); }  /* white */
.band--tight { padding-block: calc(var(--band-y) * .55); }
/* A hairline between any two stacked bands, so two same-tone bands in a row still read
   as two sections. Invisible where the tone already changes. */
.band + .band { border-top: 1px solid var(--ink-line); }

/* THE DARK PHOTO BAND — the old site's "Our Work": from-gray-900 via-red-950 to-gray-900.
   Selected structurally so no page file had to change: any band holding the gallery grid or
   the home-page proof strip becomes the dark band. Where :has() is unsupported the band
   simply stays light and readable — nothing breaks. */
.band:has(> .wrap > .gallery),
.band:has(> .wrap > .proof) {
  background: linear-gradient(105deg, #111827 0%, #450A0A 50%, #111827 100%);
  color: var(--on-night);
  border-top: 0;

  --ink:           #111827;
  --ink-2:         #1F2937;
  --ink-3:         #1F2937;
  --ink-line:      #374151;
  --ink-line-soft: #2A3441;
  --on-ink:        #F9FAFB;
  --on-ink-dim:    #D1D5DB;
  --glow:          #4ADE80;
  --glow-soft:     #86EFAC;
  --paper:         #111827;
  --paper-2:       #1F2937;
  --on-paper:      #F9FAFB;
  --on-paper-dim:  #D1D5DB;
  --paper-line:    #374151;
  --paper-accent:  #4ADE80;
  --shadow-2:      0 14px 40px -16px rgb(0 0 0 / .7);
  --ring:          0 0 0 3px #111827, 0 0 0 6px #4ADE80;
}
.band:has(> .wrap > .gallery) img,
.band:has(> .wrap > .proof) img { background: #1F2937; }
.band:has(> .wrap > .gallery) .frame,
.band:has(> .wrap > .proof) .frame { background: #1F2937; }

.stack > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.section-head { max-width: var(--measure); margin-bottom: var(--s-6); }

/* Aspect-locked image frame — keeps CLS at 0 even before the bytes land (F-PERF-04). */
.frame { position: relative; overflow: hidden; border-radius: var(--r-3); background: var(--ink-2); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame--32 { aspect-ratio: 3 / 2; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--169 { aspect-ratio: 16 / 9; }
.frame--sq { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   5. BRAND MARK — Angel's own logo, the one from the old site.
   The header/footer ship a <picture> (AVIF -> WebP) with width/height set, so
   the lockup costs 7–29 KB and moves nothing while it loads.
   -------------------------------------------------------------------------- */
.mark { display: block; width: auto; flex: none; }
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; background: none; }
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: inherit; font-family: var(--font-display);
  line-height: 1.05;
}
.brand__name { font-size: var(--step-0); font-weight: 800; letter-spacing: -.015em; }
.brand__name b { display: block; font-weight: 800; }
.brand__name span {
  display: block; font-family: var(--font-text); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--glow); font-weight: 700;
}
/* On a dark ground the logo's black wordmark would disappear, so it sits on a white chip —
   exactly how the old site ran it in the footer. */
.mark--chip {
  background: #FFFFFF; border-radius: var(--r-2); padding: 5px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   The old site's pairing, kept: GREEN calls, RED asks for the estimate.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--glow); --btn-ink: var(--on-brand); --btn-line: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .78em 1.35em;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-line); border-radius: var(--r-2);
  font-family: var(--font-text); font-size: var(--step-0); font-weight: 700;
  letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: .95em 1.7em; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

/* PRIMARY = the estimate. Red-600, white ink, 4.83:1. */
.btn--primary { --btn-bg: var(--berry); --btn-ink: #FFFFFF; }
.btn--primary:hover { --btn-bg: var(--berry-hover); }

/* GHOST = call. Solid green, white ink, 5.02:1 — the old site's green Call/Text Now. */
.btn--ghost { --btn-bg: var(--glow); --btn-ink: var(--on-brand); --btn-line: transparent; }
.btn--ghost:hover { --btn-bg: #166534; }
.paper .btn--ghost { --btn-bg: var(--glow); --btn-ink: var(--on-brand); --btn-line: transparent; }
.paper .btn--ghost:hover { --btn-bg: #166534; }

/* OUTLINE = the quieter of two choices. Green-700 on the page ground, 5.02:1 / 4.80:1. */
.btn--outline { --btn-bg: transparent; --btn-ink: var(--glow); --btn-line: currentColor; box-shadow: none; }
.paper .btn--outline { --btn-ink: var(--glow); --btn-line: currentColor; }
.btn--outline:hover { --btn-bg: #F0FDF4; --btn-ink: var(--glow-soft); }
.btn__icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* Inside the dark photo band the green has to be the light one. */
.band:has(> .wrap > .gallery) .btn--outline,
.band:has(> .wrap > .proof) .btn--outline { --btn-ink: #4ADE80; }
.band:has(> .wrap > .gallery) .btn--outline:hover,
.band:has(> .wrap > .proof) .btn--outline:hover { --btn-bg: rgb(74 222 128 / .12); --btn-ink: #86EFAC; }

.linkish {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--glow-soft); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.linkish:hover { color: var(--glow); }
.paper .linkish { color: var(--glow-soft); }

/* --------------------------------------------------------------------------
   7. HEADER + NAV   (F-VISUAL-01 / 03 / 09)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-ink);
  box-shadow: 0 1px 2px rgb(17 24 39 / .05);
}
@supports not (backdrop-filter: blur(2px)) { .site-header { background: #FFFFFF; } }
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h); padding-block: var(--s-2);
}
.site-header .mark { width: 44px; height: 44px; }
@media (min-width: 1024px) { .site-header .mark { width: 48px; height: 48px; } }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.1vw, 1.35rem); }
.nav__link {
  display: block; padding: .5em .15em; text-decoration: none;
  font-size: var(--step--1); font-weight: 600; color: var(--on-ink-dim);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--glow); }
.nav__link[aria-current="page"] { color: var(--glow); border-bottom-color: var(--glow); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-2);
  border: 1px solid var(--field-line); color: var(--on-ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Panel: no JS required to be readable — it is a plain block when JS is off, since
   [hidden] is the only thing hiding it and the toggle is the only thing setting it. */
.nav-panel {
  background: var(--ink-2); border-bottom: 1px solid var(--ink-line);
  padding: var(--s-4) 0 var(--s-5);
}
.nav-panel[hidden] { display: none; }
.nav-panel .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav-panel .nav__link {
  padding: .85em var(--s-2); font-size: var(--step-0); color: var(--on-ink);
  border-bottom: 1px solid var(--ink-line);
}
.nav-panel .nav__link[aria-current="page"] { color: var(--glow); }

@media (min-width: 1024px) {           /* F-VISUAL-01: lg, not md */
  .nav { display: block; }
  .nav-toggle, .nav-panel { display: none !important; }
  :root { --header-h: 72px; }
}

/* Header call/text: on phones the labels collapse to icons so both still fit. */
.header-cta { padding-inline: .95em; }
.header-cta .btn__label { display: none; }
@media (min-width: 560px) { .header-cta .btn__label { display: inline; } }

/* --------------------------------------------------------------------------
   8. HERO  (F-VISUAL-02, F-SXO-02, F-SXO-11)
   White, like the old one, with the snowflake accents it had — as a background
   image, so no screen reader ever reads a decorative snowflake out loud.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  background-image: url("/assets/img/snow.svg");
  background-repeat: no-repeat;
  background-position: right -40px top -20px;
  background-size: 320px auto;
  padding-block: var(--s-6) var(--s-7);
}
@media (max-width: 899px) { .hero { background-size: 190px auto; background-position: right -30px top -14px; } }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; position: relative; }
.hero__photo { position: relative; border-radius: var(--r-4); overflow: hidden; box-shadow: var(--shadow-2); }
.hero__photo img { width: 100%; height: auto; }
.hero__badge {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: rgb(17 24 39 / .82);
  border: 1px solid rgb(255 255 255 / .18); border-radius: var(--r-pill);
  padding: .45em 1em; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #F9FAFB;
  backdrop-filter: blur(6px);
}
/* R-01 (review, 9/10): on phones the photo leads — 16:9 crop, ~211px at 375 wide — so photo,
   H1, both price bands and the season line all sit in the first screen (F-SXO-02, F-VISUAL-02). */
@media (max-width: 899px) { .hero__photo { order: -1; } }
.hero__title { margin-bottom: var(--s-4); }
.hero__title em { font-style: normal; color: var(--glow); }
.hero__cta { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 420px) { .hero__cta { grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__grid { grid-template-columns: 1.02fr 1fr; gap: var(--s-8); }
  .hero__cta { grid-auto-columns: max-content; }
}

/* Price bands — the two published bands, side by side, above the fold. */
.pricebands { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 400px) { .pricebands { grid-template-columns: 1fr 1fr; } }
.priceband {
  border: 1px solid var(--ink-line); border-radius: var(--r-3);
  background: var(--ink-2); padding: var(--s-4);
}
.priceband__label {
  display: block; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-dim);
}
.priceband__value {
  display: block; margin-top: .2em; font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 800; color: var(--glow); line-height: 1.1;
}
.priceband__note { display: block; margin-top: .35em; font-size: var(--step--1); color: var(--on-ink-dim); }
.paper .priceband { background: var(--paper-2); border-color: var(--paper-line); }
.paper .priceband__label, .paper .priceband__note { color: var(--on-paper-dim); }
.paper .priceband__value { color: var(--paper-accent); }

.season-line {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--step--1); font-weight: 700; color: var(--glow-soft);
  background: #F0FDF4; border: 1px solid #BBF7D0;
  border-radius: var(--r-pill); padding: .42em 1em;
}
.season-line::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 0 3px rgb(21 128 61 / .18);
}
.paper .season-line { color: var(--glow-soft); background: #F0FDF4; border-color: #BBF7D0; }

/* --------------------------------------------------------------------------
   9. CARDS / PROOF / GALLERY
   -------------------------------------------------------------------------- */
.card {
  background: var(--ink-3); border: 1px solid var(--ink-line);
  border-radius: var(--r-3); padding: var(--s-5); height: 100%;
  box-shadow: var(--shadow-card);
}
.paper .card { background: var(--paper-2); border-color: var(--paper-line); }
.card__title { margin-bottom: var(--s-2); }
.card__body { color: var(--on-ink-dim); font-size: var(--step--1); line-height: 1.55; }
.paper .card__body { color: var(--on-paper-dim); }
.card--feature { border-color: var(--glow); box-shadow: var(--shadow-glow); position: relative; }
.card--feature .card__flag {
  position: absolute; top: calc(var(--s-3) * -1); left: var(--s-5);
  background: var(--glow); color: var(--on-brand); border-radius: var(--r-pill);
  padding: .22em .9em; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

.figure { display: block; }
.figure figcaption {
  margin-top: var(--s-2); font-size: var(--step--1); color: var(--on-ink-dim);
}
.paper .figure figcaption { color: var(--on-paper-dim); }

.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.gallery .figure img { border-radius: var(--r-3); }

/* Proof strip — real photos, right after the hero (F-SXO-11 step 3). */
.proof { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Honest trust line. NEVER an aggregateRating, NEVER an invented star count. */
.proofline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em;
  font-size: var(--step--1); color: var(--on-ink-dim);
}
.proofline strong { color: var(--on-ink); font-weight: 700; }
.proofline .stars { color: var(--berry-ink); letter-spacing: .06em; }
.paper .proofline { color: var(--on-paper-dim); }
.paper .proofline strong { color: var(--on-paper); }
.paper .proofline .stars { color: var(--berry-ink); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: step; position: relative; padding-top: var(--s-6); }
.step::before {
  content: "Step " counter(step); position: absolute; top: 0; left: 0;
  font-family: var(--font-text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--glow); line-height: 1;
}
.paper .step::before { color: var(--paper-accent); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.step p { color: var(--on-ink-dim); font-size: var(--step--1); }
.paper .step p { color: var(--on-paper-dim); }

/* City chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .35em 1em; border: 1px solid var(--field-line); border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; text-decoration: none; color: var(--on-ink);
  background: var(--ink);
}
.chip:hover { border-color: var(--glow); color: var(--glow); background: #F0FDF4; }
.paper .chip { border-color: var(--field-line); color: var(--on-paper); background: var(--paper-2); }
.paper .chip:hover { border-color: var(--glow); color: var(--glow); background: #F0FDF4; }

/* Breadcrumbs */
.crumbs { font-size: var(--step--1); color: var(--on-ink-dim); margin-bottom: var(--s-4); }
.paper .crumbs { color: var(--on-paper-dim); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45em; }
.crumbs li + li::before { content: "/"; margin-right: .45em; opacity: .55; }
.crumbs a { text-decoration: none; border-bottom: 1px solid currentColor; }
.crumbs a:hover { color: var(--glow); }

/* --------------------------------------------------------------------------
   10. FAQ  (F-CONTENT-08, F-GEO-03)
   Answers are plain DOM text under real <h3> headings. Nothing is click-gated.
   The .faq--accordion variant uses <details open> — still open, still in the DOM,
   still works with JS disabled. Never ship a closed-by-default answer.
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-5); }
.faq__item { border-top: 1px solid var(--paper-line); padding-top: var(--s-5); }
.faq__item h3 { margin-bottom: var(--s-2); }
.faq__item p + p { margin-top: var(--s-3); }
.faq__item p { color: var(--on-paper-dim); max-width: var(--measure); }
.faq__item a { color: var(--glow-soft); text-underline-offset: .18em; }
.faq__item a:hover { color: var(--glow); }
.band--night .faq__item { border-top-color: var(--ink-line); }
.band--night .faq__item p { color: var(--on-ink-dim); }

.faq--accordion .faq__item { padding-top: 0; }
.faq--accordion details { border-top: 1px solid var(--paper-line); }
.faq--accordion summary { list-style: none; cursor: pointer; padding: var(--s-5) 0 var(--s-2); display: flex; gap: var(--s-4); align-items: baseline; }
.faq--accordion summary::-webkit-details-marker { display: none; }
.faq--accordion summary::after { content: "–"; margin-left: auto; color: var(--glow); font-weight: 700; }
.faq--accordion details:not([open]) summary::after { content: "+"; }
.faq--accordion summary h3 { margin: 0; }

/* --------------------------------------------------------------------------
   11. FORM  (F-LIGHTS-05, F-SXO-01/04/05/06, F-VISUAL-04)
   White card, white fields — the old site's quick-quote panel.
   -------------------------------------------------------------------------- */
.quote {
  background: var(--ink-3); border: 1px solid var(--ink-line);
  border-radius: var(--r-4); padding: clamp(1.25rem, .8rem + 2vw, 2rem);
  box-shadow: var(--shadow-2);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.paper .quote { background: var(--paper-2); border-color: var(--paper-line); }
.quote__head { margin-bottom: var(--s-5); }
.quote__head h2 { font-size: var(--step-2); }
.quote__sub { margin-top: var(--s-2); color: var(--on-ink-dim); font-size: var(--step--1); }
.paper .quote__sub { color: var(--on-paper-dim); }

.field { display: block; margin-bottom: var(--s-4); }
.field__label { display: block; font-size: var(--step--1); font-weight: 700; margin-bottom: var(--s-2); }
.field__hint { display: block; font-weight: 400; color: var(--on-ink-dim); margin-top: .15em; font-size: var(--step--2); }
.paper .field__hint { color: var(--on-paper-dim); }
.field__req { color: var(--berry-ink); }
.paper .field__req { color: var(--berry-ink); }

.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: .7em .9em;
  background: var(--field-bg); color: var(--field-ink);
  border: 1px solid var(--field-line); border-radius: var(--r-2);
  font-size: max(1rem, var(--step-0));   /* >=16px: stops iOS zooming on focus */
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--field-ph); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--field-line-hi); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.25rem center, right 1rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.fieldrow { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .fieldrow--2 { grid-template-columns: 1fr 1fr; } }

/* Checkbox / radio group */
.choices { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.choice { display: flex; align-items: center; gap: .6em; padding: .6em .8em;
  border: 1px solid var(--field-line); border-radius: var(--r-2); font-size: var(--step--1); cursor: pointer;
  background: var(--field-bg); }
.choice input { width: 1.05em; height: 1.05em; accent-color: var(--glow); flex: none; }
.choice:has(input:checked) { border-color: var(--glow); background: #F0FDF4; }

/* Honeypot — present for Netlify, never shown, never focusable */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Secondary "more detail" block: a plain <details>, works with JS off */
.quote__more { margin-top: var(--s-5); border-top: 1px solid var(--ink-line); padding-top: var(--s-4); }
.paper .quote__more { border-top-color: var(--paper-line); }
.quote__more > summary {
  cursor: pointer; font-weight: 700; font-size: var(--step--1);
  color: var(--glow-soft); list-style: none; display: inline-flex; gap: .5em; align-items: center;
}
.paper .quote__more > summary { color: var(--glow-soft); }
.quote__more > summary::-webkit-details-marker { display: none; }
.quote__more > summary::before { content: "+"; font-weight: 700; }
.quote__more[open] > summary::before { content: "–"; }
.quote__more > *:not(summary) { margin-top: var(--s-4); }

.quote__alt {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--ink-line);
  font-size: var(--step--1); color: var(--on-ink-dim);
}
.paper .quote__alt { border-top-color: var(--paper-line); color: var(--on-paper-dim); }

/* --------------------------------------------------------------------------
   12. MOBILE ACTION DOCK — one-tap call and text, always reachable
   White bar, shadow, red Text and green Call.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-top: 1px solid var(--ink-line);
  box-shadow: 0 -6px 20px -8px rgb(17 24 39 / .22);
}
.dock .btn { min-height: 50px; font-size: var(--step--1); box-shadow: none; }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023px) { :root { --dock-h: 74px; } }

/* --------------------------------------------------------------------------
   13. FOOTER — gray-900, the way the old site closed.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night); color: var(--on-night);
  border-top: 0; padding-block: var(--s-7) var(--s-6);

  --ink:           #111827;
  --ink-2:         #1F2937;
  --ink-3:         #1F2937;
  --ink-line:      #374151;
  --ink-line-soft: #2A3441;
  --on-ink:        #F9FAFB;
  --on-ink-dim:    #D1D5DB;
  --glow:          #4ADE80;
  --glow-soft:     #86EFAC;
  --ring:          0 0 0 3px #111827, 0 0 0 6px #4ADE80;
}
.site-footer .brand__name span { color: var(--on-night-dim); letter-spacing: .12em; }
.site-footer .mark { width: 56px; height: 56px; }
.site-footer a { color: var(--on-night-dim); text-decoration: none; }
.site-footer a:hover { color: #4ADE80; }
.site-footer .note { color: var(--on-night-dim); }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__h { font-family: var(--font-text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; margin-bottom: var(--s-3); }
.footer__list li + li { margin-top: var(--s-2); }
.sister {
  border: 1px solid var(--ink-line); border-radius: var(--r-3);
  padding: var(--s-4); background: var(--ink-3); font-size: var(--step--1); line-height: 1.5;
  color: var(--on-ink-dim);
}
.sister strong { color: var(--on-ink); }
.sister .stars { color: var(--star); }
.sister a { color: #4ADE80; border-bottom: 1px solid currentColor; }
/* The same block also appears on a light band at the foot of the home page. */
.band .sister {
  background: var(--ink-2); border-color: var(--ink-line); color: var(--on-ink-dim);
}
.band .sister a { color: var(--glow-soft); }
.band .sister .stars { color: var(--berry-ink); }
.footer__legal {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--step--2); color: var(--on-night-dim);
}
.social { display: flex; gap: var(--s-3); }
.social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line); border-radius: 50%; }
.social a:hover { border-color: #4ADE80; }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   14. UTILITIES
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.center .lede, .center .section-head { margin-inline: auto; }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.hide { display: none !important; }
@media (min-width: 768px) { .only-mobile { display: none !important; } }
@media (max-width: 767px) { .only-desk { display: none !important; } }

/* --------------------------------------------------------------------------
   15. THE FOCUS RING WINS — keep this block LAST.
   `:focus-visible` is specificity (0,1,0), so anything that sets its own
   box-shadow later in the file — `.btn`, `.btn--outline { box-shadow: none }`,
   `.dock .btn { box-shadow: none }` — silently ate the ring. Found by tabbing
   the live page with a real keyboard, not by reading the file. Every focusable
   thing on the site is named here so the ring can never be out-specified again.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.dock .btn:focus-visible,
.chip:focus-visible,
.linkish:focus-visible,
.nav__link:focus-visible,
.nav-toggle:focus-visible,
.social a:focus-visible,
.site-footer a:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

@media print {
  .site-header, .dock, .nav-panel, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background-image: none; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a, .site-footer .note, .footer__legal, .footer__h { color: #000; }
}