/* =====================================================================
   Crestwood Legacy Homes — Global Stylesheet
   Design system: "Heritage Care & Legacy"
   Pillars: Professionalism · Compassion · Stability
   Heritage Navy + Growth Green on Parchment White.
   ===================================================================== */

:root{
  /* ---- Brand ---- */
  --navy:#002144;            /* deep-navy — headings, nav, dark bands */
  --navy-deep:#001e40;       /* primary */
  --navy-mid:#003366;        /* primary-container */
  --navy-soft:#1f477b;
  --navy-pale:#d5e3ff;
  --navy-dim:#a7c8ff;

  --green:#2e6c0f;           /* secondary — Growth Green */
  --green-deep:#1c5200;
  --green-mid:#337014;
  --green-bright:#94d871;
  --sage:#E9F0E6;            /* sage-wash */
  --sage-deep:#dbe7d6;

  --gold:#B5893E;            /* gold-accent — footer headings */
  --red:#C62828;             /* emergency only */

  /* ---- Surfaces & text ---- */
  --surface:#fbf9f8;         /* Parchment White — page background */
  --surface-low:#f5f3f3;
  --surface-mid:#efeded;
  --white:#ffffff;           /* top layer: cards, inputs */
  --ink:#1b1c1c;             /* on-surface */
  --ink-soft:#43474f;        /* on-surface-variant */
  --muted:#5c616b;
  --outline:#737780;
  --line:#e2e0df;
  --line-soft:#eae8e7;
  --warn:#C62828;

  /* legacy aliases kept so older markup keeps working */
  --blue:#003366;
  --blue-mid:#1f477b;
  --blue-light:#E9F0E6;
  --blue-tint:#f5f3f3;
  --green-light:#E9F0E6;
  --bg:#fbf9f8;
  --bg-soft:#f5f3f3;
  --amber:#B5893E;

  /* ---- Shape (rounded = friendly & safe) ---- */
  --radius-xl:24px;
  --radius:16px;            /* large containers / cards */
  --radius-sm:8px;          /* buttons, inputs */
  --radius-xs:6px;

  /* ---- Elevation: ambient, navy-tinted ---- */
  --shadow-xs:0 1px 3px rgba(0,33,68,.04);
  --shadow-sm:0 4px 20px rgba(0,33,68,.05);
  --shadow:0 8px 30px rgba(0,33,68,.08);
  --shadow-lg:0 18px 50px rgba(0,33,68,.14);
  --ring:0 0 0 3px rgba(46,108,15,.28);   /* Growth Green halo */

  /* ---- Rhythm ---- */
  --maxw:1280px;
  --gap-section:120px;
  --gap-section-sm:64px;

  --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --display:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:var(--display);   /* legacy alias */
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
/* `clip` (not `hidden`) stops the off-canvas menu widening the page
   without turning the root into a scroll container — sticky header keeps working. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;font-family:var(--font);color:var(--ink-soft);background:var(--surface);
  line-height:1.6;font-size:18px;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);line-height:1.25;font-weight:700;
  margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.16}
h2{font-size:clamp(1.6rem,3vw,2rem);font-weight:600;line-height:1.25}
h3{font-size:1.33rem;font-weight:600}
h4{font-size:1.06rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--green);text-decoration:none;transition:color .16s var(--ease)}
a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
strong,b{color:var(--ink);font-weight:600}
::selection{background:var(--sage);color:var(--navy)}

/* Focus: 2px Growth Green halo, clearly visible for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:var(--gap-section) 0}
.section.tight{padding:72px 0}
@media(max-width:860px){
  .section{padding:var(--gap-section-sm) 0}
  .section.tight{padding:48px 0}
}
.bg-soft{background:var(--surface-low)}
.bg-blue{background:var(--sage)}
.bg-green{background:var(--sage)}
.center{text-align:center}
.lead{font-size:1.16rem;color:var(--ink-soft);max-width:720px;line-height:1.65}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.09em;font-size:.8rem;
  font-weight:600;color:var(--green);margin-bottom:.75rem;font-family:var(--font)}
.text-muted{color:var(--muted)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.narrow{max-width:840px;margin-left:auto;margin-right:auto}

/* Skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:14px 22px;
  z-index:2000;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- Buttons — min 48px tall for easy tapping ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;
  min-height:48px;padding:13px 26px;border-radius:var(--radius-sm);font-weight:600;
  font-size:.97rem;letter-spacing:.01em;cursor:pointer;border:2px solid transparent;
  text-decoration:none;line-height:1.2;font-family:var(--font);
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(46,108,15,.24)}
.btn-green:hover{background:var(--green-deep);color:#fff;box-shadow:0 8px 22px rgba(46,108,15,.3)}
.btn-blue{background:var(--navy-deep);color:#fff;box-shadow:0 4px 14px rgba(0,33,68,.2)}
.btn-blue:hover{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(0,33,68,.26)}
.btn-outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn-outline:hover{background:var(--sage);color:var(--green-deep);border-color:var(--green-deep)}
.btn-white{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.btn-white:hover{background:var(--sage);color:var(--navy)}
.btn-ghost-white{background:transparent;color:#fff;border-color:rgba(233,240,230,.55)}
.btn-ghost-white:hover{background:rgba(233,240,230,.14);color:#fff;border-color:var(--sage)}
.btn-lg{padding:16px 32px;font-size:1.02rem;min-height:54px}
.btn-sm{padding:10px 18px;font-size:.88rem;min-height:42px}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.btn-row.center{justify-content:center}

/* ---------- Header / Nav ---------- */
.topbar{background:var(--navy);color:#cddbe8;font-size:.82rem;letter-spacing:.005em}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
  align-items:center;padding-top:10px;padding-bottom:10px}
.topbar a{color:#e4edf5;font-weight:500}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;flex-wrap:wrap;gap:22px}
.topbar .tb-item{display:inline-flex;align-items:center;gap:8px}
.topbar .tb-item svg{opacity:.7}
.topbar .tb-badge{color:var(--green-bright);font-weight:600}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(251,249,248,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);transition:box-shadow .25s var(--ease)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,33,68,.06)}
.site-header.scrolled .topbar{display:none}

.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;transition:padding .25s var(--ease)}
.site-header.scrolled .nav{padding-top:10px;padding-bottom:10px}

/* logo-only brand mark — the wordmark is part of the logo artwork, so it is
   sized large enough for "Crestwood Legacy Homes" to stay legible */
/* Header uses the kit's stacked no-tagline lockup (02-logo-no-tagline).
   Stacked art splits the height between emblem and name -- roughly 70/20 --
   so it is sized generously here to give both enough room. */
/* No negative margin: it pulled the logo taller than the header could hold,
   so the wordmark spilled onto the hero image below and turned navy-on-navy.
   The header now grows to contain the logo instead. */
.brand{display:flex;align-items:center;flex-shrink:0;margin:0}
.brand:hover{text-decoration:none}
.brand img{width:auto;height:112px;object-fit:contain;
  transition:height .25s var(--ease)}
.site-header.scrolled .brand img{height:88px}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
/* `:not(.btn)` so the drawer's Request Services button keeps its own styling */
.nav-links a:not(.btn),.sub-toggle{display:flex;align-items:center;gap:5px;padding:9px 13px;
  color:var(--ink-soft);font-weight:600;font-size:.87rem;letter-spacing:.02em;border-radius:var(--radius-sm);
  white-space:nowrap;font-family:var(--font);background:none;border:0;cursor:pointer;line-height:1.5;
  transition:background .16s var(--ease),color .16s var(--ease)}
.nav-links a:not(.btn):hover,.sub-toggle:hover{background:rgba(233,240,230,.6);color:var(--navy);text-decoration:none}
.nav-links > li > a.active,.nav-links > li.active > .sub-toggle{color:var(--green);font-weight:700}
.nav-links > li > a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:-2px;
  height:2px;border-radius:2px;background:var(--green)}
.sub-toggle .chev{transition:transform .2s var(--ease);opacity:.65}
.has-sub.open .sub-toggle .chev{transform:rotate(180deg)}

.subnav{position:absolute;top:calc(100% + 12px);right:0;min-width:236px;list-style:none;
  margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:1100}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav{
  opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{padding:11px 14px;border-radius:var(--radius-sm);font-size:.9rem;width:100%}
.subnav a.active{color:var(--green);font-weight:700;background:var(--sage)}

.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-drawer-cta{display:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;border-radius:var(--radius-sm)}
.nav-toggle:hover{background:var(--sage)}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--navy);margin:5px 0;
  border-radius:3px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Nine primary links plus the CTA is a wide row, so tighten early and hand over
   to the drawer at 1180px — below that the button reaches the viewport edge. */
@media(max-width:1280px){
  .nav{gap:14px}
  .nav-links a:not(.btn),.sub-toggle{padding:9px 9px;font-size:.83rem}
  .brand img{height:88px}
  .site-header.scrolled .brand img{height:74px}
}
@media(max-width:1180px){
  .nav-toggle{display:block}
  /* Drops down from under the header rather than sliding in from the side.
     Positioned `absolute` against the sticky header — not `fixed` — so
     `top:100%` reliably means "the header's bottom edge" and tracks it when
     the topbar hides on scroll. Fixed positioning would only resolve that way
     because backdrop-filter happens to make the header a containing block; on
     a browser without it the panel would land a full viewport height down,
     completely off screen.
     Opening fades and slides a few pixels rather than translating its full
     height: the panel paints above the header's background, so sliding it up
     out of view would draw it over the logo and nav instead of behind them. */
  .nav-links{position:absolute;top:100%;left:0;right:0;bottom:auto;width:100%;
    max-height:74vh;max-height:74dvh;background:var(--surface);
    flex-direction:column;align-items:stretch;padding:12px 22px 26px;gap:2px;
    border-top:1px solid var(--line-soft);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:transform .26s var(--ease),opacity .2s var(--ease),
      visibility .26s;
    box-shadow:0 18px 46px rgba(0,33,68,.20);overflow-y:auto;
    overscroll-behavior:contain}
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-links a:not(.btn),.sub-toggle{padding:15px 12px;border-radius:var(--radius-sm);font-size:1rem;width:100%;
    letter-spacing:0}
  .nav-links > li{border-bottom:1px solid var(--line-soft)}
  .nav-links > li > a.active::after{display:none}
  .nav-links > li > a.active{background:var(--sage)}
  .sub-toggle{justify-content:space-between}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 8px 12px;min-width:0;display:none;background:transparent}
  .has-sub.open .subnav{display:block}
  .subnav a{font-size:.95rem;padding:12px;color:var(--muted)}
  .nav-drawer-cta{display:block;border-bottom:0!important;margin-top:20px}
  .nav-drawer-cta .btn{width:100%}
  .nav-cta .btn{display:none}
  body.nav-open{overflow:hidden}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,33,68,.5);z-index:999;opacity:0;
    visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .nav-scrim.show{opacity:1;visibility:visible}
}
@media(max-width:560px){
  .topbar{font-size:.75rem}
  .topbar .tb-left{gap:14px}
  .brand img{height:76px}
}

/* =====================================================================
   HOME SLIDER (replaces the static hero)
   ===================================================================== */
.slider{position:relative;background:var(--navy);overflow:hidden}
.slides{position:relative}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s var(--ease),visibility .8s}
.slide.current{position:relative;opacity:1;visibility:visible;z-index:2}
.slide-media{position:absolute;inset:0;z-index:0}
.slide-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 9s linear}
.slide.current .slide-media img{transform:scale(1)}
/* Navy scrim keeps headline contrast well above AA over any photo */
.slide-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,25,50,.94) 0%,rgba(0,29,58,.86) 42%,rgba(0,33,68,.5) 72%,rgba(0,33,68,.35) 100%)}
@media(max-width:820px){
  .slide-media::after{background:linear-gradient(180deg,rgba(0,25,50,.86) 0%,rgba(0,29,58,.9) 55%,rgba(0,33,68,.94) 100%)}
}
.slide-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:112px 24px 120px}
@media(max-width:820px){.slide-inner{padding:72px 24px 84px}}
.slide-copy{max-width:640px}
.slide .eyebrow{color:var(--green-bright);margin-bottom:14px}
.slide h1,.slide h2{color:#fff;margin-bottom:18px;text-wrap:balance;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.14;font-weight:700;letter-spacing:-.025em}
.slide p{color:#dbe6f0;font-size:1.14rem;line-height:1.62;max-width:52ch;margin-bottom:0}
.slide .btn-row{margin-top:32px}

/* Trust badges under the slider copy */
.slide-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.slide-badges .hb{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;color:#e6eef6;
  background:rgba(233,240,230,.1);border:1px solid rgba(233,240,230,.22);border-radius:999px;
  padding:9px 17px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.slide-badges svg{flex-shrink:0;color:var(--green-bright)}

/* Controls */
.slider-nav{position:absolute;z-index:6;bottom:36px;right:max(24px,calc((100% - var(--maxw))/2 + 24px));
  display:flex;align-items:center;gap:10px}
.slider-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(233,240,230,.4);
  background:rgba(0,33,68,.42);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.slider-btn:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px)}
.slider-dots{position:absolute;z-index:6;bottom:52px;
  left:max(24px,calc((100% - var(--maxw))/2 + 24px));display:flex;gap:10px}
.slider-dots button{width:34px;height:4px;border-radius:4px;border:0;padding:0;cursor:pointer;
  background:rgba(233,240,230,.35);transition:background .2s var(--ease),width .25s var(--ease)}
.slider-dots button:hover{background:rgba(233,240,230,.6)}
.slider-dots button[aria-current="true"]{background:var(--green-bright);width:52px}
@media(max-width:820px){
  .slider-nav{display:none}
  .slider-dots{bottom:32px;left:24px}
}
/* Sage strip directly under the slider — licence + reassurance */
.slider-trust{background:var(--sage);border-bottom:1px solid var(--sage-deep)}
.slider-trust .container{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;
  justify-content:space-between;padding-top:20px;padding-bottom:20px}
.slider-trust .st-item{display:inline-flex;align-items:center;gap:11px;font-size:.92rem;color:var(--navy)}
.slider-trust .st-item svg{color:var(--green);flex-shrink:0}
.slider-trust .st-item b{font-weight:600}

/* ---------- Hero (interior pages + legacy home markup) ---------- */
.hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-mid) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(620px 480px at 88% -10%,rgba(148,216,113,.16),transparent 62%)}
.hero .container{position:relative;z-index:2;padding-top:96px;padding-bottom:100px}
.hero h1{color:#fff;max-width:18ch;text-wrap:balance}
.hero p{color:#dbe6f0;font-size:1.14rem;max-width:56ch}
.hero .btn-row{margin-top:30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero-imgwrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;background:rgba(255,255,255,.05)}
.hero-imgwrap img{width:100%;height:100%;object-fit:cover}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;font-size:.86rem;color:#e6eef6}
.hero-badges .hb{display:inline-flex;align-items:center;gap:9px;background:rgba(233,240,230,.1);
  border:1px solid rgba(233,240,230,.22);border-radius:999px;padding:9px 17px}
.hero-badges svg{flex-shrink:0;color:var(--green-bright)}

.page-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 58%,var(--navy-mid) 100%)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(560px 420px at 92% -20%,rgba(148,216,113,.15),transparent 62%)}
.page-hero .container{padding-top:72px;padding-bottom:76px;position:relative;z-index:2}
.page-hero h1{color:#fff;text-wrap:balance;margin-bottom:.35em}
.page-hero p{color:#dbe6f0;max-width:64ch;font-size:1.1rem}
.page-hero.rel{position:relative;overflow:hidden}
.page-hero .breadcrumb{color:#a9c2d8;font-size:.8rem;margin-bottom:.8rem;
  text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.page-hero .breadcrumb a{color:#a9c2d8}
.page-hero .breadcrumb a:hover{color:#fff}

/* ---------- Light hero (parchment + photo, per Stitch about/referral) ---------- */
.hero-light{position:relative;overflow:hidden;background:var(--surface)}
/* soft sage bloom behind the photo */
.hero-light::before{content:"";position:absolute;right:-6%;top:-18%;width:52%;padding-bottom:52%;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(233,240,230,.9),rgba(233,240,230,0) 70%)}
.hero-light .container{position:relative;z-index:2;padding-top:88px;padding-bottom:96px}
.hero-light h1{color:var(--navy);margin-bottom:.45em}
.hero-light p{color:var(--ink-soft);font-size:1.12rem;max-width:52ch}
.hero-light .btn-row{margin-top:32px}
@media(max-width:900px){.hero-light .container{padding-top:56px;padding-bottom:64px}}

/* Pill badge — "Our Story", "For Healthcare Professionals" */
.pill-badge{display:inline-flex;align-items:center;gap:8px;background:var(--sage);color:var(--green);
  border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  margin-bottom:20px}
.pill-badge svg{flex-shrink:0}

/* Framed photo used beside light heroes and in feature rows */
.photo-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;background:var(--sage)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame.wide{aspect-ratio:16/10}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Cards: white top layer, 2px Growth Green hint on top, ambient shadow */
.card{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--green);
  border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);height:100%;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.card h3{margin-top:0;margin-bottom:.5rem}
/* cards are sometimes anchors — don't let the link colour bleed into body copy */
.card p,.card li{color:var(--ink-soft)}
.card p:last-child{margin-bottom:0}
/* Icons live in a soft sage circle — works standalone, not only inside .card */
.ic,.fic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--sage);color:var(--green);flex-shrink:0}
.card .ic{margin-bottom:22px}
.ic.green{background:var(--sage);color:var(--green)}
/* emergency / safety-critical cards only */
.ic.red{background:#fbeaea;color:var(--red)}
.card-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-top:12px;
  font-size:.92rem;color:var(--green)}
.card-link:hover{gap:9px;color:var(--navy)}
.card-flush{padding:0;overflow:hidden}
.card-flush .cf-body{padding:26px 28px}

/* Dark navy card — used for licensing / compliance panels */
.card-navy{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--navy-deep),var(--navy) 70%,var(--navy-mid));
  border:0;border-top:2px solid var(--green-bright);color:#cddbe8}
.card-navy::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
  border-radius:50%;background:rgba(148,216,113,.09)}
.card-navy > *{position:relative;z-index:1}
.card-navy h3,.card-navy h4{color:#fff}
.card-navy p{color:#bfd0e0}
.card-navy .ic{background:rgba(233,240,230,.12);color:var(--green-bright)}
/* inset fact panel (e.g. Facility ID) */
.card-navy .fact{background:rgba(0,0,0,.22);border:1px solid rgba(233,240,230,.14);
  border-radius:var(--radius-sm);padding:14px 18px;margin-top:22px}
.card-navy .fact span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:#9db4c8;margin-bottom:4px}
.card-navy .fact b{color:#fff;font-size:1.02rem}

.svc-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line-soft);
  border-top:2px solid var(--green);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-sm);height:100%;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
/* whole card is the link, so the arrow is an affordance — pin it to the bottom
   edge so it lines up across a row of cards with uneven copy */
.svc-card .card-link{margin-top:auto;padding-top:16px}
.svc-card:hover .card-link{gap:9px;color:var(--navy)}
.svc-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);text-decoration:none}
/* leading icon block (pages set colour inline) gets a sage circle */
.svc-card > div:first-child{width:48px;height:48px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--sage);margin-bottom:18px!important;
  color:var(--green)!important}
.svc-card h3{font-size:1.14rem;margin-bottom:.45rem;color:var(--navy)}
.svc-card p{font-size:.95rem;color:var(--ink-soft);margin-bottom:0;line-height:1.6}

.feature{display:flex;gap:18px;align-items:flex-start}
.feature h3{font-size:1.12rem;margin-bottom:.35rem}
.feature p{font-size:.96rem;color:var(--ink-soft);margin-bottom:0;line-height:1.6}

/* Several .feature rows collected into one card — reads better beside a column
   of copy than a grid of narrow cards, which leaves ragged empty space. */
.feature-stack{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--green);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:4px 30px}
.feature-stack .feature{padding:26px 0;border-bottom:1px solid var(--line-soft)}
.feature-stack .feature:last-child{border-bottom:0}
.feature-stack .feature h3{color:var(--navy)}
@media(max-width:560px){.feature-stack{padding:2px 22px}.feature-stack .feature{padding:22px 0;gap:14px}}

/* ---------- Split / media ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* `.flip` puts the media on the left while the DOM keeps text first, so the
   single-column layout below still reads copy-then-photo on every row. */
@media(min-width:861px){.split.flip .photo-frame,.split.flip .imgwrap{order:-1}}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
.split .imgwrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  background:var(--sage);min-height:320px;display:flex;align-items:center;justify-content:center}
.split .imgwrap img{width:100%;height:100%;object-fit:cover}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-family:var(--display);font-size:2.6rem;color:var(--green);
  line-height:1;letter-spacing:-.03em;margin-bottom:8px;font-weight:700}
.stat span{color:var(--ink-soft);font-size:.94rem}
.stats.on-dark .stat b{color:var(--green-bright)}
.stats.on-dark .stat span{color:#cddbe8}

/* ---------- CTA band — Heritage Navy ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--navy-mid))}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 420px at 50% -30%,rgba(148,216,113,.14),transparent 65%)}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.4rem)}
.cta-band p{color:#d6e3ef;max-width:56ch;margin-left:auto;margin-right:auto;font-size:1.08rem}
.cta-band .btn-row{justify-content:center;margin-top:30px}

/* ---------- Steps (connected timeline) ---------- */
.steps{counter-reset:step;display:grid;gap:14px;position:relative;padding-left:74px}
/* the rail the numbers sit on */
.steps::before{content:"";position:absolute;left:24px;top:36px;bottom:24px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--sage-deep) 0%,var(--green-bright) 55%,rgba(148,216,113,0) 100%)}
.step{position:relative;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:22px 26px 22px 24px;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
/* short tick joining each card to its number on the rail */
.step::after{content:"";position:absolute;left:-30px;top:35px;width:30px;height:2px;
  background:var(--sage-deep);transition:background .25s var(--ease)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:-74px;top:12px;
  z-index:1;width:48px;height:48px;background:#fff;border:2px solid var(--sage-deep);color:var(--green);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:1.15rem;font-family:var(--display);line-height:1;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),
    box-shadow .25s var(--ease),transform .25s var(--ease)}
.step:hover{box-shadow:var(--shadow);transform:translateX(3px);border-color:var(--sage-deep)}
.step:hover::after{background:var(--green-bright)}
/* pin the number to the rail while the card slides */
.step:hover::before{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 6px 16px rgba(46,108,15,.28);transform:translateX(-3px)}
.step h3{margin:0 0 .3rem;font-size:1.12rem;letter-spacing:-.005em}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.6}

@media(max-width:560px){
  .steps{padding-left:56px;gap:12px}
  .steps::before{left:19px;top:30px;bottom:22px}
  .step{padding:18px 20px}
  .step::before{left:-56px;top:10px;width:40px;height:40px;font-size:1rem}
  .step::after{left:-20px;top:29px;width:20px}
}

/* end-cap card that closes a .flow serpentine */
.flow-end{background:var(--sage);border:1px solid var(--sage-deep);border-radius:var(--radius);
  padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.flow-end h3{margin:0;font-size:1.08rem;color:var(--green-deep)}
.flow-end p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.flow-end .btn{align-self:flex-start;margin-top:2px}

/* ---------- Steps, serpentine flow variant (wide screens only) ----------
   Row 1 runs left→right, then the path drops and row 2 runs right→left.
   Below 940px this all falls back to the vertical timeline above.        */
@media(min-width:941px){
  .steps.flow{grid-template-columns:repeat(3,1fr);gap:52px 60px;padding-left:0}
  .steps.flow::before{content:none}
  .flow .step{padding:26px 24px;text-align:left}
  /* number becomes a badge in the card's flow, not a rail marker */
  .flow .step::before{position:static;width:44px;height:44px;margin:0 0 14px;
    font-size:1.08rem;transform:none}
  .flow .step:hover{transform:translateY(-3px)}
  .flow .step:hover::before{transform:none}
  .flow .step h3{font-size:1.06rem}
  .flow .step p{font-size:.93rem}

  /* connector: one clip-path arrow (shaft + head), rotated per direction */
  .flow .step::after{content:"";position:absolute;width:40px;height:14px;left:auto;
    top:50%;right:-50px;margin-top:-7px;background:#bcd5ac;
    clip-path:polygon(0 39%,64% 39%,64% 0,100% 50%,64% 100%,64% 61%,0 61%);
    transition:background .25s var(--ease)}
  .flow .step:hover::after{background:var(--green-bright)}

  /* serpentine placement: 4 and 5 wrap back across row 2 */
  .flow .step:nth-child(4){grid-column:3;grid-row:2}
  .flow .step:nth-child(5){grid-column:2;grid-row:2}
  .flow .flow-end{grid-column:1;grid-row:2}

  /* step 3 turns the corner — arrow points down into row 2 */
  .flow .step:nth-child(3)::after{top:auto;right:auto;bottom:-33px;left:50%;
    margin:0 0 0 -20px;transform:rotate(90deg)}
  /* row 2 flows right→left */
  .flow .step:nth-child(4)::after,
  .flow .step:nth-child(5)::after{right:auto;left:-50px;transform:rotate(180deg)}
}

/* ---------- FAQ accordion ---------- */
.faq{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line-soft);border-radius:var(--radius);margin-bottom:14px;
  background:#fff;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.faq-item.open{box-shadow:var(--shadow-sm);border-left:3px solid var(--green)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:21px 26px;font-size:1.05rem;
  font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;
  gap:16px;align-items:center;font-family:var(--display);line-height:1.4;
  transition:background .16s var(--ease)}
.faq-q:hover{background:var(--surface-low)}
.faq-q .chev{flex-shrink:0;transition:transform .25s var(--ease);color:var(--green);
  font-size:1.4rem;line-height:1}
.faq-item.open .chev{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-inner{padding:0 26px 24px;color:var(--ink-soft)}

/* ---------- Testimonials — 4px green rule on the left ---------- */
.quote{position:relative;background:#fff;border:1px solid var(--line-soft);
  border-left:4px solid var(--green);border-radius:var(--radius);padding:32px;
  box-shadow:var(--shadow-sm);height:100%}
.quote .stars{color:var(--gold);letter-spacing:2px;margin-bottom:14px}
.quote p{font-style:italic;color:var(--ink);font-size:1.04rem;line-height:1.65}
.quote .who{font-weight:700;color:var(--navy);font-style:normal;margin-top:18px;font-size:.93rem;
  padding-top:16px;border-top:1px solid var(--line-soft)}
.quote .who span{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:3px}

/* ---------- Chips / lists ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 17px;
  font-size:.88rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-xs)}
.chip.green{border-color:transparent;color:var(--green-mid);background:var(--sage)}
/* chips used as in-page jump links */
a.chip{transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
a.chip:hover{background:var(--green);color:#fff;text-decoration:none;transform:translateY(-1px)}
.chips.center{justify-content:center}
/* Check marks are a rounded SVG glyph centred in the disc. The old version drew
   the tick from two rotated borders, which sat off-centre and rendered ragged. */
.ticklist{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticklist li{position:relative;padding-left:36px;color:var(--ink-soft)}
.ticklist li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;
  border-radius:50%;background-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
  box-shadow:0 1px 3px rgba(46,108,15,.28)}
.cols-2{columns:2;column-gap:48px}
@media(max-width:640px){.cols-2{columns:1}}
/* .ticklist is a grid, and grid containers ignore CSS columns — so pairing it
   with .cols-2 needs the display reset or the list stays one long column. */
.ticklist.cols-2{display:block}
.ticklist.cols-2 li{margin-bottom:14px;break-inside:avoid}
.ticklist.cols-2 li:last-child{margin-bottom:0}

/* ---------- Notice / callouts ---------- */
.notice{border-radius:var(--radius);padding:22px 26px;display:flex;gap:16px;align-items:flex-start}
.notice.info{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy)}
.notice.warn{background:#fff;border:1px solid #f0d4d4;border-left:4px solid var(--red)}
.notice.green{background:var(--sage);border:1px solid var(--sage-deep)}
/* emergency strip — deep navy band with a bright-green accent bar */
.notice.emergency{background:#00172f;border:1px solid #00172f;
  border-left:4px solid var(--green-bright);color:#d6e3ef}
.notice.emergency p{color:#d6e3ef}
.notice.emergency .ni{color:var(--green-bright)}
.notice.emergency strong{color:#fff}
.notice.emergency a{color:var(--green-bright);text-decoration:underline}
.notice.emergency a:hover{color:#fff}
.notice .ni{flex-shrink:0;font-size:1.3rem;line-height:1.35;color:var(--navy)}
.notice.green .ni{color:var(--green)}
.notice.warn .ni{color:var(--red)}
.notice p{margin:0}
.notice.warn strong{color:var(--red)}
.license-badge{display:inline-flex;gap:16px;align-items:center;background:#fff;
  border:1px solid var(--line-soft);border-left:4px solid var(--green);border-radius:var(--radius);
  padding:18px 24px;box-shadow:var(--shadow-sm)}
.license-badge .lb-seal{width:44px;height:44px;flex-shrink:0}
.license-badge b{display:block;color:var(--navy)}
.license-badge span{font-size:.88rem;color:var(--ink-soft)}

/* ---------- Forms — persistent labels, white fields ---------- */
.formwrap{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow-sm)}
@media(max-width:560px){.formwrap{padding:26px}}
.fieldset{border:0;padding:0;margin:0 0 34px}
.fieldset legend{font-family:var(--display);color:var(--navy);font-size:1.24rem;font-weight:600;
  padding:0 0 12px;margin-bottom:22px;border-bottom:1px solid var(--line-soft);width:100%}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.frow.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.frow,.frow.three{grid-template-columns:1fr}}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;color:var(--navy);margin-bottom:8px;font-size:.9rem}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:13px 15px;
  border:1px solid #D1D1D1;border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;
  color:var(--ink);background:#fff;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:#9a9a9a}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--outline)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);
  box-shadow:var(--ring)}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field .hint{font-size:.83rem;color:var(--muted);margin-top:7px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(198,40,40,.13)}
.err-msg{color:var(--red);font-size:.83rem;margin-top:7px;display:none;font-weight:500}
.field.invalid .err-msg{display:block}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.check{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #D1D1D1;
  border-radius:var(--radius-sm);padding:13px 16px;cursor:pointer;font-size:.94rem;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.check input{width:auto;min-height:0;margin-top:3px;flex-shrink:0;accent-color:var(--green)}
.check:hover{border-color:var(--green)}
.check:has(input:checked){border-color:var(--green);background:var(--sage)}
/* ticked automatically from a ?service= deep link — flagged so it is obvious
   the choice was made for you and can be changed */
.check.preselected{border-color:var(--green);box-shadow:0 0 0 3px rgba(148,216,113,.35)}
.preselect-note{margin:0 0 14px;font-size:.9rem;color:var(--green-deep);font-weight:600;
  display:flex;gap:8px;align-items:baseline}
.preselect-note::before{content:"✓";color:var(--green)}
.consent{display:flex;gap:13px;align-items:flex-start;background:var(--sage);
  border-radius:var(--radius-sm);padding:18px 20px;font-size:.92rem}
.consent input{width:auto;min-height:0;margin-top:4px;flex-shrink:0;accent-color:var(--green)}
.form-note{font-size:.86rem;color:var(--muted);margin-top:18px;display:flex;gap:9px;align-items:center}
.form-success{display:none;background:var(--sage);border:1px solid var(--sage-deep);
  border-radius:var(--radius);padding:38px 32px;text-align:center}
.form-success.show{display:block;animation:pop .35s var(--ease)}
.form-success h3{color:var(--green-deep)}
.form-success .fs-ic{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:2rem;
  box-shadow:0 8px 22px rgba(46,108,15,.3)}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.required-note{font-size:.86rem;color:var(--muted);margin-bottom:22px}

/* ---------- Ohio map ---------- */
.map-layout{display:grid;grid-template-columns:1.3fr .9fr;gap:44px;align-items:start}
@media(max-width:860px){.map-layout{grid-template-columns:1fr}}
.map-frame{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm)}
.ohio-map{width:100%;height:auto}
.ohio-map .county{fill:#d7dfe6;stroke:#fff;stroke-width:1.2;transition:fill .16s var(--ease);cursor:default}
.ohio-map .county.served{fill:var(--green);cursor:pointer}
.ohio-map .county.served:hover{fill:var(--green-deep)}
.ohio-map .county.active{fill:var(--navy)}
.map-tip{margin-top:16px;font-size:.9rem;color:var(--ink-soft);text-align:center;min-height:1.4em}
.map-legend{display:flex;gap:24px;justify-content:center;margin-top:8px;font-size:.86rem;flex-wrap:wrap}
.map-legend .lg{display:inline-flex;align-items:center;gap:8px}
.map-legend .sw{width:15px;height:15px;border-radius:5px;display:inline-block}
.county-list{columns:2;column-gap:24px}
@media(max-width:520px){.county-list{columns:1}}
.county-list button{background:none;border:0;padding:8px;text-align:left;width:100%;cursor:pointer;
  color:var(--navy);font-weight:600;font-size:.93rem;border-radius:var(--radius-sm);
  font-family:inherit;display:flex;gap:10px;align-items:center;transition:background .14s var(--ease)}
.county-list button::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--green);flex-shrink:0}
.county-list button:hover{background:var(--sage)}
.county-list button.active{color:var(--green);background:var(--sage)}

/* ---------- Jobs / Careers ---------- */
.job{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);overflow:hidden;margin-bottom:16px;
  transition:box-shadow .2s var(--ease)}
.job:hover,.job.open{box-shadow:var(--shadow-sm)}
.job.open{border-left:3px solid var(--green)}
.job-head{display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:24px 28px;cursor:pointer;flex-wrap:wrap;transition:background .16s var(--ease)}
.job-head:hover{background:var(--surface-low)}
.job-head h3{margin:0;font-size:1.14rem}
.job-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
/* neutral by default; green reserved for status so it still reads as a signal */
.tag{font-size:.76rem;font-weight:600;padding:5px 12px;border-radius:999px;
  background:var(--surface-mid);color:var(--ink-soft);letter-spacing:.01em}
.tag.green{background:var(--sage);color:var(--green-mid)}
.tag.open{background:var(--green);color:#fff}
.job-toggle{flex-shrink:0;color:var(--green);font-weight:600;display:flex;align-items:center;
  gap:6px;font-size:.9rem}
.job-body{max-height:0;overflow:hidden;transition:max-height .32s var(--ease);
  border-top:1px solid transparent}
.job.open .job-body{border-top-color:var(--line-soft)}
.job-body-inner{padding:26px 28px}
.job-body-inner h4{color:var(--navy);font-family:var(--display);margin:20px 0 8px;font-size:1rem}
.job-body-inner h4:first-child{margin-top:0}
.job-body-inner ul{margin:0 0 6px;padding-left:20px;color:var(--ink-soft)}
.job-body-inner li{margin-bottom:6px}
.job .apply-row{margin-top:22px}

/* ---------- Portal / dashboard ---------- */
.portal-card{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line-soft);
  border-top:2px solid var(--green);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow)}
.portal-card .plock{width:60px;height:60px;border-radius:50%;background:var(--sage);
  color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--green);
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);text-align:center;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.tile:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.tile .ic{margin:0 auto 16px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#cbdae7;font-size:.94rem}
.site-footer a{color:#dbe7f1}
.site-footer a:hover{color:#fff}
.footer-top{padding:0 0 54px}
/* Closing call to action, above the link columns */
.footer-cta{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;
  justify-content:space-between;padding:38px 0 36px;margin-bottom:44px;
  border-bottom:1px solid rgba(233,240,230,.14)}
.footer-cta h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 6px;
  letter-spacing:-.015em}
.footer-cta p{margin:0;color:#a8bccf;font-size:.97rem;max-width:52ch}
.footer-cta .btn-row{margin:0;flex-shrink:0}

.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.15fr;gap:40px}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:var(--gold);font-size:.78rem;margin-bottom:18px;font-family:var(--font);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
/* Footer links get a little travel on hover so the column feels alive */
.footer-grid ul a{display:inline-block;
  transition:color .16s var(--ease),transform .16s var(--ease)}
.footer-grid ul a:hover{transform:translateX(3px)}
.f-more{color:var(--green-bright)!important;font-weight:600;margin-top:2px}
.f-logo{display:inline-block;background:#fbf9f8;border-radius:14px;padding:8px;
  line-height:0;transition:transform .2s var(--ease)}
.f-logo:hover{transform:translateY(-2px)}
.f-logo img{width:72px;height:72px;object-fit:contain}
.f-brand b{color:#fff;font-family:var(--display);font-size:1.34rem;display:block;letter-spacing:-.02em}
.f-brand .tl{color:var(--green-bright);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin:14px 0 14px;display:block;font-weight:600}
.f-contact li{display:flex;gap:12px;align-items:flex-start}
.f-contact svg{margin-top:5px;flex-shrink:0;opacity:.65}
/* The licence used to be a tall card inside the brand column, which left the
   other three columns ending well short of it. As a full-width band it fills
   that gap, evens the columns, and gives the credential more prominence. */
.f-license-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:52px;padding:20px 26px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(233,240,230,.13)}
.fl-shield{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:rgba(148,216,113,.12);color:var(--green-bright);
  display:flex;align-items:center;justify-content:center}
.fl-text{min-width:0}
.fl-text b{display:block;color:#fff;font-family:var(--display);font-size:1.02rem;
  letter-spacing:-.01em}
.fl-text span{display:block;color:#9db4c8;font-size:.87rem;margin-top:2px}
.fl-id{margin-left:auto;text-align:right;padding-left:26px;
  border-left:1px solid rgba(233,240,230,.16)}
.fl-id span{display:block;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:#9db4c8;font-weight:700}
.fl-id b{color:var(--green-bright);font-family:var(--display);font-size:1.12rem;
  letter-spacing:.02em}
@media(max-width:640px){
  .f-license-bar{gap:14px;padding:18px 20px}
  .fl-id{margin-left:0;padding-left:0;border-left:0;text-align:left;width:100%}
}
.footer-bottom{border-top:1px solid rgba(233,240,230,.14);padding:22px 0}
.footer-bottom .container{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  align-items:center;font-size:.83rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.social{display:flex;gap:10px}
.social a{width:38px;height:38px;border-radius:50%;background:rgba(233,240,230,.1);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),transform .18s var(--ease)}
.social a:hover{background:var(--green);transform:translateY(-2px)}
/* Sits directly on top of the navy footer, so it carries a hairline underneath
   to keep the two dark bands from reading as one block. */
.emergency-strip{background:#00172f;color:#fff;text-align:center;padding:11px 16px;
  font-size:.87rem;font-weight:600;letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.1)}
.emergency-strip a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ---------- Misc ---------- */
.divider{height:1px;background:var(--line-soft);border:0;margin:0}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.anchor-offset{scroll-margin-top:110px}
.toc{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px;position:sticky;top:110px;box-shadow:var(--shadow-xs)}
.toc h4{margin:0 0 14px;font-family:var(--font);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);font-weight:700}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toc a{color:var(--navy);font-weight:500;font-size:.92rem}
.toc a:hover{color:var(--green)}
/* Legal pages: sticky contents rail + white content card (per Stitch privacy/terms) */
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
@media(max-width:900px){.legal-layout{grid-template-columns:1fr}.legal-layout .toc{position:static}}
.legal-card{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--green);
  border-radius:var(--radius);padding:44px;box-shadow:var(--shadow-sm)}
@media(max-width:560px){.legal-card{padding:26px}}
.legal-body{max-width:880px}
.legal-body h2{font-size:1.45rem;margin-top:2.6rem;display:flex;align-items:flex-start;gap:11px}
.legal-body h2:first-child{margin-top:0}
.legal-body h2 svg{flex-shrink:0;color:var(--green);margin-top:.15em}
.legal-body h3{font-size:1.1rem;margin-top:1.7rem}
.back-to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s,transform .2s var(--ease),background .2s var(--ease);
  z-index:900}
.back-to-top:hover{background:var(--green);transform:translateY(-2px)}
.back-to-top.show{opacity:1;visibility:visible}
/* Ten values: two per row so nothing is stranded alone on a last row of three.
   Each is its own card, icon beside the text rather than stacked above it. */
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.value-card{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid var(--line-soft);border-left:3px solid var(--sage-deep);
  border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-xs);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.value-card:hover{border-left-color:var(--green);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.value-card h3{color:var(--navy);font-size:1.06rem;margin:.1rem 0 .35rem}
.value-card p{font-size:.94rem;color:var(--ink-soft);margin:0;line-height:1.6}
@media(max-width:860px){.values-grid{grid-template-columns:1fr}}
@media(max-width:560px){.value-card{padding:20px}}

/* Our Story: editorial column. Capped at a comfortable measure — the full grid
   cell is ~900px, which is far past the point where lines get hard to track. */
.story-body{max-width:70ch}
.story-body h2{margin:.4rem 0 1.1rem;font-size:clamp(1.7rem,3vw,2.15rem)}
.story-body p{margin-bottom:1.15rem;line-height:1.75}
.story-lead{font-size:1.16rem;line-height:1.65;color:var(--ink)}
.story-figure{margin:32px 0;padding:0}
.story-figure img{width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:var(--shadow);aspect-ratio:16/9;object-fit:cover}
.story-figure figcaption{margin-top:12px;font-size:.87rem;color:var(--muted);font-style:italic}
/* the promise, lifted out of the running text */
.pullquote{margin:32px 0;padding:4px 0 4px 26px;border-left:3px solid var(--green);
  background:none}
.pullquote p{margin:0;font-family:var(--display);font-size:1.14rem;line-height:1.6;
  color:var(--navy);font-weight:500}
.pullquote strong{color:var(--green-deep)}
@media(max-width:560px){.pullquote{padding-left:20px}.story-lead{font-size:1.08rem}}

/* Our Commitment: a navy pledge panel. Dark so the page's emotional anchor is
   not just another white card between two other white cards. */
.commit-panel{position:relative;overflow:hidden;max-width:1060px;margin:0 auto;
  background:linear-gradient(140deg,var(--navy-deep),var(--navy) 62%,var(--navy-mid));
  border-top:2px solid var(--green-bright);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:40px 44px 36px;color:#cddbe8}
.commit-panel::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:rgba(148,216,113,.09)}
.commit-panel > *{position:relative;z-index:1}
.commit-head{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(233,240,230,.16)}
.commit-head .eyebrow{color:var(--green-bright)}
.commit-head h3{margin:8px 0 0;color:#fff;font-size:1.32rem}
.commit-panel .ticklist li{color:#dbe7f1}
.commit-panel .ticklist li::before{background-color:var(--green-bright);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001e40' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow:none}
.commit-foot{margin:30px 0 0;padding-top:24px;border-top:1px solid rgba(233,240,230,.16);
  color:#bfd0e0;font-size:.97rem;line-height:1.7}
@media(max-width:560px){.commit-panel{padding:30px 24px}.commit-head h3{font-size:1.18rem}}

/* Pulls a long comma-separated list out of running prose and into a panel */
.policy-panel{background:var(--sage);border:1px solid var(--sage-deep);border-radius:var(--radius);
  padding:28px 30px;margin:30px 0}
.policy-panel h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--green-deep)}
.policy-panel p{margin:0;color:var(--ink-soft);font-size:.96rem}
.policy-panel .ticklist li{color:var(--ink)}
@media(max-width:560px){.policy-panel{padding:22px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.svc-card:hover,.tile:hover,.social a:hover,.step:hover,
  .step:hover::before{transform:none}
  .slide-media img{transform:none!important}
}

/* ==========================================================================
   Administrator dashboard — job posting management (admin.html)
   ========================================================================== */
[hidden]{display:none!important}

.btn-quiet{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-quiet:hover{background:var(--surface-low);color:var(--navy);border-color:var(--navy-soft)}
.btn-danger{background:#fff;color:var(--red);border-color:#f0d4d4}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

.admin-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:18px 24px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.admin-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-who .aw-label{font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.admin-who .aw-email{font-family:var(--display);font-weight:700;color:var(--navy);
  overflow-wrap:anywhere}
.admin-bar-actions{display:flex;flex-wrap:wrap;gap:10px}

.admin-section-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
  justify-content:space-between;margin-bottom:18px}
.admin-section-head h2{margin:0}
.admin-count{font-size:.9rem;color:var(--muted);font-weight:600}

/* One posting in the management list. */
.admin-job{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;
  justify-content:space-between;background:#fff;border:1px solid var(--line-soft);
  border-left:3px solid var(--green);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:14px}
.admin-job.is-closed{border-left-color:var(--line);background:var(--surface-low)}
.admin-job.is-closed h3{color:var(--muted)}
.admin-job-main{flex:1 1 320px;min-width:0}
.admin-job-main h3{margin:0;font-size:1.1rem}
.admin-job-summary{margin:12px 0 0;color:var(--muted);font-size:.93rem}
.admin-job-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}

/* The add / edit panel. Hidden until Add or Edit is pressed. */
.admin-form-card{background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:28px;margin-bottom:30px;box-shadow:var(--shadow-sm)}
.admin-form-card h3{margin:0 0 6px}
.admin-form-card .afc-hint{margin:0 0 22px;color:var(--muted);font-size:.93rem}
.admin-form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.admin-error{background:#fff4f4;border:1px solid #f0d4d4;border-left:3px solid var(--red);
  border-radius:var(--radius-sm);color:var(--red);font-size:.92rem;font-weight:600;
  padding:12px 16px;margin-bottom:18px}

/* Confirmation of a save or removal, so an action never looks like it did
   nothing. Sits above the page so it is visible wherever you have scrolled. */
.admin-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  z-index:120;max-width:min(560px,calc(100vw - 32px));padding:14px 22px;
  border-radius:var(--radius-sm);font-weight:600;font-size:.94rem;
  box-shadow:0 10px 34px rgba(0,33,68,.18)}
.admin-toast.is-ok{background:var(--navy-deep);color:#fff}
.admin-toast.is-error{background:var(--red);color:#fff}

@media (max-width:640px){
  .admin-job-actions{width:100%}
  .admin-job-actions .btn{flex:1 1 auto}
}

/* Password self-service: the "Forgot your password?" / "Back to sign in"
   toggles, and the confirmation shown after a reset email is requested. */
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--green);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.link-btn:hover{color:var(--green-deep)}
.link-btn:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.admin-note{background:var(--sage);border:1px solid var(--sage-deep);
  border-left:3px solid var(--green);border-radius:var(--radius-sm);
  color:var(--green-deep);font-size:.92rem;padding:12px 16px;margin-bottom:18px}