/* ------------------------------------------------------------------
   HS GovTech — website concept
   Prepared by Lova Studio for the 2026-08-18 kickoff.
   Palette + type: HS GovTech Brand Guide Package (25pp, rec'd 2026-08-14).
   Header treatments: Jena Pagani email, 2026-08-14.
   ------------------------------------------------------------------ */

/* Proxima Nova is the brand face for print. Client confirmed 2026-08-17
   (Adam Smith email) that Figtree replaces it for web, variable weights.
   Self-hosted so the concept still renders with no network. */
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Brand palette — hex values lifted from the guide, do not alter */
  --navy: #040048;
  --sky: #35b0ed;
  --coral: #ea5353;
  --green: #67bc8c;
  --check-green: #42be88;
  --gold: #e6bd56;
  --grey-1: #c7d2d8;
  --grey-2: #a5a3af;
  --charcoal: #383748;

  /* Derived neutrals — proposed, not in guidelines */
  --ink: #17163a;
  --muted: #575a6e;
  --paper: #f4f8fb;
  --paper-2: #eaf2f8;
  --line: #dfe8ef;
  --white: #fff;

  /* Surface + role tokens. These carry the light/dark switch. Every rule that
     paints a page surface, a heading, or a status tint reads one of these
     rather than a literal, so the dark blocks below restate values only,
     never selectors. Literal #fff stays literal where it is white text
     sitting on a brand color, which does not change between modes. */
  --page: #fff;            /* body background, the base plane */
  --surface: #fff;         /* cards, dropdowns, inputs, panels: one step up */
  --header-bg: rgba(255, 255, 255, 0.94);
  --footer-bg: #383748;
  --accent-ink: #040048;   /* navy used as TEXT, or as a border on a light surface */
  --ink-sky: #0f5f8a;
  --ink-green: #2f7a52;
  --ink-gold: #8a6a15;
  --tint-coral: #fdecec;
  --tint-green: #e8f6ee;
  --tint-gold: #fcf4de;
  --tint-navy: #e7e6f2;
  --map-fill: #dce6ee;
  --map-fill-agency: #9fd3f2;
  --map-fill-hot: #c3d3de;
  --map-stroke: #fff;
  --key-border: rgba(4, 0, 72, 0.08);

  /* Tints of brand colors for large flat areas */
  --sky-wash: #eaf6fd;
  --navy-deep: #02002e;
  /* 4 Sep 2026 Visualization Catalog tokens. --cyan is the call-out colour sampled from the approved Home mockup V5
     (#00b4f3/#00b4f6 were literals in ~20 rules); --sky is the brand-guide value the Catalog samples (#35b0ed).
     To unify on the guide colour, set --cyan: var(--sky). Gradient stops sampled from the Catalog PDF at 150 dpi:
     core #030048, edges #1c5299–#24569a, quote panel #1d1a5a. White on #24569a = 6.6:1. */
  --cyan: #00b4f3;
  --grad-mesh:
    radial-gradient(55% 90% at 100% 55%, #173b7e 0%, rgba(23, 59, 126, 0) 62%),
    radial-gradient(45% 80% at 0% 70%, #173b7e 0%, rgba(23, 59, 126, 0) 58%),
    linear-gradient(180deg, #040048 0%, #02002e 100%);
  --grad-band: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  --panel-on-grad: #1d1a5a;
  --coral-ink: #b83535; /* AA-safe coral for small text on white */
  --coral-solid: #c93b3b; /* AA-safe coral fill under white text, 5.03 */
  --green-solid: #2f7a52; /* AA-safe green fill under white text, 5.22 */

  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px -2px rgba(4, 0, 72, 0.1);
  --shadow: 0 20px 46px -30px rgba(4, 0, 72, 0.45);
  --shadow-lg: 0 40px 80px -40px rgba(4, 0, 72, 0.5);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

/* ---------------- dark scheme ----------------
   Two blocks, same values, on purpose. The first serves a visitor whose OS
   asks for dark and who has made no choice here; the :not() guard lets an
   explicit "light" choice win over the OS. The second serves the explicit
   "dark" choice and must come second so it wins in both directions. Only
   token values are restated below; no selector is duplicated, because every
   rule that paints a surface already reads a token.
   ------------------------------------------------------------------------ */
/* Scoped to `screen`: on paper the dark tokens would print near-white text,
   so print falls through to the light :root values. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  /* Brand hues, lifted for a dark ground. The hex values in the guide are
     tuned for ink on white; used unchanged on a dark plane the blues go muddy
     and the coral loses its warning weight, so each is raised in luminance
     and left on its own hue. --navy-deep is deliberately NOT changed: it is
     the hero gradient, and the hero's contrast figures were measured. */
  --navy: #1c1478;
  --sky: #4cc0f5;
  --coral: #f2706f;
  --green: #6fc796;
  --gold: #edc86a;
  --grey-1: #3b3866;
  --grey-2: #9b98b3;
  --charcoal: #d6d4e6;

  --ink: #ecebf8;
  --muted: #aba8c4;
  --paper: #131037;
  --paper-2: #1a1745;
  --line: #2c2959;

  --sky-wash: #16224d;
  --coral-ink: #ff9d9c;

  /* Elevation runs page < band < card, the inverse of the light scheme, so a
     card still reads as the nearer plane. */
  --page: #0d0b28;
  --surface: #181546;
  --header-bg: rgba(13, 11, 40, 0.94);
  --footer-bg: #08061c;
  --accent-ink: #b9c6ff;
  --ink-sky: #8fd3f7;
  --ink-green: #7fd3a2;
  --ink-gold: #e8c76d;
  --tint-coral: #3c1d24;
  --tint-green: #16311f;
  --tint-gold: #322614;
  --tint-navy: #221e52;
  --map-fill: #262353;
  --map-fill-agency: #2c6ea6;
  --map-fill-hot: #35325f;
  --map-stroke: #0d0b28;
  --key-border: rgba(255, 255, 255, 0.18);

  /* A navy-tinted shadow is invisible on a navy ground. */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
  --shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.95);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 1);
  }
}

@media screen {
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand hues, lifted for a dark ground. The hex values in the guide are
     tuned for ink on white; used unchanged on a dark plane the blues go muddy
     and the coral loses its warning weight, so each is raised in luminance
     and left on its own hue. --navy-deep is deliberately NOT changed: it is
     the hero gradient, and the hero's contrast figures were measured. */
  --navy: #1c1478;
  --sky: #4cc0f5;
  --coral: #f2706f;
  --green: #6fc796;
  --gold: #edc86a;
  --grey-1: #3b3866;
  --grey-2: #9b98b3;
  --charcoal: #d6d4e6;

  --ink: #ecebf8;
  --muted: #aba8c4;
  --paper: #131037;
  --paper-2: #1a1745;
  --line: #2c2959;

  --sky-wash: #16224d;
  --coral-ink: #ff9d9c;

  /* Elevation runs page < band < card, the inverse of the light scheme, so a
     card still reads as the nearer plane. */
  --page: #0d0b28;
  --surface: #181546;
  --header-bg: rgba(13, 11, 40, 0.94);
  --footer-bg: #08061c;
  --accent-ink: #b9c6ff;
  --ink-sky: #8fd3f7;
  --ink-green: #7fd3a2;
  --ink-gold: #e8c76d;
  --tint-coral: #3c1d24;
  --tint-green: #16311f;
  --tint-gold: #322614;
  --tint-navy: #221e52;
  --map-fill: #262353;
  --map-fill-agency: #2c6ea6;
  --map-fill-hot: #35325f;
  --map-stroke: #0d0b28;
  --key-border: rgba(255, 255, 255, 0.18);

  /* A navy-tinted shadow is invisible on a navy ground. */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
  --shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.95);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 1);
}
}

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

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

body {
  /* The sideways-scroll guard used to live here as `overflow-x: clip`. A clip
     context on an ancestor silently disables `position: sticky` on descendants,
     which is why the sticky header scrolled away (Adam/Jena, 31 Aug standup:
     "the navigation disappears every time"). The guard now sits on `main`,
     which is a sibling of <header>, so it still stops sideways scroll without
     capturing the header. Do not move it back onto body or html. */
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The sideways-scroll guard, relocated off <body> so the sticky header keeps
   working. <main> is a sibling of <header>, so clipping here still stops any
   wide section from scrolling the page sideways. */
main { overflow-x: clip; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--accent-ink);
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.1vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 700; }
p { text-wrap: pretty; }

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(1180px, 100% - 2rem); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* Concept watermark — this is a concept, never mistaken for a live site */
.concept-flag {
  position: fixed; right: -58px; top: 26px; z-index: 200;
  transform: rotate(45deg);
  background: var(--coral-solid); color: #fff;
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 4rem;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
@media print { .concept-flag { display: none; } }

/* ---------------- campaign banner + header ---------------- */
/* "Need ability to promote campaigns periodically (Rotating campaign
    banner, above nav banner, etc.)" — IA doc, Home components */
.campaign {
  background: var(--navy);
  color: #fff;
  font-size: 0.88rem;
  text-align: center;
  padding: 0.6rem 1rem;
}
.campaign strong { font-family: var(--font-display); font-weight: 700; }
.campaign a {
  color: var(--sky); text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(53, 176, 237, 0.45);
}
.campaign a:hover { color: #fff; border-bottom-color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 0;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }
}
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }

/* Center-justified nav — Jena, 2026-08-14: "I like the center-justified nav as well." */
.nav { display: flex; justify-content: center; gap: 0.25rem; }
.nav > li { position: relative; list-style: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.93rem;
  /* Buttons carry the UA's `line-height: normal`; anchors inherit body's 1.65.
     Unset, the two build different line boxes and the anchor items (Contact,
     Login) sit lower than the dropdown triggers — the misalignment Adam called
     out on 31 Aug. Pinning line-height makes every nav item share a baseline. */
  line-height: 1;
  color: var(--charcoal); text-decoration: none;
  padding: 0.7rem 0.8rem; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--accent-ink); background: var(--sky-wash); }
.nav-link .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-3px, -3px); }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  min-width: 268px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  /* Was `display: none`, which cannot transition and gave the menu its abrupt
     feel. Visibility + opacity animate; `pointer-events: none` keeps a closed
     panel from swallowing clicks. */
  translate: -50% 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s var(--ease), translate 0.16s var(--ease), visibility 0s linear 0.16s;
}
/* Hover bridge. The 6px gap between trigger and panel used to be dead space:
   the pointer left the <li>, the menu closed, and the child link was
   unreachable — "the drop downs, it is clunky" (Jena, 31 Aug). This pseudo
   element spans the gap so the pointer never leaves the hover target. */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-link[aria-expanded="true"] + .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  translate: -50% 0;
  transition: opacity 0.16s var(--ease), translate 0.16s var(--ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .dropdown { transition: none; translate: -50% 0; }
}
.dropdown li { list-style: none; }
.dropdown a {
  display: block; padding: 0.55rem 0.75rem; border-radius: 9px;
  font-size: 0.9rem; font-weight: 600; color: var(--charcoal); text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.dropdown a:hover { background: var(--sky-wash); color: var(--accent-ink); }
.dropdown .eyebrow {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  padding: 0.6rem 0.75rem 0.25rem;
}

.header-end { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; }
.header-ctas { display: flex; align-items: center; gap: 0.6rem; }
.nav-cta { display: none; } /* 2026-09-02: mobile-drawer copy of the Request a demo CTA; shown <=1000px below */
/* Login sits in the right-hand cluster, immediately left of Request a Demo,
   per Adam's mockup and the 31 Aug call ("it'd be to the left of the Request a
   Demo"). "Login" is the client-facing wording Adam chose over "Sign In"
   because it is the term their agencies use. It points at the HS GovTech
   product, not the CMS. */
.header-login {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--font-display); font-weight: 600; font-size: 0.93rem;
  color: var(--charcoal); text-decoration: none;
  padding: 0.7rem 0.5rem; border-radius: 8px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.header-login:hover { color: var(--accent-ink); background: var(--sky-wash); }
.nav-toggle { display: none; }

/* Scheme switch. Hidden until site.js marks it ready: without script it cannot
   do anything, and the OS preference already drives the page on its own. */
.theme-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--grey-1); border-radius: 10px;
  background: var(--surface); color: var(--accent-ink);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.theme-toggle.js-ready { display: inline-flex; }
.theme-toggle:hover { border-color: var(--accent-ink); background: var(--sky-wash); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 0.78rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--coral-solid); color: #fff; box-shadow: 0 12px 26px -14px rgba(201, 59, 59, 0.85); }
.btn-primary:hover { background: #b02a2a; box-shadow: 0 16px 30px -14px rgba(201, 59, 59, 0.95); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #0b0472; }
.btn-ghost { background: transparent; color: var(--accent-ink); border-color: var(--grey-1); }
.btn-ghost:hover { border-color: var(--accent-ink); background: var(--sky-wash); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.86rem; }
.link-quiet {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--accent-ink); text-decoration: none;
  border-bottom: 2px solid var(--sky); padding-bottom: 2px;
}
.link-quiet:hover { border-bottom-color: var(--coral); }

/* ---------------- shared section furniture ---------------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-tight { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-sky);
  margin-bottom: 0.9rem;
}
.eyebrow-dark { color: var(--coral-ink); }
.lede { font-size: clamp(1.02rem, 1.35vw, 1.18rem); color: var(--muted); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.band-paper { background: var(--paper); }
.band-navy { background: var(--grad-mesh); color: rgba(255, 255, 255, 0.86); } /* Catalog: Headline & Text on Gradient, Panels on Gradient */
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .lede { color: rgba(255, 255, 255, 0.78); }

/* Template-preview note — industry/solution pages only */
.template-note {
  background: var(--sky-wash); border-bottom: 1px solid var(--line);
  color: var(--charcoal); font-size: 0.86rem; text-align: center;
  padding: 0.75rem 1.25rem;
}
.template-note strong { color: var(--accent-ink); font-family: var(--font-display); }

/* ---------------- HOME hero — light, bright, full-bleed ----------------
   Jena, 2026-08-14: keep the full-bleed look and the community image,
   but lighter and brighter — the dark header "looks a little too similar
   to our competitor Accela." Explicitly not CTA-one-side/image-other. */
.hero-light {
  position: relative;
  isolation: isolate;
  min-height: min(80vh, 700px);
  display: grid;
  align-content: center;
  text-align: left;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.25rem, 6vw, 5.5rem);
  overflow: hidden;
  background: var(--navy-deep);
}
/* ---- the two photographs, full bleed, untouched ----
   Ray, 2026-08-24: no frost and no white cover over the hero images. So there
   is no wash, no tint, no blur and no opacity on either picture — they render
   at full strength. Legibility is bought instead by turning the copy white and
   by the navy gradient below, which only reaches across the left of the frame
   where the words are and is fully transparent over the subject. */
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  /* Very slow push-in. `alternate` reverses rather than snapping back, so
     there is no visible restart. Transform only — composited, no repaint. */
  animation: hero-drift 34s ease-in-out infinite alternate;
}
.hero-media > img, .hero-media > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-frame { position: absolute; inset: 0; }
.hero-frame-a { object-position: 55% 20%; }
.hero-frame-b {
  object-position: 52% 24%;
  opacity: 0;
  /* linear, not eased: a cross-fade eased on one side reads as a flicker at
     the hand-off, because the two frames stop summing to full opacity. */
  animation: hero-swap 19s linear infinite;
}
/* One animation, not two: frame A simply sits underneath at full opacity. */
@keyframes hero-swap {
  0%, 38%   { opacity: 0; }
  50%, 88%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
/* The readability layer. Navy, directional, and gone by ~62% across, so the
   right-hand two fifths of the photograph carry no overlay at all. */
.hero-light::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* Horizontal ramp: opaque under the copy column, fully clear by 78%, so
       the subject on the right of both frames is never touched. The stops are
       not guesses — they were raised until the measured worst-case pixel
       behind every text run cleared WCAG AA. */
    linear-gradient(96deg, rgba(2, 0, 46, 0.95) 0%, rgba(2, 0, 46, 0.9) 27%, rgba(2, 0, 46, 0.72) 41%, rgba(2, 0, 46, 0.28) 53%, rgba(2, 0, 46, 0) 66%),
    /* Bottom reinforcement, pulled into the bottom-LEFT corner rather than run
       right across. In HSGT_Home-Page_V5.jpg the subject on the right is fully
       lit — a full-width bottom band greys out her vest and hands, which is
       the single biggest reason the built hero read darker than the mockup.
       The stats row sits inside this corner, so it keeps its ground. */
    linear-gradient(to top right, rgba(2, 0, 46, 0.55) 0%, rgba(2, 0, 46, 0) 44%),
    /* Top edge only: it carries the white header's shadow line. */
    linear-gradient(180deg, rgba(2, 0, 46, 0.3) 0%, rgba(2, 0, 46, 0) 20%);
}

/* Entrance: one pass, on load, no JS and no observer. `both` holds the start
   state so nothing flashes at full opacity before the delay elapses. */
.hero-copy > * { animation: hero-rise 0.6s var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.11s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.25s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero-copy { max-width: 40rem; }
.hero-light h1 { max-width: 16ch; margin-inline: 0; color: #fff; }
/* Second sentence of the hero headline, cyan per HSGT_Home-Page_V5.jpg.
   #00b4f6 on the hero's navy ground measures 8.2:1, so it clears AA. */
.hero-light h1 .h1-accent { color: var(--cyan); }
/* Split headings: the mockup runs the second half of several section titles in
   the brand cyan. Only used on dark grounds, where #00b4f6 clears AA. */
.h2-accent { color: var(--cyan); }

/* ---------------- homepage dark bands ----------------
   HSGT_Home-Page_V5.jpg runs one continuous navy field from "Your work
   matters" down through the industry cards, and a second navy field behind
   the partner stories. The build had both on paper, which is the largest
   single reason the page did not read like the mockup.

   Scoped by id to the two homepage sections. .band-navy is already on a dozen
   other pages and none of them carry cards, so a bare `.band-navy .card` rule
   would be a wider change than this needs. */
#industries.band-navy .eyebrow { color: var(--cyan); }
#industries.band-navy .card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
#industries.band-navy .card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
}
#industries.band-navy .card h3 { color: #fff; }
#industries.band-navy .card p,
#industries.band-navy .card li { color: rgba(255, 255, 255, 0.84); }
#industries.band-navy .card strong { color: #fff; }
#industries.band-navy .card .more { color: var(--cyan); }
/* The "Don't see your program?" cell is the cyan one in the mockup — it was
   the only dark card on a light field, and inverts with the section. Copy is
   navy on cyan, not the mockup's white: white on #00b4f6 is 2.38:1. Same
   trade-off as the agency band, tracked as HSGT-62. */
#industries.band-navy .card-invert {
  background: var(--cyan); border-color: var(--cyan); color: var(--navy);
}
#industries.band-navy .card-invert h3,
#industries.band-navy .card-invert p { color: var(--navy); }
#industries.band-navy .card-invert .btn-invert {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
}
#industries.band-navy .card-invert .btn-invert:hover { background: var(--navy-deep); }

#stories.band-navy .quote {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
#stories.band-navy .quote blockquote { color: rgba(255, 255, 255, 0.92); }
#stories.band-navy .quote figcaption { color: rgba(255, 255, 255, 0.74); }
#stories.band-navy .quote figcaption strong { color: #fff; }
#stories.band-navy .link-quiet { color: var(--cyan); }
#stories.band-navy .form-note { color: rgba(255, 255, 255, 0.72); }
.hero-light .lede { margin: 1.25rem 0 0; max-width: 44ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, 0.88); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }
.hero-light .hero-cta { justify-content: flex-start; }
.hero-trust {
  margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  justify-content: center; align-items: center;
  font-size: 0.82rem; font-weight: 700; color: var(--charcoal);
  font-family: var(--font-display); letter-spacing: 0.02em;
}
.hero-light .hero-trust { justify-content: flex-start; margin-top: 2.2rem; color: rgba(255, 255, 255, 0.92); }
.hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.dot-sky { background: var(--sky); }
.dot-gold { background: var(--gold); }

/* ---------------- INDUSTRY hero — center-justified, dark ----------------
   Jena, 2026-08-14: "For this page, I think a center justified header here
   makes sense and we could potentially bring in the darker background on
   this page type to give it some differentiation from our homepage." */
.hero-dark {
  position: relative;
  isolation: isolate;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  padding: clamp(3.5rem, 7vw, 5.75rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("photo-water-sampling.jpg") center 45% / cover no-repeat;
}
.hero-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 0, 72, 0.8) 0%, rgba(2, 0, 46, 0.9) 100%),
    radial-gradient(90% 70% at 50% 0%, rgba(53, 176, 237, 0.3) 0%, rgba(53, 176, 237, 0) 65%);
}
.hero-dark--team::before { background-image: url("photo-team.jpg"); }
.hero-dark h1 { color: #fff; max-width: 20ch; margin-inline: auto; font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.hero-dark .lede { color: rgba(255, 255, 255, 0.8); margin: 1.2rem auto 0; }
.hero-dark .hero-cta { justify-content: center; }

/* ---------------- SOLUTION hero — left header, framed image right -------
   Jena, 2026-08-14: "On these pages, I do think it makes sense to have the
   header left justified with an image right that is a stylized view of the
   product. We have these shapes we use in our brand guidelines that would
   work well as a frame I think." The shape files were not in the package;
   the frame below is a proposed approximation — see SOURCES.md. */
.hero-split {
  background: linear-gradient(150deg, var(--sky-wash) 0%, var(--surface) 62%);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.hero-split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-split h1 { font-size: clamp(2.05rem, 3.6vw, 3.1rem); }
.hero-split .hero-cta { justify-content: flex-start; margin-top: 1.75rem; }

/* PLACEHOLDER — CSS clip-path standing in for the real brand shape assets
   referenced in Jena's email (never supplied). When they arrive: drop the
   files in assets/brand/, swap the ::before/::after backgrounds below for
   background-image: url(...), and drop the clip-path lines. Layout doesn't
   change either way — .shape-frame img keeps its own position. */
.shape-frame { position: relative; isolation: isolate; padding: 1.1rem; }
.shape-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(140deg, var(--sky) 0%, var(--navy) 100%);
  clip-path: polygon(0 14%, 14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
  opacity: 0.16;
}
.shape-frame::after {
  content: ""; position: absolute; left: -20px; bottom: -20px; z-index: 0;
  width: 110px; height: 110px;
  background: var(--gold); opacity: 0.85;
  clip-path: polygon(0 18%, 18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
}
.shape-frame img {
  position: relative; z-index: 1;
  clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  box-shadow: var(--shadow);
}
.shape-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.9rem; }

/* Floating product state card over the framed image */
.product-chip {
  position: absolute; left: 1.4rem; bottom: 2.2rem; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 0.85rem 1rem;
  display: grid; gap: 0.45rem; max-width: 19rem;
}
.chip-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.chip-row strong { color: var(--accent-ink); font-family: var(--font-display); }

/* Compliance proof-point strip — sits between hero and coverage */
.trust-strip { background: var(--navy); padding: 0.9rem 0; }
.trust-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 2rem;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.88);
}
.trust-link {
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  color: var(--sky); text-decoration: none;
}
.trust-link:hover { color: #fff; }

/* coverage strip */
.coverage { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.map-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; text-align: center; }

/* ---------------- coverage map ----------------
   Real Albers-projected boundaries as static path data. Motion is a single
   west-to-east reveal that runs once and then stops: a procurement reader
   must be able to sit and read the map, and screenshot it, without anything
   still moving. Nothing here loops. */
.cv-plate {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center;
  background: linear-gradient(160deg, var(--sky-wash), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-sm); margin-top: 2rem;
}
.cv-figure { margin: 0; position: relative; }
.cv-map { width: 100%; height: auto; display: block; }

/* Three tiers, one ramp inside the brand sky. Statewide is the strongest
   claim HS GovTech make in prose, so it gets the strongest value. */
.cv-region {
  fill: var(--map-fill); stroke: var(--map-stroke); stroke-width: 1;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.cv-region.is-agencies { fill: var(--map-fill-agency); }
.cv-region.is-statewide { fill: var(--sky); }
.cv-inset { stroke-width: 1.1; }

/* Initial hidden state is applied only once the script has claimed the
   plate, so the map is fully visible when JS is off or still loading. */
.cv-plate.js-anim .cv-region {
  opacity: 0; transform: translateY(7px);
}
.cv-plate.js-anim.is-in .cv-region {
  opacity: 1; transform: none;
  /* The sweep delay rides on opacity and transform only. `fill` keeps its
     own short, undelayed transition so hover still answers instantly while
     the reveal is mid-flight. */
  transition:
    opacity 0.42s var(--ease) calc(var(--i) * 11ms),
    transform 0.52s var(--ease) calc(var(--i) * 11ms),
    fill 0.18s var(--ease);
}
.cv-region.is-hot { fill: #1d94d6; }
.cv-region.is-none.is-hot { fill: var(--map-fill-hot); }

.cv-inset-labels { pointer-events: none; }
.cv-inset-labels text {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; fill: var(--grey-2);
}
.cv-plate.js-anim .cv-inset-labels { opacity: 0; }
.cv-plate.js-anim.is-in .cv-inset-labels { opacity: 1; transition: opacity 0.4s var(--ease) 0.75s; }

.cv-rail { display: grid; gap: 1.15rem; align-content: center; }
.cv-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0.4rem 1.4rem; margin: 0; justify-content: start; }
.cv-stats dt {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  grid-row: 2;
}
.cv-stats dd {
  margin: 0; grid-row: 1; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--accent-ink);
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.cv-stats div { display: contents; }

.cv-legend { list-style: none; display: grid; gap: 0.5rem; }
.cv-legend li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.cv-key { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid var(--key-border); }
.cv-key-state { background: var(--sky); }
.cv-key-agency { background: var(--map-fill-agency); }
.cv-key-none { background: var(--map-fill); }

.cv-readout {
  border-top: 1px solid var(--line); padding-top: 0.9rem;
  display: grid; gap: 0.15rem; min-height: 3.1rem;
}
.cv-readout-name { font-family: var(--font-display); font-weight: 700; color: var(--accent-ink); font-size: 1rem; }
.cv-readout-state { font-size: 0.85rem; color: var(--muted); }

/* Printing never scrolls, so the reveal observer never fires and the map
   would come out blank. Print gets the finished state. */
@media print {
  .cv-plate.js-anim .cv-region,
  .cv-plate.js-anim .cv-inset-labels { opacity: 1; transform: none; }
  /* Print never reaches the delayed frame, so pin the hero to its first one. */
  .hero-media, .hero-frame-b, .hero-copy > * { animation: none !important; }
  .hero-frame-b { opacity: 0; }
  .hero-copy > * { opacity: 1; transform: none; }
  /* Paper is light whatever the screen was: the scheme switch is meaningless
     here, and the white wordmark would print as nothing. */
  .theme-toggle, .theme-toggle.js-ready { display: none; }
  .brand-logo-light { display: block; }
  .brand-logo-dark { display: none; }
}
.cv-provenance { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.cv-provenance .tag { display: inline-block; margin-right: 0.4rem; vertical-align: 1px; }

/* Named region list. The SVG is aria-hidden, so this is what a screen reader
   actually reads out. Kept in the accessibility tree, off-screen visually. */
.cv-sr, .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.logo-rail {
  display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.6rem;
}
.logo-chip {
  border: 1px dashed var(--grey-1); border-radius: 10px;
  padding: 0.6rem 1rem; font-family: var(--font-display); font-weight: 700;
  font-size: 0.8rem; color: var(--muted); background: var(--surface);
}

/* ---------------- cards / grids ---------------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  display: flex; flex-direction: column; gap: 0.7rem;
}
a.card { text-decoration: none; }
.card[hidden] { display: none; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky); }
.card p { font-size: 0.95rem; color: var(--muted); }
.card.center { text-align: center; justify-content: center; }
.card .more { margin-top: auto; padding-top: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: var(--accent-ink); }
.card .more::after { content: " →"; color: var(--coral); }

/* ---------------- blog archive + article ----------------
   The archive remains the existing card grid; these rules only add the
   linked-card and long-form states emitted by the build-time CMS renderer. */
.blog-card {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.blog-card-media {
  width: calc(100% + 3.2rem);
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -1.6rem -1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.blog-card .article-categories { margin-top: 0.2rem; }
.blog-card .article-meta { order: 3; }
.blog-card .more { order: 4; }
.article-hero,
.home .blog-post > .wrap {
  width: min(72ch, 100% - 3rem);
}
.article-meta,
.blog-post time {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.article-shell,
.blog-post {
  background: var(--surface);
  color: var(--ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.article-shell h1,
.blog-post h1 {
  max-width: 22ch;
  margin-top: 1rem;
  overflow-wrap: anywhere;
}
.article-image {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: cover;
  margin-top: 2rem;
  border-radius: var(--radius);
}
/* 5 Sep punch list item 12: no fixed 16:9 crop on the post hero; the full original shows at its own ratio. */
.blog-post-hero {
  width: 100%;
  margin: 2rem 0 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.blog-post-image {
  display: block;
  width: 100%;
  height: auto;
}
/* Restore the prior full-width, native-ratio resource artwork. The image itself
   fills the card width, so there is no crop, distortion, blur, or exposed bar. */
.card.res { min-width: 0; }
.media-fill {
  position: relative; display: block; overflow: hidden; flex: none;
  width: calc(100% + 3.2rem); margin: -1.6rem -1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.media-fill > .blog-card-media {
  position: relative; display: block; width: 100%; height: auto; max-width: none; margin: 0;
  aspect-ratio: auto; object-fit: contain; object-position: center; border: 0;
}
.article-body,
.blog-post-body {
  max-width: 72ch;
  margin-top: 2rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.article-body > * + *,
.blog-post-body > * + * { margin-top: 1.15em; }
.legal-table-scroll { max-width: 100%; overflow-x: auto; }
.legal-table-scroll:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.legal-table { width: 100%; min-width: 32rem; border-collapse: collapse; table-layout: fixed; }
.legal-table caption { text-align: left; font-weight: 700; margin-bottom: .5rem; }
.legal-table :is(th, td) { border: 1px solid var(--line); padding: .75rem; text-align: left; vertical-align: top; white-space: pre-line; overflow-wrap: anywhere; }
.legal-table th { background: var(--navy); color: white; }
.article-body :is(ul, ol),
.blog-post-body :is(ul, ol) { padding-inline-start: 1.4rem; }
.article-body a,
.blog-post-body a {
  color: var(--accent-ink);
  text-decoration-color: var(--sky);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.article-categories,
.blog-post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.blog-post-back {
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration-color: var(--sky);
  text-underline-offset: 0.2em;
}
.blog-share { max-width: 72ch; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.blog-share h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
.blog-share-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.blog-share-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--accent-ink); font: inherit; text-decoration: none; cursor: pointer; }
.blog-share-link:hover, .blog-share-link:focus-visible { border-color: var(--sky); text-decoration: underline; }
.blog-share-link[hidden] { display: none; }

/* ---------------- Executive Team content-length prototype ----------------
   Jena requested one conforming portrait treatment and two ways to reveal a
   biography. Initials are deliberately honest placeholders; the approved
   portraits can replace this layer without changing card geometry. */
.team-review { text-align: left; }
.team-review-intro {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.team-review-intro h2 { max-width: 14ch; text-wrap: balance; }
.team-review-intro .lede { margin-top: 1rem; max-width: 68ch; }
.team-review-note {
  background: var(--surface); color: var(--ink); border-radius: var(--radius);
  padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm);
}
.team-review-note strong { display: block; font-family: var(--font-display); color: var(--accent-ink); }
.team-review-note p { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.team-member { position: relative; min-width: 0; perspective: 1200px; }
.team-card-trigger {
  display: block; position: relative; width: 100%; min-height: 390px; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; overflow: hidden;
  transform-style: preserve-3d; transition: transform 0.45s var(--ease), box-shadow 0.2s var(--ease);
}
.team-card-trigger:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.team-card-trigger:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.team-card-front, .team-card-back {
  display: flex; flex-direction: column; min-height: 390px; width: 100%;
  backface-visibility: hidden; transition: transform 0.5s var(--ease);
}
.team-linkedin {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #0a66c2; background: #fff; border: 1px solid rgba(10, 102, 194, 0.35);
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.team-linkedin:hover { color: #fff; background: #0a66c2; border-color: #0a66c2; }
.team-linkedin:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.team-card-trigger[aria-expanded="true"] + .team-linkedin { opacity: 0; pointer-events: none; }
.team-card-front { padding-bottom: 1.2rem; }
.team-portrait {
  display: grid; place-items: end start; aspect-ratio: 4 / 3; width: 100%;
  padding: 1.1rem; color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: -0.02em;
  background-color: #173e65;
  background-image: url("avatar-placeholder.svg"), linear-gradient(145deg, #040048, #2479aa);
  background-repeat: no-repeat;
  background-position: center bottom, center;
  background-size: auto 92%, cover;
}
.team-portrait::after {
  content: "Placeholder portrait"; display: block; margin-left: auto; margin-bottom: 0.35rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.82;
}
.team-portrait-sky,
.team-portrait-coral,
.team-portrait-green,
.team-portrait-gold,
.team-portrait-navy { background-color: #173e65; }
.team-name, .team-back-name {
  display: block; padding: 1.05rem 1.1rem 0; font-family: var(--font-display);
  color: var(--accent-ink); font-weight: 800; font-size: 1.05rem; line-height: 1.2;
}
.team-title { display: block; padding: 0.3rem 1.1rem 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.team-action {
  display: block; margin-top: auto; padding: 1rem 3.4rem 0 1.1rem; color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 0.3em;
}
.team-card-back {
  display: none; position: absolute; inset: 0; padding: 0.35rem 0 1.2rem;
  background: var(--surface); transform: rotateY(180deg);
}
.team-bio-text { display: block; padding: 0.8rem 1.1rem 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.team-review[data-team-mode="flip"] .team-card-back { display: flex; }
.team-review[data-team-mode="flip"] .team-card-trigger[aria-expanded="true"] .team-card-front { transform: rotateY(-180deg); }
.team-review[data-team-mode="flip"] .team-card-trigger[aria-expanded="true"] .team-card-back { transform: rotateY(0); }
.team-source-note { max-width: 72ch; margin: 1.25rem 0 0; color: var(--muted); font-size: 0.78rem; }
.team-group-title {
  margin: clamp(2.4rem, 6vw, 4rem) 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line); color: var(--accent-ink); font-size: clamp(1.4rem, 3vw, 2rem);
}
.team-dialog {
  width: min(720px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
.team-dialog[open] { display: grid; grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1.45fr); }
.team-dialog::backdrop { background: rgba(2, 0, 46, 0.72); backdrop-filter: blur(5px); }
.team-dialog > div:last-child { padding: clamp(1.6rem, 4vw, 2.5rem); align-self: center; }
.team-dialog-portrait {
  display: grid; place-items: end start; min-height: 420px; padding: 1.5rem;
  background-color: #173e65;
  background-image: url("avatar-placeholder.svg"), linear-gradient(145deg, #040048, #2479aa);
  background-repeat: no-repeat; background-position: center bottom, center; background-size: auto 90%, cover;
  color: #fff; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
}
.team-dialog h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); color: var(--accent-ink); }
.team-dialog-title { margin-top: 0.35rem; color: var(--muted); font-weight: 650; }
.team-dialog-copy { margin-top: 1.2rem; line-height: 1.7; color: var(--ink); }
.team-dialog-measure { margin-top: 1rem; color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.team-dialog-close {
  position: absolute; right: 0.9rem; top: 0.9rem; z-index: 2; border: 1px solid var(--grey-1);
  border-radius: 999px; background: var(--surface); color: var(--accent-ink); padding: 0.48rem 0.75rem;
  font: 700 0.75rem var(--font-display); cursor: pointer;
}
.team-dialog-close:hover { border-color: var(--sky); background: var(--sky-wash); }

.icon-badge {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; flex: none;
  background: var(--sky-wash); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
}
.icon-badge-coral { background: var(--tint-coral); color: var(--coral-ink); }
.icon-badge-green { background: var(--tint-green); color: var(--ink-green); }
.icon-badge-gold { background: var(--tint-gold); color: var(--ink-gold); }

/* ---------------- resource hub filters ---------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--grey-1); background: var(--surface); color: var(--charcoal);
  cursor: pointer; transition: all 0.16s var(--ease);
}
.chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-count { margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); }

.tag {
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: 6px;
  background: var(--paper-2); color: var(--charcoal);
}
.tag-sky { background: var(--sky-wash); color: var(--ink-sky); }
.tag-coral { background: var(--tint-coral); color: var(--coral-ink); }
.tag-navy { background: var(--tint-navy); color: var(--accent-ink); }
.tag-green { background: var(--tint-green); color: var(--ink-green); }
.tag-gold { background: var(--tint-gold); color: var(--ink-gold); } /* PROPOSED flag — same gold as visual-direction.html's .flag */

/* ---------------- comparison table (industry pages) ---------------- */
.compare { width: 100%; border-collapse: collapse; margin-top: 1.75rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare th, .compare td { text-align: left; padding: 0.95rem 1.15rem; font-size: 0.95rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--navy); color: #fff; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { color: var(--muted); }
.compare td:last-child { color: var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------------- checklist ---------------- */
.checks { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.checks li { list-style: none; display: flex; gap: 0.75rem; align-items: flex-start; }
.checks .tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-solid); color: #fff; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 800; margin-top: 0.2rem;
}
.band-navy .checks .tick { background: var(--sky); color: var(--navy); }

/* ---------------- testimonials ---------------- */
.quote {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sky);
  border-radius: var(--radius); padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.quote blockquote { font-size: 1.02rem; color: var(--ink); }
.quote figcaption { font-size: 0.85rem; color: var(--muted); }
.quote figcaption strong { display: block; font-family: var(--font-display); color: var(--accent-ink); }

/* ---------------- demo form (bottom of every page, per IA) ---------------- */
.demo { background: var(--grad-band); color: #fff; }
.demo :is(h1, h2) { color: #fff; }
.demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.demo .lede { color: rgba(255, 255, 255, 0.8); }
.demo-points { margin-top: 1.75rem; display: grid; gap: 0.8rem; }
.demo-points li { list-style: none; display: flex; gap: 0.7rem; align-items: center; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }
.form-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-lg); color: var(--ink); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--charcoal); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  padding: 0.72rem 0.9rem; border: 1px solid var(--grey-1); border-radius: 10px; background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); outline: 3px solid rgba(53, 176, 237, 0.35); outline-offset: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; }
[data-concept-stub] .form-provider { display: none; }

/* ---------------- footer ---------------- */
.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.72); padding: 3.5rem 0 2rem; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.site-footer h2 { color: #fff; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer img { height: 26px; margin-bottom: 1rem; }
.footer-base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .brand { order: 1; }
  .site-header nav { grid-column: 1 / -1; order: 3; }
  .header-end { order: 2; justify-self: end; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid var(--grey-1);
    border-radius: 8px; padding: 0.5rem 0.8rem; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--accent-ink);
  }
  .nav {
    display: none; grid-column: 1 / -1; flex-direction: column; align-items: stretch;
    padding-top: 0.75rem; gap: 0;
    max-height: calc(100vh - 82px);
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.open { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; padding: 0.8rem 0.25rem; }
  /* Closed desktop dropdowns use visibility so they can animate. On the
     stacked menu they must leave layout entirely or their hidden boxes push
     About and Contact below the reachable viewport. */
  .dropdown { display: none; position: static; translate: none; box-shadow: none; border: 0; border-left: 2px solid var(--sky-wash); border-radius: 0; margin: 0 0 0.5rem 0.5rem; }
  .nav-link[aria-expanded="true"] + .dropdown { display: block; translate: none; }
  .header-ctas { display: none; }
  .nav-cta { display: block; margin-top: 0.5rem; padding: 0.75rem 0.25rem 0.5rem; border-top: 1px solid var(--line); }
  .nav-cta .btn { width: 100%; }
  .home .nav-cta .btn-sm { background: #fe434c; font-weight: 500; } /* same red as the Home header CTA (.home .header-ctas .btn-sm) */
  .coverage, .demo-grid, .hero-split .wrap { grid-template-columns: 1fr; }
  .cv-plate { grid-template-columns: 1fr; }
  .cv-rail { justify-items: start; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .article-hero,
  .home .blog-post > .wrap { width: min(72ch, 100% - 2rem); }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-flag { font-size: 0.55rem; padding: 0.35rem 3rem; right: -60px; top: auto; bottom: 20px; transform: rotate(-45deg); }
  .hero-light { min-height: 0; padding-top: clamp(3rem, 12vw, 4rem); }
  /* A narrow viewport crops both frames hard from the sides; pull the crop
     toward each subject so the hero is still a person, not a wall. */
  .hero-frame-a { object-position: 62% 26%; }
  .hero-frame-b { object-position: 62% 44%; }
  /* The copy now runs the full width, so the left-to-right gradient no longer
     sits under all of it. Go bottom-up instead and leave the top of the frame
     — where the subject's head is — clear. */
  .hero-light::after {
    background: linear-gradient(180deg, rgba(2, 0, 46, 0.34) 0%, rgba(2, 0, 46, 0.52) 30%, rgba(2, 0, 46, 0.86) 100%);
  }
  .hero-trust { font-size: 0.78rem; gap: 0.5rem 1rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .btn { white-space: normal; }
  .compare th, .compare td { font-size: 0.88rem; padding: 0.75rem 0.85rem; }
  .product-chip { position: static; margin-top: 0.9rem; max-width: none; }
  .team-review-intro, .team-grid { grid-template-columns: 1fr; }
  .team-review[data-team-mode="flip"] .team-card-trigger[aria-expanded="true"] { min-height: 500px; }
  .team-dialog[open] { grid-template-columns: 1fr; }
  .team-dialog-portrait { min-height: 150px; aspect-ratio: 2.6 / 1; }
}


/* ---------------- program marquee (Environmental Health page) ----------------
   Ports the mechanics from HS GovTech's reference file (dark-slate demo,
   6 rows, dup-content 50% translateX loop, hover-pause, edge fades) but
   re-skinned to the light concept palette instead of the reference's dark
   theme. See RATIONALE.md. */
/* Paper panel the marquee sits in. The section around it is white, so the
   panel supplies the ground the white chips and the edge fades read against. */
.marquee-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; margin-top: 2rem;
}
.marquee-viewport { position: relative; overflow: hidden; }
.marquee-viewport::before, .marquee-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none;
}
.marquee-viewport::before { left: 0; background: linear-gradient(to right, var(--paper) 0%, transparent 100%); }
.marquee-viewport::after { right: 0; background: linear-gradient(to left, var(--paper) 0%, transparent 100%); }
.marquee-rows { display: grid; gap: 0.65rem; padding: 0.5rem 0; }
.marquee-row-wrap { overflow: hidden; width: 100%; }
.marquee-row-track { display: flex; gap: 0.6rem; width: max-content; animation-name: marquee-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
.marquee-row-content { display: flex; gap: 0.6rem; }
/* Pause every row when the visitor hovers any part of the marquee */
.marquee-rows:hover .marquee-row-track { animation-play-state: paused; }
/* Explicit pause control. WCAG 2.2.2 needs a mechanism a keyboard or switch
   user can actually reach, and hover is not one. Hidden until site.js adds
   .js-ready, so the button never appears without its behavior. */
.marquee-rows.is-paused .marquee-row-track { animation-play-state: paused; }
.marquee-controls { display: none; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 1.5rem; }
.marquee-controls.js-ready { display: flex; }
.marquee-toggle {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  background: var(--surface); color: var(--accent-ink); border: 1px solid var(--grey-1);
  padding: 0.5rem 1.15rem; border-radius: 999px; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.marquee-toggle:hover { border-color: var(--accent-ink); background: var(--sky-wash); }
/* Pressed means paused. The fill is what tells a sighted visitor the second
   press resumes, since the button's own label has to stay stable for its
   accessible name. */
.marquee-toggle[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.marquee-toggle[aria-pressed="true"]:hover { background: #0b0472; }
.marquee-status { font-family: var(--font-display); font-size: 0.78rem; color: var(--muted); }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.prog-chip {
  background: var(--surface); color: var(--charcoal); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  padding: 0.5rem 1.05rem; border-radius: 999px; white-space: nowrap; flex: none;
  cursor: pointer; user-select: none; position: relative; line-height: 1.2; appearance: none;
  /* 5 Sep punch list item 7: spring hover from Adam's chip reference, re-skinned to brand */
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.prog-chip:hover, .prog-chip:focus-visible {
  transform: scale(1.18); background: var(--navy); border-color: var(--sky); color: #fff; z-index: 30;
  box-shadow: 0 0 0 1px var(--sky), 0 10px 25px -5px rgba(53, 176, 237, 0.45);
}
.prog-chip:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
#program-marquee .marquee-row-wrap { padding: 8px 0; margin: -8px 0; } /* room for the scaled chip's shadow inside the overflow clip; homepage agency marquee untouched */
.marquee-rows:focus-within .marquee-row-track { animation-play-state: paused; }
.prog-dialog {
  width: min(520px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  margin: auto; overflow-y: auto; overscroll-behavior: contain; /* the global margin reset zeroes the UA's auto-centering */
}
.prog-dialog[open] { display: flex; flex-direction: column; }
.prog-dialog .team-dialog-close { position: sticky; top: 0.75rem; align-self: flex-end; flex: none; margin: 0.75rem 0.75rem 0; }
.prog-dialog > div:last-child { min-width: 0; padding-top: 0.75rem; }
.prog-dialog :is(h2, .team-dialog-copy) { overflow-wrap: anywhere; }
.prog-dialog-cta { display: inline-block; max-width: 100%; margin-top: 1.4rem; white-space: normal; text-align: center; }
.marquee-fallback-note { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 1.25rem; display: none; }
/* Reduced motion: freeze the loop and show the (deduped) chips as a static wrapped grid */
@media (prefers-reduced-motion: reduce) {
  /* The global reset above zeroes transition-duration but not delay, so the
     64-step coverage sweep would still stagger for most of a second. */
  .cv-plate.js-anim .cv-region,
  .cv-plate.js-anim .cv-inset-labels { opacity: 1; transform: none; transition-delay: 0s !important; }
  /* The reset zeroes animation-duration but not animation-delay, and it does
     not stop an animation at all — an infinite cross-fade would strobe at
     0.01ms rather than settle. These have to be switched off outright. */
  .hero-media,
  .hero-frame-b,
  .hero-copy > * { animation: none !important; }
  .hero-media { transform: scale(1.03); }
  .hero-frame-b { opacity: 0; }
  .hero-copy > * { opacity: 1; transform: none; }
  .marquee-row-track { animation: none; width: 100%; flex-wrap: wrap; }
  #program-marquee .marquee-row-track { display: block; }
  #program-marquee .marquee-row-content:not([aria-hidden="true"]) {
    width: 100%; padding-inline: 1rem; flex-wrap: wrap; justify-content: center;
  }
  #program-marquee .prog-chip { max-width: 100%; white-space: normal; text-align: center; }
  #program-marquee .prog-chip:hover,
  #program-marquee .prog-chip:focus-visible { transform: none; }
  /* Nothing is moving, so a pause control would be a dead affordance. */
  .marquee-controls, .marquee-controls.js-ready { display: none; }
  .marquee-row-content[aria-hidden="true"] { display: none; }
  .marquee-viewport::before, .marquee-viewport::after { display: none; }
  .marquee-fallback-note { display: block; }
}

/* ==================================================================
   2026-08-31 — homepage brought onto HSGT_Home-Page_V5.jpg.
   Three blocks: the hero stats row, the full-bleed agency-name band
   that replaced the static "Agency seals" rail, and the bento
   platform grid. Every colour reads a role token, so the dark theme
   picks all of this up without a second selector. These are the
   client's approved mockup, confirmed on the 31 Aug standup — do not
   "simplify" them back out.
   ================================================================== */

/* ---------------- hero stats row ----------------
   Mockup: hairline rule under the CTAs, then three figures. Sits on
   the hero photograph, so the colours are white-alpha rather than
   tokens — the same exception .hero-trust already made. */
.hero-stats {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; flex-wrap: wrap; gap: 1.1rem 3rem;
  max-width: 33rem;
}
.hero-stats dt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1;
  letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-stats dd {
  margin: 0.45rem 0 0; max-width: 12ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.4;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.86);
}

/* ---------------- agency-name band ----------------
   Reuses the Environmental Health marquee mechanics wholesale — the
   duplicated row, the 50% translateX keyframes, hover pause, the
   .is-paused control, and the reduced-motion fallback are all defined
   above. Only the skin and the edge-fade colour change here.

   Band colour is sampled straight off HSGT_Home-Page_V5.jpg (#00b4f3, now the --cyan token),
   not var(--sky) (#35b0ed) — the mockup's strip is the more saturated
   cyan and it is a fixed brand band, so it does not follow the theme.

   Names stay NAVY, not the mockup's white. White on #00b4f3 measures
   2.38:1; this text is 11.8px uppercase, so AA wants 4.5:1. Navy on the
   same cyan is 8.1:1. Raised with the client as HSGT-62 — one-line flip
   to white if they accept the contrast. */
.marquee-band {
  --band: var(--cyan);
  padding: 0; overflow: hidden; position: relative;
  background: var(--band); color: var(--navy);
}
.marquee-band .marquee-rows { padding: 1.25rem 0; }
.marquee-band .marquee-viewport::before { background: linear-gradient(to right, var(--band) 0%, transparent 100%); }
.marquee-band .marquee-viewport::after { background: linear-gradient(to left, var(--band) 0%, transparent 100%); }
.agency-chip {
  display: inline-flex; align-items: center; gap: 1.5rem;
  white-space: nowrap; flex: none; user-select: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
  /* Keep long labels at the same size when mobile browsers inflate text. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Separator dot, drawn rather than typed, so it never reads out. */
.agency-chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.75; flex: none;
}
/* The mockup's strip is one thin line with no control row under it, so the
   WCAG 2.2.2 pause mechanism rides inside the band at the right edge, where
   the existing fade already clears the names. It stays a real visible
   control — 2.2.2 wants it discoverable, not hidden. */
.marquee-controls-band {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 2;
  margin: 0; gap: 0.5rem; padding: 0 1rem 0 2.5rem;
  display: flex; align-items: center;
  background: linear-gradient(to left, var(--band) 65%, transparent 100%);
}
.marquee-controls-band .marquee-toggle {
  background: rgba(255, 255, 255, 0.92); color: var(--navy); border-color: rgba(4, 0, 72, 0.25);
  font-size: 0.72rem; padding: 0.25rem 0.75rem;
}
.marquee-controls-band .marquee-toggle:hover { background: #fff; border-color: var(--navy); }
/* Status text is for screen readers; on this strip it would crowd the names. */
.marquee-controls-band .marquee-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- bento platform grid ----------------
   Mockup layout is a 3x3: seven solutions, the HS CloudSuite device
   shot holding the centre cell, and the demo call to action bottom
   right. Source order alone lands every cell where the mockup puts
   it, so there is no explicit grid placement to keep in sync. */
.bento {
  margin-top: 2.75rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.bento-cell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
a.bento-cell:hover, a.bento-cell:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky); }
.bento-cell h3 { font-size: 1.05rem; letter-spacing: -0.02em; }
.bento-cell p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.bento-cell .more {
  margin-top: auto; padding-top: 0.8rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  color: var(--accent-ink);
}
.bento-cell .more::after { content: " →"; color: var(--coral); }

/* Icon tiles. Drawn SVG on a tint of the brand colour it belongs to;
   every ink token here is one of the AA-safe pairs declared at the
   top of this file. */
.bento-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.4rem;
  display: grid; place-items: center; flex: none;
  background: var(--tint-navy); color: var(--accent-ink);
}
.bento-icon svg { width: 22px; height: 22px; display: block; }
.bento-icon.tint-navy { background: var(--tint-navy); color: var(--accent-ink); }
.bento-icon.tint-sky { background: var(--sky-wash); color: var(--ink-sky); }
.bento-icon.tint-coral { background: var(--tint-coral); color: var(--coral-ink); }
.bento-icon.tint-gold { background: var(--tint-gold); color: var(--ink-gold); }
.bento-icon.tint-green { background: var(--tint-green); color: var(--ink-green); }

.bento-showcase {
  background: var(--paper); align-items: center; justify-content: center;
  text-align: center; gap: 0.3rem; overflow: hidden;
}
.bento-showcase-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.025em; color: var(--accent-ink);
}
.bento-showcase img {
  width: 100%; max-width: 320px; height: auto; margin-top: 1rem;
  filter: drop-shadow(var(--shadow-lg));
}

.bento-cta { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.bento-cta h3 { color: var(--navy); }
.bento-cta p { color: rgba(4, 0, 72, 0.8); }
.bento-cta .more, .bento-cta .more::after { color: var(--navy); }
a.bento-cta:hover, a.bento-cta:focus-visible { border-color: var(--navy); }

.hl-sky { color: var(--sky); } /* 5 Sep punch list items 10/16: Catalog-exact #35b0ed (2.6:1 on white, decorative headline accent) */
.text-color-navy { color: var(--navy); }
.text-color-sky { color: var(--sky); }
.text-color-coral { color: var(--coral); }
.text-color-green { color: var(--green); }
.text-color-gold { color: var(--gold); }
.text-color-charcoal { color: var(--charcoal); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .hero-stats { gap: 1rem 2rem; padding-top: 1.1rem; margin-top: 1.8rem; }
  .hero-stats dd { max-width: 14ch; }
}

/* ==================================================================
   2026-08-31 (second pass) — Inspections page brought onto
   HSGT_Inspections-Page_V5.jpg. The demo-band change at the bottom of
   this block is deliberately shared: BOTH V5 mockups draw that block
   as a sky panel inset in the white page, not the navy full bleed it
   had been, so it is fixed once here rather than per page.
   ================================================================== */

/* ---------------- navy bands, mockup glow ----------------
   Both navy bands on the mockup carry a brighter blue bloom rising
   from the bottom edge. Later in the file than .band-navy, so it wins
   on the background and inherits everything else. */
.band-glow {
  background:
    radial-gradient(120% 130% at 50% 135%, #0d47c0 0%, rgba(13, 71, 192, 0) 62%),
    var(--navy);
}
.band-glow h2 { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.band-glow .lede { margin: 1.25rem auto 0; max-width: 74ch; }

/* ---------------- What it does: one colour square per card ----------------
   The mockup drops the numbered badges for a small colour chip. The
   number carried nothing the heading did not already carry. */
.card-sq { width: 14px; height: 14px; border-radius: 3px; background: var(--sky); flex: none; }
.card-sq-gold { background: var(--gold); }
.card-sq-green { background: var(--green); }
.card-sq-grey { background: var(--grey-2); }
.card-sq-coral { background: var(--coral); }
.card-sq-navy { background: var(--navy); }

/* ---------------- Why it matters tiles ---------------- */
.why-grid { margin-top: 2.5rem; }
.why-tile {
  list-style: none; text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius); padding: 1.75rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.why-tile .tick {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--green); color: var(--navy);
  font-size: 0.95rem; font-weight: 700;
}
.why-tile p {
  margin: 0; color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.98rem; line-height: 1.4;
}

/* ---------------- demo band: sky panel, not a navy full bleed ----------------
   Shared change — see the header of this block. The eyebrow that used
   to sit above the heading was removed from the markup; it is not on
   either mockup and sky-on-sky would have been invisible here. */
.demo { background: var(--page); color: var(--navy); }
.demo .demo-grid {
  background: var(--sky); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.demo :is(h1, h2) { color: var(--navy); max-width: 16ch; }
.demo .lede { color: rgba(4, 0, 72, 0.82); }
.demo-points li { color: rgba(4, 0, 72, 0.9); }
.demo .dot-sky { background: var(--navy); }

/* ==================================================================
   2026-08-31 (third pass) — the two sections Ray flagged against the
   IA document and HSGT_Home-Page_V5.jpg: "Who we serve" and
   "Powered by HS CloudSuite". Appended rather than edited in place so
   the earlier passes above stay readable as history.
   ================================================================== */

/* Who we serve. The mockup's industry cards carry no letter badge and
   no lead paragraph — the IA table's three bullets and nothing else. */
#industries .checks { margin-top: 1.15rem; }
#industries .card .more { padding-top: 1.15rem; }

/* Bento. The mockup is a twelve-column collage, not the uniform 3x3
   this grid used to be: 4/5/3, 3/6/3, 4/4/4. */
.bento { grid-template-columns: repeat(12, 1fr); }
.bento-w3 { grid-column: span 3; }
.bento-w4 { grid-column: span 4; }
.bento-w5 { grid-column: span 5; }
.bento-w6 { grid-column: span 6; }

/* Solid icon tiles, white glyphs. Every value below was sampled off
   HSGT_Home-Page_V5.jpg, not chosen. */
.bento-icon, .bento-cta .bento-icon { color: #fff; }
.bi-navy { background: #04004c; }
.bi-sky { background: var(--cyan); }
.bi-coral { background: #fe434c; }
.bi-gold { background: #eebb3c; }
.bi-grey { background: #a5a3b0; }
.bi-charcoal { background: #383749; }
.bi-green { background: #42be88; }

/* Wide cells set the tile beside the title, the way the mockup does. */
.bento-row {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1rem; row-gap: 0.1rem; align-content: center;
}
.bento-row .bento-icon { grid-row: 1 / span 2; margin-bottom: 0; align-self: center; }
.bento-row .more { margin-top: 0; padding-top: 0.3rem; }

/* The two narrow right-hand cells are centred in the mockup. */
.bento-center { align-items: center; text-align: center; justify-content: center; }
.bento-center .more { margin-top: 0.35rem; padding-top: 0.5rem; }

/* Centre cell: mark, name and link on the left, the client's own device
   shot on the right. That image is assets/photos/client/device-cloudsuite.png,
   from their 17 Aug "UI Images" delivery — not the reused platform-mockup.png
   that five solution pages share. */
.bento-showcase {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 1.25rem; text-align: left; padding: 1.25rem 1.4rem;
}
.bento-showcase-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.3rem; flex: none; max-width: 13rem;
}
.bento-showcase-mark { width: 54px; height: auto; }
.bento-showcase-copy .more { margin-top: 0.15rem; padding-top: 0; text-decoration: none; }
.bento-showcase-device {
  width: auto; max-width: none; min-width: 0; margin-top: 0;
  flex: 1 1 auto; height: auto; align-self: center;
  filter: drop-shadow(var(--shadow-lg));
}

/* The CTA cell is the mockup's cyan, and keeps navy copy for the same
   contrast reason as the agency strip — see HSGT-62. */
.bento-cta { background: var(--cyan); border-color: var(--cyan); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-w3, .bento-w4, .bento-w5 { grid-column: span 3; }
  .bento-w6 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-w3, .bento-w4, .bento-w5, .bento-w6 { grid-column: span 1; }
  .bento-showcase { flex-direction: column; text-align: center; }
  .bento-showcase-copy { align-items: center; max-width: none; }
  .bento-showcase-device { width: 100%; }
}

/* --- third-pass corrections, same day -----------------------------
   The earlier `.bento-showcase img` rule outranks a bare class, so the
   mark and the device shot need the parent in the selector. Cells size
   to their own content the way the mockup's do, and the call to action
   keeps the mockup's navy tile rather than the washed one it inherited. */
.bento { align-items: start; }
.bento-showcase { align-items: center; }
.bento-showcase .bento-showcase-mark {
  width: 52px; max-width: 52px; height: auto; margin-top: 0; filter: none;
}
.bento-showcase .bento-showcase-device {
  width: auto; max-width: 100%; max-height: 190px; height: auto; margin-top: 0;
  object-fit: contain; flex: 1 1 auto; min-width: 0;
}

/* Dark theme: the navy and charcoal tiles sit on a navy card, so they need an
   edge to stay legible. Colours themselves stay true to the mockup. */
[data-theme="dark"] .bento-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
[data-theme="dark"] .bento-cta .bento-icon { box-shadow: none; }

/* --- icon tiles are the client's own SVG artwork ------------------
   2026-09-02: the eight tiles are Adam's vector files from the Drive
   folder "Images, Graphics & Mock Ups/Home Page" (assets/photos/client/
   solution-icons/*.svg), replacing the PNG crops taken off the mockup.
   Each SVG draws its own tile (sharp top-left and bottom-right corners,
   rounded top-right and bottom-left) plus the white glyph, so the wrapper
   paints nothing, clips nothing and rounds nothing. The .bi-* colour rules
   above are kept only as the documented sample of what the mockup uses. */
.bento-icon {
  background: transparent; padding: 0; overflow: visible; border-radius: 0;
  box-shadow: none;
}
.bento-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
[data-theme="dark"] .bento-icon { box-shadow: none; }

/* ==================================================================
   2026-08-31 (fourth pass) — mobile.

   Ray: "optimize it for viewing on a mobile phone… no need to deal with
   the regular website page." Every rule below is inside a max-width
   query, so nothing here can reach the desktop layout.

   Measured before writing any of it, at 390px across all 27 published
   pages: 0 pages overflowed horizontally, but 189 tap targets were under
   44px, 161 text runs were under 13px, the hero crop put the headline
   over the subject's face, the consent bar covered about 40% of the
   screen, and the platform bento collapsed into a ragged mix of 97px and
   171px cells.
   ================================================================== */

@media (max-width: 720px) {

  /* ---- tap targets. 44px is the floor; nothing standalone sits under it.
     Inline links inside prose are deliberately exempt — enlarging those
     breaks the line box they live in. */
  .theme-toggle { width: 44px; height: 44px; }
  .nav-toggle { min-height: 44px; padding: 0.6rem 0.95rem; }
  .header-login { min-height: 44px; display: inline-flex; align-items: center; }
  .brand { min-height: 44px; }
  .brand img { height: 32px; }
  .btn-sm { padding: 0.72rem 1.15rem; }
  .marquee-toggle { min-height: 44px; padding: 0.5rem 0.95rem; }
  .team-linkedin { width: 44px; height: 44px; }
  .chip { min-height: 44px; }
  .campaign a { display: inline-block; padding: 0.5rem 0; }
  .link-quiet, .back, a.back { display: inline-flex; align-items: center; min-height: 44px; }

  /* Standalone "read more" style links get a real tap box. They are the
     only navigation out of most cards, so they cannot stay 18px tall. */
  .card .more, .bento-cell .more, .more, .back, .trust-link,
  .bento-showcase-copy .more {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* ---- type. Nothing readable drops below 13px on a phone. The
     concept watermark is exempt: it is a Lova stamp, not client copy. */
  .eyebrow { font-size: 0.82rem; }
  .tag { font-size: 0.82rem; }
  label { font-size: 0.875rem; }
  .form-note, .shape-note, .cv-provenance { font-size: 0.82rem; }
  h4 { font-size: 0.95rem; }
  th, td { font-size: 0.9rem; }
  .hero-stats dd { font-size: 0.82rem; line-height: 1.35; }
  .hero-stats dt { font-size: 1.45rem; }
  .team-action, .team-bio-text { font-size: 0.86rem; }
  .chip-row { font-size: 0.86rem; }
  .footer a, .footer li, .footer p { font-size: 0.9rem; }
  /* The rules above are the general case; these specific ones outrank them
     in the cascade and were still landing under 13px when measured. */
  .site-footer h2 { font-size: 0.82rem; }
  .site-footer small, .footer-base span { font-size: 0.82rem; }
  .field label { font-size: 0.875rem; }
  .compare thead th { font-size: 0.82rem; }
  .agency-chip { font-size: 0.82rem; }
  .marquee-status, .marquee-toggle,
  .marquee-controls-band .marquee-toggle,
  .marquee-controls-band .marquee-status { font-size: 0.82rem; }
  #coverage dt, .cv-plate dt { font-size: 0.82rem; }
  .map-note, .team-source-note, .stack-note, .src, .use, .hex,
  .cv-provenance em, .quote figcaption { font-size: 0.82rem; }
  .hex, .use, .stack-note, .team-dialog-close { font-size: 0.82rem; }

  /* ---- hero. The single still is cropped at 62% on a phone, which put
     the subject's face directly under the headline. Pull the crop right
     so she sits clear of the copy, and carry a real scrim rather than the
     desktop's directional one — on a full-width column there is no clear
     side for the gradient to fade toward. */
  .hero-frame-a { object-position: 76% 32%; }
  .hero-light::after {
    background: linear-gradient(180deg,
      rgba(2, 0, 46, 0.60) 0%,
      rgba(2, 0, 46, 0.66) 34%,
      rgba(2, 0, 46, 0.88) 100%);
  }
  .hero-light h1 { max-width: none; font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero-light .lede { max-width: none; }
  .hero-stats { gap: 0.9rem 1.4rem; }

  /* ---- platform bento. On one column the mockup's collage has nothing
     to say, so every cell takes the same horizontal shape: tile on the
     left, title and link on the right. Ragged 97/171px cells become one
     even list. */
  .bento-cell.bento-center,
  .bento-cell.bento-w3 {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 1rem; row-gap: 0.1rem; align-content: center;
    text-align: left; align-items: start; justify-content: start;
  }
  .bento-cell.bento-center .bento-icon,
  .bento-cell.bento-w3 .bento-icon { grid-row: 1 / span 2; margin-bottom: 0; align-self: center; }
  .bento-cell.bento-center .more,
  .bento-cell.bento-w3 .more { margin-top: 0; padding-top: 0.3rem; }
  .bento-showcase { padding: 1.4rem 1.25rem 1.6rem; gap: 1rem; }
  .bento-showcase-device { width: 100%; max-height: none; }

  /* ---- forms. Anything under 16px makes iOS zoom the viewport on focus,
     which then leaves the page scrolled sideways. */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 7rem; }
  select { background-position: right 0.9rem center; }
}

@media (max-width: 480px) {
  /* Two stats fit a 390px row; three do not without hyphenating the labels. */
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta { gap: 0.6rem; }
}


/* ==================================================================
   2026-09-01 — Home page brought onto Adam's section-by-section
   discrepancy list (email, 1 Sep 4:40pm CT) against HSGT_Home-Page_V5.jpg.
   Scoped to body.home so no other page changes.
   ================================================================== */

/* hero: deep-blue mesh left, cropped subject right, overlapping */
.home .hero-light {
  /* Mesh fitted numerically to HSGT_Home-Page_V5.jpg (2 Sep: least squares over the
     mockup's mesh pixels, mean error 1.2/255 per channel). Base navy plus two
     linear-falloff ellipses: the bottom-left glow and the one behind the subject's
     head. The two percentages are the ellipse radii, per the CSS syntax. */
  background:
    radial-gradient(44.4% 37.6% at -11.7% 96.6%, #008ace 0%, rgba(0, 138, 206, 0) 100%),
    radial-gradient(34.2% 82.8% at 76.6% 7.6%, #0264ac 0%, rgba(2, 100, 172, 0) 100%),
    #04004c;
  /* HSGT_Home-Page_V5.jpg: hero is 1920x950 (rows 117-1067), so the composition scales with width.
     Top-aligned (the shared hero centres its content) so the copy sits where the padding puts it. */
  min-height: 49.5vw; padding: 0; align-content: start;
}
.home .hero-media { inset: 0; animation: none; }
/* Adam's hero figure (Home-Page-Hero Image.png, 1011x949, subject cut out, transparent to the
   left): full hero height, left edge at 47.29vw (908px of 1920, template-matched in
   HSGT_Home-Page.jpg), right edge on the viewport edge. vw, not %, so the scrollbar does
   not shift it. */
.home .hero-frame-a { inset: 0 auto 0 47.29vw; width: auto; max-width: none; object-fit: fill; object-position: 0 0; }
.home .hero-light::after { display: none; }
.home .hero-cta .btn { padding: 0.62rem 1.6rem; font-size: 0.9rem; font-weight: 500; }
.home .btn-primary { background: #fe434c; box-shadow: none; }
.home .btn-primary:hover { background: #e63a42; }
.btn-white { background: #fff; color: var(--navy); border-color: #fff; }
.btn-white:hover { background: #eef4fa; }

/* ==================================================================
   Revision 1 desktop benchmark (HS GovTech, 16 Sep 2026)
   Preserve the approved visual system; these rules only implement the
   client's desktop corrections and referenced component treatments.
   ================================================================== */
@media (min-width: 1001px) {
  /* Sitewide type and spacing consistency. */
  .dropdown a,
  .dropdown .eyebrow,
  .nav-link,
  .header-login,
  .header-ctas .btn { font-size: 0.93rem; color: var(--charcoal); }
  section { padding-block: clamp(3.5rem, 5vw, 5rem); }
  .footer-grid > div:first-child > img {
    width: auto; height: 32px; max-width: 210px; object-fit: contain;
    transform: none; image-rendering: auto;
  }

  /* A white secondary CTA needs an edge on light hero grounds. */
  .hero-split .btn-white { border-color: rgba(4, 0, 72, 0.28); }

  /* Industry template: centered introduction, compact rhythm, and the
     supplied Legacy systems / Modern solutions comparison treatment. */
  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > h2,
  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > .lede {
    text-align: center; margin-inline: auto;
  }
  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > .lede { max-width: 76ch; }
  .page-industry [data-cms-if="howTheyWork.heading"],
  .page-industry [data-cms-if="whyChoose.heading"],
  .page-industry [data-cms-if="programs.heading"] { padding-block: clamp(3rem, 4vw, 4.25rem); }
  .page-industry [data-cms-if="whyChoose.heading"] .why-grid { margin-top: 1.75rem; }
  .page-industry [data-cms-if="programs.heading"] .center + #program-marquee,
  .page-industry #program-marquee { margin-top: 2rem !important; }
  .page-industry [data-cms-if="programs.heading"] + .demo { margin-top: 0; }

  .page-industry .table-scroll { overflow: visible; margin-top: 2rem; }
  .page-industry .compare {
    table-layout: fixed; border-collapse: separate; border-spacing: 0;
    margin-top: 0; box-shadow: none; overflow: visible; background: transparent;
  }
  .page-industry .compare thead th {
    padding: 1rem 1.5rem; border: 0; text-align: center;
    font-size: 0.92rem; letter-spacing: 0; text-transform: none;
  }
  .page-industry .compare thead th:first-child {
    border-radius: 14px 0 0 0; background: #f7dede; color: #8f2d34;
  }
  .page-industry .compare thead th:last-child {
    border-radius: 0 14px 0 0; background: #d9eef9; color: var(--navy);
  }
  .page-industry .compare tbody { position: relative; }
  .page-industry .compare tbody::after {
    content: ""; position: absolute; inset-block: 0; left: 50%; width: 1px;
    background: var(--line); transform: translateX(-0.5px); pointer-events: none;
  }
  .page-industry .compare td {
    position: relative; width: 50%; padding: 1.25rem 3.4rem;
    border: 0; border-bottom: 1px solid var(--line); text-align: center;
    vertical-align: middle; background: var(--surface); color: var(--ink);
  }
  .page-industry .compare td:first-child { color: var(--muted); }
  .page-industry .compare td:first-child::after {
    content: "↔"; position: absolute; z-index: 1; right: -1rem; top: 50%;
    width: 2rem; height: 2rem; display: grid; place-items: center;
    transform: translateY(-50%); border: 1px solid var(--line);
    border-radius: 5px; background: var(--surface); color: var(--navy);
    font: 700 0.95rem var(--font-display);
  }
  .page-industry .compare tbody tr:last-child td:first-child { border-radius: 0 0 0 14px; }
  .page-industry .compare tbody tr:last-child td:last-child { border-radius: 0 0 14px 0; }

  /* Program dialog: the client's integrated content-card treatment. */
  .page-industry .prog-dialog {
    width: min(660px, calc(100% - 3rem)); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 28px 70px rgba(4, 0, 72, 0.22);
  }
  .page-industry .prog-dialog::backdrop { background: rgba(4, 0, 72, 0.34); backdrop-filter: blur(2px); }
  .page-industry .prog-dialog > div:last-child { padding: 0 3.25rem 3.25rem; text-align: center; }
  .page-industry .prog-dialog h2 { font-size: clamp(2rem, 3vw, 3rem); color: var(--navy); }
  .page-industry .prog-dialog .team-dialog-copy { max-width: 52ch; margin: 1rem auto 0; color: var(--muted); }
  .page-industry .prog-dialog-cta {
    padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--navy);
    box-shadow: none; text-decoration: underline; text-decoration-color: var(--coral);
    text-underline-offset: 0.3em;
  }
  .page-industry .prog-dialog-cta:hover { transform: none; background: transparent; color: var(--accent-ink); }

  /* Resource cards reserve one consistent artwork box. */
  .page-resources .card.res .media-fill { aspect-ratio: 16 / 9; background: var(--paper); }
  .page-resources .card.res .media-fill > .blog-card-media {
    width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  }

  /* Story and mission: alternating image/editorial bands from the updated IA. */
  .story-media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; text-align: left; }
  .story-media-row--reverse > .story-media { order: -1; }
  .story-media-row .lede { max-width: 62ch; }
  .story-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  .band-navy .story-media { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }

  /* How It Works: three equal panels, then a full-width blue panel exactly
     aligned to their combined width, matching the supplied reference. */
  .implementation-difference__intro { max-width: 76ch; margin-inline: auto; }
  .implementation-panels { margin-top: 2.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .implementation-panel {
    position: relative; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left;
  }
  .implementation-panel::before {
    content: ""; position: absolute; top: -0.55rem; left: 1.75rem;
    width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--sky);
  }
  .implementation-panel:nth-child(2)::before { background: var(--gold); }
  .implementation-panel:nth-child(3)::before { background: var(--green); }
  .implementation-panel h3 { color: var(--navy); }
  .implementation-panel p { margin-top: 0.75rem; color: var(--muted); }
  .implementation-closing {
    margin-top: 1rem; padding: 2rem 2.25rem; border-radius: 10px;
    background: var(--sky); color: var(--navy); text-align: center; max-width: none;
  }
  .page-how-it-works #roadmap .tag { background: var(--green); color: var(--navy); }
  .page-how-it-works #training .why-tile { align-items: center; text-align: center; }
  .page-how-it-works #training { padding-bottom: 3rem; }
  .page-how-it-works #training + .demo { padding-top: 3rem; }

  /* Customer support bullets follow the same navy 2x2 panel benchmark. */
  .page-customer-support #support-commitment .implementation-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-customer-support .support-benefits .why-tile {
    min-height: 190px; align-items: flex-start; justify-content: flex-start;
    text-align: left; padding: 2rem;
  }
  .page-customer-support .support-benefits .why-tile .tick { align-self: flex-start; }
  .page-customer-support .support-model-card { position: relative; padding-top: 2.15rem; }
  .page-customer-support .support-model-card .card-sq { position: absolute; top: -0.48rem; left: 1.6rem; }

  /* Contact Us: full-width dark gradient with white copy and white form card. */
  .page-contact #demo,
  .page-contact #contact-form {
    background: var(--grad-mesh); color: #fff;
  }
  .page-contact #demo .demo-grid,
  .page-contact #contact-form .demo-grid {
    background: transparent; padding-block: clamp(2rem, 4vw, 3.5rem);
  }
  .page-contact #demo :is(h1, h2),
  .page-contact #contact-form :is(h1, h2) { color: #fff; }
  .page-contact #demo .lede,
  .page-contact #contact-form .lede { color: rgba(255,255,255,0.82); }

  /* Home CloudSuite centre tile and hover contrast. */
  #industries .bento-cta:hover,
  #industries .bento-cta:focus-visible,
  #industries .card:hover { color: var(--navy); }
  .bento-showcase { min-height: 100%; justify-content: center; }
  .bento-showcase-copy { justify-content: center; }
  .bento-showcase-name { color: var(--navy); }
  .bento-showcase .bento-showcase-device { max-height: 230px; object-position: center; }

  /* Optional CMS ledes on every solution template. */
  .solution-section-lede { margin: 1rem auto 0; text-align: center; max-width: 72ch; }
}

.hero-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-background > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.hero-light:has(.hero-background) { background: transparent; }
.home .hero-stats { margin-top: 3rem; padding-top: 2rem; border-top-color: rgba(255, 255, 255, 0.45); max-width: 42rem; gap: 1rem 2.6rem; }
.home .hero-stats dt { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.home .hero-stats dd { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: #fff; }
.home .hero-light .lede { color: #fff; }

/* coverage: edge-to-edge zoomed US map, no header, single callout */
.home #coverage { padding: 0; background: #fff; }
.home #coverage .wrap { width: 100%; }
.home #coverage .cv-plate {
  display: block; background: none; border: 0; border-radius: 0;
  padding: 0; margin: 0; box-shadow: none;
}
.home .cv-figure { position: relative; }
.home .cv-region { fill: #c4d3da; stroke: #fff; stroke-width: 1.2; }
.home .cv-region.is-agencies, .home .cv-region.is-statewide { fill: var(--cyan); }
.home .cv-region.is-hot { fill: #0aa0dc; }
.home .cv-region.is-none.is-hot { fill: #c9ccd3; }
.home .cv-region[data-code="US-AK"] { display: none; }
.home .cv-inset-labels text {
  fill: var(--navy); text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 15px;
}
.home .cv-callout {
  position: absolute; left: 7.5%; top: 24%; z-index: 2;
  background: #fff; border: 1px solid #e3e6ec; border-radius: 8px;
  box-shadow: 0 6px 20px -12px rgba(4, 0, 72, 0.3);
  padding: 1.35rem 1.6rem 1.4rem; max-width: 16rem;
}
.home .cv-callout::before {
  content: ""; display: block; width: 20px; height: 20px;
  background: var(--cyan); margin-bottom: 0.9rem;
}
.home .cv-callout strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--cyan);
  margin-bottom: 0.45rem;
}
.home .cv-callout span { display: block; font-size: 1.1rem; line-height: 1.35; color: var(--navy); }

/* client ticker: white on cyan */
.home .marquee-band, .home .agency-chip { color: #fff; }

/* "Your work matters" + industry cards: one gradient-mesh band */
.home .band-mesh {
  background:
    radial-gradient(70% 90% at 100% 100%, #0d47c0 0%, rgba(13, 71, 192, 0) 60%),
    radial-gradient(45% 60% at 0% 90%, #0a2f9a 0%, rgba(10, 47, 154, 0) 55%),
    #04004c;
}
.home #why-us { padding-bottom: 0; }
.home #why-us h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.home #industries { padding-top: 2.75rem; }
.home #industries .card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(160, 190, 255, 0.35);
  border-radius: 12px; padding: 1.7rem 1.8rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.12), 0 0 40px -12px rgba(0, 180, 243, 0.35);
}
.home #industries .card:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(160, 190, 255, 0.6); }
.home #industries .card h3 { font-size: 1.3rem; }
.home #industries .checks { gap: 1rem; }
.home #industries .checks li { font-size: 1.05rem; color: #fff; }
.home #industries .checks .tick { background: url("brand/checkmark-green-circle.svg") center / 100% 100% no-repeat; color: transparent; width: 24px; height: 24px; margin-top: 0.15rem; } /* Adam's Checkmark-Green Circle.svg */
.home #industries .card .more, .home #industries .card .more::after { color: #fff; }
.home #industries .card .more { font-size: 0.78rem; }
.home #industries .card-invert { border-radius: 0 12px 0 12px; background: var(--cyan); border-color: var(--cyan); backdrop-filter: none; box-shadow: none; }
.home #industries .card-invert h3, .home #industries .card-invert p { color: var(--navy); }
.home #industries .card-invert p { font-size: 1.05rem; }
.home #industries .card-invert .btn-invert {
  background: rgba(255, 255, 255, 0.8); color: var(--navy); border: 1px solid #fff;
  font-weight: 500; font-size: 0.82rem;
}
.home #industries .card-invert .btn-invert:hover { background: #fff; }

/* platform bento: grey borders, taller centre card, stacked right column */
.home #cloudsuite h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.home #cloudsuite .hl-sky { color: var(--cyan); }
.home .bento { align-items: stretch; margin-top: 3rem; }
.home .bento-cell { border: 1px solid #d5d9e2; box-shadow: 0 8px 24px -18px rgba(4, 0, 72, 0.3); border-radius: 12px; }
.home .bento-cell h3 { color: var(--navy); }
.home .bento-cell .more { color: var(--navy); font-size: 0.8rem; }
.home .bento-stack { grid-column: span 3; grid-row: 1 / span 2; display: grid; grid-template-rows: 1.45fr 1fr; gap: 1rem; }
.home .bento-showcase { min-height: 300px; padding: 1.5rem 1.6rem; background: #fff; }
.home .bento-showcase .bento-showcase-device { max-height: 250px; }
.home .bento-cta { background: var(--cyan); border-color: var(--cyan); border-radius: 0 12px 0 12px; }

/* partner stories: centred heading, one-card carousel, mesh band */
.home #stories { text-align: center; }
.home #stories.band-navy {
  background:
    radial-gradient(60% 80% at 100% 100%, #0d47c0 0%, rgba(13, 71, 192, 0) 60%),
    radial-gradient(45% 60% at 0% 100%, #0a2f9a 0%, rgba(10, 47, 154, 0) 55%),
    #04004c;
}
.home #stories h2 { text-align: center; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.home .story-carousel {
  /* mockup: 1285px card centred in the 1630px container, arrows at the container edges */
  max-width: none; margin: 4.2vw auto 0;
  display: grid; grid-template-columns: 3.1vw minmax(0, 66.9vw) 3.1vw; justify-content: space-between; gap: 0; align-items: center;
}
.home .story-btn {
  width: 3.1vw; height: 3.1vw; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08);
  color: #fff; display: grid; place-items: center; font-size: 1rem;
}
.home .story-btn:hover { background: rgba(255, 255, 255, 0.2); }
.home .story-card {
  display: none; text-align: left; margin: 0;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(160, 190, 255, 0.35);
  border-radius: 14px; padding: 2.2rem 1.8rem 1.9rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.home .story-card.is-active { display: block; }
.home .story-card blockquote { font-size: 1.4rem; line-height: 1.45; color: #fff; quotes: "\201C" "\201D"; }
.home .story-card blockquote::before { content: open-quote; }
.home .story-card blockquote::after { content: close-quote; }
.home .story-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.4rem; }
.home .story-card figcaption { text-align: right; color: #fff; font-size: 1rem; line-height: 1.5; }
.home .story-card figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; }
.home .story-card .btn-white { background: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.6); padding: 0.45rem 1.1rem; font-size: 0.8rem; font-weight: 500; }

/* demo: wider, tighter cyan panel */
.home .demo { padding: clamp(3rem, 6vw, 5rem) 0; }
.home .demo .demo-grid {
  background: var(--cyan); border-radius: 0 28px 0 28px;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem);
}
.home .demo :is(h1, h2) { font-size: 3.3vw; line-height: 1.15; max-width: 14ch; font-weight: 700; }
.home .demo .lede { color: var(--navy); font-size: 1.15rem; margin-top: 2.25rem; }
.home .demo-points { margin-top: 1.5rem; gap: 0.15rem; padding-left: 1.1rem; }
.home .demo-points li { display: list-item; list-style: disc; color: var(--navy); font-size: 1.15rem; }
.home .form-card { border-radius: 22px; padding: 1.6rem 1.8rem; box-shadow: none; }
.home .field { margin-bottom: 0.85rem; }
.home .field label { font-weight: 500; font-size: 0.8rem; color: var(--navy); }
.home .field label i { font-style: normal; color: #fe434c; }
.home .field input, .home .field select, .home .field textarea { border: 1px solid #5a5a6a; border-radius: 10px; }
.home .form-card .btn-primary { margin-top: 0.4rem; }
.home .form-note:empty { display: none; }

/* footer: deep navy, white text, contact block, social */
.home .site-footer { background: #04004c; color: #fff; padding: 3.25rem 0 0; font-size: 0.98rem; }
.home .footer-grid { grid-template-columns: 1.15fr repeat(4, 1fr); gap: 2rem; }
.home .site-footer h2 { font-size: 1.05rem; letter-spacing: 0; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; color: #fff; }
.home .site-footer a { color: #fff; }
.home .site-footer ul { gap: 0.75rem; }
/* 16 Sep meeting (Adam agreed): the HS GOVTECH wordmark matches the footer column
   headings. At 1.78rem its capitals measure the same 12px as INDUSTRIES / GET IN TOUCH. */
.home .footer-grid > div:first-child > img { height: 1.78rem; }
/* The old, larger logo set the first column's minimum width; keep the columns where
   they were on small desktops (1001-1279px) so only the logo size changes. */
@media (min-width: 1001px) { .home .footer-grid > div:first-child { min-width: 203.33px; } }
.home .footer-tagline { font-size: 0.85rem; line-height: 1.45; max-width: 11.5rem; }
.home .footer-contact { margin-top: 1.75rem; }
.home .footer-contact h2 { margin-bottom: 0.5rem; }
.home .footer-contact p { margin: 0 0 0.35rem; font-size: 0.95rem; }
.home .footer-social { display: flex; gap: 1.4rem; margin-top: 1.6rem; }
.home .footer-social svg { width: 22px; height: 22px; fill: #fff; display: block; }
.home .footer-base { margin-top: 2.75rem; padding: 1.35rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.85rem; }
.home .footer-base-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.home .footer-base nav { display: flex; gap: 2rem; }

@media (max-width: 1000px) {
  .home .bento-stack { grid-column: span 3; grid-row: auto; }
  .home .story-carousel { grid-template-columns: 1fr; }
  .home .story-btn { justify-self: center; }
}
@media (max-width: 720px) {
  .home .hero-light::after { display: block; background: linear-gradient(180deg, rgba(4, 0, 76, 0.6) 0%, rgba(4, 0, 76, 0.9) 100%); }
  .home .bento-stack { grid-column: span 1; display: contents; }
  .home .story-meta { flex-direction: column; align-items: flex-start; }
  .home .story-card figcaption { text-align: left; }
}

/* --- same-day corrections after first render --- */
.home #why-us, .home #industries { background: transparent; }
.home .cv-plate.js-anim .cv-region, .home .cv-plate.js-anim .cv-inset-labels { opacity: 1; transform: none; }
.home .bento-stack { grid-column: 10 / span 3; }
.home .bento-stack > .bento-cell { grid-column: 1; }
@media (max-width: 1000px) { .home .bento-stack { grid-column: span 3; } }
.home .cv-map { width: 100%; margin-left: 0; }
.home .cv-callout { left: 7.45%; top: 16.4%; width: 16.25vw; max-width: none; padding: 1.9vw 2.6vw 1.6vw; border-radius: 0.6vw; border-color: #dfe5ec; }
.home .cv-callout::before { position: absolute; top: -1vw; left: 2.6vw; width: 1.46vw; height: 1.46vw; margin: 0; }
.home .cv-callout strong { font-size: 3.33vw; margin-bottom: 0.3vw; }
.home .cv-callout span { font-size: 1.4vw; line-height: 1.3; }
.home .bento-cell.bento-w3 { justify-content: center; align-items: center; text-align: center; }
.home .cv-inset-labels text { font-size: 22px; }

/* --- final parity pass: banner, header, bento rows, demo heading --- */
.home .campaign { background: #04004c; font-size: 0.86rem; padding: 0.55rem 1rem; }
.home .campaign-pill { display: inline-block; background: var(--cyan); color: #04004c; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; margin-right: 0.5rem; vertical-align: 1px; }
.home .campaign a { color: #fe434c; border-bottom: 0; font-weight: 500; margin-left: 0.4rem; }
.home .campaign a:hover { color: #fff; }
.home .theme-toggle, .home .theme-toggle.js-ready { display: none; }
.home .site-header { background: #fff; }
.home .nav-link, .home .header-login { font-weight: 500; color: var(--navy); }
.home .header-ctas .btn-sm { background: #fe434c; font-weight: 500; font-size: 0.88rem; padding: 0.6rem 1.15rem; }
.home .bento-stack { grid-template-rows: 1.2fr 1fr; }
.home .demo :is(h1, h2) { max-width: 12ch; }
.home .hero-light .lede { font-size: 1.24vw; line-height: 1.52; max-width: 38vw; margin-top: 1.91vw; }
.home .hero-light h1 { font-size: 4.17vw; line-height: 1.075; max-width: none; letter-spacing: -0.001em; } /* 2 Sep: mockup line pitch is 86px at 1920; line 1 runs x 146-957, 35px wider than the shared tracking gives */
/* Type measured off HSGT_Home-Page_V5.jpg at 1920: h1 80px/87px, lede 24px/36px, stats 34px, labels 16px/23px.
   vw units so the hero scales like the mockup image does at 1440 and 1536. */
.home .wrap { width: min(1614px, 100% - 3rem); } /* 1630 in the mockup minus the 15px scrollbar the browser adds */
.home .hero-copy { padding-top: 8.54vw; max-width: 44vw; } /* 2 Sep: puts the h1 cap line at the mockup's y=177 inside the hero at 1920 */
/* --- 2026-09-02 fidelity pass against HSGT_Home-Page_V5.jpg ---
   The mockup is a 1920px canvas whose type runs ~1.3x our 16px base, and the
   client reviews it as an image that scales with the window. Scaling the root
   the same way makes every rem-sized section land on the mockup at any desktop
   width. Header and banner are compensated back to the mockup's 115px. */
html:has(body.home) { font-size: clamp(16px, 1.083vw, 22px); }
@media (max-width: 720px) { html:has(body.home) { font-size: 16px; } }
.home .campaign { font-size: max(0.66rem, 12px); padding: 0.42rem 1rem; }
.home .campaign-pill { font-size: max(0.48rem, 9.5px); padding: 0.12rem 0.46rem; }
.home .header-inner { padding: 0.65rem 0; }
.home .nav-link { font-size: max(0.77rem, 13px); padding: 0.54rem 0.62rem; }
.home .nav-link .chev { display: none; }
.home .header-ctas .btn-sm { font-size: max(0.68rem, 12.5px); padding: 0.46rem 0.88rem; }
.home .marquee-controls-band { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.home .marquee-controls-band:focus-within { clip-path: none; width: auto; height: auto; overflow: visible; }
.home #stories { padding: 3.6vw 0 7.3vw; }
.home #industries .grid-3 { gap: 2.9rem 2.3rem; }
.home #cloudsuite h2 { hyphens: manual; overflow-wrap: normal; }
/* Ray, 2 Sep: bento arrows a touch heavier */
.home .bento-cell .more::after { font-weight: 800; -webkit-text-stroke: 0.06em currentColor; }
/* Ray, 2 Sep: consent banner was taking 5-10% of the screen once the home root scale kicked in; pin it to 16px-era sizes */
.home .consent-inner { padding: 0.55rem 0 0.65rem; gap: 1rem; }
.home .consent-text { font-size: 13px; line-height: 1.45; }
.home .consent-actions .btn { font-size: 13px; padding: 0.45rem 1.1rem; }
.home .hero-light .hero-cta { margin-top: 2.86vw; gap: 2.08vw; } /* 2 Sep: 40px between the buttons in the mockup */
.home .hero-cta .btn { padding: 0.55vw 1.8vw; font-size: 0.83vw; line-height: 1.2; } /* 2 Sep: mockup buttons are 43px tall, red one 161px wide */
.home .hero-cta .btn-white { padding-inline: 1.15vw 0.85vw; gap: 0.4vw; } /* mockup white button is 183px: 24px in, 10px to the arrow, 18px out */
/* 2 Sep: stats measured off HSGT_Home-Page_V5.jpg at 1920: columns start on a fixed 202px pitch
   (x 148/349/549), figures 31px tall, labels 120px wide on a 23px line pitch, rule at y 734. */
.home .hero-stats { margin-top: 3.44vw; padding-top: 2.4vw; gap: 0; max-width: none; display: grid; grid-template-columns: 10.5vw 10.5vw max-content; border-top: 2px solid rgba(255, 255, 255, 0.55); } /* rule reads as a solid 1px white line in the mockup (rows 733-734: 79/196 grey); 2px at .55 lands the same ink on a sub-pixel edge */
.home .hero-stats dt { font-size: 2.06vw; }
.home .hero-stats dd { margin-top: 0.18vw; font-size: 0.78vw; line-height: 1.53; max-width: none; white-space: nowrap; font-weight: 400; }
/* home footer keeps the shared breakpoints (the .home rule above outranked them) */
@media (max-width: 1000px) { .home .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .home .footer-grid { grid-template-columns: repeat(2, 1fr); } .home .footer-base nav { gap: 1.25rem; } }
@media (max-width: 480px) { .home .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .home .demo .demo-grid { grid-template-columns: 1fr; } .home .demo :is(h1, h2) { max-width: none; } }

/* --- bento: mockup column widths (48-col), row heights, tile size --- */
.home .bento { grid-template-columns: repeat(48, 1fr); gap: 1rem; }
.home .bento-w4 { grid-column: span 18; }
.home .bento-w5 { grid-column: span 19; }
.home .bento-cell.bento-w3 { grid-column: span 11; }
.home .bento-w6 { grid-column: span 26; }
.home .bento-stack { grid-column: 38 / span 11; grid-row: 1 / span 2; grid-template-rows: 1.08fr 1fr; gap: 1.5rem; }
.home .bento-stack > .bento-cell { grid-column: 1; }
.home .bento > .bento-row.bento-w4:nth-child(1), .home .bento > .bento-row.bento-w5 { min-height: 8rem; }
.home .bento-cell.bento-cta { grid-column: span 16; }
.home .bento > a.bento-row:nth-last-child(2) { grid-column: span 17; }
.home .bento > a.bento-row:nth-last-child(3) { grid-column: span 15; }
.home .bento-showcase { min-height: 232px; }
.home .bento-icon { width: 3.85rem; height: 3.85rem; }
.home .bento-cell h3 { font-size: 1.42rem; line-height: 1.2; }
.home .bento-cell .more { font-size: 0.78rem; }
.home .bento-center h3 { max-width: 9ch; }
.home .bento-row h3 { max-width: 12ch; }
.home .bento-row.bento-w4:first-child h3, .home .bento-row.bento-w5 h3, .home .bento-cta h3 { max-width: none; }
.home .bento-cta h3 { max-width: 12ch; }
@media (max-width: 1000px) {
  .home .bento { grid-template-columns: repeat(6, 1fr); }
  .home .bento-w4, .home .bento-w5, .home .bento-cell.bento-w3, .home .bento-cell.bento-cta,
  .home .bento > a.bento-row:nth-last-child(2), .home .bento > a.bento-row:nth-last-child(3) { grid-column: span 3; }
  .home .bento-w6 { grid-column: span 6; }
  .home .bento-stack { grid-column: span 3; grid-row: auto; }
}
@media (max-width: 640px) {
  .home .bento { grid-template-columns: 1fr; }
  .home .bento-w4, .home .bento-w5, .home .bento-cell.bento-w3, .home .bento-w6, .home .bento-cell.bento-cta,
  .home .bento > a.bento-row:nth-last-child(2), .home .bento > a.bento-row:nth-last-child(3) { grid-column: span 1; }
}

/* Caribbean group: same land style, no reveal stagger */
.home .cv-carib .cv-region { opacity: 1; transform: none; pointer-events: none; }
/* HS CloudSuite cell: mark, name and link centred in a stack, per mockup */
.home .bento-showcase { gap: 1.5rem; padding: 1.5rem 1.4rem; }
.home .bento-showcase .bento-showcase-copy { align-items: center; text-align: center; max-width: 12rem; flex: 0 0 12rem; }
.home .bento-showcase .bento-showcase-mark { width: 64px; max-width: 64px; margin-bottom: 0.2rem; }
.home .bento-showcase-name { font-size: 1.35rem; }
/* title wraps exactly as the mockup: Digital/Applications and Complaint/Management break, the rest stay on one line */
.home .bento-center h3 { max-width: none; }
.home .bento-cell.bento-w3:not(.bento-center) h3 { max-width: 9ch; }
.home .bento > a.bento-row:nth-last-child(2) h3 { max-width: none; }

/* ==================================================================
   2026-09-01 — Inspections page onto HSGT_Inspections-Page_V5.jpg (body.home skin)
   ================================================================== */
.home .hero-split { background: #f0f9ff; border-bottom: 0; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.home .hero-split .wrap { grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); }
.home .hero-split .eyebrow { color: var(--cyan); font-weight: 500; letter-spacing: 0.08em; font-size: 0.8rem; }
.home .hero-split h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); color: var(--navy); }
.home .hero-split .hl-sky { color: var(--cyan); }
.home .hero-split .lede { color: var(--navy); font-size: 1.15rem; max-width: 46ch; margin-top: 1.25rem; }
.home .hero-split .hero-cta { margin-top: 2rem; gap: 1.2rem; }
.home .hero-split .hero-cta .btn { padding: 0.62rem 1.6rem; font-size: 0.9rem; font-weight: 500; }
.home .hero-visual img { width: 100%; height: auto; display: block; }
/* What it does: colour square straddles the card's top border, per mockup */
.home #what-it-does .card { position: relative; border: 1px solid #c9d5e0; box-shadow: none; padding: 2.2rem 2rem 1.9rem; border-radius: 12px; }
.home #what-it-does .card .card-sq { position: absolute; top: -10px; left: 2rem; width: 20px; height: 20px; border-radius: 4px; }
.home #what-it-does .card h3 { color: var(--navy); font-size: 1.15rem; }
.home #what-it-does .card p { color: var(--navy); font-size: 1rem; }
.home #what-it-does h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.home .band-glow h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.home .band-glow {
  background:
    radial-gradient(55% 80% at 0% 100%, #0d47c0 0%, rgba(13, 71, 192, 0) 60%),
    radial-gradient(45% 60% at 100% 0%, #0a2f9a 0%, rgba(10, 47, 154, 0) 55%),
    #04004c;
}
.home .why-tile { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(160, 190, 255, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; }
.home .why-tile .tick { background: var(--check-green); color: #fff; }
.home .why-tile p { font-size: 1.05rem; }
@media (max-width: 1000px) { .home .hero-split .wrap { grid-template-columns: 1fr; } }
/* other solution pages: rounded photo with the floating product chip, same as the Inspections mockup */
.home .hero-visual { position: relative; }
.home .hero-visual > img { border-radius: 18px; }
.home .hero-visual .product-chip { position: absolute; left: 1.4rem; bottom: 2.2rem; }
.home .band-glow h2 { max-width: none; }
.home .demo :is(h1, h2) { max-width: 16ch; }

/* overrides below 1000px for the vw-sized home hero + map callout; last in the file so they outrank the desktop rules above */
@media (max-width: 1000px) {
  .home .cv-callout { position: static; margin: 2rem auto 1rem; width: auto; max-width: 20rem; padding: 1.35rem 1.6rem 1.4rem; border-radius: 8px; }
  .home .cv-callout::before { position: static; width: 20px; height: 20px; margin: 0 0 0.9rem; }
  .home .cv-callout strong { font-size: 2.5rem; margin-bottom: 0.45rem; }
  .home .cv-callout span { font-size: 1.1rem; }
  .home .hero-light { min-height: min(80vh, 700px); padding: 3rem 0 3.25rem; }
  .home .hero-frame-a { inset: 0 auto 0 -102%; width: auto; height: 100%; }
  .home .hero-copy { padding-top: 0; max-width: none; }
  .home .hero-light h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.1; }
  .home .hero-light .lede { font-size: 1.05rem; line-height: 1.5; max-width: none; margin-top: 1.25rem; }
  .home .hero-light .hero-cta { margin-top: 1.6rem; gap: 0.85rem; }
  .home .hero-cta .btn { padding: 0.62rem 1.6rem; font-size: 0.9rem; }
  .home .hero-stats { margin-top: 1.8rem; padding-top: 1.1rem; gap: 0.9rem 1.4rem; display: flex; }
  .home .hero-stats dt { font-size: 1.45rem; }
  .home .hero-stats dd { font-size: 0.82rem; line-height: 1.35; white-space: normal; }
  .home .demo :is(h1, h2) { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .home .story-carousel { grid-template-columns: 1fr; margin-top: 2rem; }
  .home .story-btn { width: 40px; height: 40px; }
}

/* --- 2 Sep: Adam's per-page hero compositions (Drive "Images, Graphics & Mock Ups") ---
   Each Solutions / Industries mockup places three of his files at natural size on the 1920
   canvas: the photo (724x647 at 1052,192), a laptop (532x305 at 904,480) or tablet (253x342 at
   984,444), and a UI chip. The stack keeps those offsets as fractions of the composition width
   (--sw: 872 laptop, 792 tablet), so the whole group scales with the hero column. Each image
   carries its own --x/--y/--w in mockup pixels. */
.hero-stack { position: relative; width: 100%; max-width: calc(var(--sw) * 1px); margin-left: auto; aspect-ratio: calc(var(--sw) / 647); }
/* `.home .hero-visual img` / `> img` (width 100%, 18px radius) outrank a bare class, so the
   parent goes in the selector. The PNGs carry their own shapes; no radius on the boxes. */
.home .hero-visual.hero-stack > img {
  position: absolute; display: block; height: auto; max-width: none; border-radius: 0;
  left: calc(var(--x) / var(--sw) * 100%); top: calc(var(--y) / 647 * 100%); width: calc(var(--w) / var(--sw) * 100%);
}
@media (max-width: 1000px) { .hero-stack { margin-left: 0; } }

/* Resources hero: HSGT-Resources-Mock-Up.jpg runs the copy left and Adam's cut-out figure flush
   right at full hero height (Resources-Image.png). Replaces the stock team photo background. */
.hero-dark--resources { text-align: left; }
/* The mockup's ground is HSGT-Gradient.eps (no rasteriser on this machine); the brand mesh
   fitted from the Home mockup is the same gradient, so it stands in for the stock photo. */
.hero-dark--resources::before {
  background:
    radial-gradient(44.4% 37.6% at -11.7% 96.6%, #008ace 0%, rgba(0, 138, 206, 0) 100%),
    radial-gradient(34.2% 82.8% at 76.6% 7.6%, #0264ac 0%, rgba(2, 100, 172, 0) 100%),
    #04004c;
}
.hero-dark--resources h1, .hero-dark--resources .lede { margin-inline: 0; }
.hero-dark--resources .wrap > * { max-width: 52%; }
.hero-dark--resources .hero-figure { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 55%; object-fit: contain; object-position: right bottom; z-index: 0; }
@media (max-width: 700px) {
  .hero-dark--resources .wrap > * { max-width: none; }
  .hero-dark--resources .hero-figure { position: static; height: auto; width: 100%; max-width: 420px; margin: 1.5rem auto 0; }
}

/* Executive team: HSGT-Executive-Team-Mock-Up.jpg frames each portrait square. Cards with a
   supplied headshot carry it inline as the background; the placeholder art and label go. */
.team-portrait { aspect-ratio: 1 / 1; }
.team-portrait--photo { background-size: cover; background-position: center top; color: transparent; }
.team-portrait--photo::after { content: none; }

/* --- 2 Sep: CMS media slots (tools/render-cms.mjs, docs/CMS-RENDER-CONTRACT.md) ---
   A slot renders an <img>, a muted looping <video> with a poster twin, or a <figure> with a
   poster and a native audio bar. Reduced motion swaps the video for its poster. */
.home .hero-visual.hero-stack > :is(video, figure) {
  position: absolute; display: block; height: auto; max-width: none; border-radius: 0;
  left: calc(var(--x) / var(--sw) * 100%); top: calc(var(--y) / 647 * 100%); width: calc(var(--w) / var(--sw) * 100%);
}
.cms-video { object-fit: cover; }
/* !important: the hero-stack positioning rule above sets display on every child and would win on specificity. */
.cms-rm-poster { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cms-video { display: none !important; }
  .cms-rm-poster { display: block !important; }
}
.cms-audio { margin: 0; }
.cms-audio > img { display: block; width: 100%; height: auto; }
.cms-audio > audio { display: block; width: 100%; margin-top: 0.5rem; }
.hero-dark > .cms-ground { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; border-radius: 0; margin: 0; }
.hero-dark:has(> .cms-ground)::before { display: none; }
/* Provider badges (HubSpot form, Buzzsprout player): icon + word, or word alone when the CMS says so. */
.form-provider { display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--muted); }
.provider-icon { width: 16px; height: 16px; flex: none; }
.listen-provider { display: inline-flex; align-items: center; gap: 0.5rem; }
.listen-provider .provider-icon { width: 18px; height: 18px; }

/* ---------------- resources hub cards (4 Sep standup: one pill colour = sky, label = content type) ---------------- */

.res .tag { background: var(--sky-wash); color: var(--ink-sky); border-radius: 999px; }

.res .article-meta { font-size: 0.82rem; color: var(--muted); }

.res .more { margin-top: auto; }

.res-empty { text-align: left; }

/* Catalog Header 4 / Header 5: headline + text centred on the mesh gradient, no photograph (opt-in class). */
.hero-dark.hero-dark--grad::before { display: block; background: var(--grad-mesh); } /* :has(.cms-ground) hides the photo pseudo; the gradient variant re-enables it */
.hero-dark.hero-dark--grad::after { background: none; }
.panel-on-grad { background: var(--panel-on-grad); color: #fff; border-radius: var(--radius); }

.hero-dark--grad .cms-ground { display: none; } /* Header 4/5: no photograph behind the gradient */
.quote.panel-on-grad { padding: clamp(1.5rem, 3vw, 2.5rem); }
.quote.panel-on-grad blockquote, .quote.panel-on-grad figcaption { color: #fff; }
/* 5 Sep punch list items 8/9: Catalog "Panel w/Quote on Gradient" - attribution right-aligned, name line readable on the panel */
.quote.panel-on-grad figcaption { text-align: right; }
.quote.panel-on-grad figcaption strong { color: #fff; }
/* 29 Sep, Adam item 5: Complaint Management quote = Catalog "Panel w/Quote on White" -
   white panel, light border, sky square on the top edge, navy text, attribution right-aligned. */
.quote.panel-on-white { position: relative; background: #fff; border: 1px solid #c9d5e0; border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.quote.panel-on-white::before { content: ""; position: absolute; top: -7px; left: 1.5rem; width: 14px; height: 14px; border-radius: 3px; background: var(--sky); }
.quote.panel-on-white blockquote, .quote.panel-on-white figcaption, .quote.panel-on-white figcaption strong { color: var(--navy); }
.quote.panel-on-white figcaption { text-align: right; }
/* 29 Sep, Adam item 6 (Option B): a five-card "What it does" row centres its last two cards.
   Six half-columns keep every card the same width as the three-column grid. One column at 720px and below. */
@media (min-width: 721px) {
  #what-it-does .grid-3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  #what-it-does .grid-3:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  #what-it-does .grid-3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
}
.hero-dark.hero-dark--grad .eyebrow { color: var(--sky); }

/* ---------------- Catalog panels (4 Sep Visualization Catalog) ----------------
   "Headline and Panels w/Text on White": white tiles, grey border, green check.
   "Panels on Gradient" step/text cards: frosted glass, same values as Home #industries. */
.why-grid--light .why-tile { background: #fff; border: 1px solid #c9d5e0; }
.why-grid--light .why-tile p { color: var(--navy); }
.why-tile--text { text-align: left; align-items: flex-start; }
.why-tile--text p { font-family: var(--font-body); font-weight: 500; font-size: 0.98rem; }
.why-tile--text p strong { font-family: var(--font-display); font-weight: 700; }
.band-glow .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; text-align: left; }
.band-glow .card h3 { color: #fff; }
.band-glow .card p { color: rgba(255, 255, 255, 0.84); }
.center .card { text-align: left; }
.center ul.lede { text-align: left; }
@media (max-width: 720px) { .why-grid.grid-3, .why-grid.grid-2 { grid-template-columns: 1fr; } }

/* Revision 1 desktop rules live last so earlier page-fidelity blocks cannot
   accidentally override the client's benchmark corrections. */
@media (min-width: 1001px) {
  .nav > li:hover > .dropdown,
  .nav > li:focus-within > .dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 0;
    transition: opacity 0.16s var(--ease), translate 0.16s var(--ease), visibility 0s;
  }
  .nav-overview-link:hover .chev,
  .nav > li:focus-within > .nav-overview-link .chev { transform: rotate(-135deg) translate(-3px, -3px); }

  /* The client asked to remove the visible marquee control. It remains
     keyboard-accessible and reappears on focus, preserving WCAG pause access. */
  .marquee-controls:not(:focus-within) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .page-industry .compare td:first-child::after { content: "\2194"; }

  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > h2,
  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > .lede { text-align: center; margin-inline: auto; }
  .page-industry [data-cms-if="howTheyWork.heading"] > .wrap > .lede { max-width: 76ch; }
  .page-industry [data-cms-if="howTheyWork.heading"],
  .page-industry [data-cms-if="whyChoose.heading"],
  .page-industry [data-cms-if="programs.heading"] { padding-block: clamp(3rem, 4vw, 4.25rem); }
  .page-industry [data-cms-if="whyChoose.heading"] .why-grid { margin-top: 1.75rem; }
  .page-industry #program-marquee { margin-top: 2rem !important; }
  /* Rendered builds remove data-cms attributes; structural fallbacks keep the
     same desktop contract in production. */
  .page-industry section:has(.compare) > .wrap > h2,
  .page-industry section:has(.compare) > .wrap > .lede { text-align: center; margin-inline: auto; }
  .page-industry section:has(.compare) > .wrap > .lede { max-width: 76ch; }
  .page-industry section:has(.compare),
  .page-industry section:has(> .wrap > .why-grid),
  .page-industry #programs { padding-block: clamp(3rem, 4vw, 4.25rem); }

  .page-resources .card.res .media-fill { aspect-ratio: 16 / 9; background: var(--paper); }
  .page-resources .card.res .media-fill > .blog-card-media { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

  .story-media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; text-align: left; }
  .story-media-row--reverse > .story-media { order: -1; }
  .story-media-row .lede { max-width: 62ch; }
  .story-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

  .implementation-difference__intro { max-width: 76ch; margin-inline: auto; }
  .implementation-panels { margin-top: 2.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .implementation-panel { position: relative; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; }
  .implementation-panel::before { content: ""; position: absolute; top: -0.55rem; left: 1.75rem; width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--sky); }
  .implementation-panel:nth-child(2)::before { background: var(--gold); }
  .implementation-panel:nth-child(3)::before { background: var(--green); }
  .implementation-panel p { margin-top: 0.75rem; color: var(--muted); }
  .implementation-closing { margin-top: 1rem; padding: 2rem 2.25rem; border-radius: 10px; background: var(--sky); color: var(--navy); text-align: center; max-width: none; }
  .page-how-it-works #roadmap .tag { background: var(--green); color: var(--navy); }
  .page-how-it-works #training .why-tile { align-items: center; text-align: center; }
  .page-how-it-works #training { padding-bottom: 3rem; }
  .page-how-it-works #training + .demo { padding-top: 3rem; }

  .page-customer-support #support-commitment .implementation-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-customer-support .support-benefits .why-tile { min-height: 190px; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 2rem; }
  .page-customer-support .support-benefits .why-tile .tick { align-self: flex-start; }
  .page-customer-support .support-model-card { position: relative; padding-top: 2.15rem; }
  .page-customer-support .support-model-card .card-sq { position: absolute; top: -0.48rem; left: 1.6rem; }

  .page-contact .demo { background: var(--grad-mesh); color: #fff; }
  .page-contact .demo :is(h1, h2) { color: #fff; }
  .page-contact .demo .lede { color: rgba(255,255,255,0.82); }
  .page-contact .form-card { background: #fff; }

  .solution-section-lede { margin: 1rem auto 0; text-align: center; max-width: 72ch; }
}

/* ==================================================================
   Revision 1 mobile benchmark (HS GovTech, 16 Sep 2026)
   Phone-only corrections from the client's Mobile tab. Desktop stays
   governed by the benchmark block above.
   ================================================================== */
@media (max-width: 720px) {
  /* Collapsing the empty navigation grid row removes the extra white band
     below Menu/Login; the open list supplies its own breathing room. */
  .header-inner { column-gap: 0.75rem; row-gap: 0; }
  .nav.open { padding-top: 0.85rem; padding-bottom: 0.15rem; }
  .nav-toggle,
  .nav-link,
  .dropdown a,
  .nav-cta .btn { min-height: 44px; font-size: 0.95rem; }
  .nav > li > .nav-link { font-size: 0.95rem; }
  .home .nav-link .chev { display: inline-block; }
  .dropdown a { display: flex; align-items: center; }

  /* Give the desktop hero artwork a mobile composition of its own: copy
     first, then an uncapped image panel with no blue readability overlay. */
  .home .hero-light {
    min-height: 0; padding: 2.25rem 0;
    display: flex; flex-direction: column; align-items: stretch;
  }
  .home .hero-copy { order: 1; }
  .home .hero-media {
    position: relative; inset: auto; z-index: 0; order: 2;
    width: 100%; height: auto;
    margin-top: 2.25rem; animation: none;
  }
  .home .hero-frame-a {
    position: relative; inset: auto; width: 100%; max-width: none; height: auto;
    object-fit: contain; object-position: center;
  }
  .home .hero-light::after { display: none; }

  /* Match the desktop callout: the cyan marker straddles the grey stroke. */
  .home .cv-callout { position: relative; padding-top: 2.2rem; }
  .home .cv-callout::before {
    position: absolute; top: -10px; left: 1.6rem;
    width: 20px; height: 20px; margin: 0;
  }

  /* One consistent phone tile: icon left, title and CTA right, with equal
     top/bottom rhythm. CloudSuite and the demo CTA close the list. */
  .home .bento a.bento-cell {
    min-height: 150px; padding-block: 1.75rem; align-content: center;
  }
  .home .bento-showcase {
    order: 8; min-height: 0; justify-content: flex-start;
    gap: 0.5rem; padding: 1.5rem 1.25rem;
  }
  .home .bento-showcase-copy { gap: 0.2rem; }
  .home .bento-showcase .bento-showcase-device {
    display: block; width: 100%; max-height: none; margin: 0;
  }
  .home .bento-cta { order: 9; }
  .home a.bento-cta:hover,
  .home a.bento-cta:focus-visible { border-color: var(--cyan); }
  .home a.bento-cta:focus-visible {
    outline: 3px solid var(--coral); outline-offset: 2px;
  }
  .home a.bento-cta:active { border-color: var(--navy); }

  /* Keep heading spacing balanced and pin both carousel controls to the
     card's side strokes instead of stacking them above and below. */
  .home #stories { padding-block: 2.5rem; }
  .home #stories h2 { margin: 0 auto; }
  .home .story-carousel {
    position: relative; display: block; margin-top: 2.5rem;
  }
  .home .story-track { width: 100%; }
  .home .story-btn {
    position: absolute; top: 50%; z-index: 3;
    width: 44px; height: 44px; transform: translateY(-50%);
  }
  .home .story-carousel > .story-btn:first-child { left: -14px; }
  .home .story-carousel > .story-btn:last-child { right: -14px; }

  /* Restore the supplied logo's natural aspect ratio and keep the approved
     partner line intact at phone widths. */
  .site-footer img { width: auto; height: 40px; max-width: 100%; }
  .footer-tagline {
    max-width: none; white-space: nowrap;
    font-size: clamp(0.72rem, 3.4vw, 0.85rem);
  }

  /* The Mobile-tab instruction explicitly removes the Resources figure so
     the filters enter the first viewport. */
  .hero-dark--resources .hero-figure { display: none; }
  .hero-dark--resources .wrap > * { max-width: 100%; }
}

/* At the narrowest phone widths the footer partner line exceeds its column.
   Let it wrap there while preserving the approved single line at 390px. */
@media (max-width: 359px) {
  .footer-tagline { white-space: normal; }
}

/* ==================================================================
   Revision 1 audit, 18 September 2026 (Adam's item-by-item review).
   The 11 September header rule set one size, but the later Home rules
   (.home .nav-link 13px, .home .header-ctas .btn-sm 12.5px) overrode it,
   and its shared color turned the Request a demo label navy.
   ================================================================== */
@media (min-width: 1001px) {
  /* One size for nav categories, sub-nav pages, Login and Request a demo on
     every page. Fixed px: Home scales its root font with the viewport, which
     is what made these resize unevenly. */
  .site-header .nav-link,
  .site-header .dropdown a,
  .site-header .header-login,
  .site-header .header-ctas .btn,
  .home .site-header .nav-link,
  .home .site-header .header-ctas .btn-sm { font-size: 15px; }
  .site-header .header-ctas .btn { color: #fff; }
  .home .site-header .dropdown a { color: var(--navy); }
}

/* Revision 1: "Remove the pause/scroll toggle ... in all locations where present."
   The toggle leaves the visible layout everywhere. It stays reachable by keyboard
   (appears on focus) because WCAG 2.2.2 requires a way to pause auto-moving
   content; hover and focus already pause the rows. */
.marquee-controls.js-ready:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%);
}

/* Homepage: "Don't see your program" kept its navy text while the generic card
   hover turned the ground dark. Hold the cyan ground on hover. */
.home #industries .card-invert:hover { background: var(--cyan); border-color: var(--cyan); }
/* Homepage Solutions: HS CloudSuite name matches the other tile headings. */
.bento-cell .bento-showcase-name { color: var(--navy); }
/* Homepage Solutions: icon, title and CTA sit as one centered group. */
.bento-center .more { margin-top: 0.35rem; }
/* Industry pages: one section gap, not two, between the pillboxes and the demo
   band, and between stacked sections that share a ground. */
.page-industry #programs { padding-bottom: 0; }
/* Solution tiles: the hover stroke is for pointers; on touch it shows while pressed only. */
@media (hover: none) {
  a.bento-cell:hover { border-color: var(--line); }
  .home a.bento-cell:active { border-color: var(--navy); }
  .home a.bento-cell.is-pressed { border-color: var(--navy); }
}

@media (max-width: 720px) {
  .header-login { font-size: 0.95rem; }
  /* position:relative re-activated the desktop left/top offsets and pushed the callout off-centre. */
  .home .cv-callout { left: auto; top: auto; }
  /* Every Solutions tile uses the Permitting & Licensing layout. */
  .home .bento-cell.bento-w3,
  .home .bento-cell.bento-center { text-align: left; justify-content: start; align-items: start; }
  .home .bento-showcase .bento-showcase-copy { flex: 0 0 auto; max-width: none; }
  /* Arrow centres sit on the tile's vertical strokes. */
  .story-carousel > .story-btn:first-child { left: -22px; }
  .story-carousel > .story-btn:last-child { right: -22px; }
  /* Preserve the complete approved mobile image, including the tablet. */
  .home .hero-frame-a { -webkit-mask-image: none; mask-image: none; }
}

/* Keep both native controls stable across viewport changes. Only the desktop
   link or mobile disclosure participates in layout and keyboard navigation. */
@media (min-width: 1001px) {
  .nav-link[data-resources-disclosure] { display: none; }
}
@media (max-width: 1000px) {
  .nav-overview-link { display: none; }
  /* Revision 1 asks for uniform media dimensions across resource types.
     Keep portrait case-study photographs in the same slot on phones too. */
  .page-resources .card.res .media-fill { aspect-ratio: 16 / 9; background: var(--paper); }
  .page-resources .card.res .media-fill > .blog-card-media { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
}
.page-how-it-works #roadmap .tag { background: var(--check-green); }

/* Customer Support: checkmarks centered in their boxes, the sitewide standard.
   (The 11 September pass had pinned these tiles left.) */
.page-customer-support .support-benefits .why-tile { align-items: center; justify-content: center; text-align: center; }
.page-customer-support .support-benefits .why-tile .tick { align-self: center; }
/* Industry pages: "Why ... Choose HS GovTech" and the section under it share a white
   ground, so their paddings stacked into a 115px gap. */
.page-industry section:has(> .wrap > .why-grid) + #programs { padding-top: 0; }
/* Our Story & Mission: text columns hold one width on white and navy rows. */
@media (min-width: 1001px) {
  .story-media-row--reverse { grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr); }
}
/* Digital Applications is a w3 tile without .bento-center, so its CTA stayed pinned
   to the tile floor. Same centered group as Inspections and Reporting & Analytics. */
@media (min-width: 721px) {
  .home .bento-cell.bento-w3 { justify-content: center; }
  .home .bento-cell.bento-w3 .more { margin-top: 0.35rem; }
}

/* Industry pages, "Common challenges" table, matched to the client's
   Challenges-vs-Solutions mock: a narrow centered column pair, one rounded header
   pill, no row rules, a centre spine with a square node per row. */
@media (min-width: 1001px) {
  .page-industry .compare { max-width: 740px; margin-inline: auto; }
  .page-industry section:has(.compare) > .wrap > .lede { color: var(--navy); }
  .page-industry .compare thead th { font-size: 1.05rem; font-weight: 700; padding-block: 0.7rem; }
  .page-industry .compare thead th:first-child { border-radius: 14px 0 0 14px; background: #fce4e4; color: var(--coral); }
  .page-industry .compare thead th:last-child { border-radius: 0 14px 14px 0; background: #ddf1fc; color: var(--cyan); }
  .page-industry .compare td,
  .page-industry .compare td:first-child { border-bottom: 0; padding: 1.5rem 4.5rem; color: var(--navy); font-weight: 500; background: transparent; }
  .page-industry .compare td:first-child::after,
  .page-industry .compare td:first-child::after { /* also beats the later "\2194" content rule */
    content: ""; right: -5px; width: 10px; height: 10px; border: 0; border-radius: 1px;
    background: #a7a6bd; box-shadow: none;
  }
  .page-industry .compare td:first-child::before {
    content: ""; position: absolute; right: -44px; top: 50%; width: 88px; height: 1px; background: var(--line);
  }

  /* Pillbox pop-up, matched to the client's Pill Box Pop Up mock: a content card,
     left-aligned, no page-wide blur, text CTA with the coral arrow. */
  .page-industry .prog-dialog::backdrop { background: rgba(244, 247, 250, 0.72); backdrop-filter: none; }
  .page-industry .prog-dialog { box-shadow: 0 10px 30px rgba(4, 0, 72, 0.10); }
  .page-industry .prog-dialog > div:last-child { text-align: left; }
  .page-industry .prog-dialog .team-dialog-copy { margin-inline: 0; color: var(--navy); font-size: 1.1rem; }
  .page-industry .prog-dialog-cta { text-decoration: none; font-weight: 700; }
  .page-industry .prog-dialog-cta::after { content: " \2192"; color: var(--coral); }
}

/* Revision 1 screenshot pass, 18 September 2026. */
@media (min-width: 1001px) {
  /* "Padding on smaller monitor": the page gutter was a fixed 24px below 1660px and
     only opened up on very wide screens. Hold the wide-monitor proportion (84% of the
     viewport, the 1614/1920 ratio of the approved mockup) at every desktop width. */
  .home .wrap { width: min(1614px, 84%); }
  /* Pill pop-up sits over the pill panel without dimming the whole page. */
  .page-industry .prog-dialog::backdrop { background: transparent; }
  /* Customer Support: the three commitment tiles run three across, as on How It Works. */
  .page-customer-support #support-commitment .implementation-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* Partner Stories arrows: centres on the tile's vertical strokes, text kept clear of them. */
  .home .story-carousel > .story-btn:first-child { left: -22px; }
  .home .story-carousel > .story-btn:last-child { right: -22px; }
  .home .story-card { padding-inline: 2rem; }
  /* Hero: the three stats stay on one row. */
  .home .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .home .hero-stats dd { max-width: none; }
}

/* Phone pass, 18 September 2026. */
/* Jumping to the demo form lands clear of the sticky header on every page. */
#demo { scroll-margin-top: 84px; }
@media (max-width: 720px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px. */
  .field input, .field select, .field textarea, input, select, textarea { font-size: 16px; }
}
/* Keep podcast cover titles visible inside the existing widescreen card frame. */
.page-resources .card.res[data-type="podcast"] .media-fill > .blog-card-media {
  object-fit: contain;
}

/* R1 closeout: use the approved comparison and panel rhythm at every width.
   Structural selectors survive CMS rendering, which removes data-cms markers. */
.page-industry section:has(.compare) > .wrap > :is(h2, .lede) {
  text-align: center; margin-inline: auto;
}
.page-industry section:has(.compare) > .wrap > .lede { max-width: 76ch; }
.page-industry .compare { max-width: 1040px; table-layout: fixed; margin-inline: auto; }
@media (min-width: 1001px) {
  .page-industry .compare td,
  .page-industry .compare td:first-child { padding: 1.5rem 3.5rem; }
}
/* Mobile comparison keeps the two columns without desktop connectors. */
@media (max-width: 1000px) {
  .page-industry .table-scroll { overflow: visible; margin-top: 2rem; }
  .page-industry .compare {
    border-collapse: separate; border-spacing: 0; margin-top: 0;
    box-shadow: none; overflow: visible; background: transparent;
  }
  .page-industry .compare thead th {
    border: 0; padding: 0.7rem 0.5rem; text-align: center;
    font-size: clamp(0.9rem, 1.7vw, 1.05rem); font-weight: 700;
    letter-spacing: 0; text-transform: none;
  }
  .page-industry .compare thead th:first-child {
    border-radius: 14px 0 0 14px; background: #fce4e4; color: #8f2d34;
  }
  .page-industry .compare thead th:last-child {
    border-radius: 0 14px 14px 0; background: #ddf1fc; color: #0f5f8a;
  }
  .page-industry .compare tbody::after,
  .page-industry .compare td:first-child::before,
  .page-industry .compare td:first-child::after {
    content: none; display: none;
  }
  .page-industry .compare td,
  .page-industry .compare td:first-child {
    position: relative; width: 50%; padding: 1rem clamp(0.55rem, 2vw, 1.25rem);
    border: 0; text-align: center; vertical-align: middle;
    background: transparent; color: var(--navy); font-weight: 500;
  }
}
.page-industry #program-marquee .marquee-panel { position: relative; }
.page-industry .marquee-panel:has(.prog-dialog[open]) .marquee-row-track { animation-play-state: paused; }
.page-industry .prog-dialog {
  position: absolute; inset: 1rem 1rem auto; margin-inline: auto; margin-block: 0;
  width: min(460px, calc(100% - 2rem)); height: fit-content;
  max-height: calc(100% - 2rem); z-index: 40;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(4, 0, 72, 0.10);
}
.page-industry .prog-dialog > div:last-child { padding: 0.75rem 2rem 2rem; text-align: left; }
.page-industry .prog-dialog h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.page-industry .prog-dialog .team-dialog-close { min-height: 44px; }
.page-industry .prog-dialog .team-dialog-copy { margin: 1rem 0 0; font-size: 1rem; color: var(--ink); }
.page-industry .prog-dialog-cta {
  padding: 0; border: 0; background: transparent; color: var(--accent-ink);
  box-shadow: none; text-align: left; text-decoration: none; font-weight: 700;
}
.page-industry .prog-dialog-cta::after { content: " \2192"; color: var(--coral); }

/* Equal breathing room around each icon/title/CTA group, without changing
   the client's desktop mosaic or the established phone reading order. */
.home .bento a.bento-cell { padding: 1.75rem; justify-content: center; }
.home .bento a.bento-row { grid-template-columns: auto minmax(0, max-content); }
@media (min-width: 1001px) {
  .home .bento a.bento-row { column-gap: 2rem; }
  .home .bento a.bento-cell.bento-w3 { padding-inline: 1rem; }
  .home .bento .bento-w3 .bento-icon { margin-bottom: 0.5rem; }
  .home .bento .bento-w3 h3 { font-size: clamp(1rem, 1.5vw, 1.42rem); }
  .home #cloudsuite .bento-showcase-copy { transform: translateX(1.25rem); }
  .home .bento-showcase .bento-showcase-device { max-height: 11.875rem; }
}
.home .bento .bento-cell .more { margin-top: 0; padding-top: 0.5rem; }
.home .bento-icon { margin-bottom: 0; }
@media (min-width: 721px) {
  .home .bento-cell.bento-w3:not(.bento-center) { align-items: center; text-align: center; }
}
.page-how-it-works .implementation-difference__intro { max-width: 76ch; margin-inline: auto; }
.page-how-it-works .implementation-panel {
  position: relative; padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-align: left;
}
.page-how-it-works .implementation-panel::before {
  content: ""; position: absolute; top: -0.55rem; left: 1.75rem;
  width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--sky);
}
.page-how-it-works .implementation-panel:nth-child(2)::before { background: var(--gold); }
.page-how-it-works .implementation-panel:nth-child(3)::before { background: var(--green); }
.page-how-it-works .implementation-panel p { margin-top: 0.75rem; color: var(--muted); }
.page-how-it-works .implementation-closing {
  width: 100%; max-width: none; margin-top: 1rem; padding: 2rem;
  border-radius: 0 12px 0 12px; background: var(--sky); color: var(--navy);
}
@media (max-width: 1000px) {
  .page-how-it-works .implementation-panels { display: grid; gap: 1rem; margin-top: 2rem; }
}
@media (max-width: 720px) {
  .home .bento a.bento-cell {
    display: grid; grid-template-columns: 3.85rem minmax(0, 1fr);
    column-gap: 1rem; row-gap: 0; align-content: center; align-items: start; text-align: left;
  }
  .home .bento a.bento-cell .bento-icon { grid-row: 1 / span 2; align-self: center; }
  .home .bento a.bento-cell h3 { max-width: none; }
  .home .bento a.bento-cell .more { grid-column: 2; }
}

/* 29 September QA: four defects at 1000px and narrower only. Desktop (1001px+)
   is approved and untouched; these rules cannot match there. */
@media (max-width: 1000px) {
  /* Contact Us: the approved dark gradient, white copy and white form card that
     desktop already shows, instead of the sky-blue demo panel. */
  .page-contact .demo { background: var(--grad-mesh); color: #fff; }
  .page-contact .demo .demo-grid { background: transparent; }
  .page-contact .demo :is(h1, h2) { color: #fff; }
  .page-contact .demo .lede { color: rgba(255,255,255,0.82); }
  .page-contact .form-card { background: #fff; }
  /* Our Story & Mission: the CMS width/height attributes fixed the photo at
     608px tall while its width shrank, stretching it. Keep the natural ratio. */
  .story-media { height: auto; object-fit: cover; }
  /* Customer Support: the commitment tiles keep their desktop panel treatment. */
  .page-customer-support #support-commitment .implementation-panels { display: grid; gap: 1rem; margin-top: 2.25rem; }
  .page-customer-support .implementation-panel {
    position: relative; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left;
  }
  .page-customer-support .implementation-panel::before {
    content: ""; position: absolute; top: -0.55rem; left: 1.75rem;
    width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--sky);
  }
  .page-customer-support .implementation-panel:nth-child(2)::before { background: var(--gold); }
  .page-customer-support .implementation-panel:nth-child(3)::before { background: var(--green); }
  .page-customer-support .implementation-panel h3 { color: var(--navy); }
  .page-customer-support .implementation-panel p { margin-top: 0.75rem; color: var(--muted); }
  /* Footer: the logo box widened past the logo between 721px and 1000px, so the
     artwork sat centred and offset from the tagline. Size the box to the logo. */
  .site-footer .footer-grid > div:first-child > img { width: auto; }
}