/* ==========================================================================
   H&NS Staffing — style.css  (v3)

   Built to the H&NS Brand Identity (2026).
   Palette, typography and tone come from the brand guide; this file should not
   introduce colours or faces that aren't in it.

   Brand rules honoured here:
     - Light surfaces (White / Soft Mist) carry the site. Navy is used for
       emphasis blocks, never as the default canvas.
     - The logo only ever sits on white or Soft Mist.
     - TYPOGRAPHY DEVIATION: the guide specifies a serif (Cormorant Garamond,
       or Georgia / Libre Baskerville) for major headings. The client asked for
       a more conventionally professional treatment, so Inter is used
       throughout instead. Everything else in the guide is followed exactly.
       To restore the brand serif, change --font-display back to
       "Libre Baskerville", Georgia, serif and raise the display scale ~25%.
     - Care Teal drives CTAs and highlights. Seafoam is accent/background only.

     01 Tokens          09 Editorial rows
     02 Reset/base      10 Sticky index
     03 Layout          11 Process
     04 Buttons         12 Dual CTA
     05 Nav             13 Forms
     06 Hero            14 Modal
     07 Marquee         15 Footer
     08 Cards           16 Motion   17 Responsive
   ========================================================================== */

/* ----------------------------------------------------------------- 01 Tokens */
:root {
  /* --- Brand colours, verbatim from the identity ------------------------- */
  --navy:     #0A3A67;   /* Trust Navy   — logo, headings, navigation        */
  --teal:     #1E8F88;   /* Care Teal    — CTAs, highlights, icon accents    */
  --seafoam:  #79BDB8;   /* Seafoam      — secondary accents, backgrounds    */
  --slate:    #737B83;   /* Slate Gray   — body text, supporting information */
  --mist:     #F3F8F8;   /* Soft Mist    — sections, cards, forms           */
  --white:    #FFFFFF;   /* White        — primary canvas                    */

  /* --- Derived tones ----------------------------------------------------- *
   * Care Teal at #1E8F88 gives white text only 4.13:1, just under the 4.5:1
   * AA threshold for normal text. --teal-ink is a darkened Care Teal used
   * wherever white sits on top of it (buttons, fills) and reaches 5.5:1.
   * It is the same hue — no new colour is introduced.                       */
  --teal-ink: #17756F;
  --navy-dk:  #072B4D;   /* deeper navy for footer and pressed states        */
  --navy-lt:  #14507F;
  --mist-2:   #E6F0F0;   /* one step down from Soft Mist, for hairlines      */
  --line:     #DCE7E7;
  --line-dk:  rgba(255, 255, 255, 0.16);

  --ink:      #1A2733;   /* headings-adjacent dark text                      */
  --error:    #B3261E;
  --success:  #17756F;

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Sans display scale — Inter carries more weight per size than a serif, so the
     headline steps run a little larger with tighter tracking to compensate. */
  --fs-mega:    clamp(2.5rem, 1.5rem + 4.1vw, 4.25rem);
  --fs-display: clamp(2.125rem, 1.55rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h4:      1.0625rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2rem;   --s-5: 3rem;   --s-6: 4rem;
  --section-y: clamp(4rem, 8.5vw, 7.5rem);

  --container: 1240px;
  --gutter: 1.5rem;
  --radius: 12px;        /* the brand deck uses soft rounded surfaces */
  --radius-sm: 8px;
  --radius-pill: 999px;  /* brand application shows pill CTAs */

  --shadow-sm: 0 1px 3px rgba(10, 58, 103, .06);
  --shadow-md: 0 18px 40px -22px rgba(10, 58, 103, .28);
  --shadow-lg: 0 40px 90px -40px rgba(10, 58, 103, .45);

  --ease: cubic-bezier(.16, .84, .44, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 80px;
}

/* ------------------------------------------------------------ 02 Reset/base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: overflow-x:hidden on body makes it a scroll container,
     which breaks position:sticky on the header in Safari. clip does not. */
  overflow-x: clip;
  /* Android draws a grey box over every tapped link without this. */
  -webkit-tap-highlight-color: transparent;
  /* Long emails and URLs must never widen the page. */
  overflow-wrap: break-word;
}
/* Fallback for engines without overflow:clip — applied to html so body stays
   a normal element and sticky keeps working. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

/* Serif for the major voice; sans for anything operational. */
h1, h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }

h3, h4, .h4 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--navy);
}
h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-2); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--navy); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 300;
  transform: translateY(-120%);
  background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--white); }

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

/* ---------------------------------------------------------------- 03 Layout */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  /* Respect the notch in landscape on iPhone. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--navy); color: var(--seafoam); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark .h4 { color: var(--white); }
.section--dark strong { color: var(--white); }
.section--dark a { color: var(--white); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head h2 { margin-bottom: var(--s-2); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--slate);
  max-width: 56ch;
  margin-bottom: 0;
}
.section--dark .lede { color: var(--seafoam); }

.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--teal-ink);
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--teal); flex: none; }
.section--dark .eyebrow { color: var(--seafoam); }

.grid { display: grid; gap: var(--s-3); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------- 04 Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1rem 1.875rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .2s var(--ease),
              box-shadow .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Care Teal drives every primary action. */
.btn--primary { background: var(--teal-ink); color: var(--white); }
.btn--primary:hover { background: var(--navy); color: var(--white); box-shadow: var(--shadow-md); }

.btn--secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--secondary:hover { background: var(--navy); color: var(--white); }

.btn--ondark { border-color: rgba(255,255,255,.55); color: var(--white); background: transparent; }
.btn--ondark:hover { background: var(--white); border-color: var(--white); color: var(--navy); }


.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--teal-ink); text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--seafoam), var(--seafoam));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: left bottom;
  transition: background-size .32s var(--ease), color .2s var(--ease);
}
.link-more:hover { background-size: 100% 2px; color: var(--navy); }
.section--dark .link-more { color: var(--white); }

/* ------------------------------------------------------------------- 05 Nav */
.topbar {
  background: var(--navy);
  color: var(--seafoam);
  font-size: var(--fs-xs);
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); min-height: 38px; padding-block: .35rem;
}
.topbar a { color: var(--white); text-decoration: none; display: inline-block; padding: .25rem 0; }
.topbar a:hover { color: var(--seafoam); }
.topbar-contact { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.topbar-sep { color: rgba(255,255,255,.3); }
.topbar-area { color: var(--seafoam); }

/* Light header — the brand requires the logo on white or Soft Mist. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 30px -18px rgba(10,58,103,.35); }

.scroll-progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--teal);
  will-change: transform;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--nav-h);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 46px; width: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav-list a {
  position: relative;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--navy); text-decoration: none;
  padding: .5rem 0;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-list a[aria-current="page"] { font-weight: 700; }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-actions .btn { padding: .8125rem 1.375rem; }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span { display: block; position: relative; width: 20px; height: 2px; background: var(--navy); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------------ 06 Hero */
/* Full-bleed photograph behind the words. A navy scrim in the brand colour
   keeps the text legible and stops the image reading as decoration. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  /* svh ignores the collapsible URL bar, so the hero doesn't resize mid-scroll. */
  min-height: min(84svh, 760px);
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
/* <picture> sits between the container and the img, so it has to carry the
   full height itself or the img's height:100% resolves against nothing. */
.hero-bg picture, .pagehero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Two scrims: one up from the base for legibility, one across from the left so
   the copy column holds regardless of what the photograph is doing behind it. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--navy) 2%, rgba(10,58,103,.80) 46%, rgba(10,58,103,.42) 100%),
    linear-gradient(to right, rgba(10,58,103,.90) 0%, rgba(10,58,103,.55) 55%, rgba(10,58,103,.25) 100%);
}
.hero .container {
  position: relative; z-index: 1;
  width: 100%;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero-grid { max-width: 44rem; }
.hero h1 { font-size: var(--fs-mega); color: var(--white); margin-bottom: var(--s-3); }
.hero h1 .accent { color: var(--seafoam); }
.hero-sub p {
  font-size: var(--fs-lede);
  color: rgba(255,255,255,.88);
  margin-bottom: var(--s-4);
  max-width: 46ch;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: var(--fs-sm); color: rgba(255,255,255,.82);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-meta span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--seafoam); flex: none;
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s-4);
  font-size: var(--fs-xs); font-weight: 600;
  color: rgba(255,255,255,.8); text-decoration: none;
  position: relative; z-index: 1;
}
.scroll-cue:hover { color: var(--white); }
.scroll-cue svg { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

/* Interior page hero — navy band, photo held back behind it */
.pagehero {
  position: relative;
  background: var(--navy);
  color: var(--seafoam);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.pagehero-bg { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.pagehero-bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, var(--navy) 14%, rgba(10,58,103,.86) 62%, rgba(10,58,103,.62) 100%);
}
.pagehero h1 { color: var(--white); max-width: 17ch; }
.pagehero .lede { color: rgba(255,255,255,.86); }
.pagehero .btn-row { margin-top: var(--s-4); }

.breadcrumb { font-size: var(--fs-xs); margin-bottom: var(--s-3); color: var(--seafoam); }
.breadcrumb a { color: var(--white); text-decoration: none; }
.breadcrumb a:hover { color: var(--seafoam); }

/* --------------------------------------------------------------- 07 Marquee */
/* Specialties move because movement is the subject. Calm pace, not a ticker. */
.marquee {
  background: var(--navy);
  padding-block: 1.125rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 3rem;
  width: max-content;
  animation: marquee 52s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 1.125rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  font-weight: 600; letter-spacing: -.015em;
  color: rgba(255,255,255,.9); white-space: nowrap;
}
.marquee-item::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seafoam); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Partner strip */
.partners { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--white); }
.partners-title {
  text-align: center; font-size: var(--fs-xs); font-weight: 500;
  color: var(--slate); margin-bottom: var(--s-3);
}
.partners-list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.partner {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: 1.0625rem; font-weight: 600;
  color: var(--slate); opacity: .8;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
.partner:hover { color: var(--navy); opacity: 1; }
.partner svg { color: var(--seafoam); }
.partner--placeholder {
  border: 1px dashed var(--line); padding: .5rem .875rem;
  border-radius: var(--radius-sm); font-weight: 400; font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------- 08 Cards */
.card {
  display: flex; flex-direction: column;
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section--mist .card { background: var(--white); }
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--seafoam);
}
.card h3 { margin-bottom: .625rem; }
.card p { color: var(--slate); font-size: var(--fs-sm); flex: 1; }
.card .link-more { margin-top: var(--s-3); align-self: flex-start; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--s-3);
  color: var(--teal-ink); background: var(--mist);
  border-radius: var(--radius-sm);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.card:hover .card-icon { background: var(--teal-ink); color: var(--white); }

/* Trust pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.pillar {
  padding: var(--s-3);
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.section--dark .pillar { background: rgba(255,255,255,.05); border-color: var(--line-dk); }
.pillar-num {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--seafoam); margin-bottom: var(--s-2); display: block; line-height: 1;
}
.pillar h4, .pillar .h4 { margin-bottom: .5rem; }
.pillar p { font-size: var(--fs-sm); margin: 0; }

/* Specialty grid */
.specialty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-4); }
.specialty {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.specialty:hover { padding-left: .625rem; }
.specialty h3 { margin-bottom: .375rem; }
.specialty p { font-size: var(--fs-sm); margin: 0; }
.specialty-grid .specialty:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Values */
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.value { padding: var(--s-3); background: var(--mist); border-radius: var(--radius-sm); }
.value h4, .value .h4 { font-size: 1rem; margin-bottom: .375rem; }
.value p { font-size: var(--fs-xs); margin: 0; }

/* -------------------------------------------------------- 09 Editorial rows */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; gap: clamp(2rem, 5.5vw, 5rem);
}
.split--reverse .split-media { order: 2; }
.split-body h2 { margin-bottom: var(--s-3); }
.split-media .media-frame { border-radius: var(--radius); box-shadow: var(--shadow-md); }

.checklist { margin: var(--s-3) 0 var(--s-4); }
.checklist li {
  position: relative;
  padding: .8125rem 0 .8125rem 2.25rem;
  border-bottom: 1px solid var(--line);
}
.section--dark .checklist li { border-bottom-color: var(--line-dk); color: var(--white); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1.4rem;
  width: 12px; height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.section--dark .checklist li::before { border-color: var(--seafoam); }

.detail-list { margin-top: var(--s-3); }
.detail-list dt {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--teal-ink);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.detail-list dt:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.detail-list dd { margin: .5rem 0 0; font-size: var(--fs-sm); }

.facility-block { padding-block: clamp(3rem, 6vw, 5rem); }
.facility-block + .facility-block { border-top: 1px solid var(--line); }

/* --------------------------------------------------------- 10 Sticky index */
.sticky-wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: clamp(2rem,6vw,5rem); }
.sticky-col { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
.sticky-index { margin-top: var(--s-3); }
.sticky-index a {
  display: block; padding: .875rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--slate); text-decoration: none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.sticky-index a:hover { color: var(--navy); padding-left: .5rem; }

/* --------------------------------------------------------------- 11 Process */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: var(--s-3); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  color: var(--seafoam); display: block; margin-bottom: var(--s-2);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.steps.is-visible .step::after { transform: scaleX(1); }
.steps.is-visible .step:nth-child(2)::after { transition-delay: .12s; }
.steps.is-visible .step:nth-child(3)::after { transition-delay: .24s; }
.steps.is-visible .step:nth-child(4)::after { transition-delay: .36s; }
.step h3 { margin-bottom: .5rem; }
.step p { font-size: var(--fs-sm); margin: 0; }
.section--dark .step p { color: var(--seafoam); }

/* -------------------------------------------------------------- 12 Dual CTA */
.dual { display: grid; grid-template-columns: repeat(2, 1fr); }
.dual-panel {
  position: relative;
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  transition: background-color .3s var(--ease);
}
.dual-panel h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -.028em; margin-bottom: var(--s-2); }
.dual-panel p { margin-bottom: var(--s-4); max-width: 36ch; }
.dual-label {
  font-size: var(--fs-xs); font-weight: 600;
  margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: .75rem;
}
.dual-label::before { content: ""; width: 28px; height: 2px; background: var(--teal); }
.dual-panel--facilities { background: var(--navy); color: var(--seafoam); }
.dual-panel--facilities h3 { color: var(--white); }
.dual-panel--facilities .dual-label { color: var(--seafoam); }
.dual-panel--facilities .dual-label::before { background: var(--seafoam); }
.dual-panel--facilities:hover { background: var(--navy-dk); }
.dual-panel--professionals { background: var(--mist); }
.dual-panel--professionals .dual-label { color: var(--teal-ink); }
.dual-panel--professionals:hover { background: var(--mist-2); }

/* ----------------------------------------------------------------- 13 Forms */
.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.form-panel h2, .form-panel h3 { color: var(--navy); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-2) var(--s-3); }
.field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); }
.field .req { color: var(--error); }
.field .hint { font-size: var(--fs-xs); color: var(--slate); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%; padding: .8125rem .9375rem;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23737B83' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center;
  padding-right: 2.25rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--seafoam); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(30,143,136,.2);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: var(--fs-xs); font-weight: 500; color: var(--error); }
.field-error:empty { display: none; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: var(--s-2); padding: .875rem 1rem;
  border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid transparent;
}
.form-status[hidden] { display: none; }
.form-status--error { background: #FCEDEC; border-color: #E7B4AF; color: var(--error); }
.form-status--success { background: var(--mist); border-color: var(--seafoam); color: var(--teal-ink); }
.form-note { font-size: var(--fs-xs); color: var(--slate); margin-top: var(--s-2); }

.btn .spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { text-align: center; padding: var(--s-3) 0; }
.form-success[hidden] { display: none; }
/* Success mark: a Care Teal ring draws itself around the H&NS symbol, which
   settles in behind it. One short sequence, then still — a success state the
   person reads once should not keep moving while they read it. */
.success-mark {
  position: relative;
  width: 108px; height: 108px;
  margin: 0 auto var(--s-3);
  display: grid; place-items: center;
}
.success-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.success-ring circle { fill: none; stroke-width: 3; }
.success-ring-track { stroke: var(--mist-2); }
.success-ring-draw {
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-dasharray: 339;          /* 2 * pi * r, r = 54 */
  stroke-dashoffset: 339;
  animation: ring-draw .85s var(--ease-out) forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

.success-logo {
  position: relative;
  width: 62px; height: 62px;
  opacity: 0;
  transform: scale(.72);
  animation: logo-in .6s var(--ease-out) .35s forwards;
}
@keyframes logo-in {
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* Heading and copy follow the mark rather than arriving with it. */
.form-success h3, .form-success p {
  opacity: 0;
  animation: success-text .5s var(--ease-out) forwards;
}
.form-success h3 { animation-delay: .7s; }
.form-success p  { animation-delay: .82s; }
@keyframes success-text {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.contact-grid {
  display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.contact-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.contact-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.contact-item dt { font-size: var(--fs-xs); font-weight: 600; color: var(--slate); margin-bottom: .375rem; }
.contact-item dd { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; color: var(--navy); }
.contact-item dd a { color: var(--navy); text-decoration: none; }
.contact-item dd a:hover { color: var(--teal-ink); }

/* ----------------------------------------------------------------- 14 Modal */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-2); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,58,103,.7); animation: fade .25s var(--ease); }
.modal-panel {
  position: relative; width: 100%; max-width: 470px;
  background: var(--white);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  animation: modal-in .3s var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px); } }
.modal-panel h2 { font-size: 1.625rem; margin-bottom: .5rem; }
.modal-panel > p { font-size: var(--fs-sm); }
.modal-close {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--slate); cursor: pointer; font-size: 1.375rem; line-height: 1;
}
.modal-close:hover { background: var(--mist); color: var(--navy); }
body.no-scroll { overflow: hidden; }

/* ---------------------------------------------------------------- 15 Footer */
.site-footer {
  background: var(--navy-dk); color: var(--seafoam);
  font-size: var(--fs-sm);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site-footer h2, .site-footer h4, .site-footer .h4 {
  color: var(--white); font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  margin-bottom: var(--s-2);
}
.site-footer a { color: var(--seafoam); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: var(--s-4); padding-bottom: var(--s-5); }
/* Logo on dark is off-brand, so the footer uses a Soft Mist plate behind it. */
.footer-logo {
  display: inline-flex; padding: .75rem 1rem;
  background: var(--mist); border-radius: var(--radius-sm);
  margin-bottom: var(--s-3);
}
.footer-logo img { height: 42px; width: auto; }
.footer-brand p { max-width: 34ch; }
.footer-list li { margin-bottom: .125rem; }
/* 44px minimum touch target, per the iOS HIG. */
.footer-list a { display: inline-block; padding: .5rem 0; min-height: 44px; }
.footer-legal a { display: inline-block; padding: .5rem 0; min-height: 44px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  /* Clear the home indicator on gesture-nav iPhones. */
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dk);
  font-size: var(--fs-xs); color: var(--seafoam);
}
.footer-legal { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- 16 Motion */
.js .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .07s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

picture { display: block; }
.media { width: 100%; height: auto; object-fit: cover; background: var(--mist-2); }
.media--hero { aspect-ratio: 4 / 3.3; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 10; }
.media-frame { overflow: hidden; position: relative; }
.js .media-frame .media {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path .55s var(--ease-out), transform .8s var(--ease-out);
}
.js .media-frame.is-visible .media { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Headline reveals line by line — the one loud moment, and it's the brand line. */
.js .line-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.js .line-mask > span { display: block; transform: translateY(104%); transition: transform .9s var(--ease-out); }
.js body.is-loaded .line-mask > span, .js .line-mask.is-visible > span { transform: none; }
.js body.is-loaded .line-mask:nth-of-type(2) > span { transition-delay: .1s; }

.js .hero-sub, .js .hero-meta, .js .hero .scroll-cue { opacity: 0; transform: translateY(16px); }
.js body.is-loaded .hero-sub,
.js body.is-loaded .hero-meta,
.js body.is-loaded .hero .scroll-cue {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js body.is-loaded .hero-sub { transition-delay: .3s; }
.js body.is-loaded .hero-meta { transition-delay: .42s; }
.js body.is-loaded .hero .scroll-cue { transition-delay: .54s; }

.section-head h2::after {
  content: ""; display: block;
  width: 60px; height: 3px; margin-top: var(--s-3);
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out) .1s;
}
.section-head--center h2::after { margin-inline: auto; transform-origin: center; }
.section-head.is-visible h2::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .line-mask > span { transform: none; }
  .js .hero-sub, .js .hero-meta, .js .hero .scroll-cue { opacity: 1; transform: none; }
  .js .media-frame .media { clip-path: none; transform: none; }
  .marquee-track { animation: none; }
  .btn:hover, .card:hover { transform: none; }
  .section-head h2::after, .step::after { transform: scaleX(1); }
  .scroll-progress { display: none; }
  .success-ring-draw { stroke-dashoffset: 0; animation: none; }
  .success-logo { opacity: 1; transform: none; animation: none; }
  .form-success h3, .form-success p { opacity: 1; animation: none; }
}

/* ------------------------------------------------------------ 17 Responsive */
@media (max-width: 1023px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .sticky-wrap { grid-template-columns: 1fr; }
  .sticky-col { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-list {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-2) var(--gutter) var(--s-4);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-list.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list a { display: block; padding: 1rem 0; font-size: 1.0625rem; }
  .nav-list a::after { display: none; }
  .nav-list .nav-cta-mobile { display: block; border-bottom: 0; padding-top: var(--s-3); }
  .nav-list .nav-cta-mobile .btn { width: 100%; }
  .nav-actions .btn--primary { display: none; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .dual { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 1.25rem; --nav-h: 72px; }

  /* 16px minimum, or iOS Safari zooms the whole page when a field is focused
     and never fully zooms back out. Non-negotiable on mobile. */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* Comfortable thumb targets on every control. */
  .field input, .field select { min-height: 48px; }
  .btn { padding: 1.0625rem 1.75rem; min-height: 50px; }
  .nav-toggle { width: 48px; height: 48px; }
  .hero { min-height: 0; }
  .hero::before {
    background: linear-gradient(to top, var(--navy) 6%, rgba(10,58,103,.86) 58%, rgba(10,58,103,.62) 100%);
  }
  .topbar .container { flex-direction: column; align-items: flex-start; gap: .15rem; padding-block: .5rem; }
  .logo img { height: 40px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .pillars, .values, .steps, .steps--4, .specialty-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
}

@media (max-width: 359px) { :root { --gutter: 1rem; } .logo img { height: 34px; } }