/* ==========================================================================================
   LifeLine Plus LLC — site.css  (shared design system; light theme only)
   Owner: layout agent. The pages agent may APPEND page-specific rules at the very end of this
   file (§15); apply.css builds on the generic form styles in §9. No @import, no web fonts, no
   URLs other than same-origin or data: SVG (allowed by the CSP: img-src 'self' data:).

   Revision 2 (SPEC §11.2 items 1, 2, 3, 7, 10): utility bar above the header, ~56px logo,
   cards with a 1px hairline + soft shadow (no coloured top border), two-column hero with the
   office card, trust strip, FAQ <details>, "how we screen" step list, four-column footer,
   darker muted text.

   Contents
     §1  Design tokens (:root)              §9  Forms (generic; apply.css extends)
     §2  Reset                              §10 Footer (four columns + bottom bar)
     §3  Typography                         §11 Utilities (visually-hidden, honeypot, [hidden])
     §4  Layout utilities                   §12 Motion (prefers-reduced-motion)
     §5  Focus + skip link                  §13 Print
     §6  Utility bar, header + navigation   §14 Page components (trust strip, FAQ, screen steps,
     §7  Buttons, cards, hero, split,            detail lists, owner cards, legal, 404)
         callouts, steps                   §15 Appended page-specific rules (pages agent)
     §8  Tables

   Colour contrast (WCAG 2.x relative-luminance arithmetic; every pairing used for text >= 4.5:1,
   every pairing used for UI boundaries/focus rings >= 3:1). "fg on bg = ratio"
     --ink        #1C2622 on --bg #FFFFFF       = 15.56:1  body text
     --ink        #1C2622 on --bg-alt #F4F7F5   = 14.42:1  body text on alt sections / even table rows
     --ink        #1C2622 on --green-50 #F3F8F5 = 14.49:1  body text in hero, callout-info, footer
     --ink        #1C2622 on --green-100        = 13.38:1  body text on tinted panels
     --ink-muted  #3D4B45 on --bg               =  9.17:1  ALL muted text: .muted, .lede, hints,
     --ink-muted  #3D4B45 on --bg-alt           =  8.50:1  label notes, footer description,
     --ink-muted  #3D4B45 on --green-50         =  8.54:1  owner roles, legal "updated" line
     --ink-muted  #3D4B45 on --green-100        =  7.88:1  (Revision 2: was --ink-2 at 7.76:1)
     --ink-2      #465650 on --bg               =  7.76:1  kept as the SPEC §3 token; apply.css uses it
     --ink-2      #465650 on --bg-alt           =  7.19:1
     --ink-3      #6B7A73 on --bg               =  4.51:1  ONLY placeholders + input borders, on white
     --ink-3      #6B7A73 on --bg-alt           =  4.18:1  FAILS -> never use ink-3 for text on tints
     --green-700  #2F6B4F on --bg               =  6.29:1  links, eyebrow labels
     --green-700  #2F6B4F on --bg-alt           =  5.83:1
     --green-700  #2F6B4F on --green-50         =  5.86:1  footer links, links in hero/callouts
     --green-700  #2F6B4F on --green-100        =  5.41:1
     --green-900  #1F4A36 on --bg               = 10.04:1  headings, active nav item, trust strip text
     --green-900  #1F4A36 on --green-50         =  9.35:1
     --green-900  #1F4A36 on --green-100        =  8.64:1
     #FFFFFF              on --green-700        =  6.29:1  primary button text, step numbers
     #FFFFFF              on --green-900        = 10.04:1  utility bar text + tel: links, footer bar,
                                                          skip link, button hover
     #FFFFFF              on --green-600 #376950=  6.37:1  (reserved: white text only)
     --green-100          on --green-900        =  8.64:1  utility bar separators, footer bar links
     --error      #B42318 on --bg               =  6.57:1  inline field errors
     --error      #B42318 on --error-bg #FEF3F2 =  6.05:1  error summary heading + links
     --red-600    #8E3F3F on --bg               =  7.16:1  (decorative rules only; never body text)
     --focus      #0B57D0 on --bg               =  6.39:1  focus ring (non-text, needs >= 3:1)
     --focus      #0B57D0 on --green-50         =  5.95:1
     --focus      #0B57D0 on --green-100        =  5.49:1
     --focus      #0B57D0 on --green-900        =  1.57:1  FAILS -> dark surfaces use a white ring (10.04:1)
     --line       #D3DDD7 on --bg               =  1.39:1  decorative hairlines only; input borders use ink-3
   ========================================================================================== */

/* §1 Design tokens — exactly as SPEC §3, plus derived helpers ------------------------------ */
:root {
  --green-900:#1F4A36; --green-700:#2F6B4F; --green-600:#376950; --green-100:#E7F0EB; --green-50:#F3F8F5;
  --red-600:#8E3F3F;  /* EKG accent only: rules, small marks, error text is separate */
  --ink:#1C2622; --ink-2:#465650; --ink-3:#6B7A73; --line:#D3DDD7; --bg:#FFFFFF; --bg-alt:#F4F7F5;
  --error:#B42318; --error-bg:#FEF3F2; --focus:#0B57D0;
  --font-body: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head: Georgia,"Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
  --radius:10px; --maxw:1120px; --shadow:0 1px 2px rgb(0 0 0/.06),0 6px 20px rgb(0 0 0/.06);

  /* Derived, non-spec helpers (kept here so pages never hard-code values). */
  --ink-muted: #3D4B45;                  /* muted text; 9.17:1 on white (SPEC §11.2 item 10) */
  --radius-sm: 6px;
  --gutter: clamp(1rem, 4vw, 2rem);      /* horizontal page padding */
  --control-h: 44px;                     /* minimum touch-target height for buttons/inputs */
  --speed: 150ms;                        /* zeroed under prefers-reduced-motion */
  color-scheme: light;
}

/* §2 Reset ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 17px;                       /* base 17px/1.6 per SPEC */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;                         /* utility bar / header / main / footer column */
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, table, fieldset { margin: 0; }

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button, summary, [role="button"] { cursor: pointer; }
button { background: none; border: 0; padding: 0; }

fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

address { font-style: normal; }

abbr[title] { text-decoration: underline dotted; }

p, h1, h2, h3, h4, h5, h6, li, dd, td, th { overflow-wrap: break-word; }

[hidden] { display: none !important; }

/* §3 Typography ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h-serif {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--green-900);
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 1.45rem + 2.2vw, 2.9rem); line-height: 1.12; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

/* Headings that follow content get breathing room; headings at the top of a block do not. */
* + h2 { margin-top: 1.75rem; }
* + h3 { margin-top: 1.4rem; }
* + h4 { margin-top: 1.2rem; }

p, ul, ol, dl, table, blockquote, figure, pre { margin-bottom: 1.1rem; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: 0.3rem; }
ul[class], ol[class] { list-style: none; padding: 0; }   /* a class means the component owns the styling */
/* list-style:none makes Safari/VoiceOver drop list semantics, so every classed <ul>/<ol> in the HTML
   carries role="list" to keep them (item count and position are still announced). */

a:not([class]) {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:not([class]):hover { color: var(--green-900); text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }
small, .small { font-size: 0.9rem; }
.lede { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.5; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }                          /* never ink-3 — see contrast table */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 0.6rem;
}
.prose { max-width: 70ch; }
.center { text-align: center; }
.center .prose, .center .section-head { margin-inline: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Decorative heartbeat rule echoing the logo. Use as
   <div class="ekg-rule" aria-hidden="true"></div>  (or <hr class="ekg-rule">). Colour = --red-600. */
.ekg-rule {
  display: block;
  width: min(100%, 240px);
  height: 28px;
  border: 0;
  margin: 0 0 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28' viewBox='0 0 240 28'%3E%3Cpath fill='none' stroke='%238E3F3F' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round' d='M0 14h80l6-4 6 4 6-11 7 22 6-11h129'/%3E%3C/svg%3E") left center / 240px 28px no-repeat;
}
.center .ekg-rule { margin-inline: auto; }

blockquote {
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--green-700);
  color: var(--ink-muted);
  font-family: var(--font-head);
  font-size: 1.1rem;
}

/* §4 Layout utilities ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 46rem; }

/* Consistent vertical rhythm: every full-width band uses .section (or .section-sm). */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-sm { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section-alt { background: var(--bg-alt); }
.section-tint { background: var(--green-50); }
.section-head { max-width: 48rem; margin-bottom: 2rem; }
.section-head > :last-child { margin-bottom: 0; }

/* Interior page title band (all pages except home). */
.page-header {
  background: var(--green-50);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.page-header h1 { margin-bottom: 0.35rem; }
.page-header .lede { margin-bottom: 0; }
/* Careers is the only interior header with CTAs; match the hero's lede-to-button spacing. */
.page-header .lede + .cta-row { margin-top: 1.75rem; }

.flow > * + * { margin-top: 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.stack-sm > * + * { margin-top: 0.5rem; }

/* §5 Focus + skip link ---------------------------------------------------------------------- */
/* One visible ring for every focusable element, exactly as SPEC §3. :focus-visible keeps the
   ring for keyboard users and drops it after mouse clicks on buttons/links; inputs always show it. */
:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Dark surfaces: the blue ring is 1.57:1 on green-900, so switch to white (10.04:1). */
.utility-bar :focus-visible,
.footer-bar :focus-visible,
.bg-dark :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  top: -100px;                           /* parked off-screen until focused */
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--green-900);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--speed) ease-out;
}
.skip-link:focus, .skip-link:focus-visible { top: 0; }

/* §6 Utility bar, header + navigation ------------------------------------------------------- */

/* Utility bar (SPEC §11.2 item 1): one dark-green line above the header on every page —
   address · hours · phone · toll-free. Below 760px only hours + phone remain. Markup:
   <div class="utility-bar" role="region" aria-label="Office contact"><div class="container">
     <ul class="utility-list">
       <li class="utility-address">…</li><li class="utility-hours">…</li>
       <li class="utility-phone"><a href="tel:…">…</a></li><li class="utility-tollfree">Toll-free <a …>…</a></li>
     </ul></div></div>
   Text is white on green-900 (10.04:1); separators are green-100 (8.64:1).
   Selectors are written as ".utility-bar .utility-list" so they outrank the generic ul[class] reset. */
.utility-bar {
  --sep-w: 1.6rem;                       /* width of one "·" separator cell */
  background: var(--green-900);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
}
.utility-bar .utility-list {
  display: flex;
  flex-wrap: wrap;                       /* if a platform font runs wide, items wrap cleanly (see below) */
  align-items: center;
  gap: 0.15rem 0;
  min-height: 40px;
  padding: 0.4rem 0;
  list-style: none;
  /* Separator trick: EVERY item carries a leading "·" cell; the list is shifted left by one cell and
     clipped there, so the separator at the start of each line (first item, or a wrapped item) is
     never visible — no first-child / hidden-item special cases needed. */
  margin: 0 0 0 calc(-1 * var(--sep-w));
  clip-path: inset(0 0 0 var(--sep-w));
}
.utility-bar .utility-list li { margin: 0; white-space: nowrap; }
.utility-bar .utility-list li::before {
  content: "\00B7";                      /* fallback for engines without the alt-text syntax below */
  content: "\00B7" / "";                 /* decorative separator: empty alt text hides it from assistive tech
                                            (Chrome 77+, Safari 17.4+, Firefox 128+; older engines keep the line above) */
  display: inline-block;
  width: var(--sep-w);
  text-align: center;
  color: var(--green-100);
  font-weight: 700;
}
.utility-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 0.16em;
  border-radius: 3px;
}
.utility-bar a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 759.98px) {
  /* Phones/small tablets: hours + phone only (SPEC §11.2 item 1). */
  .utility-bar .utility-address, .utility-bar .utility-tollfree { display: none; }
  .utility-bar { font-size: 0.85rem; }
}
@media (min-width: 760px) and (max-width: 959.98px) {
  /* Tablets: address · hours · phone fit one line at 0.85rem; the toll-free number joins from 960px
     (it is still in the footer and the office card). Measured at 760px: ~625px of ~685px available. */
  .utility-bar .utility-tollfree { display: none; }
  .utility-bar { font-size: 0.85rem; }
}

.site-header {
  position: relative;                    /* anchors the absolutely positioned mobile menu panel */
  z-index: 20;
  background: var(--bg);
  border-top: 3px solid var(--red-600);  /* EKG accent rule between the utility bar and the header */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.03);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;                       /* safety net for very narrow screens: nav drops to row 2 */
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 72px;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--green-900);
  font-family: var(--font-head);
  font-weight: 700;                      /* alt text fallback if the SVG fails to load */
}
/* The logo SVG is 877.2 x 238 (ratio 3.686): 206px wide = 56px tall (desktop target, SPEC §11.2 item 10). */
.brand img { width: clamp(150px, 42vw, 206px); height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.nav-list { display: none; list-style: none; margin: 0; padding: 0; }   /* mobile default: closed */
.nav-list li { margin: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--speed), color var(--speed);
}
.nav-list a:hover { color: var(--green-900); background: var(--green-50); }
/* Current page: builders add aria-current="page" to exactly one link (see _layout.html). */
.nav-list a[aria-current="page"] {
  color: var(--green-900);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--green-700);
  text-underline-offset: 0.4em;
}

/* .site-nav .nav-cta outranks .btn (declared later) so the header can compact the CTA per breakpoint. */
.site-nav .nav-cta { white-space: nowrap; }
.site-nav .nav-cta[aria-current="page"] { background: var(--green-900); border-color: var(--green-900); }

/* Mobile toggle: a native <details>. The <summary> is the "Menu" button; the nav list is the
   NEXT sibling and is shown by CSS whenever the details is [open] — so it works with JS disabled.
   (The list lives outside the <details> so that on desktop it can be permanently visible while the
   toggle is hidden; a closed <details> would otherwise hide its children in every browser.) */
.nav-toggle { position: relative; }
.nav-toggle > summary {
  list-style: none;                      /* remove the disclosure triangle */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--control-h);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--speed), border-color var(--speed);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary::marker { content: ""; }
.nav-toggle > summary:hover { background: var(--green-50); border-color: var(--green-700); }
.nav-toggle[open] > summary { background: var(--green-50); border-color: var(--green-700); color: var(--green-900); }

/* Hamburger icon (three bars) that becomes an X when open. Pure CSS, no images. */
.nav-toggle-icon { position: relative; width: 1.15rem; height: 1rem; flex: none; }
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--speed), box-shadow var(--speed), top var(--speed);
}
.nav-toggle-icon::before { top: 0; box-shadow: 0 7px 0 currentColor; }   /* top + middle bar */
.nav-toggle-icon::after  { top: 14px; }                                    /* bottom bar */
.nav-toggle[open] .nav-toggle-icon::before { top: 7px; box-shadow: none; transform: rotate(45deg); }
.nav-toggle[open] .nav-toggle-icon::after  { top: 7px; transform: rotate(-45deg); }

/* Phones (< 480px): compact the header so logo + Menu + Apply Now fit one row from 360px wide.
   The "Menu" label becomes screen-reader-only (the accessible name is unchanged); the hamburger
   icon alone is shown. Below ~330px the header simply wraps onto two rows (flex-wrap above). */
@media (max-width: 479.98px) {
  /* Measured: at 360px only 326px is available (gutter clamps to 17px). Logo 136.8 + gap 8.5 +
     nav (45.3 toggle + 8.5 gap + ~121 CTA) = ~320px. At 375px: ~326px of 341px. */
  .brand img { width: clamp(132px, 38vw, 206px); }
  .header-inner { gap: 0.5rem; }
  .site-nav { gap: 0.5rem; }
  .nav-toggle > summary { padding: 0.4rem 0.7rem; gap: 0; }
  .nav-toggle-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .site-nav .nav-cta { padding: 0.55rem 0.75rem; font-size: 0.9rem; }
}

/* Mobile menu panel (< 760px): full-width dropdown under the header. */
@media (max-width: 759.98px) {
  .nav-toggle[open] ~ .nav-list {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    padding: 0.5rem var(--gutter) 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-toggle[open] ~ .nav-list li + li { border-top: 1px solid var(--line); margin-top: 0; }
  .nav-toggle[open] ~ .nav-list a { min-height: 48px; padding: 0.6rem 0.5rem; font-size: 1.05rem; }
  .nav-toggle[open] ~ .nav-list a[aria-current="page"] { text-underline-offset: 0.25em; }
}

/* Desktop navigation (>= 760px): toggle hidden, list always visible and horizontal.
   Logo grows with the viewport: 158px (43px tall) -> 184px (50px) -> 206px (56px) at 1040px+. */
@media (min-width: 760px) {
  /* 760–959px is a tight band: ~699px of row width for logo + 5 links + CTA, so everything is compact.
     .header-inner keeps flex-wrap as a safety net — if a platform font runs wide, the nav drops to a
     second row instead of squeezing. */
  .nav-toggle { display: none; }
  .header-inner { gap: 0.5rem 0.75rem; min-height: 76px; }
  .site-nav { gap: 0.75rem; }
  .nav-list { display: flex; align-items: center; gap: 0; position: static; }
  .nav-list a { padding: 0.25rem 0.45rem; font-size: 0.9rem; }
  .site-nav .nav-cta { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
  .brand img { width: 158px; }
}
@media (min-width: 900px) {
  .brand img { width: 184px; }
  .header-inner { min-height: 82px; }
  .nav-list { gap: 0.15rem; }
  .nav-list a { padding: 0.25rem 0.55rem; font-size: 0.95rem; }
  .site-nav .nav-cta { padding: 0.55rem 1rem; font-size: 0.95rem; }
  .site-nav { gap: 1rem; }
}
@media (min-width: 1040px) {
  .brand img { width: 206px; }           /* = 56px tall */
  .header-inner { gap: 0.75rem 1rem; min-height: 88px; padding-block: 0.8rem; }
  .nav-list { gap: 0.25rem; }
  .nav-list a { padding: 0.25rem 0.7rem; font-size: 1rem; }
  .site-nav .nav-cta { padding: 0.65rem 1.25rem; font-size: 1rem; }
  .site-nav { gap: 1.25rem; }
}

/* §7 Buttons, cards, hero, split, callouts, steps ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-h);          /* >= 44px tall per SPEC */
  padding: 0.65rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}
.btn-primary { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.btn-secondary { background: var(--bg); border-color: var(--green-700); color: var(--green-700); }
.btn-secondary:hover { background: var(--green-50); color: var(--green-900); border-color: var(--green-900); }
.btn-lg { min-height: 52px; padding: 0.8rem 1.6rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* Cards */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-2, .grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Revision 2: every card is a quiet white panel — 1px --line hairline + the soft token shadow.
   The former 4px coloured top border on .value-card is gone; the class is kept so existing page
   markup (<article class="card value-card">) needs no change. */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2, .card h3 { margin-top: 0; }
.value-card { padding: 1.6rem 1.5rem; }
.value-card h3 { font-size: 1.2rem; }
.card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-900);
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
/* Stroke-based inline SVG icons inside .card-icon (the generic rule above fills with currentColor). */
.card-icon svg.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hero (home). Revision 2: two columns from 900px — copy + CTAs on the left, the white
   "Our Shreveport office" card on the right (SPEC §11.2 item 2). Stacks on narrower screens. */
.hero {
  background: linear-gradient(180deg, var(--green-50) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.9fr); gap: clamp(2rem, 5vw, 4rem); }
}
.hero-inner { max-width: 40rem; }
.hero h1 { margin-bottom: 0.9rem; }
.hero .lede { margin-bottom: 1.75rem; }
.hero .eyebrow { margin-bottom: 0.9rem; }

/* Office card: <div class="card office-card"><h2>Our Shreveport office</h2><address>…</address>
   <ul class="list-check office-facts">…</ul><dl class="office-details"><dt>Phone</dt><dd>…</dd>…</dl></div>
   On every office card (home, about, contact, template) the facts list (Established · LDH listing) goes
   directly under the address so the regulator link is above the fold on phones (SPEC §11.2 item 10). The
   hairline is drawn on whichever edge of the list faces the details, so a list placed last still renders. */
.office-card { padding: 1.5rem 1.6rem 1.6rem; }
.office-card h2 {
  font-size: 1.3rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--green-100);
}
.office-card address { font-weight: 600; line-height: 1.5; margin-bottom: 0.9rem; }
.office-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1rem;
  margin: 0 0 1rem;
}
.office-details dt { font-weight: 600; color: var(--green-900); }
.office-details dd { margin: 0; }
.office-card .office-facts {                 /* outranks the ul[class] padding reset */
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Facts placed above the details (every page): the rule moves below the list. */
.office-card .office-facts:not(:last-child) {
  margin: 0 0 0.9rem;
  padding: 0 0 0.8rem;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.office-card .office-facts > li + li { margin-top: 0.45rem; }

/* Phones (< 600px): tighten the stacked hero so the office card — heading, address and the LDH directory
   link — clears the fold at 375x812 and 390x844 (SPEC §11.2 item 10). The root font is 17px, so
   1.7rem = 28.9px. Buttons keep the 44px minimum height. From 600px up nothing here applies. */
@media (max-width: 599.98px) {
  .hero { padding-block: 1.25rem 1.75rem; }
  .hero .eyebrow { font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
  .hero h1 { font-size: 1.7rem; line-height: 1.12; margin-bottom: 0.55rem; }
  .hero .lede { font-size: 0.95rem; line-height: 1.45; margin-bottom: 1rem; }
  .hero .cta-row { gap: 0.5rem 0.75rem; }
  .hero .cta-row .btn-lg { min-height: var(--control-h); padding: 0.55rem 1.1rem; font-size: 0.95rem; }
  .hero-grid { gap: 1rem; }
  .office-card { padding: 1.1rem 1.2rem 1.2rem; }
  .office-card h2 { font-size: 1.15rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; }
  .office-card address { margin-bottom: 0.6rem; }
}

/* Two-column "For facilities / For nurses" split */
.split { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.split-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.split-panel > :first-child { margin-top: 0; }
.split-panel > :last-child { margin-bottom: 0; }
.split-panel.for-facilities { background: var(--green-50); border-color: var(--green-100); }
.split-panel.for-nurses { background: var(--bg-alt); }
.split-panel .cta-row { margin-top: 1.25rem; }

/* Callouts */
.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green-700);
  border-radius: var(--radius);
}
.callout-info { background: var(--green-50); border-color: var(--green-100); border-left-color: var(--green-700); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; font-weight: 700; color: var(--green-900); margin-bottom: 0.35rem; }

/* Numbered steps ("how it works") — <ol class="steps"><li><h3>…</h3><p>…</p></li></ol> */
.steps { counter-reset: step; display: grid; gap: 1.25rem; }
.steps > li { position: relative; padding-left: 3.4rem; margin: 0; counter-increment: step; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
}
.steps h3 { margin-top: 0; margin-bottom: 0.3rem; }
.steps > li > :last-child { margin-bottom: 0; }
@media (min-width: 760px) { .steps.steps-row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Check list — <ul class="list-check"> */
.list-check > li { position: relative; padding-left: 1.75rem; }
.list-check > li::before {
  content: "\2713";                      /* check mark (fallback for engines without the alt-text syntax) */
  content: "\2713" / "";                 /* decorative glyph: empty alt text hides it from assistive tech */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green-700);
  font-weight: 700;
}

/* Name/address/phone block (contact page + footer) */
.nap { line-height: 1.7; }
.nap strong { color: var(--green-900); }

/* §8 Tables --------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
caption { text-align: left; font-family: var(--font-head); font-weight: 700; color: var(--green-900); padding-bottom: 0.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--green-50); color: var(--green-900); border-bottom: 2px solid var(--line); }
tbody tr:nth-child(even) { background: var(--bg-alt); }

/* §9 Forms (generic; apply.css builds on these) --------------------------------------------- */
form { max-width: 100%; }
.form-narrow { max-width: 46rem; }

.field { margin-bottom: 1.25rem; }
.field > label, .field-label, .field-legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.label-note { font-weight: 400; color: var(--ink-muted); }       /* "(required)" / "(optional)" text */
.hint { display: block; margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--ink-muted); }
.field > .hint + input, .field > .hint + select, .field > .hint + textarea { margin-top: 0.5rem; }

/* Two- and three-up field rows on wider screens. */
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; align-items: start; margin-bottom: 1.25rem; }
  .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row > .field { margin-bottom: 0; }
}
.field-sm { max-width: 12rem; }
.field-xs { max-width: 7rem; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 0.55rem 0.8rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink-3);        /* 4.51:1 on white — meets the 3:1 UI-boundary rule */
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--ink-2); }
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
::placeholder { color: var(--ink-3); opacity: 1; }         /* inputs are always white -> 4.51:1 */

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23465650' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.9rem;
}
select[multiple] { background-image: none; padding-right: 0.8rem; }

input:disabled, select:disabled, textarea:disabled { background: var(--bg-alt); color: var(--ink-2); cursor: not-allowed; }
input:read-only:not([type="checkbox"]):not([type="radio"]), textarea:read-only { background: var(--bg-alt); }

/* Invalid state: thicken the border with a shadow (no layout shift) and colour it. */
[aria-invalid="true"] {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 1px var(--error);
}

/* Inline error text placed directly after the control, linked via aria-describedby. */
.field-error {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--error);
}
.field-error:empty { display: none; }

/* Error summary at the top of the form: <div class="form-summary" role="alert" tabindex="-1"> */
.form-summary[role="alert"] {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-left-width: 5px;
  border-radius: var(--radius);
  color: var(--ink);
}
.form-summary[role="alert"]:empty { display: none; }
.form-summary h2, .form-summary h3, .form-summary .summary-title {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--error);
}
.form-summary ul { margin: 0; padding-left: 1.2rem; list-style: disc; }
.form-summary a { color: var(--error); font-weight: 600; text-decoration: underline; }
.form-summary a:hover { color: var(--ink); }

/* Success / neutral status box for post-submit confirmation. */
.form-success {
  padding: 1.25rem 1.5rem;
  background: var(--green-50);
  border: 1px solid var(--green-700);
  border-left-width: 5px;
  border-radius: var(--radius);
}

/* Fieldsets group related controls; legend reads as a mini heading. */
fieldset {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
legend {
  padding: 0 0.45rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-900);
}
fieldset > .hint { margin-top: -0.15rem; margin-bottom: 0.75rem; }
fieldset > .field:last-child, fieldset > .form-row:last-child { margin-bottom: 0; }

/* Checkbox / radio groups: <div class="choice-group"><label class="choice"><input …> Text</label></div> */
.choice-group { display: grid; gap: 0.15rem; }
.choice-group-inline { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
@media (min-width: 600px) { .choice-group-cols { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: var(--control-h);          /* generous touch targets */
  padding: 0.45rem 0.25rem;
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.choice:hover { background: var(--green-50); }
input[type="checkbox"], input[type="radio"] {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--green-700);
  cursor: pointer;
}
.choice input[type="checkbox"], .choice input[type="radio"] { margin-top: 0.2rem; }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1.5rem; }
.form-note { font-size: 0.95rem; color: var(--ink-muted); }

/* §10 Footer (SPEC §11.2 item 7): four columns — brand · For facilities · For nurses · Contact —
   then the dark bottom bar. One column below 600px, two to 959px, four from 960px. ----------- */
.site-footer {
  margin-top: auto;
  background: var(--green-50);
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.footer-grid {
  display: grid;
  gap: 2rem 2rem;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 2rem 2.5rem; } }
.footer-col > :last-child { margin-bottom: 0; }

.footer-brand .brand img { width: 184px; margin-bottom: 1rem; }   /* = 50px tall */
.footer-brand p { color: var(--ink-muted); font-size: 0.97rem; max-width: 34ch; margin-bottom: 0.6rem; }

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-900);
  margin: 0 0 0.75rem;
}
* + .footer-heading { margin-top: 1.5rem; }
.site-footer address { margin-bottom: 0.9rem; line-height: 1.6; }
.site-footer address strong { color: var(--green-900); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 0; padding: 0.2rem 0; }
/* Links in the light four-column grid only. Scoped to .footer-grid so this rule cannot outrank the
   .footer-bar rules below: every :not(.x) counts as a class, so the former ".site-footer a:not()…" form
   at (0,3,1) beat ".site-footer .footer-bar a" at (0,2,1) and left the Privacy Policy link green-700 on
   green-900 (1.6:1). Every grid anchor lives inside .footer-grid; the bar holds only Privacy Policy. */
.site-footer .footer-grid a:not(.brand):not(.btn) {
  color: var(--green-700);               /* 5.86:1 on green-50 */
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.site-footer .footer-grid a:not(.brand):not(.btn):hover { color: var(--green-900); text-decoration-thickness: 2px; }
.site-footer p { margin-bottom: 0.6rem; }

.footer-bar {
  background: var(--green-900);
  color: #fff;                           /* 10.04:1 */
  font-size: 0.93rem;
}
.footer-bar .container { padding-block: 1rem; }
.footer-bar p { margin: 0; }
.site-footer .footer-bar a {
  color: var(--green-100);               /* 8.64:1 on green-900 */
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.site-footer .footer-bar a:hover { color: #fff; text-decoration-thickness: 2px; }   /* 10.04:1 */

/* §11 Utilities ----------------------------------------------------------------------------- */
/* Screen-reader-only text (still announced). Also used for the "(opens in a new tab)" note on
   every external link: <a … target="_blank" rel="noopener noreferrer">Text<span class="visually-hidden"> (opens in a new tab)</span></a> */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Honeypot wrapper for the anti-spam "website" field: parked far off-screen, NOT display:none and
   NOT visibility:hidden, so naive bots that check computed visibility still "see" and fill it.
   Markup: <div class="honeypot"><label for="website">Website</label>
           <input id="website" name="website" type="text" tabindex="-1" autocomplete="off" aria-hidden="true"></div> */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.honeypot input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.text-error { color: var(--error); }
/* Phone numbers must never break mid-number (tel: links everywhere; .nowrap for plain-text fax numbers). */
.nowrap, a[href^="tel:"] { white-space: nowrap; }

/* §12 Motion -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active:not(:disabled) { transform: none; }
}

/* §13 Print --------------------------------------------------------------------------------- */
@media print {
  @page { margin: 1.5cm; }
  html { font-size: 12pt; }
  body { color: #000; background: #fff; }
  .skip-link, .site-nav, .nav-toggle, .cta-row, .form-actions, .btn { display: none !important; }
  .utility-bar { background: #fff; color: #000; border-bottom: 1px solid #000; font-size: 10pt; }
  .utility-bar a { color: #000; }
  .site-footer .footer-bar a { color: #000; }   /* same specificity as the screen rule, later in the file */
  .utility-bar .utility-list li::before { color: #000; }
  .utility-bar .utility-address, .utility-bar .utility-tollfree { display: block; }   /* print keeps all four */
  .site-header { border-top: 0; border-bottom: 1px solid #000; box-shadow: none; }
  .hero, .page-header, .section-alt, .section-tint, .site-footer, .split-panel, .callout, .card, .footer-bar,
  .trust, .faq {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .card, .split-panel, .callout, fieldset { border-color: #999; break-inside: avoid; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip li, .office-card h2, .office-details dt { color: #000; }
  .faq { border-color: #999; }
  .faq > summary::after { display: none; }
  .faq:not([open]) > :not(summary) { display: none; }
  h1, h2, h3, h4 { color: #000; break-after: avoid; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]:not(.brand)::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* §14 Page components ----------------------------------------------------------------------- */

/* Trust strip (SPEC §11.2 item 3): four short factual items directly under the home hero.
   <section class="trust" aria-label="…"><div class="container"><ul class="trust-strip">
     <li><span class="card-icon" aria-hidden="true"><svg class="icon-stroke" …></svg></span>Established January 2005</li> …
   </ul></div></section> */
.trust {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-block: 1.25rem;
}
.trust-strip {
  display: grid;
  gap: 0.9rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0;
}
.trust-strip > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--green-900);               /* 10.04:1 */
}
.trust-strip .card-icon { width: 2.5rem; height: 2.5rem; margin: 0; flex: none; }
.trust-strip .card-icon svg { width: 1.25rem; height: 1.25rem; }

/* FAQ (SPEC §11.2 item 5): native <details class="faq"><summary>Question</summary><p>Answer</p></details>.
   Works without JS, keyboard accessible. Wrap a group in <div class="faq-list">. The chevron is a
   pure-CSS border (no text glyph for screen readers to announce). */
.faq-list { margin: 0 0 1.5rem; }
.faq {
  border-bottom: 1px solid var(--line);
}
.faq:first-of-type, .faq-list > .faq:first-child { border-top: 1px solid var(--line); }
.faq > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--control-h);
  padding: 0.95rem 0.25rem;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);
  border-radius: var(--radius-sm);
  transition: color var(--speed), background-color var(--speed);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::marker { content: ""; }
.faq > summary:hover { color: var(--green-700); background: var(--green-50); }
.faq > summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform var(--speed);
}
.faq[open] > summary::after { transform: translateY(0.15rem) rotate(-135deg); }
.faq > :not(summary) { padding-inline: 0.25rem; max-width: 70ch; }
.faq > :not(summary):last-child { margin-bottom: 0; padding-bottom: 1.2rem; }
.faq > summary + * { margin-top: 0.1rem; }

/* "How we screen our nurses" (SPEC §11.2 item 4): <ol class="screen-steps"><li><h3>…</h3><p>…</p></li></ol>.
   Lighter than .steps (green-100 discs, green-900 numbers) with a rail joining the steps, so it
   reads as a process rather than a call to action. Heading level inside may be h3 or h4. */
.screen-steps { counter-reset: screen; margin: 0 0 1.5rem; }
.screen-steps > li {
  position: relative;
  padding-left: 3.25rem;
  padding-bottom: 1.4rem;
  margin: 0;
  counter-increment: screen;
}
.screen-steps > li:last-child { padding-bottom: 0; }
.screen-steps > li::before {
  content: counter(screen);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-900);               /* 8.64:1 */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
}
.screen-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 1px);
  top: 2.3rem;
  bottom: 0.15rem;
  width: 2px;
  background: var(--green-100);
}
.screen-steps h3, .screen-steps h4 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.screen-steps > li > :last-child { margin-bottom: 0; }

/* Grid children keep their natural height instead of stretching to the tallest column. */
.align-start { align-items: start; }

/* Centred CTA rows (page-ending CTA bands, 404). */
.cta-center { justify-content: center; }

/* Page-ending CTA band: heading + buttons + one small NAP line. */
.cta-band .section-head { margin-bottom: 1.5rem; }
.cta-band .cta-row { margin-bottom: 1.25rem; }
.cta-band .small { margin-bottom: 0; }

/* Two-column check lists on wider screens (specialties). */
@media (min-width: 600px) {
  .list-cols { columns: 2; column-gap: 2rem; }
  .list-cols > li { break-inside: avoid; }
}

/* Term/value pairs for contact details: <dl class="detail-list"><dt>Phone</dt><dd>…</dd></dl> */
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1.1rem; }
.detail-list dt { font-weight: 600; color: var(--green-900); }
.detail-list dd { margin: 0; }
@media (max-width: 479.98px) {
  .detail-list { grid-template-columns: 1fr; gap: 0; }
  .detail-list dt { margin-top: 0.5rem; }
}

/* Steps with h4 headings (used under an h3 on /careers so heading levels stay in order). */
.steps h4 { margin-top: 0; margin-bottom: 0.3rem; font-size: 1.2rem; }
.steps-heading { margin-top: 2.75rem; }

/* Owner cards on /about. */
.person h3 { margin-bottom: 0.15rem; }
.person .role { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 0.75rem; }

/* Photo-ready slots on /about (SPEC §11.2 item 6): an empty <figure class="photo-slot"> takes no
   space now; once an <img> is dropped in it renders as a framed photo. */
.photo-slot { margin: 0 0 1.25rem; }
.photo-slot:empty { display: none; }
.photo-slot img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.photo-slot figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-muted); }

/* Privacy policy: legal-document rhythm inside .container-narrow. */
.legal .updated { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.legal h3 { font-size: 1.15rem; }
.legal ul { padding-left: 1.4rem; list-style: disc; }
.legal li + li { margin-top: 0.45rem; }

/* 404: tall, centred, calm. */
.notfound { padding-block: clamp(4rem, 10vw, 7rem); }
.notfound .cta-row { margin-bottom: 1.5rem; }

/* §15 ===== Page-specific rules may be appended below this line by the pages agent. ========= */