/* ==========================================================================
   Connect Saint Helena Ltd · Design System v2.0
   Built on the Connect wordmark indigo. Author: IT Operations · 2026 Revamp

   v2.0: brand alignment (docs/BRAND.md)
     · every brand token derived from --c-brand, the logo colour. The prototype
       used #0B2545, a cold navy that is not the brand colour
     · neutrals and shadows rebased toward indigo so greys stop reading muddy
     · service accents retuned to sit against indigo rather than navy
     · the prototype's invented icon removed from the lockup      (#28)

   v1.1: audit fixes (docs/DEFECTS.md)
     · self-hosted Inter @font-face          (#20: no third-party font origin)
     · --c-muted raised to 5.9:1             (#17: was 4.6:1 at 13px)
     · .table-wrap focus ring                (#12: keyboard-scrollable tables)
     · badge text and phone-link underlines  (#26, #27: found by axe)
     · print rules keep emergency contacts   (#25)

   Sections 1–19 are structurally the prototype's. Anything changed carries the
   finding number that required it. Re-run the accessibility sweep after ANY
   token change: a palette shift invalidates every measured ratio at once.
   ========================================================================== */

/* --- 0. Self-hosted Inter (finding #20) ---------------------------------- */
/* Served from our own origin: no DNS+TLS round trip to fonts.googleapis.com
   on satellite latency, and no visitor IP addresses handed to a third party.
   Run `npm run fetch-fonts` to populate src/assets/fonts/. If the files are
   absent the stack falls back to system fonts and the site still ships. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-variable-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display face: Space Grotesk, self-hosted (same no-third-party-origin rule as
   Inter, finding #20). Used for headings only; Inter stays for body and UI, so
   headlines get a distinct, confident geometric character against clean text.
   Falls back to the Inter/system stack if the file is absent. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-variable-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* ---- BRAND ------------------------------------------------------------
     Derived from the Connect Saint Helena wordmark, which is a single deep
     indigo. --c-brand IS the logo colour; every other brand token is a tint
     or shade of it, so the site and the logo cannot drift apart.

     The prototype used #0B2545, a cold navy that is not the brand colour and
     read noticeably blue-grey next to the actual mark. See docs/BRAND.md.

     ⚠ --c-brand was sampled from the supplied raster. Confirm it against the
       vector original or the brand guidelines; it is deliberately the only
       place the value appears, so correcting it is a one-line change.        */
  --c-brand:    #2A2D6B;   /* THE LOGO COLOUR                          */

  --c-navy-900: #15173A;   /* deepest ink: footer, emergency bar       */
  --c-navy-800: #1E2050;   /* headings, primary text on light          */
  --c-navy-700: var(--c-brand);
  --c-blue-600: #3A3E90;   /* PRIMARY: buttons, links, key UI  9.2:1   */
  --c-blue-500: #4A4FB0;   /* focus ring                        6.9:1  */
  --c-blue-100: #DFE1F2;   /* tinted surfaces                          */
  --c-blue-050: #F1F2FA;

  /* ---- SERVICE ACCENTS --------------------------------------------------
     The wordmark is monochrome, so these cannot come from it. They stay,
     because they do a job the brand colour cannot: one colour per utility
     stream, learned once and applied everywhere. Amber is the near-complement
     of the brand indigo, which is why the pairing reads as deliberate rather
     than accidental. Retuned slightly to sit against indigo rather than navy. */
  --c-elec:     #E8951A;   /* electricity: amber                       */
  --c-elec-bg:  #FDF3E3;
  --c-water:    #0E9CBE;   /* water: cyan                              */
  --c-water-bg: #E5F6FA;
  --c-waste:    #2E7D5B;   /* wastewater / renewables: flax green      */
  --c-waste-bg: #E8F4EE;

  /* Status */
  --c-ok:      #1B7F4C;
  --c-ok-bg:   #E7F5EE;
  --c-warn:    #B26A00;
  --c-warn-bg: #FEF3E2;
  --c-crit:    #B3261E;
  --c-crit-bg: #FCEBEA;

  /* Neutrals, cooled very slightly toward the brand indigo so greys sit
     against it without looking dirty. */
  --c-ink:     #191B2E;
  --c-body:    #4A4E66;
  --c-muted:   #5D6178;   /* 5.9:1 on white; the prototype's #6B7C90 was
                             4.6:1 and is used at 13px throughout, so it had
                             no margin at all against AA (finding #17).      */
  --c-line:    #DEDFEA;
  --c-line-2:  #EEEFF6;
  --c-surface: #FFFFFF;
  --c-canvas:  #F7F8FC;

  /* Type scale: fluid, 1.25 ratio.
     v2.1 legibility pass: body 17px, secondary text 15.5px, smallest 14px
     (was 16 / 14.5 / 13). Most of the site's text sits at --t-sm and --t-xs,
     and customers read bills, references and phone numbers here. */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-xs:   0.875rem;
  --t-sm:   0.9688rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --t-xl:   clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --t-2xl:  clamp(1.5rem,  1.2vw + 1.2rem, 2rem);
  --t-3xl:  clamp(1.9rem,  2.2vw + 1.3rem, 2.75rem);
  --t-4xl:  clamp(2.3rem,  3.6vw + 1.3rem, 3.75rem);

  /* 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;

  /* Shape & depth */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(21,23,58,.06), 0 1px 3px rgba(21,23,58,.05);
  --sh-2: 0 2px 4px rgba(21,23,58,.05), 0 8px 20px rgba(21,23,58,.07);
  --sh-3: 0 4px 8px rgba(21,23,58,.06), 0 20px 44px rgba(21,23,58,.11);

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset & base ----------------------------------------------------- */
*, *::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; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter's disambiguation forms: l with a tail, I with serifs, so "Il1"
     cannot be confused in account numbers, references and meter readings.
     Ignored harmlessly if the font file lacks them. */
  font-feature-settings: "cv05", "cv08";
}
/* Space Grotesk carries the brand at display sizes (h1, h2). Below that its
   geometric letterforms read less clearly, so h3/h4 use Inter. Tracking is
   eased off from the prototype's tight -0.035em, which packed letters
   together at large sizes. */
h1,h2,h3,h4 { font-family: var(--f-display); color: var(--c-navy-800); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--s-4); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
h3 { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-xl); letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-lg); letter-spacing: -0.005em; line-height: 1.3; }
p  { margin: 0 0 var(--s-4); }
/* Avoid one-word last lines in paragraphs and list items. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
a  { color: var(--c-blue-600); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--c-navy-700); }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.15rem; }
:focus-visible { outline: 3px solid var(--c-blue-500); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--c-navy-800); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Layout primitives ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--canvas { background: var(--c-canvas); }
.section--ink { background: var(--c-navy-800); color: #C9CBE4; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.eyebrow {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue-600);
  margin-bottom: var(--s-3);
}
.lede { font-size: var(--t-lg); color: var(--c-body); max-width: 62ch; }
.section-head { max-width: 60ch; margin-bottom: var(--s-6); }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-blue-600); --btn-fg: #fff; --btn-bd: var(--c-blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.78rem 1.35rem; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font: inherit; font-weight: 600; font-size: var(--t-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  box-shadow: var(--sh-1);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--c-navy-800); --btn-bd: var(--c-line); box-shadow: none; }
.btn--ghost:hover { --btn-bd: var(--c-blue-600); --btn-fg: var(--c-blue-600); }
.btn--light  { --btn-bg: #fff; --btn-fg: var(--c-navy-800); --btn-bd: #fff; }
.btn--danger { --btn-bg: var(--c-crit); --btn-bd: var(--c-crit); }
.btn--lg { padding: 0.95rem 1.7rem; font-size: var(--t-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- 5. Emergency bar + header ------------------------------------------ */
.emergency {
  background: var(--c-navy-900); color: #fff; font-size: var(--t-sm);
}
.emergency .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-2);
}
.emergency strong { color: #fff; }
.emergency a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.emergency a:hover { text-decoration: underline; color: #fff; }
.emergency .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-elec); flex: none; }
.emergency .spacer { margin-left: auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line-2);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 74px; }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-weight: 800; font-size: 1.15rem; color: var(--c-navy-800); letter-spacing: -0.02em; }
.brand__sub  { font-size: 0.7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--c-navy-800); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: background .15s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__link[data-in-section="true"] { background: var(--c-blue-050); color: var(--c-blue-600); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-blue-600); }
.nav__chev { width: 10px; height: 7px; flex: none; transition: transform .18s var(--ease); }
.nav__disclosure[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__submenu {
  list-style: none; margin: 0; padding: var(--s-2);
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; z-index: 60;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.nav__submenu[hidden] { display: none; }
.nav__submenu a {
  display: block; padding: var(--s-3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--c-navy-800); text-decoration: none;
}
.nav__submenu a:hover, .nav__submenu a[aria-current="page"] { background: var(--c-blue-050); color: var(--c-blue-600); }

.header-cta { margin-left: var(--s-3); }

.nav-toggle {
  margin-left: auto; display: none; width: 44px; height: 44px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: var(--c-navy-800); position: relative; border-radius: 2px; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: inherit; border-radius: 2px;
  transition: transform .18s var(--ease), top .18s var(--ease);
}
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); background: var(--c-navy-800); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); background: var(--c-navy-800); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; inset: 74px 0 auto; margin: 0;
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: var(--sh-2);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .nav__link { padding: var(--s-3); font-size: var(--t-base); width: 100%; justify-content: space-between; }
  .nav__submenu {
    position: static; box-shadow: none; border: 0; border-left: 2px solid var(--c-line);
    border-radius: 0; margin: var(--s-1) 0 var(--s-2) var(--s-3); padding: 0 0 0 var(--s-2); min-width: 0;
  }
  .header-cta { margin: var(--s-3) 0 0; width: 100%; }
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1000px 500px at 78% -10%, rgba(18,165,198,.42), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(58,62,144,.60), transparent 62%),
    linear-gradient(150deg, var(--c-brand) 0%, var(--c-navy-900) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(700px 400px at 75% 0%, #000, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-8); }
.hero h1 { color: #fff; max-width: 15ch; font-size: clamp(2.5rem, 4.4vw + 1.15rem, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; }
.hero p { color: #C3C6E6; font-size: var(--t-lg); max-width: 52ch; }
.hero .btn-row { margin-top: var(--s-6); }

/* Live status pill inside the hero */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border-radius: var(--r-pill); background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17); color: #fff;
  font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-5);
  text-decoration: none;
}
.status-pill:hover { background: rgba(255,255,255,.15); color: #fff; }
.status-pill .beacon {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27,127,76,.25); flex: none;
}
.status-pill .beacon i {
  width: 9px; height: 9px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* --- 7. Quick actions (the task-first strip) ---------------------------- */
.quick-actions { margin-top: calc(var(--s-7) * -1); position: relative; z-index: 5; }
.qa-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: #fff; padding: var(--s-3); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); border: 1px solid var(--c-line-2);
}
.qa {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); border-radius: var(--r-md); text-decoration: none;
  background: var(--c-canvas); border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.qa:hover { background: var(--c-blue-050); border-color: var(--c-blue-100); transform: translateY(-2px); }
.qa__icon { width: 30px; height: 30px; color: var(--c-blue-600); }
.qa__label { font-weight: 700; color: var(--c-navy-800); font-size: var(--t-sm); }
.qa__hint  { font-size: var(--t-xs); color: var(--c-muted); }

/* --- 8. Cards ------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--sh-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.card--link:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--c-blue-100); }
.card h3 { margin-bottom: var(--s-2); }
.card p  { font-size: var(--t-sm); margin-bottom: var(--s-3); }
.card__more { font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.card__more::after { content: " →"; }

/* Service cards carry a coloured top rule */
.card--service { border-top: 4px solid var(--c-blue-600); }
.card--elec  { border-top-color: var(--c-elec);  }
.card--water { border-top-color: var(--c-water); }
.card--waste { border-top-color: var(--c-waste); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--c-blue-100); color: var(--c-navy-700); margin-bottom: var(--s-3);
}
.badge--elec  { background: var(--c-elec-bg);  color: #8A5A00; }
.badge--water { background: var(--c-water-bg); color: #0A6C82; }
.badge--waste { background: var(--c-waste-bg); color: #1F5C42; }
.badge--ok    { background: var(--c-ok-bg);    color: var(--c-ok); }
.badge--warn  { background: var(--c-warn-bg);  color: var(--c-warn); }
.badge--crit  { background: var(--c-crit-bg);  color: var(--c-crit); }

/* --- 9. Status board ----------------------------------------------------- */
.status-board { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.status-tile {
  background: #fff; border: 1px solid var(--c-line); border-left: 5px solid var(--c-ok);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.status-tile--warn { border-left-color: var(--c-warn); }
.status-tile--crit { border-left-color: var(--c-crit); }
.status-tile__name { font-weight: 700; color: var(--c-navy-800); display: flex; align-items: center; gap: var(--s-2); }
.status-tile__state { font-size: var(--t-sm); margin: var(--s-1) 0 0; }
.status-tile__meta { font-size: var(--t-xs); color: var(--c-muted); margin: var(--s-2) 0 0; }

/* --- 10. Stats ----------------------------------------------------------- */
.stat { text-align: left; }
.stat__num {
  font-size: var(--t-3xl); font-weight: 800; color: #fff;
  letter-spacing: -0.03em; line-height: 1; display: block;
}
.stat__label { font-size: var(--t-sm); color: #A7AAD0; margin-top: var(--s-2); }

/* --- 11. Notices / alerts ------------------------------------------------ */
.notice {
  display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md); border: 1px solid var(--c-line);
  background: var(--c-blue-050); font-size: var(--t-sm);
}
.notice--warn { background: var(--c-warn-bg); border-color: #F5D9AC; }
.notice--crit { background: var(--c-crit-bg); border-color: #F3C4C1; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--c-navy-800); }

/* --- 12. Forms ----------------------------------------------------------- */
.field { margin-bottom: var(--s-5); }
.field > label { display: block; font-weight: 600; color: var(--c-navy-800); margin-bottom: var(--s-2); font-size: var(--t-sm); }
.field .hint { font-size: var(--t-xs); color: var(--c-muted); margin: calc(var(--s-2) * -1 + 2px) 0 var(--s-2); }
.input, .select, .textarea {
  width: 100%; padding: 0.72rem var(--s-4); font: inherit; font-size: var(--t-base);
  color: var(--c-ink); background: #fff;
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-blue-600); box-shadow: 0 0 0 3px rgba(58,62,144,.18);
}
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2346566A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--c-line); border-radius: var(--r-md); cursor: pointer; margin-bottom: var(--s-2); background: #fff; }
.choice:has(input:checked) { border-color: var(--c-blue-600); background: var(--c-blue-050); }
.choice input { margin-top: 4px; accent-color: var(--c-blue-600); width: 18px; height: 18px; flex: none; }
.choice .t { font-weight: 600; color: var(--c-navy-800); font-size: var(--t-sm); display: block; }
.choice .d { font-size: var(--t-xs); color: var(--c-muted); }

/* --- 13. Tables ---------------------------------------------------------- */
/* Always rendered through the `tableWrap` macro, which supplies tabindex="0",
   role="region" and an accessible name; without them the horizontal scroll is
   unreachable by keyboard (finding #12). The focus ring below is what makes
   that focusability visible rather than a silent tab stop. */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.table-wrap:focus-visible { outline: 3px solid var(--c-blue-500); outline-offset: 2px; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
table.data th, table.data td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--c-line-2); }
table.data thead th { background: var(--c-canvas); color: var(--c-navy-800); font-weight: 700; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--c-blue-050); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* --- 14. Accordion (FAQ / doc groups) ------------------------------------ */
.acc { border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; margin-bottom: var(--s-3); overflow: hidden; }
.acc > summary {
  padding: var(--s-4) var(--s-5); font-weight: 600; color: var(--c-navy-800);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-sm);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; font-size: 1.25rem; color: var(--c-blue-600); line-height: 1; }
.acc[open] > summary::after { content: "–"; }
.acc[open] > summary { border-bottom: 1px solid var(--c-line-2); }
.acc__body { padding: var(--s-4) var(--s-5); font-size: var(--t-sm); }
.acc__body p:last-child { margin-bottom: 0; }

/* --- 15. Document list --------------------------------------------------- */
.doc {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: #fff; text-decoration: none; margin-bottom: var(--s-2);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.doc:hover { border-color: var(--c-blue-600); background: var(--c-blue-050); }
.doc__type { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--c-crit-bg); color: var(--c-crit); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em; }
.doc__title { font-weight: 600; color: var(--c-navy-800); font-size: var(--t-sm); }
.doc__meta { font-size: var(--t-xs); color: var(--c-muted); }

/* --- 16. Filter chips ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.chip {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600;
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-body); cursor: pointer;
  transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--c-blue-600); color: var(--c-blue-600); }
.chip[aria-pressed="true"] { background: var(--c-navy-800); border-color: var(--c-navy-800); color: #fff; }

/* --- 17. Footer ---------------------------------------------------------- */
/* Three tiers: an action strip (what to do right now), a sitemap grid, and the
   small print. #A7AAD0 body text is 7.6:1 on --c-navy-900; links #D3D5EC 11:1. */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--c-navy-900); color: #A7AAD0; font-size: var(--t-sm);
  padding-block: var(--s-7) var(--s-5);
}
/* A soft brand glow behind the action strip, so the footer reads as a
   deliberate close to the page rather than a grey block. */
.site-footer::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 80%;
  background: radial-gradient(closest-side, rgba(74, 79, 176, .35), transparent);
  pointer-events: none;
}
.site-footer .wrap { position: relative; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: #D3D5EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-7);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg, 18px);
  background: linear-gradient(120deg, rgba(42, 45, 107, .9), rgba(30, 32, 80, .6));
}
.footer-cta__eyebrow {
  margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-elec);
}
.footer-cta__title { margin: 0; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.footer-cta__note { margin: var(--s-1) 0 0; }
.site-footer .footer-cta__note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.site-footer .footer-cta__actions .btn { text-decoration: none; }
.site-footer .footer-cta__actions .btn--light { color: var(--c-navy-800); }
.footer-cta__dot {
  display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%;
  background: var(--c-ok); box-shadow: 0 0 0 3px rgba(27, 127, 76, .3); vertical-align: 1px;
}

.footer-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1.3fr repeat(3, 1fr); } .footer-about { grid-column: auto; } }
.footer-about p { max-width: 36ch; }
.footer-address { font-style: normal; font-size: var(--t-xs); line-height: 1.6; color: #A7AAD0; margin-top: var(--s-4); }

.footer-contacts { margin: 0; }
.footer-contacts > div + div { margin-top: var(--s-4); }
.footer-contacts dt { color: #fff; font-weight: 600; margin-bottom: 2px; }
.footer-contacts dd { margin: 0 0 2px; }
.site-footer .footer-contacts a { text-decoration: underline; text-underline-offset: 2px; }

.footer-bar {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; font-size: var(--t-xs);
}
.footer-bar__legal { margin: 0; }
.footer-bar__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-left: auto !important; }
.site-footer .footer-bar__links li { margin: 0; }
.footer-top {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill);
}
.site-footer .footer-top:hover { border-color: #fff; text-decoration: none; }
@media (max-width: 720px) { .footer-bar__links { margin-left: 0 !important; } .footer-cta { padding: var(--s-5); } }

/* --- 18. Utilities ------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.center { text-align: center; } .center .lede, .center .section-head { margin-inline: auto; }
.flow > * + * { margin-top: var(--s-4); }
.split { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }

/* --- 19. Print ----------------------------------------------------------- */
/* The prototype hid every .btn, which on the fault-reporting page are the
   emergency phone numbers, on the one printout most likely to end up pinned to
   somebody's fridge (finding #25). The emergency bar and danger buttons stay. */
@media print {
  .site-header, .nav, .site-footer, .breadcrumbs, .nav-toggle,
  .chips, .doc-search, .skip-link { display: none !important; }
  .btn:not(.btn--danger) { display: none !important; }
  .emergency { background: none !important; color: #000 !important; border-bottom: 2px solid #000; }
  .emergency a, .emergency strong { color: #000 !important; }
  .btn--danger { background: none !important; color: #000 !important; border: 1.5px solid #000 !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; }
  .emergency a::after, .btn--danger a::after { content: ""; }
  .acc[open] .acc__body, .acc__body { display: block !important; }
}

/* --- 20. Emergency bar: 999 emphasis (finding #4) ------------------------ */
/* Danger-to-life routes to the island emergency service first, on every page.
   The prototype never mentioned 999 at all. */
.emergency__999 { font-weight: 700; }
.emergency__999 a {
  background: var(--c-crit); padding: 1px var(--s-2); border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.emergency__999 a:hover { background: #C9312A; text-decoration: none; border-color: #fff; }

/* --- 21. Breadcrumbs ----------------------------------------------------- */
.breadcrumbs { background: var(--c-canvas); border-bottom: 1px solid var(--c-line-2); font-size: var(--t-xs); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: var(--s-3) 0; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-line); }
.breadcrumbs a { color: var(--c-body); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-blue-600); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-navy-800); font-weight: 600; }

/* --- 22. Page head ------------------------------------------------------- */
.h1--page { font-size: var(--t-3xl); }
.page-head .lede { margin-bottom: 0; }

/* --- 23. Status: staleness + live region --------------------------------- */
.status-stamp { font-size: var(--t-xs); color: var(--c-muted); margin: var(--s-3) 0 0; }
.status-stamp--stale {
  color: #7A4A00; font-weight: 600;   /* 6.0:1 on --c-warn-bg; --c-warn (#B26A00) was 3.86:1 */
  background: var(--c-warn-bg); border: 1px solid #F5D9AC;
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); display: inline-block;
}
.status-tile--ok   { border-left-color: var(--c-ok); }
.status-tile--warn { border-left-color: var(--c-warn); }
.status-tile--crit { border-left-color: var(--c-crit); }
.status-tile--unavailable { border-left-color: var(--c-line); }
.status-tile--unavailable .status-tile__state { font-style: italic; }

/* Result counts and filter feedback announced to screen readers (finding #14) */
.result-count { font-size: var(--t-sm); color: var(--c-muted); margin: 0 0 var(--s-4); }
.result-count strong { color: var(--c-navy-800); }

/* --- 24. Forms: privacy note + optional marker (finding #2, #13) --------- */
.form-privacy {
  font-size: var(--t-xs); color: var(--c-body);
  background: var(--c-canvas); border-left: 3px solid var(--c-blue-600);
  padding: var(--s-3) var(--s-4); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s-4);
}
.field__optional { font-weight: 400; color: var(--c-muted); }
.field .hint { display: block; }

/* --- 25. Documents: richer rows ----------------------------------------- */
.doc__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc__summary { font-size: var(--t-xs); color: var(--c-body); }
.doc-search { max-width: 560px; }
.doc[hidden] { display: none; }
/* Listed but not yet migrated: visibly not a link, with a way to get the file. */
.doc--pending { background: var(--c-canvas); border-style: dashed; }
.doc--pending:hover { border-color: var(--c-line); background: var(--c-canvas); }
.doc--pending .doc__type { background: var(--c-line); color: var(--c-muted); }
.doc__soon {
  display: inline-block; margin-left: var(--s-2); padding: 1px 8px; border-radius: 999px;
  background: var(--c-warn-bg); color: #7A4A00; font-size: 0.75rem; font-weight: 700;
  letter-spacing: .02em; vertical-align: 1px;
}

/* --- 26. Prose (Markdown-authored service & about pages) ---------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s-6); }
.prose ul { padding-left: 1.3rem; }
.prose li + li { margin-top: var(--s-2); }

/* Numbered steps, BuildCore-inspired. An ordered list reads as a confident,
   scannable sequence: a tabular indigo numeral (01, 02…) in the display face,
   set in a fixed gutter with the step hanging beside it. Pure brand palette;
   the point is legibility, not decoration. */
.prose ol { list-style: none; padding-left: 0; counter-reset: step; }
.prose ol > li {
  position: relative; padding-left: 2.9rem; counter-increment: step;
}
.prose ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.02em;
  font-family: var(--f-display); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 1.02rem; line-height: 1.35;
  color: var(--c-blue-600); letter-spacing: -0.01em;
}
.prose ol > li + li { margin-top: var(--s-3); }
.prose blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-blue-600); background: var(--c-blue-050);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--c-canvas); padding: 1px 5px; border-radius: var(--r-sm);
}

/* Two-column article shell: content + sticky sidebar */
.article-grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-aside { position: sticky; top: 96px; align-self: start; }
}

/* --- 27. News ----------------------------------------------------------- */
.news-meta { font-size: var(--t-xs); color: var(--c-muted); margin-bottom: var(--s-3); }
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }

/* --- 28. Footer additions ----------------------------------------------- */
.footer-hours { font-size: var(--t-xs); color: #8A8EB6; }
.footer-heading { color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-4); }
.footer-brand { margin-bottom: var(--s-4); }
.site-footer .footer-heading { margin-top: 0; }

/* --- 29. On-dark variants ----------------------------------------------- */
/* The prototype achieved the hero's secondary button with an inline style:
   --btn-bd: rgba(255,255,255,.35). Against the navy hero that border sits at
   roughly 1.9:1, below the 3:1 required for user-interface components by
   WCAG 2.2 SC 1.4.11 (finding #15). A real class, at a real contrast ratio,
   also removes the inline style that forced 'unsafe-inline' on style-src. */
.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .72);   /* ≈ 4.6:1 on --c-navy-800 */
  box-shadow: none;
}
.btn--onDark:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: #fff; }

.eyebrow--onDark { color: var(--c-water); }
.lede--onDark { color: #A7AAD0; }

/* --- 30. Status pill states --------------------------------------------- */
.status-pill--warn .beacon { background: rgba(245, 165, 36, .28); }
.status-pill--warn .beacon i { background: var(--c-elec); box-shadow: 0 0 0 0 rgba(245, 165, 36, .6); }
.status-pill--crit .beacon { background: rgba(179, 38, 30, .3); }
.status-pill--crit .beacon i { background: #F87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); }

/* --- 31. Misc content helpers ------------------------------------------- */
.card__note { margin-top: .5rem; font-size: var(--t-sm); }
.faq-list { max-width: 820px; }
.form-card { padding: var(--s-6); }
.sidebar-card p { font-size: var(--t-sm); }
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.with-aside { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .with-aside { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); } }
.muted-note { font-size: var(--t-xs); color: var(--c-muted); }
fieldset.bare { border: 0; padding: 0; margin: 0 0 var(--s-5); }
fieldset.bare > legend { font-weight: 600; color: var(--c-navy-800); font-size: var(--t-sm); margin-bottom: var(--s-3); padding: 0; }
.tariff-pending {
  border: 1.5px dashed var(--c-warn); background: var(--c-warn-bg);
  border-radius: var(--r-md); padding: var(--s-5); color: #7A4A00;
}
.tariff-pending strong { color: #5E3900; }

/* --- 32. Contrast corrections (findings #26 and #27) ---------------------- */
/* Found by an axe sweep of the built site, not by eye. All four were inherited
   from the prototype's tokens and all four are marginal-but-real AA failures at
   the 13px size these components actually render at. Recorded here rather than
   silently patched, because the numbers are the point. */

/* Status badge text. Measured on the built page:
     .badge--ok   #1B7F4C on #E7F5EE = 4.46:1  (needs 4.5)
     .badge--warn #B26A00 on #FEF3E2 = 3.86:1  (needs 4.5)
   The token colours are correct for borders and rules; it is only badge TEXT
   that fails, so the text colour is separated from the semantic token rather
   than shifting --c-ok and --c-warn everywhere. */
.badge--ok   { color: #0F5C34; }   /* 6.3:1 on --c-ok-bg   */
.badge--warn { color: #7A4A00; }   /* 6.0:1 on --c-warn-bg */
.badge--crit { color: #93201A; }   /* 6.4:1 on --c-crit-bg */

/* Footer brand subtitle used --c-muted, a token tuned for white backgrounds:
   #5A6B7F on #06182E = 3.26:1. */
.site-footer .brand__sub { color: #A7AAD0; }   /* on --c-navy-900 */

/* Emergency and footer phone links carried no underline, so they were
   distinguished from the surrounding text by weight and colour alone:
   1.41:1 between link and body text, against a 3:1 minimum (WCAG 1.4.1).
   Underlining them is also simply better: the emergency bar is the one place
   on the site where a tappable number must be unmistakable. */
.emergency a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.emergency__999 a { text-decoration-color: rgba(255, 255, 255, .85); }
.site-footer li a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer .footer-bar a { text-decoration: none; }
.site-footer .footer-bar a:hover { text-decoration: underline; }

/* --- 33. Brand lockup (finding #28) -------------------------------------- */
/* Connect's mark is a wordmark in a single deep indigo, not an icon plus text.
   The prototype's rounded-square/wave/lightning icon was not a stylisation of
   it; see docs/BRAND.md. These rules cover both the real asset once it is
   added and the typographic stand-in used until then. */
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__logo { display: block; height: 48px; width: auto; }
.footer-brand .brand__logo { height: 44px; }
@media (max-width: 480px) { .brand__logo { height: 42px; } }
/* Reversed to white on the dark footer; the mark is a transparent monochrome,
   so a flat invert is exact. */
.brand--light .brand__logo { filter: brightness(0) invert(1); }

/* Typographic stand-in. Tight tracking and a lowered-contrast subtitle echo the
   wordmark's proportions without pretending to be it. */
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.035em;
  color: var(--c-brand);
}
.brand__sub {
  font-size: 0.66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-muted); margin-top: 2px;
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub  { color: #A7AAD0; }

/* --- 34. Article hero photo (lib/image.js pipeline) ---------------------- */
.article-hero { max-width: var(--wrap); margin: 0 auto; padding: var(--s-6) var(--s-5) 0; }
.article-hero__img {
  display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-canvas);
}
.article-hero__caption { font-size: var(--t-xs); color: var(--c-muted); margin: var(--s-2) 0 0; }
/* When a hero is present the body section can sit tighter beneath it. */
.article-hero + .section { padding-top: var(--s-6); }

/* --- 35. Photographic homepage hero ------------------------------------- */
.hero--photo { position: relative; isolation: isolate; }
.hero--photo::after { display: none; }            /* drop the grid texture; the photo carries it */
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
/* Legibility wash: darkest lower-left where the text sits, lighter to the
   right so the landscape still reads. Keeps white text well above 4.5:1. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(94deg, rgba(21,23,58,.92) 0%, rgba(21,23,58,.76) 42%, rgba(21,23,58,.42) 100%),
    linear-gradient(0deg, rgba(21,23,58,.55) 0%, rgba(21,23,58,0) 55%);
}
.hero--photo .wrap { position: relative; z-index: 1; }

/* Ghosted wordmark: an oversized "Connect" set into the photo, bleeding off
   the right edge (the hero clips it). Sits above the image but below the
   headline layer, so it reads as texture, never competing with the copy.
   Decorative only: aria-hidden, non-selectable, ignores pointers. */
.hero__ghost {
  position: absolute; z-index: 0; top: 50%; right: -0.06em;
  transform: translateY(-50%);
  margin: 0; padding: 0;
  font-family: var(--f-display); font-weight: 700; font-style: normal;
  font-size: clamp(7rem, 25vw, 19rem); line-height: 0.8; letter-spacing: -0.05em;
  color: #fff; opacity: .055; white-space: nowrap;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
@media (max-width: 640px) { .hero__ghost { top: 8%; transform: none; opacity: .045; } }

.hero__credit {
  position: absolute; right: var(--s-4); bottom: var(--s-2); z-index: 1; margin: 0;
  font-size: var(--t-xs); color: rgba(255,255,255,.64); letter-spacing: .02em;
}

/* --- 36. Service-page hero photo already covered by .article-hero -------- */

/* --- 37. Image-led service cards ---------------------------------------- */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-canvas); }
.card--photo .card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card--link.card--photo:hover .card__img { transform: scale(1.04); }
.card--photo .card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.card--photo .card__body .card__more { margin-top: auto; }

/* --- 38. Showcase photo mosaic (homepage) ------------------------------- */
.showcase .section-head { margin-inline: auto; }
.mosaic { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.mosaic__item {
  position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden;
  min-height: 210px; box-shadow: var(--sh-1); background: var(--c-navy-800);
}
.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic__item:hover .mosaic__img { transform: scale(1.05); }
.mosaic__cap {
  position: absolute; inset: auto 0 0 0; z-index: 1; margin: 0;
  padding: var(--s-6) var(--s-4) var(--s-3); color: #fff; font-size: var(--t-sm); font-weight: 600;
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  background: linear-gradient(0deg, rgba(21,23,58,.90) 0%, rgba(21,23,58,.28) 62%, transparent 100%);
}
.mosaic__cap .badge { margin: 0; }
@media (min-width: 720px) {
  .mosaic { grid-template-columns: 1.5fr 1fr; grid-template-rows: 215px 215px; }
  .mosaic__item--lg { grid-row: 1 / span 2; }
}

/* --- People: board & management cards --------------------------------- */
.people-grid, .prose .people-grid {
  list-style: none; margin: var(--s-5) 0 var(--s-7); padding: 0;
  display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.prose .people-grid li + li { margin-top: 0; }
.person {
  display: flex; flex-direction: column; background: var(--c-white, #fff);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
}
.person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-canvas); display: grid; place-items: center; }
.person__photo picture { display: block; width: 100%; height: 100%; }
.person__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.person__initials { font: 600 2rem/1 var(--f-display); color: var(--c-blue-600); }
.person__body { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.prose .person__name { font-size: var(--t-base); margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
.prose .person__role { margin: 0; font-size: var(--t-sm); color: var(--c-navy-800); font-weight: 600; line-height: 1.35; }
.prose .person__type, .prose .person__meta { margin: 0; font-size: var(--t-xs); color: var(--c-muted); }
.people-grid--board .person:first-child { border-top: 3px solid var(--c-blue-600); }

/* Tariff table: superseded figure shown in preview builds only. */
.tariff-last { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--c-muted); font-weight: 400; }
.tariff-note { display: block; margin-top: var(--s-1); font-size: var(--t-xs); font-weight: 400; max-width: 40ch; }

/* --- 38b. Vacancy panel (news items with closing date / apply link) ------- */
.vacancy-panel {
  margin: 0 0 var(--s-6); padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--c-blue-050); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-blue-600);
}
.vacancy-panel__date { margin: 0 0 var(--s-4); font-size: var(--t-lg); color: var(--c-navy-800); }
.vacancy-panel--closed { background: var(--c-canvas); border-left-color: var(--c-muted); }
.vacancy-panel--closed .vacancy-panel__date { color: var(--c-muted); }
.vacancy-panel__size { font-weight: 500; opacity: .8; }

/* --- 39. In-prose photo gallery (e.g. treatment-plant tour) -------------- */
.plant-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3); margin: var(--s-6) 0;
}
.plant-gallery figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.plant-gallery figure > picture {
  display: block; overflow: hidden; border-radius: var(--r-md);
  box-shadow: var(--sh-1); background: var(--c-canvas);
}
.plant-gallery__img {
  width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.plant-gallery figure:hover .plant-gallery__img { transform: scale(1.05); }
.plant-gallery figcaption { font-size: var(--t-xs); color: var(--c-muted); letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { .plant-gallery__img { transition: none; } }

/* =========================================================================
   40. SUPPLY STATUS v2 (/supply-status/)
   One job: "is my supply OK?" in two seconds, then "anything in my area?".
   State is always icon + words + colour, never colour alone.
   ========================================================================= */

/* --- Verdict hero ---------------------------------------------------- */
.ss-hero {
  --ss-glow: rgba(46, 158, 107, .45);
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 88% -10%, var(--ss-glow), transparent 62%),
    radial-gradient(700px 380px at 0% 120%, rgba(58, 62, 144, .55), transparent 65%),
    linear-gradient(155deg, var(--c-brand) 0%, var(--c-navy-900) 100%);
  border-bottom: 4px solid #2E9E6B;
}
.ss-hero[data-state="warn"] { --ss-glow: rgba(216, 148, 34, .5); border-bottom-color: #D89422; }
.ss-hero[data-state="crit"] { --ss-glow: rgba(210, 70, 50, .55); border-bottom-color: #D24632; }
/* Unconfirmed data: amber whatever the last report said, and the pulse stops. */
.ss-hero[data-stale="true"] { --ss-glow: rgba(216, 148, 34, .42); border-bottom-color: #D89422; }
.ss-hero[data-stale="true"] .ss-live i, .ss-hero[data-stale="true"] .ss-live::after { background: #F2B046; }
.ss-hero[data-stale="true"] .ss-live::after { animation: none; }
.ss-hero__grid { display: grid; gap: var(--s-6); align-items: center; padding-block: clamp(36px, 6vw, 72px); }
@media (min-width: 900px) { .ss-hero__grid { grid-template-columns: 1.5fr 1fr; gap: var(--s-8); } }
.ss-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C3C6E6;
}
.ss-hero__verdict {
  color: #fff; margin: 0 0 var(--s-3);
  font-size: clamp(2rem, 3.6vw + 1rem, 3.4rem); line-height: 1.04; letter-spacing: -0.035em;
  max-width: 18ch; text-wrap: balance;
}
.ss-hero__sub { color: #D5D8F0; font-size: var(--t-lg); margin: 0 0 var(--s-5); max-width: 46ch; }

/* live pulse beside the eyebrow */
.ss-live { position: relative; width: 10px; height: 10px; flex: none; }
.ss-live i, .ss-live::after { position: absolute; inset: 0; border-radius: 50%; background: #4FD196; content: ""; }
.ss-live::after { animation: ss-pulse 2.2s ease-out infinite; }
.ss-hero[data-state="warn"] .ss-live i, .ss-hero[data-state="warn"] .ss-live::after { background: #F2B046; }
.ss-hero[data-state="crit"] .ss-live i, .ss-hero[data-state="crit"] .ss-live::after { background: #FF7B68; }
@keyframes ss-pulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* freshness stamp, restyled for the dark hero */
.ss-hero .status-stamp {
  display: inline-flex; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #E6E8F7; font-size: var(--t-sm);
}
.ss-hero .status-stamp--stale { background: #FEF3E2; border-color: #F5D9AC; color: #7A4A00; font-weight: 600; }

/* at-a-glance pills */
.ss-glance { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ss-glance__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  padding: 12px 14px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.ss-glance__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.ss-glance__icon--electricity { color: #F5B547; }
.ss-glance__icon--water { color: #5CD3F0; }
.ss-glance__icon--wastewater { color: #6FD3A2; }
.ss-glance__name { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-base); }
.ss-glance .badge { font-weight: 700; }

.ss-icon { width: 20px; height: 20px; flex: none; }
.ss-icon--sm { width: 15px; height: 15px; }

/* --- Service cards --------------------------------------------------- */
.ss-services { padding-top: var(--s-7); }
.ss-cards { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .ss-cards { grid-template-columns: repeat(3, 1fr); } }
.ss-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.ss-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c-ok); }
.ss-card[data-state="warn"] { border-color: #F1D49A; }
.ss-card[data-state="warn"]::before { background: #D89422; }
.ss-card[data-state="crit"] { border-color: #F3C4C1; box-shadow: 0 0 0 3px var(--c-crit-bg), var(--sh-1); }
.ss-card[data-state="crit"]::before { background: var(--c-crit); }
.ss-card__head { display: flex; align-items: center; gap: var(--s-3); }
.ss-card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.ss-card__icon .ss-icon { width: 22px; height: 22px; }
.ss-card__icon--electricity { background: var(--c-elec-bg); color: #A86400; }
.ss-card__icon--water { background: var(--c-water-bg); color: #0A6C82; }
.ss-card__icon--wastewater { background: var(--c-waste-bg); color: #1F5C42; }
.ss-card__name { margin: 0; font-size: var(--t-xl); }
.ss-card__state { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.ss-card__state-icon { display: none; width: 26px; height: 26px; border-radius: 50%; place-items: center; }
.ss-card__state-icon .ss-icon { width: 15px; height: 15px; stroke-width: 2.6; }
.ss-card__state-icon--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.ss-card__state-icon--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.ss-card__state-icon--crit { background: var(--c-crit-bg); color: var(--c-crit); }
.ss-card[data-state="ok"] .ss-card__state-icon--ok,
.ss-card[data-state="warn"] .ss-card__state-icon--warn,
.ss-card[data-state="crit"] .ss-card__state-icon--crit { display: grid; }
.ss-card__state .badge { font-size: var(--t-sm); padding: 4px 12px; }
.ss-card__msg { margin: 0; color: var(--c-body); font-size: var(--t-sm); white-space: pre-line; flex: 1; }
.ss-card__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  padding-top: var(--s-3); border-top: 1px solid var(--c-line-2);
  font-size: var(--t-xs); color: var(--c-muted);
}
.ss-card__report { font-weight: 600; }
.ss-fine { margin: var(--s-5) 0 0; font-size: var(--t-xs); color: var(--c-muted); max-width: 72ch; }

/* --- Area checker ---------------------------------------------------- */
.ss-works-head { margin-bottom: var(--s-5); }
.ss-area {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: var(--sh-1); margin-bottom: var(--s-6);
}
.ss-area[hidden] { display: none; }
.ss-area__intro { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); }
.ss-area__pin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-blue-050); color: var(--c-blue-600); flex: none; }
.ss-area__title { margin: 0; font-family: var(--f-sans); font-weight: 700; font-size: var(--t-lg); color: var(--c-navy-800); }
.ss-area__verdict { margin: 2px 0 0; font-size: var(--t-sm); color: var(--c-body); }
.ss-area__verdict[data-tone="warn"] { color: var(--c-warn); font-weight: 600; }
.ss-area__verdict[data-tone="ok"] { color: var(--c-ok); }
.ss-area__verdict a { font-weight: 600; }
.ss-districts { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: var(--s-4); }
.ss-district {
  min-height: 44px; padding: 8px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--c-line); background: var(--c-canvas); color: var(--c-navy-800);
  font: inherit; font-size: var(--t-sm); font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.ss-district:hover { border-color: var(--c-blue-600); background: #fff; }
.ss-district[aria-pressed="true"] { background: var(--c-navy-800); border-color: var(--c-navy-800); color: #fff; }
.ss-district:focus-visible { outline: 3px solid var(--c-elec); outline-offset: 2px; }
.ss-service-filter { margin-bottom: 0; }

/* --- Works groups ---------------------------------------------------- */
.ss-groups { display: grid; gap: var(--s-6); }
@media (min-width: 960px) {
  .ss-groups { grid-template-columns: 1fr 1fr; }
  .ss-group--recent { grid-column: 1 / -1; }
}
.ss-group__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.ss-group__count {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
  font: 700 var(--t-xs)/1 var(--f-display); background: var(--c-line-2); color: var(--c-navy-800);
}
.ss-group__count:empty { display: none; }
.ss-group--now .ss-group__count { background: var(--c-warn-bg); color: var(--c-warn); }
.ss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ss-group--recent .ss-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ss-empty {
  margin: 0; padding: var(--s-4); border-radius: var(--r-lg); border: 1.5px dashed var(--c-line);
  color: var(--c-muted); font-size: var(--t-sm); background: rgba(255,255,255,.6);
}
.ss-empty[hidden] { display: none; }
.ss-work {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4);
}
.ss-work[hidden] { display: none; }
.ss-work__date {
  border-radius: var(--r-md); text-align: center; padding: 8px 4px; align-self: start;
  background: var(--c-blue-050); color: var(--c-navy-800); display: grid; gap: 1px;
}
.ss-work--electricity .ss-work__date { background: var(--c-elec-bg); color: #7A4A00; }
.ss-work--water .ss-work__date { background: var(--c-water-bg); color: #0A5568; }
.ss-work--wastewater .ss-work__date { background: var(--c-waste-bg); color: #1F5C42; }
.ss-work__wd, .ss-work__mon { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ss-work__day { font: 600 1.6rem/1 var(--f-display); }
.ss-work__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.ss-work__title { margin: 0; font-size: var(--t-base); line-height: 1.3; }
.ss-work__svc {
  display: flex; align-items: center; gap: 5px; margin-bottom: 2px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted);
}
.ss-work__meta { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: 4px var(--s-4); font-size: var(--t-xs); color: var(--c-body); }
.ss-work__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ss-work__meta .ss-icon { color: var(--c-muted); }
.ss-work__districts { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ss-work__districts span { font-size: 0.8125rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--c-line-2); color: var(--c-navy-800); }
.ss-work__detail { margin-top: var(--s-2); font-size: var(--t-sm); }
.ss-work__detail summary { cursor: pointer; font-weight: 600; color: var(--c-blue-600); font-size: var(--t-xs); }
.ss-work__detail p { margin: var(--s-2) 0 0; white-space: pre-line; color: var(--c-body); }
.ss-work__ref { font-weight: 500; color: var(--c-muted); margin-left: 6px; }

/* --- Restore steps + report ------------------------------------------ */
.ss-restore-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .ss-restore-grid { grid-template-columns: 1.6fr 1fr; } }
.ss-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: ss-step; display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .ss-steps { grid-template-columns: repeat(4, 1fr); } }
.ss-steps li { counter-increment: ss-step; position: relative; padding-top: 52px; }
.ss-steps li::before {
  content: counter(ss-step); position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-navy-800); color: #fff; font: 600 var(--t-base)/1 var(--f-display);
}
@media (min-width: 700px) {
  .ss-steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 19px; left: 46px; right: -8px; height: 2px; background: var(--c-line);
  }
}
.ss-steps h3 { font-size: var(--t-base); margin: 0 0 4px; }
.ss-steps p { margin: 0; font-size: var(--t-sm); color: var(--c-body); }
.ss-report {
  background: var(--c-navy-800); color: #DCDEF2; border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--sh-2);
}
.ss-report__title { color: #fff; font-size: var(--t-xl); margin: 0 0 var(--s-2); }
.ss-report p { margin: 0 0 var(--s-4); }
.ss-report a:not(.btn) { color: #fff; font-weight: 600; }
.ss-report__btn { background: #fff; color: var(--c-navy-800); border-color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.ss-report__btn:hover { background: #E6E8F7; color: var(--c-navy-800); }
.ss-report__call { font-size: var(--t-sm); }
.ss-report__res { font-size: var(--t-xs); color: #B9BCDD; margin-bottom: 0 !important; padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  .ss-live::after { animation: none; }
  .ss-district { transition: none; }
}
@media print {
  .ss-hero { background: #fff; color: var(--c-navy-800); border-bottom: 3px solid var(--c-navy-800); }
  .ss-hero__verdict, .ss-glance__name { color: var(--c-navy-800); }
  .ss-area, .ss-live { display: none; }
}

/* --- 41. Motion ---------------------------------------------------------- */
/* Scroll reveals. The hidden state exists only under html.motion, which
   js/motion.js adds, and only on elements below the fold at load: with JS off,
   or with reduced motion requested, nothing is ever hidden. */
.motion [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion [data-reveal="in"] { opacity: 1; transform: none; }

/* Homepage hero: the photo drifts very slowly, and the copy arrives in order
   (status, headline, line, buttons). Pure CSS; the end state is the resting
   layout, so a browser that skips animations shows the page as built. */
@keyframes hero-drift { from { transform: scale(1.08) translate3d(-1.5%, 0, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ghost-drift { from { translate: 4% 0; } to { translate: 0 0; } }
.hero--photo .hero__img { animation: hero-drift 18s var(--ease) both; }
.hero--photo .wrap > * { animation: rise-in .7s var(--ease) both; }
.hero--photo .wrap > :nth-child(2) { animation-delay: .08s; }
.hero--photo .wrap > :nth-child(3) { animation-delay: .16s; }
.hero--photo .wrap > :nth-child(4) { animation-delay: .24s; }
.hero__ghost { animation: ghost-drift 2.4s var(--ease) both; }

/* Footer "Check supply status" dot breathes like the live markers elsewhere. */
@keyframes footer-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(27,127,76,.35); } 50% { box-shadow: 0 0 0 6px rgba(27,127,76,0); } }
.footer-cta__dot { animation: footer-dot 2.4s ease-in-out infinite; }

/* Quick-action icons nudge on hover so the tiles feel pressable. */
.qa__icon { transition: transform .2s var(--ease); }
.qa:hover .qa__icon { transform: translateY(-2px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero--photo .hero__img, .hero--photo .wrap > *, .hero__ghost, .footer-cta__dot { animation: none; }
  .qa:hover .qa__icon { transform: none; }
}
@media print {
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- 42. Motion, part two ------------------------------------------------ */
/* Elements marked data-draw get .is-drawn from js/motion.js when they scroll
   into view. The undrawn state exists only under html.motion, so with JS off
   or reduced motion requested, everything shows in its finished state. */

/* "How we restore your supply": the route between steps draws itself, step
   by step, and the last marker turns green for "Supply restored". */
.ss-steps li:last-child::before { background: var(--c-ok); }
.ss-steps li:not(:last-child)::after { background: linear-gradient(90deg, var(--c-navy-800), var(--c-blue-500)); transform-origin: left center; }
@media (max-width: 699px) {
  .ss-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 18px; top: 44px; bottom: calc(-1 * var(--s-4) + 6px); width: 2px;
    background: linear-gradient(180deg, var(--c-navy-800), var(--c-blue-500)); transform-origin: center top;
  }
  .ss-steps li { padding-top: 0; padding-left: 56px; min-height: 52px; }
}
.motion .ss-steps.is-drawn li::before { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.motion .ss-steps.is-drawn li::after { transition: transform .55s var(--ease); }
.motion .ss-steps[data-draw]:not(.is-drawn) li::after { transform: scale(0, 1); }
@media (max-width: 699px) { .motion .ss-steps[data-draw]:not(.is-drawn) li::after { transform: scale(1, 0); } }
.motion .ss-steps[data-draw]:not(.is-drawn) li::before { transform: scale(.6); }
.motion .ss-steps.is-drawn li:nth-child(1)::after  { transition-delay: .35s; }
.motion .ss-steps.is-drawn li:nth-child(2)::before { transition-delay: .9s; }
.motion .ss-steps.is-drawn li:nth-child(2)::after  { transition-delay: 1.05s; }
.motion .ss-steps.is-drawn li:nth-child(3)::before { transition-delay: 1.6s; }
.motion .ss-steps.is-drawn li:nth-child(3)::after  { transition-delay: 1.75s; }
.motion .ss-steps.is-drawn li:nth-child(4)::before { transition-delay: 2.3s; }
.motion .ss-steps.is-drawn li:last-child::before { box-shadow: 0 0 0 6px rgba(27, 127, 76, .18); }

/* Electricity tariff change: how the rise per unit is shared, as a bar that
   fills slowly from left to right. */
.tariff-split { margin: var(--s-6) 0; padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-canvas); }
.tariff-split figcaption { font-family: var(--f-display); font-weight: 600; color: var(--c-navy-800); margin-bottom: var(--s-4); }
.tariff-split__bar { display: flex; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--c-line-2); }
.tariff-split__seg {
  display: flex; align-items: center; padding-inline: var(--s-4);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.tariff-split__seg--you { flex: 1; background: var(--c-elec); color: #3D2400; }
.tariff-split__seg--gov { flex: 2; background: var(--c-navy-700); color: #fff; }
.tariff-split__key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.tariff-split__key li { margin: 0; }
.tariff-split__note { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.motion .tariff-split.is-drawn .tariff-split__bar > * { transition: clip-path 2.4s cubic-bezier(.25, .8, .25, 1); }
.motion .tariff-split[data-draw]:not(.is-drawn) .tariff-split__bar > * { clip-path: inset(0 100% 0 0); }
.motion .tariff-split.is-drawn .tariff-split__seg--gov { transition-delay: .9s; }
.tariff-split__bar > * { clip-path: inset(0 0 0 0); }
@media (max-width: 520px) { .tariff-split__seg { font-size: var(--t-xs); padding-inline: var(--s-3); } }

/* Document rows lift on hover, and the file badge tilts as if being picked up. */
a.doc { transition: border-color .15s var(--ease), background .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
a.doc:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
a.doc .doc__type { transition: transform .2s var(--ease); }
a.doc:hover .doc__type { transform: rotate(-6deg) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  a.doc:hover, a.doc:hover .doc__type { transform: none; }
}

/* --- 43. Supply status flow, v3 ------------------------------------------ */
/* Advice in place, nothing off: a calm blue headline, never the green "all
   normal" and never the amber of a real interruption. */
.ss-hero[data-state="advice"] { --ss-glow: rgba(14, 156, 190, .45); border-bottom-color: var(--c-water); }
.ss-hero[data-state="advice"] .ss-live i, .ss-hero[data-state="advice"] .ss-live::after { background: #5FD3EE; }

/* The next planned work, under the stamp. */
.ss-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: var(--s-3) 0 0;
  font-size: var(--t-sm); color: #D5D8F0;
}
.ss-next strong { color: #fff; }
.ss-next a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.ss-next .ss-icon { color: #F2B046; }
.ss-next[hidden] { display: none; }

/* Public advice on a card (e.g. "please limit water use"), above the message. */
.ss-card__advice {
  margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--c-water-bg); border-left: 4px solid var(--c-water); color: #0A4A5A; font-size: var(--t-sm);
}
.ss-card__advice[hidden] { display: none; }
.ss-card__facts a { color: inherit; }

/* Place search. */
.ss-place { margin: 0 0 var(--s-4); }
.ss-place__input { width: 100%; max-width: 520px; }

/* Works cards: "when" and "where" lines, and long feeder lists. */
.ss-work__meta > p, .ss-work__meta > div { display: flex; align-items: flex-start; gap: 5px; margin: 0; }
.ss-work__meta .ss-icon { flex: none; margin-top: 2px; }
.ss-places { display: inline; }
.ss-places summary {
  display: inline; cursor: pointer; font-weight: 600; color: var(--c-blue-600); margin-left: 4px; list-style: none;
}
.ss-places summary::-webkit-details-marker { display: none; }
.ss-places[open] summary { display: none; }
.ss-places ul { display: inline; margin: 0; padding: 0; list-style: none; }
.ss-places li { display: inline; }
/* Expanded, the rest of the list appears on its own line: "Also: A, B, C". */
.ss-places[open] { display: block; margin-top: 2px; }
.ss-places ul::before { content: "Also: "; font-weight: 600; }
.ss-places li + li::before { content: ", "; }

/* Nine districts: two columns on a phone, not nine full-width rows. */
@media (max-width: 520px) {
  .ss-districts { grid-template-columns: 1fr 1fr; }
  .ss-district { padding-inline: var(--s-3); font-size: var(--t-sm); }
}

/* "Ended": the window has passed but the job has not been confirmed closed. */
.badge--muted { background: var(--c-line-2); color: #4A4E66; }

/* Earlier works: collapsed by default, full width. */
.ss-group--earlier { grid-column: 1 / -1; }
.ss-earlier > summary { list-style: none; cursor: pointer; }
.ss-earlier > summary::-webkit-details-marker { display: none; }
.ss-earlier > summary .ss-group__title::after {
  content: ""; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease);
}
.ss-earlier[open] > summary .ss-group__title::after { transform: rotate(225deg) translateY(-1px); }
.ss-earlier > summary:focus-visible { outline: 3px solid var(--c-blue-500); outline-offset: 4px; border-radius: 6px; }
.ss-group--earlier .ss-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ss-group--earlier .ss-work { background: rgba(255, 255, 255, .7); }
@media (max-width: 400px) {
  .ss-group--recent .ss-list, .ss-group--earlier .ss-list { grid-template-columns: 1fr; }
}

/* --- 44. Renewable energy -------------------------------------------------- */
/* Palette: solar amber, wind brand blue, diesel neutral grey. Colour is never
   the only signal: every bar has a text legend and a data table. */
:root { --re-solar: #E8951A; --re-wind: #4A4FB0; --re-diesel: #C9CBDB; }

/* Generation mix bar (SVG, lib/energy.js). */
.mix-bar { display: block; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: var(--re-diesel); }
.mix-bar__solar { fill: var(--re-solar); }
.mix-bar__wind { fill: var(--re-wind); }
.mix-bar__diesel { fill: var(--re-diesel); }

/* Homepage tile: the whole tile is the link. */
a.status-tile { display: block; text-decoration: none; color: inherit; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
a.status-tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.status-tile--energy { border-left-color: var(--re-solar); }
.status-tile--energy .mix-bar { margin-top: var(--s-3); }
.badge--energy { background: #FDF3E3; color: #7A4A00; }
.status-tile__more { color: var(--c-blue-600); font-weight: 600; white-space: nowrap; }
.status-tile--energy:hover .status-tile__more { text-decoration: underline; }

/* Page hero. */
.re-hero { position: relative; isolation: isolate; color: #fff; background: var(--c-navy-900); overflow: hidden; }
.re-hero__media { position: absolute; inset: 0; z-index: -1; }
.re-hero__media picture { display: block; height: 100%; }
.re-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.re-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(21,23,58,.94) 0%, rgba(21,23,58,.78) 48%, rgba(21,23,58,.35) 100%);
}
.re-hero__grid { display: grid; gap: var(--s-6); align-items: end; padding-block: var(--s-9) var(--s-8); }
@media (min-width: 900px) { .re-hero__grid { grid-template-columns: 1.5fr 1fr; } }
.re-hero__eyebrow { margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F2B046; }
.re-hero__title { color: #fff; margin: 0; max-width: 14ch; font-size: clamp(2.3rem, 4vw + 1rem, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.re-hero__lede { color: #D5D8F0; font-size: var(--t-lg); max-width: 52ch; margin: var(--s-4) 0 0; }
.re-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: 0; }
.re-stat { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.re-stat dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C3C6E6; }
.re-stat dd { margin: var(--s-2) 0 0; display: grid; gap: 2px; }
.re-stat__num { font: 600 clamp(2.2rem, 2vw + 1.6rem, 3rem)/1 var(--f-display); letter-spacing: -0.03em; color: #fff; }
.re-stat__note { font-size: var(--t-xs); color: #C3C6E6; }
.re-stat--target { background: rgba(232,149,26,.16); border-color: rgba(242,176,70,.45); }
.re-stat--target .re-stat__num { color: #FFD08A; }

/* Current generation mix. */
.re-mix { margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.re-mix__row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: var(--s-4); }
.re-mix__val { font-size: var(--t-sm); font-weight: 700; color: var(--c-navy-800); white-space: nowrap; min-width: 9.5em; }
/* The chart scales down as a whole on a phone; scale its text back up. */
@media (max-width: 600px) {
  .re-chart .trend__axis { font-size: 22px; }
  .re-chart .trend__note, .re-chart .trend__target-label { font-size: 23px; }
}
.re-mix__row .mix-bar { height: 34px; border-radius: var(--r-md); }
.re-mix__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-navy-800); }
.re-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--c-body); }
.re-legend__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.re-legend__item::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--re-diesel); }
.re-legend__item--solar::before { background: var(--re-solar); }
.re-legend__item--wind::before { background: var(--re-wind); }
.re-legend__item--target::before { height: 0; border-top: 2px dashed var(--c-ok); border-radius: 0; }
.re-legend__src { flex-basis: 100%; font-size: var(--t-xs); color: var(--c-muted); }
@media (max-width: 560px) { .re-mix__row { grid-template-columns: 1fr; gap: var(--s-1); } }

.re-fleet { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.re-source { position: relative; padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.re-source::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--re-diesel); }
.re-source--solar::before { background: var(--re-solar); }
.re-source--wind::before { background: var(--re-wind); }
.re-source__share { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }
.re-source__share span { display: block; font: 600 2.4rem/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--c-navy-800); }
.re-source__name { margin: var(--s-3) 0 2px; font-size: var(--t-xl); }
.re-source__place { margin: 0 0 var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--c-blue-600); }
.re-source__text { margin: 0; font-size: var(--t-sm); }
.re-source__kwh { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.re-fuel { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-canvas); font-size: var(--t-sm); }

/* Twelve-year trend chart (SVG, lib/energy.js). */
.re-trend-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .re-trend-grid { grid-template-columns: 1fr 1.6fr; } }
.re-chart { margin: 0; padding: var(--s-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); }
.trend { display: block; width: 100%; height: auto; font-family: var(--f-sans); }
.trend__grid { stroke: var(--c-line-2); stroke-width: 1; }
.trend__axis { fill: var(--c-muted); font-size: 12px; }
.trend__target { stroke: var(--c-ok); stroke-width: 2; stroke-dasharray: 6 5; }
.trend__target-label { fill: var(--c-ok); font-size: 12.5px; font-weight: 700; }
.trend__solar { fill: var(--re-solar); opacity: .9; }
.trend__wind { fill: var(--re-wind); opacity: .85; }
.trend__line { fill: none; stroke: var(--c-navy-800); stroke-width: 2; }
.trend__dot { fill: #fff; stroke: var(--c-navy-800); stroke-width: 2.5; }
.trend__note { fill: var(--c-navy-800); font-size: 13px; font-weight: 700; }
.re-chart .re-legend { margin-top: var(--s-3); }
.re-table { margin-top: var(--s-4); font-size: var(--t-sm); }
.re-table summary { cursor: pointer; font-weight: 600; color: var(--c-blue-600); }
.re-table .table-wrap { margin-top: var(--s-3); }
/* The plot sweeps in from the left when it scrolls into view (motion.js). */
.trend__plot { clip-path: inset(0 0 0 0); }
.motion .re-chart[data-draw]:not(.is-drawn) .trend__plot { clip-path: inset(0 100% 0 0); }
.motion .re-chart.is-drawn .trend__plot { transition: clip-path 1.6s cubic-bezier(.25, .8, .25, 1); }

/* The plan. */
.re-phase {
  display: grid; gap: var(--s-6); padding: var(--s-6); border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-navy-800), #2A2D6B); color: #D5D8F0;
}
@media (min-width: 900px) { .re-phase { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.re-phase__tag { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F2B046; }
.re-phase__title { color: #fff; font-size: var(--t-xl); margin: 0 0 var(--s-3); }
.re-phase__intro p:last-child { margin-bottom: 0; }
.re-phase__facts { display: grid; gap: var(--s-3); margin: 0; }
.re-phase__facts > div { padding: var(--s-4); border-radius: var(--r-md); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.re-phase__facts dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C3C6E6; }
.re-phase__facts dd { margin: 4px 0 2px; color: #fff; font-weight: 600; }
.re-phase__facts dd span { font: 600 1.9rem/1 var(--f-display); letter-spacing: -0.02em; margin-right: 4px; }
.re-phase__facts dd.re-phase__note { margin: 0; font-size: var(--t-xs); font-weight: 400; color: #C3C6E6; }

.re-timeline { list-style: none; margin: var(--s-7) 0 var(--s-4); padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .re-timeline { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-5); row-gap: var(--s-6); } }
.re-timeline__item { position: relative; padding: 0 0 0 var(--s-6); }
.re-timeline__item::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-ok); box-shadow: 0 0 0 4px var(--c-ok-bg);
}
.re-timeline__item--next::before { background: #fff; border: 3px solid var(--re-solar); box-shadow: 0 0 0 4px #FDF3E3; }
.re-timeline__date { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue-600); }
.re-timeline__flag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FDF3E3; color: #7A4A00; letter-spacing: .04em; }
.re-timeline__title { margin: 2px 0 4px; font-size: var(--t-base); }
.re-timeline__text { margin: 0; font-size: var(--t-sm); color: var(--c-body); }

/* Get involved. */
.re-act { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.re-card { padding: var(--s-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line); }
.re-card h3 { font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.re-card__eyebrow { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.re-card--live { border-color: #F2C27A; box-shadow: 0 0 0 4px #FDF3E3; }
.re-card--live .re-card__eyebrow { color: #7A4A00; }
.re-docs { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.re-docs span { color: var(--c-muted); font-size: var(--t-xs); }

@media (prefers-reduced-motion: reduce) {
  a.status-tile:hover { transform: none; }
}
@media print {
  .re-hero { color: var(--c-navy-800); background: #fff; }
  .re-hero__media { display: none; }
  .re-hero__title, .re-stat__num { color: var(--c-navy-800); }
}

/* Services overview: link to the renewable energy page. */
.re-banner {
  display: grid; gap: var(--s-3) var(--s-5); align-items: center; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg); background: var(--c-navy-800); color: #D5D8F0; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (min-width: 860px) { .re-banner { grid-template-columns: 1.6fr 1fr auto; } }
.re-banner:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: #D5D8F0; }
.re-banner__eyebrow { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F2B046; }
.re-banner__title { display: block; margin-top: 4px; font: 700 var(--t-lg)/1.3 var(--f-sans); color: #fff; }
.re-banner__bar .mix-bar { height: 18px; }
.re-banner__more { font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .re-banner:hover { transform: none; } }

/* --- 20. Legibility pass (v2.1) ------------------------------------------ */
/* Alignment: body copy is left-aligned with a ragged right edge, never
   justified. Justified text opens uneven gaps between words ("rivers"),
   worst on phones and in narrow cards, and WCAG 1.4.8 advises against it.
   A consistent left edge plus a capped line length is what makes text easy
   to scan. */
p, li, dd, td, th, figcaption, blockquote { text-align: start; }
.center p, .center .lede { text-align: center; }

/* Line length: about 60–75 characters is the comfortable range. These blocks
   sat in full-width containers and ran to 100–150 characters a line. */
.acc__body > p, .acc__body > ul, .acc__body > ol,
.card--link > p, .tariff-pending p, .constrained, .re-fuel, .muted-note { max-width: 72ch; }
.center .muted-note { margin-inline: auto; }

/* Long email addresses and references must wrap on a phone rather than push
   the page sideways. */
p, li, dd, td, .doc__title { overflow-wrap: break-word; }

/* Figures line up in columns and do not jiggle as they change. */
table.data td, .num, a[href^="tel:"], .status-stamp, .ss-work__meta { font-variant-numeric: tabular-nums; }

/* Navigation labels stay on one line ("Supply status" used to break in two
   at tablet widths). */
.nav__link { white-space: nowrap; }

::selection { background: var(--c-blue-050); color: var(--c-navy-800); }