/* ==========================================================================
   HSUD — design system
   Holly Springs Utility Department · Central Service Association

   Colours are taken from the existing site and logo, measured, not guessed:
     #404299  the header/date band and body background on the old site
     #177135  the old footer band
     the indigo -> green -> red stripe under the banner is the single
     strongest identity cue HSUD has, so it survives the rebuild as a
     gradient rule that scales to any width.

   Contrast was checked against the real surfaces, both modes. Every
   foreground token below clears 4.5:1 on its intended background.

   Order of the file:
     1  tokens          10  buttons
     2  reset + base    11  hero slider
     3  typography      12  cards + sections
     4  focus           13  tables
     5  layout          14  photo strip + lightbox
     6  announcement    15  footer
     7  header          16  back to top
     8  navigation      17  content (Pages editor output)
     9  mobile panel    18  motion + print
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --hs-indigo:        #404299;
  --hs-indigo-deep:   #24265E;
  --hs-indigo-ink:    #181854;
  --hs-indigo-night:  #0E1030;
  --hs-green:         #177135;   /* accent-dark — safe for small text on white */
  --hs-green-bright:  #52A171;   /* accent — for dark surfaces only            */
  --hs-red:           #850003;   /* accent-dark red                            */
  --hs-red-bright:    #FF5E5D;   /* dark surfaces only                         */

  /* Surfaces ------------------------------------------------------------- */
  --hs-bg:            #FFFFFF;
  --hs-bg-alt:        #F3F5FC;
  --hs-surface:       #FFFFFF;
  --hs-surface-2:     #F7F8FD;
  --hs-line:          #E2E6F4;
  --hs-line-strong:   #C9CFE8;

  /* Ink — never mid-grey on white --------------------------------------- */
  --hs-ink:           #1A1C33;   /* 15.8:1 on white */
  --hs-ink-2:         #3A3D5C;   /* 10.1:1 on white */
  --hs-ink-3:         #5A5D7A;   /*  6.4:1 on white */
  --hs-ink-invert:    #FFFFFF;

  /* Semantic ------------------------------------------------------------- */
  --hs-accent:        var(--hs-green);
  --hs-accent-hover:  var(--hs-indigo);
  --hs-link:          var(--hs-indigo);
  --hs-link-hover:    var(--hs-green);

  /* The HSUD logo is a full-colour mark on an opaque white plate, so the main
     header bar is white and the logo drops straight in at full strength. The
     indigo identity is carried by the utility strip above it, the signature
     stripe below it, and the hero. */
  --hs-header-bg:     #FFFFFF;
  --hs-header-ink:    var(--hs-ink);
  --hs-utility-bg:    var(--hs-indigo-ink);
  --hs-footer-bg:     var(--hs-indigo-night);
  --hs-footer-ink:    #D7DAF2;
  --hs-footer-head:   var(--hs-green-bright);

  /* Glass ---------------------------------------------------------------- */
  --hs-glass-bg:      rgba(255, 255, 255, 0.72);
  --hs-glass-line:    rgba(64, 66, 153, 0.14);
  --hs-glass-blur:    14px;

  /* Elevation ------------------------------------------------------------ */
  --hs-shadow-1:      0 1px 2px rgba(24, 24, 84, 0.06), 0 2px 8px rgba(24, 24, 84, 0.06);
  --hs-shadow-2:      0 2px 6px rgba(24, 24, 84, 0.08), 0 12px 28px rgba(24, 24, 84, 0.10);
  --hs-shadow-3:      0 6px 16px rgba(24, 24, 84, 0.12), 0 24px 48px rgba(24, 24, 84, 0.14);

  /* Type ----------------------------------------------------------------- */
  --hs-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --hs-font-head: var(--hs-font-body);
  --hs-font-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
                  "Roboto Mono", Menlo, Consolas, monospace;

  /* Geometry ------------------------------------------------------------- */
  --hs-container:   1200px;
  --hs-container-n: 860px;        /* narrow measure for long-form reading */
  --hs-gutter:      clamp(1rem, 4vw, 2.5rem);
  --hs-radius:      14px;
  --hs-radius-sm:   9px;
  --hs-radius-lg:   22px;
  --hs-section:     clamp(3rem, 7vw, 5.5rem);

  /* Motion --------------------------------------------------------------- */
  --hs-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --hs-fast:  140ms;
  --hs-slow:  420ms;

  color-scheme: light dark;
}

/* Dark mode — system preference, unless the visitor explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hs-bg:           #0E1030;
    --hs-bg-alt:       #141742;
    --hs-surface:      #171A3E;
    --hs-surface-2:    #1D2150;
    --hs-line:         rgba(255, 255, 255, 0.12);
    --hs-line-strong:  rgba(255, 255, 255, 0.22);

    --hs-ink:          #E8EAF6;   /* 15.4:1 on #0E1030 */
    --hs-ink-2:        #BFC3E4;   /* 10.7:1 */
    --hs-ink-3:        #9AA0CC;   /*  7.3:1 */

    --hs-accent:       #6FD39A;   /* 10.1:1 */
    --hs-accent-hover: #9EA2E8;
    --hs-link:         #9EA2E8;   /*  7.7:1 */
    --hs-link-hover:   #6FD39A;

    --hs-header-bg:    #141742;
    --hs-utility-bg:   #0A0C26;
    --hs-footer-bg:    #0A0C26;
    --hs-footer-ink:   #C4C8EA;
    --hs-footer-head:  #6FD39A;

    --hs-glass-bg:     rgba(23, 26, 62, 0.66);
    --hs-glass-line:   rgba(158, 162, 232, 0.20);

    --hs-shadow-1:     0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --hs-shadow-2:     0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
    --hs-shadow-3:     0 6px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.45);
  }
}

/* Dark mode — explicitly chosen. Same values, no media query. */
:root[data-theme="dark"] {
  --hs-bg:           #0E1030;
  --hs-bg-alt:       #141742;
  --hs-surface:      #171A3E;
  --hs-surface-2:    #1D2150;
  --hs-line:         rgba(255, 255, 255, 0.12);
  --hs-line-strong:  rgba(255, 255, 255, 0.22);

  --hs-ink:          #E8EAF6;
  --hs-ink-2:        #BFC3E4;
  --hs-ink-3:        #9AA0CC;

  --hs-accent:       #6FD39A;
  --hs-accent-hover: #9EA2E8;
  --hs-link:         #9EA2E8;
  --hs-link-hover:   #6FD39A;

  --hs-header-bg:    #141742;
  --hs-utility-bg:   #0A0C26;
  --hs-footer-bg:    #0A0C26;
  --hs-footer-ink:   #C4C8EA;
  --hs-footer-head:  #6FD39A;

  --hs-glass-bg:     rgba(23, 26, 62, 0.66);
  --hs-glass-line:   rgba(158, 162, 232, 0.20);

  --hs-shadow-1:     0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --hs-shadow-2:     0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  --hs-shadow-3:     0 6px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   2 · RESET + BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.hsud {
  margin: 0;
  background: var(--hs-bg);
  color: var(--hs-ink);
  font-family: var(--hs-font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-weight: 400;              /* never 300 for body copy */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* belt: no horizontal page scroll, ever */
}

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

hr {
  border: 0;
  height: 1px;
  background: var(--hs-line);
  margin: 2.5rem 0;
}

::selection { background: var(--hs-indigo); color: #fff; }


/* ==========================================================================
   3 · TYPOGRAPHY
   ========================================================================== */

body.hsud h1, body.hsud h2, body.hsud h3,
body.hsud h4, body.hsud h5, body.hsud h6 {
  font-family: var(--hs-font-head);
  color: var(--hs-ink);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.6em;
  font-weight: 700;
}

body.hsud h1 { font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem); letter-spacing: -0.025em; }
body.hsud h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); }
body.hsud h3 { font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.65rem); }
body.hsud h4 { font-size: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem); }

body.hsud p,
body.hsud li {
  text-wrap: pretty;
}

body.hsud p { margin: 0 0 1.15em; }

body.hsud a {
  color: var(--hs-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--hs-fast) var(--hs-ease);
}

body.hsud a:hover { color: var(--hs-link-hover); }

/* ---------------------------------------------------------------------------
   SPECIFICITY NOTE — read before adding a component that sets its own colour.

   The base rules in this section are scoped `body.hsud …` so that they beat
   GeneratePress's own output, which arrives at element-level specificity.
   That scope has a cost: `body.hsud a` is (0,1,1), and (0,1,1) beats any
   plain single-class rule like `.hs-btn--accent { color:#fff }` (0,1,0).

   Left alone, that paints every white button and every white nav link in the
   indigo link colour. So any component that owns its own colour is written
   `.hsud .hs-thing` (0,2,0) rather than `.hs-thing`. Same for headings on a
   dark surface, because `body.hsud h2` is (0,1,2).

   If you add a component and its colour "mysteriously doesn't apply", this
   is why. Add the `.hsud ` prefix.
   ------------------------------------------------------------------------- */

body.hsud strong, body.hsud b { font-weight: 650; }

/* Eyebrow / kicker — small uppercase label above a heading, in the accent. */
.hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent);
  margin: 0 0 0.75rem;
}

.hs-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

.hs-lead {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  color: var(--hs-ink-2);
  max-width: 60ch;
}

/* Numbers in rate tables line up when they are tabular. */
.hs-num, .hs-table td.hs-num { font-variant-numeric: tabular-nums; }

.hs-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4 · FOCUS
   Mouse users see nothing new; keyboard users get an unmissable ring.
   Never outline:none without a replacement.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On dark bands the green ring is not bright enough against the background —
   go white there. The main header bar is light, so it keeps the green ring. */
.hs-utility :where(a, button):focus-visible,
.hs-foot :where(a, button):focus-visible,
.hs-hero :where(a, button):focus-visible,
.hs-emergency :where(a, button):focus-visible,
.hs-lightbox :where(a, button):focus-visible {
  outline-color: #FFFFFF;
}

/* Skip link (printed by the parent theme). */
body.hsud .skip-link,
body.hsud a.screen-reader-text {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  background: var(--hs-indigo);
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--hs-radius-sm) var(--hs-radius-sm);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--hs-shadow-2);
  transition: transform var(--hs-fast) var(--hs-ease);
  width: auto; height: auto; clip: auto; clip-path: none;
}

body.hsud .skip-link:focus,
body.hsud a.screen-reader-text:focus {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   5 · LAYOUT
   GeneratePress's own containers are neutralised so alignfull sections can
   run edge to edge. Width is re-imposed by .hs-wrap.
   ========================================================================== */

body.hsud .site.grid-container,
body.hsud #page,
body.hsud .site-content,
body.hsud .content-area,
body.hsud #primary {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
}

body.hsud .inside-article { padding: 0; }
body.hsud .entry-header  { display: none; } /* our page hero supplies the h1 */

.hs-wrap {
  width: 100%;
  max-width: var(--hs-container);
  margin-inline: auto;
  padding-inline: var(--hs-gutter);
}

.hs-wrap--narrow { max-width: var(--hs-container-n); }

.hs-section { padding-block: var(--hs-section); }
.hs-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.hs-section--alt { background: var(--hs-bg-alt); }

/* A gentle two-tone ombre. Two stops, never a rainbow. */
.hs-section--ombre {
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(64, 66, 153, 0.10), transparent 60%),
    linear-gradient(170deg, var(--hs-bg-alt) 0%, var(--hs-bg) 72%);
}

:root[data-theme="dark"] .hs-section--ombre,
.hs-section--ombre:where(:root:not([data-theme="light"]) *) {
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(111, 211, 154, 0.08), transparent 60%),
    linear-gradient(170deg, var(--hs-bg-alt) 0%, var(--hs-bg) 72%);
}

.hs-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.hs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.hs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }


/* ==========================================================================
   6 · ANNOUNCEMENT BAR
   ========================================================================== */

.hs-announce {
  background: var(--hs-indigo);
  color: #fff;
  font-size: 0.95rem;
  position: relative;
  z-index: 60;
}

.hs-announce--good   { background: var(--hs-green); }
.hs-announce--urgent { background: var(--hs-red); }

.hs-announce__inner {
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: 0.7rem var(--hs-gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hs-announce__icon { display: flex; flex: none; }
.hs-announce__icon .hs-icon { width: 20px; height: 20px; }

.hs-announce__text { margin: 0; flex: 1 1 auto; }

.hsud .hs-announce__link {
  color: #fff;
  font-weight: 650;
  margin-left: 0.4rem;
  text-underline-offset: 0.2em;
}

.hsud .hs-announce__link:hover { color: #fff; text-decoration-thickness: 2px; }

.hs-announce__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;      /* 44px tap target */
  margin: -0.5rem -0.5rem -0.5rem 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--hs-fast) var(--hs-ease);
}

.hs-announce__close:hover { background: rgba(255, 255, 255, 0.18); }
.hs-announce__close .hs-icon { width: 18px; height: 18px; }

.hs-announce[hidden] { display: none; }


/* ==========================================================================
   7 · HEADER  (sticky, house rule)
   ========================================================================== */

.hs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hs-header-bg);
  color: var(--hs-header-ink);
  transition: box-shadow var(--hs-slow) var(--hs-ease);
}

.hs-header.is-stuck { box-shadow: var(--hs-shadow-2); }

/* -- utility strip -------------------------------------------------------- */

.hs-utility {
  background: var(--hs-utility-bg);
  color: #D9DBF5;
  font-size: 0.85rem;
}

.hs-utility__inner {
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: 0.4rem var(--hs-gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hs-utility p { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.hs-utility .hs-icon { width: 15px; height: 15px; opacity: 0.85; flex: none; }

.hs-utility__label { color: #A9ADE0; }

.hs-utility__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.hsud .hs-utility a { color: #fff; text-decoration: none; font-weight: 600; }

.hsud .hs-utility a:hover {
  color: var(--hs-green-bright);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

@media (max-width: 860px) {
  /* Needs the extra class: `.hs-utility p` sets display:inline-flex at (0,1,1)
     and would otherwise beat a bare `.hs-utility__hours` rule at (0,1,0). */
  .hs-utility .hs-utility__hours { display: none; }
  .hs-utility__inner { justify-content: space-between; gap: 0.75rem; }
}

/* -- theme toggle --------------------------------------------------------- */

.hs-themetoggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background var(--hs-fast) var(--hs-ease), transform var(--hs-fast) var(--hs-ease);
}

.hs-themetoggle:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.hs-themetoggle .hs-icon { width: 17px; height: 17px; }
.hs-themetoggle__moon { display: none; }

:root[data-theme="dark"] .hs-themetoggle__moon { display: block; }
:root[data-theme="dark"] .hs-themetoggle__sun  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-themetoggle__moon { display: block; }
  :root:not([data-theme="light"]) .hs-themetoggle__sun  { display: none; }
}

/* -- main bar ------------------------------------------------------------- */

.hs-header__main { background: var(--hs-header-bg); }

.hs-header__inner {
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: 0.65rem var(--hs-gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* -- brand: prominent and legible, never tiny ----------------------------- */

.hs-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  border-radius: var(--hs-radius-sm);
}

.hs-brand__logo {
  height: clamp(54px, 4.6vw, 64px);
  width: auto;
  max-width: min(58vw, 280px);
  object-fit: contain;
}

.hs-brand__fallback { display: flex; flex-direction: column; line-height: 1.05; }

.hs-brand__mark {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--hs-red);
}

.hs-brand__name {
  font-size: clamp(0.62rem, 0.5rem + 0.3vw, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-green);
  font-weight: 600;
}

/* In dark mode and in the footer the mark sits on a dark surface. */
:root[data-theme="dark"] .hs-brand__mark { color: var(--hs-red-bright); }
:root[data-theme="dark"] .hs-brand__name { color: var(--hs-green-bright); }
.hs-foot .hs-brand__mark { color: var(--hs-red-bright); }
.hs-foot .hs-brand__name { color: var(--hs-green-bright); }

/* The logo is a full-colour mark on white. On a dark surface it gets a white
   plate so it stays legible instead of becoming a bright rectangle. */
.hs-foot .hs-brand__logo,
:root[data-theme="dark"] .hs-brand__logo {
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
}

/* -- header actions ------------------------------------------------------- */

.hs-header__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}


/* ==========================================================================
   8 · NAVIGATION
   The old site's Rates menu was href="javascript:;" — unreachable by keyboard.
   Here the link goes to the page and a real <button aria-expanded> opens the
   submenu, so both mouse and keyboard work.
   ========================================================================== */

.hs-nav { flex: 1 1 auto; min-width: 0; }

.hs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.hs-nav__item { position: relative; display: flex; align-items: center; }

.hsud .hs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  color: var(--hs-ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--hs-radius-sm);
  white-space: nowrap;
  transition: color var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease);
}

/* House rule: header links show the accent on hover. Here that is an accent
   underline plus a readable ink change — colour is never the only signal. */
.hs-nav__link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--hs-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hs-slow) var(--hs-ease);
}

.hsud .hs-nav__link:hover { color: var(--hs-green); background: var(--hs-bg-alt); }
.hsud .hs-nav__link:hover::after,
.hsud .hs-nav__item.is-current > .hs-nav__link::after { transform: scaleX(1); }

.hsud .hs-nav__item.is-current > .hs-nav__link { color: var(--hs-indigo); }

:root[data-theme="dark"] .hs-nav__link:hover { color: var(--hs-accent); }
:root[data-theme="dark"] .hs-nav__item.is-current > .hs-nav__link { color: var(--hs-link); }

.hs-nav__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-left: -0.45rem;
  background: none;
  border: 0;
  color: var(--hs-ink-3);
  cursor: pointer;
  border-radius: 50%;
  transition: transform var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease);
}

/* The chevron reads better small, but a 30px control is too small to hit.
   This gives it a full 44x44 hit area without widening the navigation bar. */
.hs-nav__toggle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.hs-nav__toggle .hs-icon { width: 15px; height: 15px; transform: rotate(90deg); }
.hs-nav__toggle:hover { background: var(--hs-bg-alt); color: var(--hs-green); }
.hs-nav__toggle[aria-expanded="true"] .hs-icon { transform: rotate(-90deg); }

/* -- dropdown ------------------------------------------------------------- */

.hs-submenu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  min-width: 15rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow-3);

  /* Closed submenus are out of the tab order AND out of the a11y tree.
     display:none does both; JS also sets inert where supported. */
  display: none;
}

.hs-nav__item--parent.is-open > .hs-submenu { display: block; }

.hs-submenu .hs-nav__item { display: block; }

.hsud .hs-submenu .hs-nav__link {
  display: flex;
  width: 100%;
  padding: 0.6rem 0.75rem;
  color: var(--hs-ink);
  border-radius: var(--hs-radius-sm);
  white-space: normal;
}

.hs-submenu .hs-nav__link::after { display: none; }

.hsud .hs-submenu .hs-nav__link:hover {
  background: var(--hs-bg-alt);
  color: var(--hs-green);
}

.hsud .hs-submenu .hs-nav__item.is-current > .hs-nav__link {
  color: var(--hs-green);
  background: var(--hs-bg-alt);
}

/* -- burger --------------------------------------------------------------- */

.hs-burger {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-sm);
  color: var(--hs-indigo);
  cursor: pointer;
  transition: border-color var(--hs-fast) var(--hs-ease),
              color var(--hs-fast) var(--hs-ease);
}

.hs-burger:hover { border-color: var(--hs-accent); color: var(--hs-green); }
:root[data-theme="dark"] .hs-burger { color: var(--hs-link); }

.hs-burger .hs-icon { width: 22px; height: 22px; }
.hs-burger__close { display: none; }
.hs-burger[aria-expanded="true"] .hs-burger__close { display: block; }
.hs-burger[aria-expanded="true"] .hs-burger__open  { display: none; }

@media (max-width: 1080px) {
  .hs-nav { display: none; }
  .hs-burger { display: grid; }
  .hs-header__actions { gap: 0.4rem; }
}

/* Below this width the header needs its space for the logo and the burger.
   The Outage Map link is still one tap away inside the mobile panel. */
@media (max-width: 620px) {
  .hs-header__outage { display: none; }
}


/* ==========================================================================
   9 · MOBILE PANEL
   ========================================================================== */

.hs-mobile { position: fixed; inset: 0; z-index: 90; }
.hs-mobile[hidden] { display: none; }

.hs-mobile__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 38, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--hs-slow) var(--hs-ease);
}

.hs-mobile.is-open .hs-mobile__scrim { opacity: 1; }

.hs-mobile__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(92vw, 25rem);
  background: var(--hs-bg);
  box-shadow: var(--hs-shadow-3);
  padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--hs-slow) var(--hs-ease);
  padding-top: 5.25rem;
}

.hs-mobile.is-open .hs-mobile__panel { transform: translateX(0); }

.hs-nav__list--mobile { flex-direction: column; align-items: stretch; gap: 0.15rem; }

.hs-nav__list--mobile .hs-nav__item {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hs-line);
}

.hsud .hs-nav__list--mobile .hs-nav__link {
  flex: 1 1 auto;
  color: var(--hs-ink);
  font-size: 1.05rem;
  padding: 0.95rem 0.6rem;
  min-height: 44px;
}

.hsud .hs-nav__list--mobile .hs-nav__link:hover { background: var(--hs-bg-alt); color: var(--hs-green); }
.hs-nav__list--mobile .hs-nav__link::after { display: none; }

.hs-nav__list--mobile .hs-nav__toggle {
  width: 44px; height: 44px;
  margin: 0;
  color: var(--hs-ink-2);
}

.hs-nav__list--mobile .hs-submenu {
  position: static;
  width: 100%;
  order: 3;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: var(--hs-bg-alt);
  margin-bottom: 0.4rem;
}

.hs-mobile__actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.hs-mobile__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-weight: 650;
  color: var(--hs-ink-2);
}

.hs-mobile__phone .hs-icon { width: 18px; height: 18px; color: var(--hs-accent); }

body.hs-noscroll { overflow: hidden; }


/* ==========================================================================
   10 · BUTTONS  — all have hover states and shadows; header ones stay compact
   ========================================================================== */

.hsud .hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;                    /* tap target */
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hs-shadow-1);
  transition: transform var(--hs-fast) var(--hs-ease),
              box-shadow var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease),
              color var(--hs-fast) var(--hs-ease),
              border-color var(--hs-fast) var(--hs-ease);
}

.hs-btn .hs-icon { width: 18px; height: 18px; flex: none; }
.hs-btn:hover { transform: translateY(-2px); box-shadow: var(--hs-shadow-2); }
.hs-btn:active { transform: translateY(0); box-shadow: var(--hs-shadow-1); }

.hsud .hs-btn--accent {
  background: linear-gradient(135deg, var(--hs-green) 0%, #1F8C45 100%);
  color: #fff;
}
.hsud .hs-btn--accent:hover { background: linear-gradient(135deg, #1F8C45 0%, var(--hs-green) 100%); color: #fff; }

.hsud .hs-btn--primary {
  background: linear-gradient(135deg, var(--hs-indigo) 0%, var(--hs-indigo-deep) 100%);
  color: #fff;
}
.hsud .hs-btn--primary:hover { background: linear-gradient(135deg, var(--hs-indigo-deep) 0%, var(--hs-indigo) 100%); color: #fff; }

.hsud .hs-btn--danger { background: var(--hs-red); color: #fff; }
.hsud .hs-btn--danger:hover { background: #A1090D; color: #fff; }

.hsud .hs-btn--outline {
  background: var(--hs-surface);
  color: var(--hs-indigo);
  border-color: var(--hs-line-strong);
}
.hsud .hs-btn--outline:hover { border-color: var(--hs-green); color: var(--hs-green); }

/* Ghost is for dark surfaces only — the hero and the emergency band. */
.hsud .hs-btn--ghost {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.hsud .hs-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: var(--hs-shadow-1); }

.hsud .hs-btn--sm { min-height: 40px; padding: 0.5rem 0.95rem; font-size: 0.9rem; }
.hsud .hs-btn--lg { min-height: 52px; padding: 0.9rem 1.9rem; font-size: 1.05rem; }
.hsud .hs-btn--block { width: 100%; }

/* External-link and PDF affordances */
.hs-ext {
  width: 0.72em; height: 0.72em;
  margin-left: 0.3em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--hs-ext-mask) center / contain no-repeat;
          mask: var(--hs-ext-mask) center / contain no-repeat;
  --hs-ext-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3ZM5 5h5v2H6v11h11v-4h2v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: baseline;
  opacity: 0.7;
}

.hs-btn .hs-ext { display: none; }  /* buttons say it in the accessible name */

.hs-pdf__tag {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.05em 0.4em;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: var(--hs-red);
  color: #fff;
  vertical-align: 0.12em;
}


/* ==========================================================================
   11 · SIGNATURE STRIPE
   The indigo -> green -> red band that sits under the old banner. Expressed
   as a relationship, not fixed pixels, so it holds at any width.
   ========================================================================== */

.hs-stripe {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--hs-indigo-ink) 0%,
    var(--hs-indigo)     22%,
    var(--hs-green)      44%,
    var(--hs-green-bright) 56%,
    var(--hs-red)        78%,
    var(--hs-indigo-ink) 100%
  );
}

.hs-stripe--footer { height: 5px; }


/* ==========================================================================
   12 · HERO SLIDER
   Supports any number of slides, image or video. Transitions are slow and
   gentle. Controls sit in their own row BELOW the copy on mobile and inset
   from the edges on desktop, so they never overlap or sit behind slide text.
   ========================================================================== */

.hs-hero {
  position: relative;
  isolation: isolate;
  background: var(--hs-indigo-night);
  color: #fff;
  overflow: hidden;
}

.hs-hero__track { display: grid; }

.hs-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(26rem, 58vh, 40rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1100ms var(--hs-ease), visibility 0s linear 1100ms;
}

.hs-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1100ms var(--hs-ease), visibility 0s;
  z-index: 2;
}

.hs-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;            /* figure has a UA margin; inset:0 does not clear it */
}

.hs-hero__media img,
.hs-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A very slow drift keeps a still photograph from feeling dead. */
  animation: hs-kenburns 22s var(--hs-ease) both;
}

@keyframes hs-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Scrim: guarantees the copy clears 4.5:1 over any photograph. */
.hs-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14, 16, 48, 0.94) 0%, rgba(14, 16, 48, 0.78) 42%, rgba(14, 16, 48, 0.38) 100%),
    linear-gradient(0deg, rgba(14, 16, 48, 0.55) 0%, transparent 45%);
}

.hs-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--hs-gutter) clamp(5.5rem, 9vw, 7rem);
  width: 100%;
}

.hs-hero__copy { max-width: 46rem; }

.hs-hero .hs-eyebrow { color: var(--hs-green-bright); }

.hsud .hs-hero__title {
  color: #fff;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem);
  margin-bottom: 0.5rem;
}

.hs-hero__text {
  color: #DDE0F7;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  max-width: 40rem;
}

.hs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* -- controls: their own band, never over the copy ------------------------ */

.hs-hero__controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: 0 var(--hs-gutter) clamp(1rem, 2.5vw, 1.6rem);
}

.hs-hero__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--hs-fast) var(--hs-ease);
}

.hs-hero__btn:hover { background: rgba(255, 255, 255, 0.28); }
.hs-hero__btn .hs-icon { width: 18px; height: 18px; }
.hs-hero__prev .hs-icon { transform: rotate(180deg); }

/* Play/pause swaps its glyph with its state. The control is always visible —
   a pause control that only appears on hover is not a pause control. */
.hs-hero__play .hs-hero__playicon  { display: none; }
.hs-hero__play.is-paused .hs-hero__playicon  { display: block; }
.hs-hero__play.is-paused .hs-hero__pauseicon { display: none; }

.hs-hero__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.hs-hero__dot {
  width: 44px; height: 44px;       /* full tap target ... */
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

.hs-hero__dot::before {            /* ... with a small visual dot inside it */
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background var(--hs-fast) var(--hs-ease),
              transform var(--hs-fast) var(--hs-ease);
}

.hs-hero__dot:hover::before { background: rgba(255, 255, 255, 0.8); }

.hs-hero__dot[aria-current="true"]::before {
  background: var(--hs-green-bright);
  transform: scale(1.5);
}

/* Typographic slides — no photograph, just a two-tone ombre. Useful when
   there is no photo worth showing, which is better than showing a bad one. */
.hs-hero__slide--plain {
  background:
    radial-gradient(900px 500px at 88% 8%, rgba(82, 161, 113, 0.22), transparent 62%),
    linear-gradient(135deg, var(--hs-indigo-ink) 0%, var(--hs-indigo) 58%, var(--hs-indigo-night) 100%);
}

.hs-hero__slide--alt {
  background:
    radial-gradient(900px 500px at 10% 92%, rgba(255, 94, 93, 0.20), transparent 62%),
    linear-gradient(135deg, var(--hs-indigo-night) 0%, var(--hs-indigo-deep) 55%, var(--hs-indigo-ink) 100%);
}

/* Single slide: no controls to show. */
.hs-hero[data-count="1"] .hs-hero__controls { display: none; }
.hs-hero[data-count="1"] .hs-hero__inner { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* Before JS runs, only the first slide should be visible. Without this the
   slides stack on top of each other for one frame. */
.hs-hero:not([data-count]) .hs-hero__slide:not(:first-child) { opacity: 0; }
.hs-hero:not([data-count]) .hs-hero__slide:first-child { opacity: 1; visibility: visible; }

@media (max-width: 720px) {
  .hs-hero__slide { min-height: clamp(24rem, 72vh, 34rem); }
  .hs-hero__inner { padding-bottom: 6rem; }
  .hs-hero__actions .hs-btn { flex: 1 1 12rem; }
}


/* ==========================================================================
   13 · CARDS + SECTIONS — varied, not monotonous
   ========================================================================== */

.hs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.6vw, 1.85rem);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow-1);
  transition: transform var(--hs-slow) var(--hs-ease),
              box-shadow var(--hs-slow) var(--hs-ease),
              border-color var(--hs-slow) var(--hs-ease);
}

.hs-card h3 { margin-bottom: 0.25rem; }
.hs-card p  { color: var(--hs-ink-2); margin-bottom: 0; }

/* Glass variant — for use over the ombre sections and photographs. */
.hs-card--glass {
  background: var(--hs-glass-bg);
  border-color: var(--hs-glass-line);
  backdrop-filter: blur(var(--hs-glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--hs-glass-blur)) saturate(1.3);
}

/* Link card — the whole card is clickable via a stretched pseudo-element, but
   the accessible name still comes from the real anchor inside it. */
.hs-card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-2);
  border-color: var(--hs-accent);
}

.hs-card--link:focus-within {
  outline: 3px solid var(--hs-accent);
  outline-offset: 3px;
}

.hs-card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.hs-card__stretch:focus-visible { outline: none; }  /* the card shows the ring */

.hs-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(64, 66, 153, 0.12), rgba(23, 113, 53, 0.12));
  color: var(--hs-indigo);
  margin-bottom: 0.35rem;
}

.hs-card__icon .hs-icon { width: 26px; height: 26px; }

:root[data-theme="dark"] .hs-card__icon { color: var(--hs-link); }

/* Accent rail — a thin coloured edge that distinguishes card families. */
.hs-card--rail { border-left: 4px solid var(--hs-accent); }
.hs-card--electric .hs-card__icon { color: #B8860B; }
.hs-card--water    .hs-card__icon { color: #1C6FA8; }
.hs-card--gas      .hs-card__icon { color: var(--hs-red); }
.hs-card--sewer    .hs-card__icon { color: var(--hs-green); }

/* Stat / figure tile */
.hs-stat {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: var(--hs-radius);
  background: linear-gradient(150deg, var(--hs-indigo) 0%, var(--hs-indigo-deep) 100%);
  color: #fff;
  box-shadow: var(--hs-shadow-2);
}

.hs-stat__value {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hs-stat__label { color: #C9CCF2; font-size: 0.95rem; }

/* Notice / callout */
.hs-note {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--hs-radius);
  border: 1px solid var(--hs-line);
  border-left: 4px solid var(--hs-indigo);
  background: var(--hs-surface-2);
}

.hs-note--good   { border-left-color: var(--hs-green); }
.hs-note--urgent { border-left-color: var(--hs-red); }
.hs-note > .hs-icon { flex: none; color: var(--hs-indigo); }
.hs-note p:last-child { margin-bottom: 0; }

/* The emergency contact block — the single most important thing on the site. */
.hs-emergency {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--hs-radius-lg);
  background:
    radial-gradient(800px 300px at 90% 0%, rgba(255, 94, 93, 0.16), transparent 70%),
    linear-gradient(150deg, var(--hs-indigo-ink) 0%, var(--hs-indigo-night) 100%);
  color: #fff;
  box-shadow: var(--hs-shadow-3);
  text-align: center;
  justify-items: center;
}

.hsud .hs-emergency h2 { color: #fff; margin-bottom: 0.2rem; }
.hs-emergency p  { color: #D2D5F3; max-width: 46rem; }

.hsud .hs-emergency__number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition: background var(--hs-fast) var(--hs-ease),
              border-color var(--hs-fast) var(--hs-ease);
}

.hsud .hs-emergency__number:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hs-green-bright);
}

.hs-emergency__number .hs-icon { width: 0.8em; height: 0.8em; color: var(--hs-green-bright); }

/* Page hero — the top of every interior page. */
.hs-pagehero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(900px 320px at 85% -20%, rgba(23, 113, 53, 0.14), transparent 65%),
    linear-gradient(160deg, var(--hs-bg-alt) 0%, var(--hs-bg) 80%);
  border-bottom: 1px solid var(--hs-line);
}

.hs-pagehero h1 { margin-bottom: 0.35rem; }
.hs-pagehero .hs-lead { margin-bottom: 0; }

/* Breadcrumb */
.hs-crumbs { font-size: 0.9rem; color: var(--hs-ink-3); margin-bottom: 0.75rem; }
.hs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.hs-crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--hs-line-strong); }


/* ==========================================================================
   14 · TABLES — rates and directories
   Collapse to stacked rows on small screens using the data-label attribute,
   so a rate table is readable on a phone instead of scrolling sideways.
   ========================================================================== */

.hs-tablewrap {
  overflow-x: auto;
  border-radius: var(--hs-radius);
  border: 1px solid var(--hs-line);
  background: var(--hs-surface);
  box-shadow: var(--hs-shadow-1);
}

.hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}

.hs-table caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem 0.5rem;
  font-weight: 700;
  color: var(--hs-ink);
}

.hs-table th,
.hs-table td {
  padding: 0.8rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--hs-line);
  vertical-align: top;
}

.hs-table thead th {
  background: linear-gradient(150deg, var(--hs-indigo) 0%, var(--hs-indigo-deep) 100%);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 0;
  position: sticky;
  top: 0;
}

.hs-table tbody tr:nth-child(even) { background: var(--hs-surface-2); }
.hs-table tbody tr:hover { background: var(--hs-bg-alt); }
.hs-table tbody tr:last-child td { border-bottom: 0; }

.hs-table td:last-child,
.hs-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* A section band inside a rate table, e.g. "INSIDE CITY LIMITS". */
.hs-table .hs-band th {
  background: var(--hs-bg-alt);
  color: var(--hs-indigo);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  position: static;
}

:root[data-theme="dark"] .hs-table .hs-band th { color: var(--hs-link); }

.hs-table__note {
  font-size: 0.9rem;
  color: var(--hs-ink-3);
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--hs-line);
}

@media (max-width: 720px) {
  .hs-table--stack thead { display: none; }
  .hs-table--stack tbody tr {
    display: block;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hs-line-strong);
  }
  .hs-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    padding: 0.4rem 1rem;
    text-align: right;
  }
  .hs-table--stack td::before {
    content: attr(data-label);
    font-weight: 650;
    color: var(--hs-ink-2);
    text-align: left;
  }
  .hs-table--stack td:last-child { text-align: right; }
}

/* Effective-date chip above a rate table. */
.hs-effective {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-line);
  color: var(--hs-ink-2);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hs-effective .hs-icon { width: 15px; height: 15px; color: var(--hs-accent); }


/* ==========================================================================
   15 · PHOTO STRIP + LIGHTBOX
   ========================================================================== */

.hs-strip { position: relative; margin: 0; }

.hs-strip__track {
  display: flex;
  flex-wrap: nowrap;                /* beats the core gallery's wrap */
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem var(--hs-gutter) 1.25rem;
  scrollbar-width: thin;
}

/* The core Gallery block sizes its children with a width calc and wraps them.
   Both have to go for a single-row strip. These selectors are scoped to
   .hs-strip so no other gallery on the site is affected. */
.hs-strip.wp-block-gallery,
.hs-strip .blocks-gallery-grid { gap: 1rem; }

.hs-strip__track > figure,
.hs-strip__item {
  flex: 0 0 auto;
  width: clamp(14rem, 26vw, 20rem);
  max-width: none;
  scroll-snap-align: center;
  margin: 0;
}

.hs-strip figcaption,
.hs-strip .wp-element-caption {
  font-size: 0.87rem;
  color: var(--hs-ink-3);
  text-align: left;
  padding-top: 0.5rem;
  background: none;
  position: static;
}

.hs-strip__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius);
  overflow: hidden;
  background: var(--hs-surface);
  cursor: zoom-in;
  box-shadow: var(--hs-shadow-1);
  transition: transform var(--hs-slow) var(--hs-ease),
              box-shadow var(--hs-slow) var(--hs-ease);
}

.hs-strip__btn:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-2); }
.hs-strip__btn img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.hs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 9, 30, 0.92);
  backdrop-filter: blur(6px);
}

.hs-lightbox[hidden] { display: none; }

.hs-lightbox__figure { margin: 0; max-width: min(96vw, 1200px); max-height: 100%; }

.hs-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  width: auto;
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow-3);
  margin-inline: auto;
}

.hs-lightbox__cap {
  color: #DDE0F7;
  text-align: center;
  padding-top: 0.9rem;
  font-size: 0.95rem;
}

.hs-lightbox__close,
.hs-lightbox__prev,
.hs-lightbox__next {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
}

.hs-lightbox__close:hover,
.hs-lightbox__prev:hover,
.hs-lightbox__next:hover { background: rgba(255, 255, 255, 0.28); }

.hs-lightbox__close { top: 1rem; right: 1rem; }
.hs-lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.hs-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.hs-lightbox__prev .hs-icon { transform: rotate(180deg); }


/* ==========================================================================
   16 · FOOTER
   ========================================================================== */

.hs-foot {
  background: var(--hs-footer-bg);
  color: var(--hs-footer-ink);
  font-size: 0.97rem;
}

/* The footer is laid out explicitly rather than by auto-fit.

   auto-fit with a 13rem minimum and a 3rem gap needed 1232px to place five
   columns and only had 1141px, so it placed four and dropped Contact onto a
   row of its own — measured, 956px of dead space beside it at every width
   from 1200px to 1440px, which is most desktops. It missed by 32px.

   Stating the columns removes the guesswork: the two ends carry more content
   than a list of four links, so they are given more room, and nothing
   reflows unexpectedly at a width nobody tested. */
.hs-foot__inner {
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--hs-gutter) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  align-items: start;
}

.hs-foot__brand .hs-brand__logo { height: 58px; }

/* Tablet: the brand takes the full width and the four link columns pair up
   two by two, which divides evenly. Five items never divide into two or
   three columns without stranding one.

   These come after the .hs-foot__brand rules above on purpose — both are a
   single class, so source order is what decides, and a `grid-column: span 1`
   sitting below would quietly cancel the full-width span. */
@media (min-width: 34rem) and (max-width: 63.999rem) {
  .hs-foot__inner { grid-template-columns: repeat(2, 1fr); }
  .hs-foot__brand { grid-column: 1 / -1; }
}

/* Phone: one column. Left to auto-fit this still found room for two columns
   at 480-600px and stranded the fifth item again, 264px of dead space. */
@media (max-width: 33.999rem) {
  .hs-foot__inner { grid-template-columns: 1fr; }
}

/* Desktop: all five on one row. */
@media (min-width: 64rem) {
  .hs-foot__inner { grid-template-columns: 1.45fr 1fr 1fr 1fr 1.5fr; }
}
/* Tracked a little tighter than the column headings so the four services fit
   on one line — at 0.1em it broke after "WATER" and left "· SEWER" hanging on
   a line of its own with a leading separator. */
/* `.hsud` prefixed, like everything else that sets a margin on a <p> down
   here: `body.hsud p { margin: 0 0 1.15em }` is (0,1,2) and beats a bare
   single class. Measured, all four footer paragraphs were silently using the
   body margin instead of their own — this tagline's 0.75rem top margin never
   applied, and the credit line's `margin-left: auto` never pushed it right.
   Same trap as defect 1 in TODO.md; fourth time it has bitten. */
.hsud .hs-foot__tagline {
  color: #9DA2D8;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-size: 0.74rem;
  margin: 0.75rem 0 0.5rem;
  text-wrap: nowrap;
}

/* Below the desktop row the brand column is full width or a phone column, so
   there is no reason to hold it on one line if it does not fit. */
@media (max-width: 63.999rem) {
  .hsud .hs-foot__tagline { text-wrap: wrap; }
}

/* Column headings use the accent token automatically. */
.hsud .hs-foot__heading {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hs-footer-head);
  margin: 0 0 0.9rem;
}

.hs-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.hsud .hs-foot__list a,
.hsud .hs-foot__list .hs-tel,
.hsud .hs-foot__list .hs-directions,
.hsud .hs-foot__citylink {
  color: var(--hs-footer-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.hsud .hs-foot__list a:hover,
.hsud .hs-foot__citylink:hover {
  color: var(--hs-footer-head);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.hs-foot__list--contact li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* The value takes the space left beside its icon and wraps inside it.

   Without this it is a flex item sized to its own content, and anything too
   long to sit beside the icon moves to the next line entirely — which left
   the map pin and the clock stranded on a line of their own above a
   two-line address and a two-line opening time, while the single-line rows
   kept their icons inline. `min-width: 0` is the part that lets it shrink;
   a flex item will not go below its content width without it. */
.hs-foot__list--contact li > a,
.hs-foot__list--contact li > span:not(.hs-foot__small) {
  flex: 1 1 0;
  min-width: 0;
}

.hs-foot__list--contact .hs-icon {
  width: 17px; height: 17px;
  flex: none;
  margin-top: 0.25rem;
  color: var(--hs-footer-head);
}

.hs-foot__small {
  flex-basis: 100%;
  margin-left: 1.7rem;
  margin-top: -0.35rem;
  font-size: 0.8rem;
  color: #9DA2D8;
  order: 3;
}

/* Holds one segment of a comma-separated line together — see
   hsud_break_at_commas(). The line still wraps, but only at a comma. */
.hs-nowrap { white-space: nowrap; }

/* The contact list's links are inline-flex so their icons align; that also
   makes each one an unbreakable box, which is wrong for a two-part address.
   Let this one wrap between its segments. */
.hsud .hs-foot__list--contact .hs-directions {
  display: inline;
  align-items: initial;
}

.hs-foot__bar { border-top: 1px solid rgba(255, 255, 255, 0.10); }

.hs-foot__barinner {
  max-width: var(--hs-container);
  margin-inline: auto;
  padding: 1.1rem var(--hs-gutter) calc(1.1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.87rem;
  color: #A7ACDD;
}

/* `.hsud` prefixed — see the tagline above. Without it `body.hsud p` supplies
   a 1.15em bottom margin here and, worse, a left margin of 0, so the credit
   line sat next to the legal links instead of being pushed to the far right. */
.hsud .hs-foot__copy,
.hsud .hs-foot__credit { margin: 0; }

.hsud .hs-foot__credit { margin-left: auto; transition: color var(--hs-fast) var(--hs-ease); }
.hs-foot__copy:hover, .hs-foot__credit:hover { color: var(--hs-footer-head); cursor: default; }

.hs-foot__legallist { list-style: none; display: flex; gap: 1.1rem; margin: 0; padding: 0; }
.hsud .hs-foot__legallist a { color: #A7ACDD; text-decoration: none; }
.hsud .hs-foot__legallist a:hover { color: var(--hs-footer-head); text-decoration: underline; text-underline-offset: 0.22em; }

@media (max-width: 720px) {
  .hs-foot__barinner { flex-direction: column; align-items: flex-start; }
  .hsud .hs-foot__credit { margin-left: 0; }
}


/* ==========================================================================
   17 · BACK TO TOP
   ========================================================================== */

.hs-totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom));
  z-index: 70;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hs-line-strong);
  background: var(--hs-surface);
  color: var(--hs-indigo);
  box-shadow: var(--hs-shadow-2);
  cursor: pointer;
  transition: transform var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease);
}

.hs-totop[hidden] { display: none; }
.hs-totop .hs-icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.hs-totop:hover { transform: translateY(-3px); background: var(--hs-bg-alt); }

:root[data-theme="dark"] .hs-totop { color: var(--hs-link); }


/* ==========================================================================
   18 · CONTENT — what the Pages editor produces
   ========================================================================== */

.entry-content > * { margin-block: 0 1.15em; }

.entry-content {
  width: 100%;
  max-width: none;
}

.entry-content > .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.entry-content > .alignwide {
  width: min(100%, calc(var(--hs-container) + 8rem));
  margin-inline: auto;
}

/* Everything that is NOT a full-bleed section gets the container width. */
.entry-content > :not(.alignfull):not(.alignwide):not(.hs-hero):not(.hs-pagehero) {
  width: 100%;
  max-width: var(--hs-container);
  margin-inline: auto;
  padding-inline: var(--hs-gutter);
}

.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.4em; }

.entry-content ul.hs-list-check { list-style: none; padding-left: 0; }

.entry-content ul.hs-list-check li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.65em;
}

.entry-content ul.hs-list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--hs-accent);
  -webkit-mask: var(--hs-tick) center / 0.75rem no-repeat;
          mask: var(--hs-tick) center / 0.75rem no-repeat;
  --hs-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2Z'/%3E%3C/svg%3E");
}

.entry-content blockquote {
  margin: 2rem 0;
  padding: 1.1rem 1.5rem;
  border-left: 4px solid var(--hs-accent);
  background: var(--hs-surface-2);
  border-radius: 0 var(--hs-radius) var(--hs-radius) 0;
  font-size: 1.08em;
  color: var(--hs-ink-2);
}

.entry-content figure img { border-radius: var(--hs-radius); }

/* Document / form link list */
.hs-doclist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.hsud .hs-doclist a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  min-height: 44px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-sm);
  text-decoration: none;
  color: var(--hs-ink);
  font-weight: 600;
  box-shadow: var(--hs-shadow-1);
  transition: transform var(--hs-fast) var(--hs-ease),
              border-color var(--hs-fast) var(--hs-ease),
              box-shadow var(--hs-fast) var(--hs-ease);
}

.hsud .hs-doclist a:hover {
  transform: translateX(3px);
  border-color: var(--hs-accent);
  box-shadow: var(--hs-shadow-2);
  color: var(--hs-ink);
}

.hs-doclist a::before {
  content: "";
  width: 20px; height: 20px;
  flex: none;
  background: var(--hs-red);
  -webkit-mask: var(--hs-doc) center / contain no-repeat;
          mask: var(--hs-doc) center / contain no-repeat;
  --hs-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm0 2.5L18.5 9H14V4.5Z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   19 · MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Autoplay is switched off in JS as well — this is the belt to that braces. */
  .hs-hero__media img,
  .hs-hero__media video { animation: none; transform: none; }
}




/* ==========================================================================
   20 · MOBILE TAP TARGETS

   Measured on a 375px viewport: footer navigation links came out 26px tall and
   the legal links 19px. Those are lists of standalone controls, not links
   inside a sentence, so they get a full 44px target. The visual spacing is
   unchanged on desktop.
   ========================================================================== */

@media (max-width: 720px) {
  .hsud .hs-foot__list a,
  .hsud .hs-foot__list .hs-tel,
  .hsud .hs-foot__list .hs-directions,
  .hsud .hs-foot__legallist a,
  .hsud .hs-utility a,
  .hsud .hs-announce__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* `flex-wrap: wrap` is not cosmetic here. This rule re-applies
       inline-flex on phones, which turns the address link's segments into
       flex items — and flex items in a single row make the link's
       min-content their SUM. Measured: 337px of unbreakable link inside a
       273px column, forcing the whole footer grid 48px past a 320px screen.
       Allowing the row to wrap puts min-content back to the widest single
       segment. Harmless for the single-segment links sharing this rule. */
    flex-wrap: wrap;
  }

  /* Header buttons stay compact on desktop to save header space, but on a
     phone the 44px rule wins. */
  .hsud .hs-btn--sm { min-height: 44px; }

  .hs-foot__list { gap: 0.15rem; }
  .hs-foot__legallist { gap: 0.5rem 1.25rem; flex-wrap: wrap; }

  /* The strip is the only place a 44px row would look loose, so the icon
     aligns to the middle of the taller row rather than the first line. */
  .hs-foot__list--contact .hs-icon { margin-top: 0.85rem; }
}

/* ==========================================================================
   21 · FORMS + BILL ESTIMATOR
   ========================================================================== */

.hs-field { display: grid; gap: 0.35rem; margin: 0; }

.hs-field label {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--hs-ink-2);
}

.hs-field input,
.hs-field select,
.hs-field textarea {
  font: inherit;
  color: var(--hs-ink);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-sm);
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--hs-fast) var(--hs-ease),
              box-shadow var(--hs-fast) var(--hs-ease);
}

.hs-field input:hover { border-color: var(--hs-ink-3); }

.hs-field input:focus-visible {
  border-color: var(--hs-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 28%, transparent);
}

.hs-estimator {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-2);
}

.hs-estimator__fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.hs-estimator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

/* The error is announced by role="alert"; colour is never the only signal,
   so it carries an icon glyph and its own text. */
.hs-estimator__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--hs-radius-sm);
  border: 1px solid var(--hs-red);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--hs-red) 8%, var(--hs-surface));
  color: var(--hs-ink);
  font-weight: 600;
}

.hs-estimator__error::before { content: "\26A0"; flex: none; color: var(--hs-red); }
.hs-estimator__error[hidden] { display: none; }

:root[data-theme="dark"] .hs-estimator__error { border-color: var(--hs-red-bright); }
:root[data-theme="dark"] .hs-estimator__error::before { color: var(--hs-red-bright); }

.hs-estimator__result {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--hs-radius);
  background: linear-gradient(150deg, var(--hs-indigo) 0%, var(--hs-indigo-deep) 100%);
  color: #fff;
  box-shadow: var(--hs-shadow-2);
}

.hs-estimator__result[hidden] { display: none; }

.hs-estimator__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.hs-estimator__label { color: #C9CCF2; font-size: 0.95rem; }

.hs-estimator__value {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hs-estimator__figure--total {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 0.85rem;
}

.hs-estimator__figure--total .hs-estimator__value { color: var(--hs-green-bright); }

.hs-estimator__rate { margin: 0; font-size: 0.87rem; color: #C9CCF2; }
.hs-estimator__rate strong { color: #fff; }

.hs-estimator__note { margin-top: 1.25rem; }

/* "to be confirmed" marker — used where the old site had no current value.
   Deliberately visible: a missing rate must never look like a real one. */
.hs-tbd {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  border: 1px dashed var(--hs-red);
  background: color-mix(in srgb, var(--hs-red) 7%, transparent);
  color: var(--hs-red);
  font-size: 0.82em;
  font-weight: 650;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

:root[data-theme="dark"] .hs-tbd {
  border-color: var(--hs-red-bright);
  color: var(--hs-red-bright);
  background: color-mix(in srgb, var(--hs-red-bright) 12%, transparent);
}

kbd {
  font: inherit;
  font-size: 0.88em;
  padding: 0.12em 0.45em;
  border: 1px solid var(--hs-line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--hs-surface-2);
}

/* ==========================================================================
   22 · VERTICAL RHYTHM INSIDE RAW-HTML BLOCKS

   Tables, notices and document lists are authored inside a wp:html block, so
   they are nested rather than direct children of .entry-content and never
   picked up its spacing. Measured on the Electric Rates page: the notice sat
   flush against the effective-date chip with a 0px gap.
   ========================================================================== */

.hs-note,
.hs-tablewrap,
.hs-doclist,
.hs-estimator { margin-block: 1.5rem; }

.hs-effective { margin-block: 1.5rem 0.85rem; }

/* A heading that follows other content needs room above it. The eyebrow is
   the exception: it is meant to sit tight against the heading it labels. */
.hs-wrap > :is(h2, h3):not(:first-child):not(.hs-eyebrow + *) { margin-top: 2em; }

/* First and last child never add outer space — the section owns that. */
.hs-wrap > :first-child { margin-top: 0; }
.hs-wrap > :last-child  { margin-bottom: 0; }

/* ==========================================================================
   23 · PRETTY TYPOGRAPHY, EVERYWHERE

   text-wrap: pretty stops orphans and awkward last-line breaks in running
   text; balance evens out the lines of a short heading. Applied across the
   whole site rather than to paragraphs alone, so table cells, captions,
   list items, form hints and notices all get it too.
   ========================================================================== */

body.hsud :is(p, li, dd, dt, figcaption, blockquote, td, th, label,
               .hs-lead, .hs-field__hint, .hs-field__err, .hs-table__note,
               .hs-estimator__label, .hs-foot__tagline, summary) {
  text-wrap: pretty;
}

body.hsud :is(h1, h2, h3, h4, h5, h6, legend, caption, .hs-hero__title,
               .hs-eyebrow, .hs-stat__value) {
  text-wrap: balance;
}

/* Never break these across lines: a split phone number is harder to read and
   harder to dial. */
body.hsud :is(.hs-tel, .hs-emergency__number, .hs-effective, .hs-pdf__tag) {
  white-space: nowrap;
}

/* ---- Nothing on this site breaks in the middle of a word ----

   `overflow-wrap: anywhere` used to be set here on email addresses and file
   names. It is the value that lets a browser break a word at any character
   AND count that broken form when deciding how much width to give the box —
   so a container never has to be wide enough, and addresses came apart:
   "chawanna.harris@hsutilitiesms.go" on one line and a lone "v" on the next,
   both in the staff table and on a phone. A split address reads as a
   different address and cannot be copied by eye. Reported 2026-09-22.

   `break-word` is the correct value: a word stays whole and is counted whole
   when sizing, and a break is only ever taken as the alternative to
   overflowing off the screen. Applied site-wide, not per component, so this
   cannot come back somewhere else. */
body.hsud { overflow-wrap: break-word; word-break: normal; hyphens: manual; }

body.hsud :is(.hs-mail, .hs-doclist a, .hs-foot__list a, .hs-addr) {
  overflow-wrap: break-word;
}

/* An address or a phone number is never broken at all. These have somewhere
   to go — the line above, a slightly wider column — so they never need the
   last resort. */
body.hsud :is(a[href^="mailto:"], a[href^="tel:"], .hs-mail, .hs-tel) {
  overflow-wrap: normal;
  word-break: normal;
}

/* A phone number additionally never wraps at its spaces: "(662)" on one line
   and "252-4652" on the next is a number you cannot read at a glance or dial
   from memory. Matched on the href so it holds wherever a number appears,
   not only where somebody remembered the class. */
body.hsud a[href^="tel:"] { white-space: nowrap; }


/* ==========================================================================
   24 · ONE LINE PER ROW  (.hs-table--nowrap)

   For the staff directory. Twenty-three people read as a scannable list only
   if each person is one line; wrapped job titles turn it into a wall. The
   table scrolls sideways instead, and site.js marks the wrapper as a
   focusable, labelled region when it actually overflows, so it can be
   scrolled by keyboard as well as by pointer (WCAG 2.1.1).

   The mobile stacked layout below 720px is unaffected: there each field is
   already its own row, and wrapping is what you want.
   ========================================================================== */

@media (min-width: 721px) {
  /* Needs body.hsud and the explicit text-wrap-mode. `text-wrap` is a
     SHORTHAND for text-wrap-mode + text-wrap-style, so the site-wide
     `text-wrap: pretty` rule above resets the mode back to wrap — and at
     (0,1,2) it outranks a bare `.hs-table--nowrap td` at (0,1,1). Measured:
     the cells computed to white-space:normal until this was raised. */
  body.hsud .hs-table--nowrap :is(th, td) {
    white-space: nowrap;
    text-wrap-mode: nowrap;
  }

  /* Band rows span the table, so they stay wrappable. */
  body.hsud .hs-table--nowrap .hs-band th {
    white-space: normal;
    text-wrap-mode: wrap;
  }
}

.hs-tablewrap:focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 3px;
}

/* A soft edge hinting there is more to the right, only when there is. */
.hs-tablewrap.is-scrollable { position: relative; }

.hs-tablewrap.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--hs-surface));
  border-radius: 0 var(--hs-radius) var(--hs-radius) 0;
  transition: opacity var(--hs-fast) var(--hs-ease);
}

.hs-tablewrap.is-scrolled-end::after { opacity: 0; }

.hs-scrollnote {
  margin: 0 0 0.5rem;
  font-size: 0.87rem;
  color: var(--hs-ink-3);
}


/* ==========================================================================
   24b · ADDRESS CARDS

   The two addresses are written to different lengths, so their Directions
   buttons landed at different heights — measured at a 42px difference between
   the two cards. The card is already a flex column, so pushing the footer
   down with auto margin lines the buttons up whatever the addresses say.
   ========================================================================== */

/* `.hsud` prefixed: `body.hsud p` is (0,1,2) and beats a bare single class,
   which is why the auto margin did nothing at first — measured, the button
   still sat 29px higher in the shorter card. */
.hsud .hs-card__foot { margin-top: auto; margin-bottom: 0; padding-top: 0.4rem; }

.hsud .hs-addr { margin: 0; }

/* One address, not a grid of them. Held to a readable measure rather than
   stretched across the whole content column. */
.hs-card--solo { max-width: 26rem; }

/* ---- the office map ----

   The map sits beside the address in the same two-column grid the "Call us"
   and "Write to us" cards use, so the section keeps the page's rhythm rather
   than introducing a third layout. Grid stretches both to the taller of the
   two, and the map fills whatever height that turns out to be — so the two
   cards always agree without either being given a fixed pixel height.

   `aspect-ratio` sets the floor: on its own a map with no intrinsic size
   collapses to nothing, and on mobile, where the two stack, there is no
   neighbour to take a height from. */
/* Height is stated outright rather than derived from an aspect-ratio.
   `aspect-ratio: 4/3` with a `min-height` was tried first and is a trap: the
   ratio resolves in whichever direction is not already definite, so the min
   height drove the WIDTH — measured, a 405px map inside a 390px phone, and
   62px of horizontal page scroll with it. A definite height cannot feed back
   into width. */
.hs-map {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 17rem;
  border-radius: var(--hs-radius);
  border: 1px solid var(--hs-line);
  box-shadow: var(--hs-shadow-1);
  overflow: hidden;
  background: var(--hs-bg-alt);
}

.hs-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Beside the address card, the map takes the row's height instead of its own
   ratio — matching the card next to it matters more than a nominal shape. */
.hs-grid--map { align-items: stretch; }

/* Not an even split. The address is four short lines and a button; the map is
   the thing worth looking at, so it gets the larger share and the card is held
   to the width its content actually needs. An even split left the card
   two-thirds empty. */
/* Side by side only while the map is actually the wider of the two. Below
   this the address card holds its 21rem and the map gets whatever is left —
   measured, 236px at a 720px window, narrower than the card beside it and a
   poor map. Stacked and full width it reads far better, so that is what
   happens until there is room to do it properly. */
@media (max-width: 55.999rem) {
  .hs-grid--map { grid-template-columns: 1fr; }
}

@media (min-width: 56rem) {
  .hs-grid--map {
    grid-template-columns: minmax(15rem, 21rem) 1fr;
  }

  /* Side by side, the map takes the row's height from the card next to it. */
  .hs-grid--map .hs-map { height: 100%; min-height: 19rem; }
}

/* A Google map is always light. On a dark page an unmodified white rectangle
   glares, so it is eased back very slightly — not enough to misrepresent the
   map, just enough that it sits in the page rather than punching out of it.
   Removed on hover and whenever the frame has focus, so anyone actually
   reading the map gets it untouched. */
:root[data-theme="dark"] .hs-map__frame {
  filter: brightness(0.92) contrast(1.02);
  transition: filter var(--hs-fast) var(--hs-ease);
}

:root[data-theme="dark"] .hs-map:hover .hs-map__frame,
:root[data-theme="dark"] .hs-map__frame:focus-within { filter: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-map__frame {
    filter: brightness(0.92) contrast(1.02);
  }

  :root:not([data-theme="light"]) .hs-map:hover .hs-map__frame { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .hs-map__frame { transition: none; }
}

/* An embedded map is decoration on paper — it prints as a grey box and tells
   the reader nothing. The address and the directions link are printed. */
@media print {
  .hs-map { display: none !important; }
}

/* The address itself opens directions, as every address on the site does.
   Block, so the whole stack is the target rather than the last line only. */
.hsud .hs-addr .hs-directions {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--hs-radius-sm);
  transition: color var(--hs-fast) var(--hs-ease);
}

.hsud .hs-addr .hs-directions:hover,
.hsud .hs-addr .hs-directions:focus-visible { color: var(--hs-accent-dark, var(--hs-indigo)); }

.hsud .hs-addr .hs-directions:hover { text-decoration: underline; }

.hsud .hs-addr .hs-directions:focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 3px;
}

:root[data-theme="dark"] .hsud .hs-addr .hs-directions:hover,
:root[data-theme="dark"] .hsud .hs-addr .hs-directions:focus-visible { color: var(--hs-link); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hsud .hs-addr .hs-directions:hover,
  :root:not([data-theme="light"]) .hsud .hs-addr .hs-directions:focus-visible { color: var(--hs-link); }
}


/* ==========================================================================
   25 · STAFF DIRECTORY  (CSA HS Toolkit)

   Keeps the old directory's behaviour, which people there are
   used to: a filter box, a group-by-department toggle, sortable columns and a
   print button. This is that behaviour in the new design language.

   The table itself is plain `.hs-table` — the directory only adds the chrome
   around it and the controls inside the header cells, so it inherits every
   table rule above, including the stacked mobile layout and the one-line-per
   -person rule in section 24.
   ========================================================================== */

.hs-dir { margin-block: 1.5rem; }

/* The wrapper owns the spacing; the table inside it must not add its own. */
.hs-dir .hs-tablewrap { margin-block: 0; }

.hs-dir__eff {
  margin: 0 0 0.75rem;
  font-size: 0.87rem;
  color: var(--hs-ink-3);
}

.hs-dir__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
}

.hs-dir__title { margin: 0; font-size: 1.15rem; }

.hs-dir__count {
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-line);
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--hs-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- toolbar ---- */

.hs-dir__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
}

/* The search box takes the slack; the buttons keep their natural width. */
.hs-dir__search {
  position: relative;
  display: block;
  flex: 1 1 15rem;
  margin: 0;
}

.hs-dir .hs-dir__filter {
  font: inherit;
  color: var(--hs-ink);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-sm);
  padding: 0.7rem 3rem 0.7rem 0.85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--hs-fast) var(--hs-ease),
              box-shadow var(--hs-fast) var(--hs-ease);
}

/* Safari renders a type=search field as a rounded capsule with its own
   decoration. Strip that so it matches the other fields on the site. */
.hs-dir .hs-dir__filter::-webkit-search-decoration,
.hs-dir .hs-dir__filter::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hs-dir .hs-dir__filter { -webkit-appearance: none; appearance: none; }

.hs-dir .hs-dir__filter:hover { border-color: var(--hs-ink-3); }

.hs-dir .hs-dir__filter:focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 2px;
  border-color: var(--hs-accent);
}

.hs-dir__filter::placeholder { color: var(--hs-ink-3); opacity: 1; }

.hs-dir__clear {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hs-ink-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--hs-fast) var(--hs-ease),
              color var(--hs-fast) var(--hs-ease);
}

.hs-dir__clear:hover { background: var(--hs-bg-alt); color: var(--hs-ink); }

.hs-dir__clear:focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 2px;
}

.hs-dir__clear[hidden] { display: none; }

/* ---- sortable column headers ---- */

/* A real button inside the th, so Enter and Space work without any key
   handling of ours and the header text stays its accessible name. It has to
   inherit the th's type: the gradient and the uppercase treatment belong to
   the cell, not the control. */
.hs-dir .hs-dir__sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.hs-dir .hs-dir__sort:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 3px;
}

/* The base table rules right-align the last column for rate figures. The
   directory's last column is an email address, so the header aligns left with
   the rest — see the td/th override further down. */

/* A chevron, not a colour change — colour is never the only signal, and the
   header also carries aria-sort for anyone not looking at it. */
.hs-dir__arrow {
  flex: none;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity var(--hs-fast) var(--hs-ease),
              transform var(--hs-fast) var(--hs-ease);
}

/* A hint on hover that the column can be sorted at all. */
.hs-dir .hs-dir__sort:hover .hs-dir__arrow { opacity: 0.45; }

.hs-dir thead th.is-sorted .hs-dir__arrow { opacity: 1; }
.hs-dir thead th.is-desc .hs-dir__arrow { transform: rotate(180deg); }

/* ---- fitting the four columns without a scrollbar ---- */

/* Required: no sideways scrolling on the staff list, and no name or job title
   wrapping onto a second line. Both hold only while the four columns fit, so
   the directory runs tighter than the rate tables: measured, the table needed
   1170px at the shared padding and 1064px at this one.

   Below the width where even that fits, the table becomes the stacked card
   layout further down — which is not a compromise, it is the same layout
   phones already get, and it neither wraps a row nor scrolls. */
.hs-dir .hs-table { font-size: 0.92rem; }

.hs-dir .hs-table :is(th, td) { padding: 0.7rem 0.75rem; }

.hs-dir .hs-table thead th { font-size: 0.72rem; letter-spacing: 0.04em; }

/* Four columns of this content measure about 1168px, and `.hs-wrap` gives
   back its 59px of side padding, so every person fits on one line down to
   roughly a 1230px window and no further.

   Rather than pick breakpoints for where it stops fitting — which is a guess
   about font metrics, and was wrong by 47px when it was tried — the two long
   columns are simply allowed to wrap and the two short ones are not. The
   table algorithm then wraps only what it has to, only when it has to: at a
   normal desktop width nothing wraps at all, and there is no width at which
   the table scrolls sideways.

   Name and phone are short and fixed in shape, so they never break. Title and
   email are the only fields long enough to be the cause. */
body.hsud .hs-dir .hs-table--nowrap td:nth-child(2),
body.hsud .hs-dir .hs-table--nowrap td:nth-child(4) {
  white-space: normal;
  text-wrap-mode: wrap;
}

body.hsud .hs-dir .hs-table--nowrap td:nth-child(2) { text-wrap-style: pretty; }

/* An email address is never broken across lines. A wrapped address is not
   just ugly, it is unreadable — "chawanna.harris@hsutilitiesms.go" above a
   lone "v" reads as a different address, and it cannot be copied by eye.

   So the email column gets no break opportunity at all: with the default
   `overflow-wrap: normal` the whole address is one unbreakable unit, which
   makes it the column's minimum width, which the table must honour. The
   squeeze then lands entirely on the job title — the one field that has
   spaces to break at and reads perfectly well on two lines.

   Stated as a rule rather than a value, because `break-word` was tried here
   and still broke the address once the column got tight enough. */
body.hsud .hs-dir .hs-table--nowrap td:nth-child(4) { overflow-wrap: normal; }

/* A data table has no reason to sit inside the body text measure. Given room,
   it takes a little more and nothing has to wrap at all. Gated so the pull is
   always smaller than the margin the centred container actually has. */
@media (min-width: 1360px) {
  .hs-dir { margin-inline: -3.5rem; }
}

/* Holding addresses together has a cost: an unbreakable address is a hard
   minimum width, and below about 900px four columns of it no longer fit —
   measured, the table wanted 82px more room at 800px and 148px at 721px.

   Rather than break an address or scroll, the directory drops to the stacked
   card layout earlier than the rate tables do. Those keep the shared 720px
   breakpoint; only the directory moves, because only the directory carries a
   column that cannot be compressed. */
@media (max-width: 900px) and (min-width: 721px) {
  .hs-dir .hs-table--stack thead { display: none; }

  .hs-dir .hs-table--stack tbody tr {
    display: block;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hs-line-strong);
  }

  .hs-dir .hs-table--stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    padding: 0.4rem 1rem;
    text-align: right;
  }

  .hs-dir .hs-table--stack td::before {
    content: attr(data-label);
    font-weight: 650;
    color: var(--hs-ink-2);
    text-align: left;
    flex: none;
  }

  .hs-dir .hs-table--stack td > a,
  .hs-dir .hs-table--stack td .hs-dir__val { margin-left: auto; }

  .hs-dir .hs-table--stack .hs-dir__band { display: block; padding: 0; }
  .hs-dir .hs-table--stack .hs-dir__band th { display: block; width: 100%; text-align: left; }

  body.hsud .hs-dir .hs-table--nowrap :is(th, td) {
    white-space: normal;
    text-wrap-mode: wrap;
  }

  .hs-dir .hs-tablewrap { overflow-x: visible; }
  .hs-dir__copy { opacity: 1; }
}

/* A value and its copy button, kept on one line. Measured: as loose inline
   siblings the button dropped to its own line whenever the column was within
   a few pixels of tight, leaving three of the 23 rows 24px taller than the
   rest. The value is the part that gives way. */
.hs-dir__val {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.hs-dir__val > a { min-width: 0; }

.hs-dir__val > .hs-dir__copy { flex: none; margin-left: 0; }

/* The last column is right-aligned by the base table rules for rate figures;
   the directory's email column is text, so its contents start at the left. */
.hs-dir td:last-child .hs-dir__val { justify-content: flex-start; }

/* ---- rows ---- */

/* [hidden] is only `display: none` at (0,1,0), which loses to the stacked
   layout's `.hs-table--stack tbody tr { display: block }` at (0,2,1). A
   filtered-out person stayed visible on a phone until this was raised. */
.hs-dir tbody tr[hidden] { display: none !important; }

/* Email is text, not a figure — the base rule right-aligns the last column
   for rate tables, which is wrong here. */
.hs-dir .hs-table td:last-child,
.hs-dir .hs-table th:last-child { text-align: left; font-variant-numeric: normal; }

.hs-dir__band th { text-align: left !important; }

/* The matched run inside a name or job title. Both palettes are checked
   against their own text colour, not assumed. */
.hs-dir__hit {
  background: #FFE066;
  color: #1A1A2E;
  border-radius: 3px;
  padding-inline: 0.1em;
}

:root[data-theme="dark"] .hs-dir__hit { background: #7A5C00; color: #FFF3C4; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-dir__hit { background: #7A5C00; color: #FFF3C4; }
}

/* ---- copy to clipboard ---- */

.hs-dir__copy {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 0.35rem;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: var(--hs-radius-sm);
  background: transparent;
  color: var(--hs-ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease),
              color var(--hs-fast) var(--hs-ease);
}

/* Revealed on hover, but always visible once focused — a keyboard user must
   never be given a control they cannot see. */
.hs-dir tbody tr:hover .hs-dir__copy,
.hs-dir__copy:focus-visible,
.hs-dir__copy.is-copied { opacity: 1; }

.hs-dir__copy:hover { background: var(--hs-bg-alt); color: var(--hs-ink); }

.hs-dir__copy:focus-visible {
  outline: 3px solid var(--hs-accent);
  outline-offset: 2px;
}

.hs-dir__copy.is-copied {
  color: var(--hs-accent-dark, var(--hs-green));
  border-color: currentColor;
}

/* Touch has no hover, so the buttons would never appear. Show them, and give
   them a full-size target while the table is stacked and there is room. */
@media (hover: none) {
  .hs-dir__copy { opacity: 1; }
}

@media (max-width: 720px) {
  .hs-dir__copy { width: 44px; height: 44px; opacity: 1; margin-left: 0.1rem; }
  .hs-dir__head { margin-bottom: 0.7rem; }

  /* The stacked layout puts the label left and the value right with
     space-between. A phone cell holds two children — the number and its copy
     button — so the spread pushed the button to the far edge and left a gap
     across the middle of the card. Grouping the value and its button as one
     right-hand unit is what stops that. */
  .hs-dir .hs-table--stack td { align-items: center; }

  /* The label keeps its size; the value group takes what is left and gives
     way first. Letting it keep its natural width looks right until a long
     email address has nowhere to go — that pushed the card 58px past the
     screen at 375px. */
  .hs-dir .hs-table--stack td::before { flex: none; }

  .hs-dir .hs-table--stack td > a,
  .hs-dir .hs-table--stack td .hs-dir__val {
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    text-align: right;
  }

  /* Same rule as the table view: an address is never split. The card grows a
     little rather than breaking one. */
  .hs-dir .hs-table--stack .hs-dir__val > a { overflow-wrap: normal; }
}

/* On a narrow phone the label and the value competing for one line leaves an
   email address too little room, and it breaks mid-address — measured,
   "e.anderson@hsutilitiesms.gov" split after the "g". Below this the label
   sits on its own line and the value gets the full width of the card. */
@media (max-width: 520px) {
  .hs-dir .hs-table--stack td {
    display: block;
    text-align: left;
    padding: 0.35rem 1rem;
  }

  .hs-dir .hs-table--stack td::before {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hs-ink-3);
  }

  .hs-dir .hs-table--stack td > a,
  .hs-dir .hs-table--stack td .hs-dir__val {
    margin-left: 0;
    text-align: left;
  }

  .hs-dir .hs-table--stack .hs-dir__val { display: flex; }

  .hs-dir .hs-table--stack tbody tr { padding: 0.6rem 0; }
}

/* The smallest phones. The longest address here is 33 characters and it is
   not allowed to break, so on a 320px screen it has to be set a little
   smaller to fit beside its copy button — measured, the card ran 67px over
   before this. Still comfortably above the size the rest of the table uses
   on a phone, and it only applies where the screen forces it. */
@media (max-width: 430px) {
  .hs-dir .hs-table--stack .hs-dir__val > a { font-size: 0.82rem; }
  .hs-dir .hs-table--stack td { padding-inline: 0.75rem; }
}

/* A 320px screen is the narrowest in real use, and the address still has to
   arrive whole. One more notch down, and the copy button gives back the four
   pixels it can while staying a comfortable target. Measured: 34px over
   before this, 0 after. */
@media (max-width: 370px) {
  .hs-dir .hs-table--stack .hs-dir__val > a { font-size: 0.72rem; }
  .hs-dir .hs-table--stack td { padding-inline: 0.5rem; }
  .hs-dir .hs-table--stack .hs-dir__val { gap: 0.1rem; }
  .hs-dir__copy { width: 40px; height: 40px; }
}

.hs-dir__none {
  margin: 1rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--hs-line-strong);
  border-radius: var(--hs-radius);
  color: var(--hs-ink-2);
  text-align: center;
}

.hs-dir__none[hidden] { display: none; }

/* The note below the directory is no longer inside the table's border, so it
   drops the rule and inset that `.hs-table__note` carries for that case. */
.hs-dir__after { border-top: 0; padding-inline: 0; }

/* Only ever seen on paper. */
.hs-dir__printhead { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hs-dir__arrow,
  .hs-dir__copy,
  .hs-dir__clear,
  .hs-dir .hs-dir__filter { transition: none; }
}


/* ==========================================================================
   26 · PLUS 1 FORM  (CSA HS Toolkit)
   ========================================================================== */

.hs-form {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-2);
  margin-block: 1.5rem;
}

.hs-form__grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.hs-req { color: var(--hs-red); margin-left: 0.15em; }
:root[data-theme="dark"] .hs-req { color: var(--hs-red-bright); }

.hs-field__hint { font-size: 0.87rem; color: var(--hs-ink-3); }

.hs-field__err {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--hs-red);
}

/* Colour is never the only signal — the message carries a glyph too. */
.hs-field__err::before { content: "\26A0"; flex: none; }

:root[data-theme="dark"] .hs-field__err { color: var(--hs-red-bright); }

.hs-field--error input,
.hs-field--error select,
.hs-field--error textarea { border-color: var(--hs-red); border-width: 2px; }

.hs-fieldset {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius);
  background: var(--hs-surface-2);
}

.hs-fieldset legend {
  padding-inline: 0.5rem;
  font-weight: 700;
  color: var(--hs-ink);
}

.hs-radios {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: 1rem;
}

.hs-radio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  cursor: pointer;
  font-weight: 600;
  transition: border-color var(--hs-fast) var(--hs-ease),
              background var(--hs-fast) var(--hs-ease);
}

.hs-radio:hover { border-color: var(--hs-accent); }

.hs-radio input { width: 20px; height: 20px; accent-color: var(--hs-green); flex: none; margin: 0; }
.hs-radio:has(input:checked) { border-color: var(--hs-accent); border-width: 2px; background: var(--hs-bg-alt); }
.hs-radio:has(input:focus-visible) { outline: 3px solid var(--hs-accent); outline-offset: 3px; }

.hs-field--other[hidden] { display: none; }
.hs-field--other { max-width: 16rem; }

.hs-input-prefix { position: relative; display: block; }

.hs-input-prefix > span[aria-hidden] {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hs-ink-2);
  font-weight: 650;
  pointer-events: none;
}

.hs-input-prefix input { padding-left: 1.9rem; }

.hs-form__agreement { margin-block: 1.5rem; }
.hs-form__actions { margin: 1.5rem 0 0; }
.hs-form__summary { margin-block: 0 1.5rem; }
.hs-form__summary ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.hs-form__summary a { color: inherit; }

.hs-form__privacy { margin: 1rem 0 0; font-size: 0.88rem; color: var(--hs-ink-3); }

.hs-formmsg { margin-block: 1.5rem; }
.hs-formmsg h2 { margin-bottom: 0.4rem; font-size: 1.3rem; }
.hs-formmsg p:last-child { margin-bottom: 0; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none. Hidden from assistive tech via aria-hidden
   and removed from the tab order on the input itself. */
.hs-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   27 · PRINT

   A utility site gets printed: a rate sheet goes in a folder, the staff
   directory goes on a wall, a form gets filled in by hand. Printing is a real
   output here, not an afterthought.
   ========================================================================== */

@page { margin: 16mm 14mm; }

@media print {

  /* Force the light palette. Otherwise someone in dark mode prints white text
     on white paper, or burns a cartridge on a navy background. */
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --hs-bg: #FFFFFF;
    --hs-bg-alt: #FFFFFF;
    --hs-surface: #FFFFFF;
    --hs-surface-2: #FFFFFF;
    --hs-ink: #000000;
    --hs-ink-2: #1A1A1A;
    --hs-ink-3: #333333;
    --hs-line: #999999;
    --hs-line-strong: #666666;
    --hs-accent: #000000;
    --hs-link: #000000;
    --hs-shadow-1: none;
    --hs-shadow-2: none;
    --hs-shadow-3: none;

    /* The BRAND tokens too, not just the neutrals. Component-level dark-mode
       rules such as `:root[data-theme="dark"] .hs-tbd` survive into print and
       reference these directly, so a visitor printing in dark mode was
       getting bright red text. Neutralising the tokens kills all of those at
       once, rather than chasing each selector. */
    --hs-indigo: #000000;
    --hs-indigo-deep: #000000;
    --hs-indigo-ink: #000000;
    --hs-indigo-night: #FFFFFF;
    --hs-green: #000000;
    --hs-green-bright: #000000;
    --hs-red: #000000;
    --hs-red-bright: #000000;
    --hs-accent-hover: #000000;
    --hs-link-hover: #000000;
    --hs-header-bg: #FFFFFF;
    --hs-header-ink: #000000;
    --hs-utility-bg: #FFFFFF;
    --hs-footer-bg: #FFFFFF;
    --hs-footer-ink: #000000;
    --hs-footer-head: #000000;
    --hs-glass-bg: transparent;
    --hs-glass-line: #999999;
  }

  body.hsud {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* Navigation, controls and decoration mean nothing on paper. */
  .hs-header, .hs-mobile, .hs-announce, .hs-totop, .hs-utility,
  .hs-hero__controls, .hs-hero__media, .hs-foot__bar, .hs-lightbox,
  .hs-themetoggle, .hs-burger, .skip-link, .hs-hp, .hs-stripe,
  .hs-form__actions, .hs-estimator__actions, .hs-estimator__form,
  .hs-scrollnote, .hs-ext, .hs-icon { display: none !important; }

  /* Stacked slides would waste pages; print the visible one, flat. */
  .hs-hero { background: none !important; color: #000 !important; min-height: 0; }
  .hs-hero__slide { display: none !important; }
  .hs-hero__slide.is-active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    min-height: 0;
  }
  .hs-hero__title, .hs-hero__text, .hs-hero .hs-eyebrow { color: #000 !important; }
  .hs-hero__inner { padding: 0 0 1rem; }

  /* Dark bands become plain type in a box. */
  .hs-emergency, .hs-estimator__result, .hs-stat {
    background: none !important;
    color: #000 !important;
    border: 1pt solid #666;
    box-shadow: none;
  }

  .hs-emergency h2, .hs-emergency p, .hs-emergency__number,
  .hs-estimator__label, .hs-estimator__value, .hs-estimator__rate,
  .hs-stat__value, .hs-stat__label { color: #000 !important; }

  .hs-emergency__number { border-color: #666; }

  /* Screen rhythm becomes wasted sheets on paper. */
  .hs-section, .hs-pagehero { padding-block: 0.6rem; }
  .hs-pagehero { border-bottom: 1pt solid #666; }
  .hs-wrap { max-width: none; padding-inline: 0; }

  /* Tables never stack on paper, and the header repeats on every sheet. */
  .hs-table--stack thead { display: table-header-group !important; }
  .hs-table--stack tbody tr { display: table-row !important; }
  .hs-table--stack td {
    display: table-cell !important;
    text-align: left !important;
    padding: 0.35rem 0.6rem !important;
  }
  .hs-table--stack td::before { content: none !important; }
  .hs-table--nowrap th,
  .hs-table--nowrap td { white-space: normal !important; }

  .hs-tablewrap {
    overflow: visible !important;
    border: 1pt solid #666;
    box-shadow: none;
  }
  .hs-tablewrap.is-scrollable::after { display: none; }

  .hs-table { font-size: 9.5pt; }
  .hs-table thead { display: table-header-group; }
  .hs-table thead th {
    background: #E8E8E8 !important;
    color: #000 !important;
    border-bottom: 1pt solid #666;
    position: static;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hs-table .hs-band th {
    background: #F2F2F2 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hs-table tbody tr { break-inside: avoid; }

  /* The staff directory goes on a wall, so it gets its own masthead — the
     site header is gone by this point and a printed list with no name on it
     is no use to anyone. The controls print as nothing. */
  .hs-dir__toolbar,
  .hs-dir__copy,
  .hs-dir__arrow,
  .hs-dir__none { display: none !important; }

  .hs-dir__printhead {
    display: block !important;
    margin-bottom: 0.5rem;
    border-bottom: 1pt solid #666;
    padding-bottom: 0.3rem;
  }
  .hs-dir__printhead strong { display: block; font-size: 13pt; }
  .hs-dir__printhead span { font-size: 9.5pt; color: #333; }

  /* The head row's on-screen job — a sort control — is over. Print the label. */
  .hs-dir .hs-dir__sort { display: block; cursor: auto; }

  /* Whatever the visitor filtered or grouped to is what they meant to print,
     so the arrangement is left exactly as it is on screen. A highlighted
     match must not print as a grey block over the name, though. */
  .hs-dir__hit {
    background: none !important;
    color: #000 !important;
    font-weight: 700;
  }

  .hs-dir__count {
    border: 0;
    background: none !important;
    padding: 0;
  }

  /* The photo strip is just images on paper. */
  .hs-strip__track { display: block; overflow: visible; padding: 0; }
  .hs-strip__track > figure {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    break-inside: avoid;
  }
  .hs-strip__btn { border: 1pt solid #999; box-shadow: none; }

  /* Keep things whole across a page break. */
  .hs-card, .hs-note, .hs-estimator, .hs-form, figure, .hs-doclist li {
    break-inside: avoid;
    box-shadow: none;
  }
  .hs-card, .hs-note, .hs-estimator, .hs-form {
    border: 1pt solid #999;
    background: none !important;
  }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* body.hsud needed: the fluid clamp() sizes are set at (0,1,2) and a bare
     `h1` at (0,0,1) loses to them. Measured at 46.6px before this was raised. */
  body.hsud h1 { font-size: 20pt; }
  body.hsud h2 { font-size: 15pt; }
  body.hsud h3 { font-size: 12pt; }
  body.hsud h4 { font-size: 11pt; }
  body.hsud .hs-hero__title { font-size: 20pt; }
  body.hsud .hs-lead { font-size: 11pt; }
  body.hsud .hs-emergency__number { font-size: 16pt; }
  p, li { orphans: 3; widows: 3; }

  /* A printed link cannot be clicked, so print where it goes — but not for
     in-page anchors, mailto: or tel:, where the text already says it. */
  /* The one place a mid-word break is still allowed, and deliberately: this
     is a bare URL printed in brackets after the link text. It has no spaces
     to break at and running it off the edge of the paper would lose the end
     of the address, which is worse. It never applies to the link text, to an
     email address or to a phone number. */
  .entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #333;
    word-break: break-all;
  }
  .entry-content a[href^="#"]::after,
  .entry-content a[href^="mailto"]::after,
  .entry-content a[href^="tel"]::after { content: none; }

  .hs-btn {
    border: 1pt solid #666 !important;
    background: none !important;
    color: #000 !important;
    box-shadow: none;
    padding: 0.15rem 0.45rem;
    min-height: 0;
  }

  .hs-pdf__tag {
    background: none !important;
    color: #000 !important;
    border: 1pt solid #666;
  }

  .hs-tbd { border-color: #000; color: #000; background: none; }

  /* Keep the footer's contact block — it is how whoever is holding the
     printout gets in touch. The rest of the footer is navigation. */
  .hs-foot {
    background: none !important;
    color: #000 !important;
    border-top: 1pt solid #666;
  }
  .hs-foot__inner { display: block; padding: 0.8rem 0 0; }
  .hs-foot__col:not(.hs-foot__col--contact) { display: none; }
  .hs-foot__brand { margin-bottom: 0.5rem; }
  .hs-foot__brand .hs-brand__logo { background: none; padding: 0; height: 46px; }
  .hs-foot__heading { color: #000 !important; }
  .hs-foot__list a,
  .hs-foot__list .hs-tel,
  .hs-foot__list .hs-directions { color: #000 !important; }
  .hs-foot__list--contact .hs-icon { display: none; }

  a { text-decoration: underline; }
}