/* SAFE Center of Iowa, the new site. Homepage, rebuilt 9/29/2026 on Avada Health's
   composition (owner's reference): a full-width photograph hero with a colour overlay
   and a translucent information box; a centred band; three coloured panels; a
   full-width film band that moves on scroll; a logo band; a three-column footer.
   The client's colours and type (Open Sans, her brand guide and her live site).
   THIS FILE IS THE SOURCE. Every text pairing is computed (WCAG):
     white on blue 12.3 · white on teal-deep 5.0 · white on purple 4.7
     blue on white 12.3 · blue on blush 11.6 · blue on gold 6.2 · gold on blue 6.4
   Overlays are flat colour, never gradients. Never white on gold. */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-var.woff2") format("woff2"), url("fonts/OpenSans-var.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
/* Montserrat (SIL OFL), Latin set, from the Health reference: Health's face for buttons. */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --blue: #183660;
  --blue-deep: #122a4b;
  --teal: #459dbc;
  --teal-deep: #347890;
  --gold: #faa819;
  --gold-deep: #e29400;
  --purple: #786ca8;
  --tint: #e9e7f1;
  --blush: #fcf7f6;
  --paper: #fffdfc;
  --rule: #cfd5d8;

  --frame: clamp(1200px, 72vw, 1680px);
  --pad: clamp(20px, 4.5vw, 64px);
  --gutter: max(var(--pad), (100vw - var(--frame)) / 2);
  --radius: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 2.25; color: var(--blue); background: var(--paper); overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(250, 168, 25, .6); }
.on-dark :focus-visible { outline-color: var(--gold); box-shadow: 0 0 0 7px rgba(255, 253, 252, .35); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 1100; background: var(--gold); color: var(--blue); font-weight: 700; padding: 12px 18px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }

.frame { width: 100%; max-width: calc(var(--frame) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }

/* --------------------------------------------------------------- buttons, Health's measured 10/2 off its own settings:
   Montserrat 18px regular, tracked .12em, capital, 17px x 40px, 2px corners (56px tall).
   .btn--sm is Health's small button (header, coloured panels): 14px, 13px x 29px, square. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: 15px 40px; border-radius: 2px; border: 2px solid transparent;
  font: inherit; font-family: "Montserrat", "Open Sans", sans-serif; font-size: 1.125rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--sm { min-height: 47px; padding: 11px 29px; font-size: .875rem; border-radius: 0; }
@media (max-width: 480px) { .btn { padding-inline: 22px; font-size: 1rem; letter-spacing: .1em; } }
.btn--gold { background: var(--gold); color: var(--blue); }
.btn--gold:hover { background: var(--gold-deep); }
.btn--blue { background: var(--blue); color: var(--paper); }
.btn--blue:hover { background: var(--blue-deep); }
.btn--ghost { border-color: rgba(255, 253, 252, .9); color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--blue); }

/* --------------------------------------------------------------- quick exit: the highest-priority control on every page */
.exit { position: fixed; top: calc(26px + var(--wp-admin--admin-bar--height, 0px)); right: max(12px, env(safe-area-inset-right)); z-index: 1000; display: grid; justify-items: end; gap: 6px; }
.exit__btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 1.15em;
  background: var(--blue); color: var(--paper); border: 2px solid var(--paper); border-radius: 999px;
  font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 2px 12px rgba(10, 20, 36, .35);
}
.exit__btn:hover { background: var(--blue-deep); }
/* The focus ring is gold, because a blue ring vanishes on the solid blue header. */
.exit__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(250, 168, 25, .45), 0 2px 12px rgba(10, 20, 36, .35); }
.exit__btn svg { width: 1.05em; height: 1.05em; }
.exit__what { font-size: .8125rem; font-weight: 600; color: var(--blue); background: var(--paper); padding: 2px 10px; border-radius: 999px; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; display: inline-flex; align-items: center; position: relative; }
/* A 44px tap area, extended downward, away from the Quick exit. */
.exit__what::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -16px; }
.exit__tip {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 24px));
  background: var(--paper); color: var(--blue); border: 1px solid var(--rule); border-radius: 8px;
  padding: 14px 16px; font-size: .9375rem; line-height: 1.5; box-shadow: 0 10px 30px rgba(18, 42, 75, .22);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
/* Hover only where a pointer hovers; keyboard focus on either control; a tap toggles is-open.
   Escape (is-hushed) hides it until focus or the pointer leaves. */
@media (hover: hover) { .exit:hover .exit__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.exit__btn:focus-visible ~ .exit__tip, .exit__what:focus-visible ~ .exit__tip, .exit.is-open .exit__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.exit.is-hushed .exit__tip { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------- header, over the hero */
.head { position: absolute; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 50; color: var(--paper); }
.head__row { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); min-height: 112px;
  padding-right: max(var(--pad), calc(180px - max(0px, (100vw - var(--frame) - 2 * var(--pad)) / 2))); }
.head__logo img { width: 76px; height: 76px; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.nav__list a, .menu__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .875rem; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.nav__list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu { display: none; }
.head__give { min-height: 48px; padding: 0 24px; }

/* --------------------------------------------------------------- 1. hero: the room they will walk into, the mission, where and when */
.hero { position: relative; min-height: clamp(700px, calc(100svh - 60px), 960px); display: grid; align-items: center; color: var(--paper); background: #26364f; overflow: hidden; }
/* At 2000px and wider the photo is width-bound and its faces sit lower, so the hero grows with the
   screen and the words stay below every face (9/29, measured at 2560). */
@media (min-width: 2000px) { .hero { min-height: min(calc(100svh - 60px), 1180px); } }
/* Her nurses, full width. The photograph is taller than the hero so it can drift on scroll
   (the same parallax as the film band). The words and the box sit low, over their scrubs,
   so every face stays clear. */
.hero__bg { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero__shade { position: absolute; inset: 0; background: rgba(24, 54, 96, .5); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); gap: clamp(40px, 5vw, 96px); align-items: end; padding-top: 220px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(2.5rem, 1.25rem + 2.9vw, 4.375rem); font-weight: 600; line-height: 1.04; letter-spacing: 0; max-width: 22ch; text-shadow: 0 2px 18px rgba(10, 20, 36, .35); }
.hero h1 span { color: var(--gold); }
.hero__label { margin-top: 30px; font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hero__mission { margin-top: 10px; text-shadow: 0 1px 12px rgba(10, 20, 36, .4); font-size: clamp(1.1875rem, 1rem + .55vw, 1.4375rem); line-height: 1.55; max-width: 33em; }
.hero__control { margin-top: 16px; font-size: 1.0625rem; color: var(--tint); max-width: 38em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.card { background: rgba(52, 120, 144, .93); padding: 34px 32px 30px; border-radius: 6px; box-shadow: 0 24px 60px rgba(10, 20, 36, .35); }
.card__title { font-size: 1.125rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.card__title::after { content: ""; display: block; height: 2px; background: var(--gold); margin: 16px 0 6px; }
.card__row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255, 253, 252, .24); font-size: 1.0625rem; line-height: 1.5; }
.card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.card__row svg { width: 24px; height: 24px; margin-top: 2px; color: var(--gold); }
.card__row strong { font-weight: 700; }
.todo { display: inline-block; padding: 3px 10px; border: 1.5px dashed rgba(255, 253, 252, .75); border-radius: 4px; font-size: .9375rem; }
.todo--light { border-color: #8a97a3; color: #3d4a57; background: #eef1f3; }   /* 8.1 on its ground */

/* --------------------------------------------------------------- 2. events: the one loop (pauses on hover and focus, still under reduced motion) */
.ticker { background: var(--gold); color: var(--blue); }
.ticker__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 32px); min-height: 60px; }
.ticker__label { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ticker__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__track li { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; font-size: 1rem; padding: 0 22px; }
.ticker__track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-left: 44px; opacity: .55; }
.ticker__track a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__all { font-weight: 800; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }
.ticker__all:hover { text-decoration: underline; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- 3. talk to someone right now (Health's centred welcome band) */
.talk { background: var(--paper); text-align: center; padding-block: clamp(72px, 8vw, 120px); }
.band-icon { display: block; width: 58px; height: 58px; margin: 0 auto 22px; color: var(--teal-deep); }
.talk h2, .support__line { font-size: clamp(2rem, 1.4rem + 1.9vw, 2.875rem); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.talk__lede { margin: 22px auto 0; max-width: 46ch; font-size: clamp(1.125rem, 1rem + .35vw, 1.375rem); font-weight: 600; line-height: 2.2; letter-spacing: .05em; text-transform: capitalize; }
.talk__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 36px; }
.talk__actions .btn { min-height: 60px; font-size: 1rem; }
.talk__text { font-size: 1.0625rem; }
.talk__text a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.talk__sep { margin-top: 18px; }
.talk__911 { margin-top: 18px; font-weight: 800; }

/* --------------------------------------------------------------- 4. three ways in (Health's coloured panels) */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--paper); }
.panel { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; align-content: stretch; text-align: center; gap: 16px; padding: clamp(56px, 5vw, 80px) clamp(24px, 3vw, 64px) clamp(60px, 5.5vw, 88px); }
.panel--blue { background: var(--blue); }
.panel--teal { background: var(--teal-deep); }
.panel--purple { background: var(--purple); }
.panel__icon { width: 52px; height: 52px; }
.panel h2 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); font-weight: 600; line-height: 1.2; }
.pulse { width: 76px; height: 18px; opacity: .95; }
.panel p { max-width: 34ch; font-size: 1.0625rem; line-height: 2.25; }
.panel__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------- 5. the film: Avada Health's "Tour our facilities" band, to its measurements
   (9/29: Jesse, "Do not reinvent this. It's done perfectly on the template demo"). No fixed height:
   150px above and below the content; 80px icon, 46px capital heading, a 280px rule, a 70px round play
   button, 30px between. The photograph fills the band exactly; its drift moves the picture inside the
   frame (object-position), never an enlarged frame. */
.film { position: relative; overflow: hidden; color: var(--paper); text-align: center; padding: 150px 30px; background: #1d2b42; }
.film__bg { position: absolute; inset: 0; }
/* The rendering of her waiting room, cropped at the source to everything left of the door frame (NO DOORS,
   9/16), set 10% wide and anchored left so her seal sits clear of the heading. */
.film__bg img { width: 110%; max-width: none; height: 100%; object-fit: cover; object-position: 0% 50%; }
.film__shade { position: absolute; inset: 0; background: rgba(18, 42, 75, .66); }
.film__credit { position: absolute; right: var(--pad); bottom: 14px; font-size: .75rem; color: rgba(255, 253, 252, .86); }
.film__inner { position: relative; max-width: 764px; margin: 0 auto; }
.film__icon { display: block; width: 80px; height: 80px; margin: 0 auto 20px; color: var(--gold); }
.film h2 { font-size: clamp(2.2rem, 1.8rem + 1.64vw, 2.875rem); font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0; }
.film__rule { width: 280px; height: 2px; background: rgba(255, 253, 252, .85); margin: 30px auto; border: 0; }
.play { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--gold); color: var(--blue); text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.play:hover { transform: scale(1.06); background: var(--gold-deep); }
.play svg { width: 26px; height: 26px; margin-left: 4px; }

.player { margin: 96px auto auto; width: min(1200px, 92vw, calc((100dvh - 120px) * 16 / 9)); padding: 0; border: 0; border-radius: 10px; background: #0e1f38; color: var(--paper); overflow: visible; }
.player::backdrop { background: rgba(10, 20, 36, .88); }
.player video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0e1f38; }
.player__close { position: absolute; left: 0; right: auto; top: -58px; min-height: 44px; padding: 0 18px; border: 2px solid var(--paper); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.player .exit { position: fixed; }

/* The opening countdown (10/9/2026; the 6 October meeting): a slim strip above the header on the homepage
   only, gone from December 1. It sits in the flow, so the header (absolute, over the hero) moves down by
   exactly its height. Its words and button keep left, clear of the Quick exit's lane at the right. */
:root { --cd-h: 64px; }
.countdown { position: relative; z-index: 60; display: flex; align-items: center; height: var(--cd-h); background: var(--blue-deep); color: var(--paper); }
.countdown__row { display: flex; align-items: center; gap: 22px; }
.countdown__text { margin: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.countdown__days { color: var(--gold); font-weight: 800; font-size: 1.375rem; }   /* gold on blue-deep 7.4 */
.countdown__btn { flex: none; min-height: 44px; padding: 8px 22px; font-size: .8125rem; }
.has-countdown .head { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cd-h)); }
@media (max-width: 900px) {
  :root { --cd-h: 112px; }
  .countdown__row { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: calc(var(--pad) + 150px); }
  .countdown__text { font-size: 1rem; }
  .countdown__btn { white-space: nowrap; padding: 8px 16px; font-size: .75rem; letter-spacing: .08em; }
}

/* The progress slideshow: the film dialog's frame and Close, one photograph at a time, 4:3. */
.progress { margin: 96px auto auto; width: min(760px, 92vw, calc((100dvh - 250px) * 4 / 3)); padding: 0; border: 0; border-radius: 10px; background: #0e1f38; color: var(--paper); overflow: visible; }
.progress::backdrop { background: rgba(10, 20, 36, .88); }
.progress .exit { position: fixed; }
.progress__close { position: absolute; left: 0; right: auto; top: -58px; min-height: 44px; padding: 0 18px; border: 2px solid var(--paper); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.progress__slide { margin: 0; }
.progress__slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px 10px 0 0; background: #0e1f38; }
.progress__slide figcaption { padding: 16px 22px 0; font-size: 1rem; line-height: 1.5; }
.progress__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 20px; }
.progress__step { min-height: 44px; padding: 0 18px; border: 2px solid var(--paper); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.progress__step:disabled { opacity: .45; cursor: default; }
.progress__count { font-size: .9375rem; }
.progress-nojs { background: var(--blush); padding-block: 48px; }
.progress-nojs .frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.progress-nojs figure { margin: 0; }
.progress-nojs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* --------------------------------------------------------------- 6. the people who made it possible (Health's logo band) */
.support { background: var(--blush); text-align: center; padding-block: clamp(72px, 8vw, 116px); }
.support__line { max-width: 31ch; margin: 0 auto; }
/* Rows that always fill: six across, three across, two across. */
.logos { display: grid; grid-template-columns: repeat(6, 176px); justify-content: center; gap: 18px; margin: 48px auto 0; }
.logos li { display: grid; place-items: center; height: 112px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.logos img { max-height: 70px; width: auto; max-width: 100%; object-fit: contain; }
.logos .todo { font-size: .75rem; line-height: 1.4; padding: 4px 8px; text-align: center; }
.logos li:has(.todo) { padding: 10px; }
.logos__link { display: grid; place-items: center; width: 100%; height: 100%; min-height: 44px; }
.logos li:has(.logos__link):hover { border-color: var(--teal-deep); }
.support .btn { margin-top: 40px; }
/* Two round partner marks (About, 10/9): a centred pair of taller tiles at every width. */
.logos.logos--pair { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
.logos--pair li { height: 200px; }
.logos--pair img { max-height: 164px; }

/* --------------------------------------------------------------- footer (Health's three columns, the live site's dark blue) */
.foot { background: var(--blue); color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px clamp(32px, 5vw, 96px); padding-block: clamp(56px, 6vw, 88px); }
.foot__id img { width: 96px; height: 96px; }
.foot__name { font-weight: 600; font-size: 1.25rem; margin-top: 18px; }
.foot__addr { color: var(--tint); }
.foot__list li + li { margin-top: 4px; }
.foot__list a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-weight: 600; }
.foot__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__list svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.foot__actions { display: grid; gap: 12px; justify-items: start; align-content: start; }
.foot__bar { background: var(--blue-deep); color: var(--tint); font-size: .9375rem; }
.foot__bar .frame { padding-block: 20px; }

/* --------------------------------------------------------------- tablet and phone */
@media (max-width: 1200px) {
  .logos { grid-template-columns: repeat(3, 176px); }
}
@media (max-width: 1100px) {
  .nav__list { gap: 16px; }
  .nav__list a { font-size: .8125rem; letter-spacing: .06em; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero__bg img { object-position: 50% 14%; }
  .film__bg img { width: 100%; object-position: 15% 50%; }   /* on a phone, the sofa, the glass wall and the chairs */
  .head__row { min-height: 84px; padding-right: 162px; gap: 12px; }
  .head__logo img { width: 58px; height: 58px; }
  .exit { top: calc(18px + var(--wp-admin--admin-bar--height, 0px)); }
  .exit__btn { padding: 0 .95em; font-size: .9375rem; }
  .nav, .head__give { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--paper); border-radius: var(--radius); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; }
  .menu__btn::-webkit-details-marker { display: none; }
  .menu__list { position: absolute; left: 0; right: 0; top: 100%; display: grid; background: var(--paper); color: var(--blue); padding: 8px var(--pad) 16px; box-shadow: 0 16px 30px rgba(18, 42, 75, .2); }
  .menu__list a { display: flex; min-height: 52px; font-size: .9375rem; border-bottom: 1px solid var(--rule); }

  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 300px; padding-bottom: 56px; }
  .hero h1 { max-width: none; }
  .panels { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr; }
  .ticker__row { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
  .ticker__label { grid-column: 1 / -1; }
}

/* ===============================================================
   INTERIOR PAGES: Avada Health's department page, to its measurements.
   Solid header; a full-width photograph title band (title 80px, one line at
   22px, the picture drifting inside the frame); then a white main card
   (padding 40px) beside a 365px fact card (padding 30px, headings over a
   2px rule) on a light ground, 47px apart. On a phone the fact card comes
   FIRST: on a survivor page, where to go and who to call is the care.
   =============================================================== */
.head--solid { position: relative; top: 0; background: var(--blue); }

/* Health: the words sit in the band's upper part (164px above, 280px below at 1440); 140px each way on a phone. */
/* The title band matches Health from 1440 up. At 1050 and on a phone it is shorter on purpose: on the
   survivor pages the fact card (where to go, who to call) must reach the first or second screen. */
.title { position: relative; overflow: hidden; color: var(--paper); text-align: center; padding: clamp(140px, 11.4vw, 164px) 30px clamp(140px, 19.4vw, 280px); background: #1d2b42; }
.title__bg { position: absolute; inset: 0; }
.title__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.title__shade { position: absolute; inset: 0; background: rgba(24, 54, 96, .62); }
.title__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.title h1 { font-size: clamp(2.625rem, 1.9rem + 4.2vw, 5rem); font-weight: 600; line-height: 1; letter-spacing: 0; text-shadow: 0 2px 18px rgba(10, 20, 36, .3); }
.title__line { margin-top: 20px; font-size: clamp(1.1875rem, 1rem + .6vw, 1.375rem); font-weight: 600; letter-spacing: 1px; line-height: 2.2; text-transform: capitalize; text-shadow: 0 1px 12px rgba(10, 20, 36, .35); }
.title__play { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.title__play .play { width: 70px; height: 70px; }
@media (max-width: 600px) { .title__play { margin-top: 20px; gap: 12px; } .title__play .play { width: 56px; height: 56px; } }
.title__credit { position: absolute; right: var(--pad); bottom: 14px; font-size: .75rem; color: var(--paper); text-shadow: 0 1px 6px rgba(10, 20, 36, .5); }

.dept-wrap { background: var(--blush); }
.dept { display: grid; grid-template-columns: minmax(0, 1fr) 31.2%; grid-template-areas: "main side"; gap: 47px; align-items: stretch; max-width: calc(1200px + 2 * var(--pad)); margin: 0 auto; padding: 60px var(--pad) 100px; }
.dept__main { grid-area: main; background: #fff; border: 1px solid #dde1e4; padding: 40px; }
/* ONE fact card, the height of the main card (Health). Its sections sit 40px apart. */
.dept__side { grid-area: side; background: #fff; border: 1px solid #dde1e4; padding: 30px; }
.dept__side > .sidecard { background: none; border: 0; padding: 0; }
.dept__side > .sidecard + .sidecard { margin-top: 40px; }
.sidecard { background: #fff; border: 1px solid #dde1e4; padding: 30px; }
.sidecard__head { font-size: 1.125rem; font-weight: 600; letter-spacing: 1px; line-height: 2; text-transform: uppercase; text-align: center; padding-bottom: 14px; border-bottom: 2px solid var(--teal-deep); margin-bottom: 20px; }
.sidecard__row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #dcdcdc; line-height: 2.25; }
.sidecard__row:last-of-type { border-bottom: 0; }
.sidecard__row svg { width: 22px; height: 22px; margin-top: 2px; color: var(--teal-deep); }
.sidecard .btn { width: 100%; margin-top: 18px; white-space: nowrap; padding-inline: 14px; }
/* A laptop between 961 and 1180px: Health's 31.2% leaves the fact card too narrow for its
   one-line buttons ("Call 1-800-770-1650", "Start the conversation"), so the card widens there. */
@media (min-width: 961px) and (max-width: 1180px) {
  .dept { grid-template-columns: minmax(0, 1fr) 36%; gap: 32px; }
  .dept__side { padding: 28px 22px; }
  .sidecard .btn { letter-spacing: .05em; padding-inline: 10px; }
}
.sidecard p + p { margin-top: 14px; }
.sidecard__strong { font-weight: 800; }
.sidecard .btn + p { margin-top: 18px; }
.nowrap { white-space: nowrap; }
.todo--card { border-color: #8a97a3; color: #3d4a57; background: #eef1f3; }

/* Health's card type: 22px semibold headings with 1px tracking on a 2.2 line, 17px body on a 38px line. */
.dept__main h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.6; letter-spacing: 1px; }
.dept__main h2 + * { margin-top: 18px; }
.dept__section + .dept__section { margin-top: 44px; }
.dept__main p, .dept__main .checks li, .dept__main .steps li { font-size: 1.0625rem; line-height: 2.25; }
.dept__main .checks li, .dept__main .steps li, .dept__main .steps p { line-height: 1.7; }   /* Health's checklist: 17px on a 28.9px line */
.dept__main p + p { margin-top: 14px; }
.steps { display: grid; gap: 18px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 29px 1fr; gap: 14px; align-items: start; font-size: 1.0625rem; line-height: 1.7; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 29px; height: 29px; margin-top: 5px; border-radius: 50%; background: var(--teal-deep); color: #fff; font-weight: 800; font-size: 1rem; line-height: 1; margin-top: 1px; }
.dept__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn--line-blue { border-color: var(--blue); color: var(--blue); }
.btn--line-blue:hover { background: var(--blue); color: var(--paper); }

/* Health's "Make An Appointment" band: a form on a photograph, full width. */
.formband { position: relative; overflow: hidden; color: var(--paper); padding: 150px 30px 110px; background: #1d2b42; }
.formband__bg { position: absolute; inset: 0; }
.formband__bg img { width: 100%; height: 100%; object-fit: cover; }
.formband__shade { position: absolute; inset: 0; background: rgba(24, 54, 96, .8); }
.formband__inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.formband h2 { font-size: clamp(2.2rem, 1.8rem + 1.64vw, 2.875rem); font-weight: 600; line-height: 1.25; }
.formband__rule { width: 280px; height: 2px; border: 0; background: rgba(255, 253, 252, .85); margin: 30px auto; }
.formband__lede { font-size: 1.375rem; font-weight: 600; line-height: 2.2; letter-spacing: 1px; text-transform: capitalize; }   /* Health's intro, as Contact's */
.formband .form { text-align: left; margin-top: 36px; }
.formband .field label { color: var(--paper); }
.formband .form .btn { justify-self: stretch; width: 100%; min-height: 56px; }   /* Health's full-width submit */
.formband .form-note--sent { color: var(--blue); text-align: left; }

/* The form: stores first, records no identifier (inc/forms.php). */
.form { display: grid; gap: 18px; margin-top: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; font-size: 1rem; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1.0625rem; color: var(--blue); background: #fff; border: 1px solid #aeb8c0; border-radius: var(--radius); padding: 13px 14px; }
.field select { appearance: none; -webkit-appearance: none; min-height: 50px; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183660' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.field textarea { min-height: 150px; resize: vertical; }
.on-dark .field input:focus-visible, .on-dark .field textarea:focus-visible, .on-dark .field select:focus-visible { outline-color: var(--gold) !important; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.field .field__input--error { border-color: #b3261e; border-width: 2px; }
.form .btn { justify-self: start; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { border-radius: 6px; padding: 18px 20px; margin-top: 18px; scroll-margin-top: 130px; }
.form-note a[href^="tel:"] { white-space: nowrap; }
.form-note p + p { margin-top: 10px; }
.form-note--sent { background: var(--tint); }
.form-note__lead { font-weight: 800; }
.form-note--error { background: #fbeceb; border: 2px solid #b3261e; color: #7a1a14; }
.form-note a { font-weight: 700; }

/* ---------------------------------------------------------------
   SHARED INTERIOR PARTS (9/29). Every page builds from these; a page sheet
   (assets/new/pages/<page>.css) adds only what one page needs.
   --------------------------------------------------------------- */

/* A title band with no photograph yet: a described gray box, never a stock photo. */
.title--todo { background: #5b6875; }
/* A compact title band (10/9, Events: the calendar and the next date on the first screen): no picture, the site's blue. */
.title.title--compact { min-height: 0; padding-bottom: clamp(44px, 5vw, 72px); }
.title--compact.title--todo { background: var(--blue); }
.title__todo { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(92%, 760px); margin: 0; display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; font-size: .875rem; line-height: 1.45; color: #f3f5f7; text-align: center; }
.title__todo span, .photo-todo__tag { display: inline-block; padding: 2px 8px; border: 1.5px dashed rgba(255, 253, 252, .8); border-radius: 4px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* A photograph slot with no photograph yet. */
.photo-todo { display: grid; place-content: center; gap: 10px; min-height: 260px; padding: 28px; text-align: center; background: #5b6875; color: #fff; border: 2px dashed rgba(255, 253, 252, .6); border-radius: 6px; }   /* white on it 5.7 */
.photo-todo__desc { font-size: 1rem; line-height: 1.5; max-width: 34ch; margin: 0 auto; }

/* A centred band (Health's "Welcome" band): icon, heading, one paragraph, actions. */
.band { padding-block: clamp(64px, 7vw, 110px); text-align: center; }
.band--paper { background: var(--paper); }
.band--blush { background: var(--blush); }
.band--tint { background: var(--tint); }
.band--blue { background: var(--blue); color: var(--paper); }
.band .band-icon { color: var(--teal-deep); }
.band--blue .band-icon { color: var(--gold); }
.band h2 { font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.875rem); font-weight: 600; line-height: 1.25; letter-spacing: 0; max-width: 26ch; margin: 0 auto; }
.band__lede { margin: 20px auto 0; max-width: 52ch; font-size: clamp(1.125rem, 1rem + .35vw, 1.375rem); font-weight: 600; line-height: 2.2; letter-spacing: .05em; text-transform: capitalize; }
.band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.band__rule { width: 280px; height: 2px; border: 0; margin: 26px auto; background: currentColor; opacity: .5; }

/* Health's feature columns: icon, capital heading, text, centred, three or four across. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px clamp(24px, 3vw, 48px); margin-top: 48px; text-align: center; }
.feature__icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--teal-deep); }
.feature h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; line-height: 1.25; }
.feature p { margin-top: 12px; font-size: 1.0625rem; line-height: 2.25; }

/* White cards on a light ground (Health's department cards), in a row. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.card-w { background: #fff; border: 1px solid #dde1e4; padding: 30px; }
.card-w h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.6; letter-spacing: 1px; }
.card-w p { margin-top: 10px; font-size: 1.0625rem; line-height: 2.25; }
.card-w .btn { margin-top: 18px; }

/* Health's checklist: round teal icons with a white check. */
.checks { display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; font-size: 1.0625rem; line-height: 1.65; }
.checks li::before { content: ""; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* An inline film in a main card: the poster with Health's round play button. */
.media { position: relative; display: block; border-radius: 6px; overflow: hidden; background: #0e1f38; aspect-ratio: 16 / 9; margin-top: 22px; }
.media img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.media .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.media .play:hover { transform: translate(-50%, -50%) scale(1.06); }
.media__label { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: .9375rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* The dept main card's own figure rows (Health's "Department figures"). */
.figs { display: grid; }
.figs li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #e6e9ec; font-size: 1rem; }
.figs li:last-child { border-bottom: 0; }
.figs b { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem; }
.figs span { color: var(--teal-deep); font-weight: 700; text-align: right; }

.lead { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 2.2; font-weight: 600; letter-spacing: .05em; }

@media (max-width: 960px) {
  .dept { grid-template-columns: 1fr; grid-template-areas: "side" "main"; gap: 30px; padding: 60px 30px 100px; }
}
@media (max-width: 900px) {
  .head--solid .head__row { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .ticker__track { animation: none !important; flex-wrap: wrap; width: auto; row-gap: 6px; padding-block: 8px; }
  .ticker__track [aria-hidden="true"] { display: none; }
  .ticker__track li { white-space: normal; padding-inline: 0; }
  .ticker__track li::after { display: none; }
  .hero__bg { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 480px) { .ticker__row { grid-template-columns: minmax(0, 1fr); } }

/* Phones (9/29, from the page builds): main-card buttons span the card and keep one line, and a
   title band's h1 shrinks only as far as a bound last pair needs (below 400px) so it never clips. */
@media (max-width: 480px) {
  .dept__main { padding: 30px; }
  .dept__main .dept__actions .btn { width: 100%; padding-inline: 16px; }
}
@media (max-width: 400px) {
  .title h1 { font-size: min(2.625rem, 10.6vw); }
  .dept__main .dept__actions .btn { font-size: .8125rem; letter-spacing: .05em; padding-inline: 12px; }
  .dept { padding-inline: 16px; }
  .dept__main { padding: 26px 20px; }
  .dept__side { padding: 26px 20px; }
  .sidecard .btn { letter-spacing: .04em; }
}

/* Phones (9/29 review, the 15 September standard): the fact card leads only on Get help now, where
   where-to-go is the point. Everywhere else the page's own words lead and the card follows, so the
   same card is never the first thing on every page ("take out those repeats", 12:36). */
@media (max-width: 960px) {
  .page-template-page-help-what-happens .dept,
  .page-template-page-families .dept,
  .page-template-page-help-while-ago .dept,
  .page-template-page-jobs .dept { grid-template-areas: "main" "side"; }
}

/* Phones: Give in the menu is the gold button it is on a laptop. */
@media (max-width: 900px) {
  .menu__list li:last-child a { background: var(--gold); color: var(--blue); justify-content: center; border: 0; margin-top: 12px; border-radius: var(--radius); }
}

/* The homepage on a phone (9/29 review, the 15 September standard): a survivor's first screen must
   say where, when care begins, and how to reach someone. The nurses become a strip at the top, every
   face clear, and the words sit on blue below it; the card (address, phone, December 1) comes before
   the buttons, the approved order, tightened so December 1 lands in the first screen. */
@media (max-width: 600px) {
  .hero { background: var(--blue); }
  .hero__bg { position: relative; top: auto; bottom: auto; height: 210px; transform: none !important; }
  .hero__bg img { object-position: 50% 16%; }
  .hero__shade { bottom: auto; height: 210px; background: rgba(24, 54, 96, .28); }
  .hero__inner { padding-top: 20px; padding-bottom: 44px; gap: 0; display: flex; flex-direction: column; }
  .hero__inner > div:first-child { display: contents; }
  .hero h1 { font-size: 2.125rem; text-shadow: none; }
  .hero__label { margin-top: 16px; align-self: flex-start; margin-left: 0; margin-right: auto; text-align: left; }
  .hero__mission { font-size: 1rem; line-height: 1.45; text-shadow: none; }
  .hero__control { font-size: .9375rem; margin-top: 10px; }
  .hero .card { order: 1; margin-top: 20px; padding: 16px 18px; box-shadow: none; }
  .hero .card__title { font-size: .8125rem; }
  .hero .card__row { padding: 9px 0; font-size: 1rem; }
  .hero__actions { order: 2; margin-top: 20px; }
}

/* The owner's monitor (9/29 review at 2560): from 1800px up (above every laptop, which keeps Health's layout) every interior body fills the site's
   frame, the same width as the header, footer and homepage, instead of Health's 1170px column
   with half the screen bare beside it (rule 10: a wide frame the content fills, never a skinny
   column). The main card's words run as a two-column magazine body there, so lines stay readable;
   a heading never leaves its words, and no list item or button row splits. Below 1600px nothing
   changes: Health's measurements hold at 1440 and under. */
@media (min-width: 1800px) {
  html body .title__inner { max-width: var(--frame); }
  html body .dept { max-width: calc(var(--frame) + 2 * var(--pad)); grid-template-columns: minmax(0, 1fr) 30%; gap: 56px; }
  html body .dept__main { column-count: 2; column-gap: 64px; }
  html body .dept__main h2, html body .dept__main h3 { break-after: avoid; break-inside: avoid; }
  html body .dept__main li, html body .dept__main p, html body .dept__main .dept__actions, html body .dept__main .giveslot, html body .dept__main .part, html body .dept__main .todo { break-inside: avoid; }
  html body .dept__main .dept__section + .dept__section { margin-top: 30px; }
  html body .pg-frame, html body .wte-band .frame, html body .hnt-band .frame { max-width: calc(var(--frame) + 2 * var(--pad)); }
  html body .pro-parts { max-width: var(--frame); }
  /* WebKit splits grid items across columns despite break-inside: avoid; an inline-grid block at
     full width cannot be split (9/29, caught by the sweep in WebKit at 1760 and 2560). */
  html body .dept__main .parts, html body .dept__main .checks, html body .dept__main .steps { display: block; }
  html body .dept__main .parts > li, html body .dept__main .checks > li, html body .dept__main .steps > li { display: inline-grid; width: 100%; vertical-align: top; margin-bottom: 18px; }
  html body .dept__main p { display: inline-block; width: 100%; vertical-align: top; }
  html body .dept__main .dept__actions { break-before: avoid; }   /* a button row stays with the words above it */
  /* A short section that ends in buttons (no list) moves as one piece, so its buttons never start a column. */
  html body .dept__main .dept__section:has(> .dept__actions):not(:has(.parts, .checks, .steps)) { display: inline-block; width: 100%; vertical-align: top; }
}

/* The check-in desk rendering (What to expect, About, 404, search): at 2000px and wider the band's
   top cut the wall seal in half, so the picture sits a little lower there. */
@media (min-width: 2000px) {
  .page-template-page-help-what-happens .title__bg img, .page-template-page-about .title__bg img, .error404 .title__bg img, .search .title__bg img { --y: 38; }
}

/* Section heads (9/29 review): ONE style on every interior page, Health's "Meet our doctors" head:
   an 80px line icon, a capital Open Sans 800 heading reaching 46px from 1050 up, a 280px rule. */
.shead { text-align: center; }
.shead .band-icon { width: 80px; height: 80px; margin: 0 auto 20px; stroke-width: 1.8; }
.band--blue .shead .band-icon { color: var(--gold); }
.shead h2 { font-size: clamp(2.2rem, 1.8rem + 1.64vw, 2.875rem); font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: uppercase; margin: 0 auto; text-wrap: balance; }
.shead .band__rule { width: 280px; height: 2px; margin: 30px auto; opacity: 1; background: #cfd5d8; }
.shead__sub { max-width: 764px; margin: 0 auto; font-size: clamp(1.1875rem, 1.05rem + .35vw, 1.375rem); font-weight: 600; letter-spacing: .05em; line-height: 2.2; text-transform: capitalize; }

/* Where a blue band meets the blue footer (About's letters), a faint seam keeps them two things. */
.foot { border-top: 1px solid rgba(255, 253, 252, .16); }

/* Phones: the open menu starts below the Quick exit's "What does this do?" pill and its 44px tap
   area, so a tap on the first menu row can never land on the pill (9/29 safety review, WebKit). */
@media (max-width: 900px) {
  .menu__list { padding-top: 48px; }
}

/* With JavaScript off, the title band's film plays here, in the page, with its captions and the Quick exit. */
.film-nojs { max-width: 960px; margin: 40px auto 0; padding-inline: var(--pad); }
.film-nojs video { width: 100%; aspect-ratio: 16 / 9; background: #0e1f38; }

/* Onward links (9/29 laptop review): where a card sends the reader on to several sibling pages, they
   are one aligned list of full-width rows with an arrow, never a ragged row of buttons. */
.nextlinks { margin-top: 22px; border-top: 1px solid #dde1e4; }
.nextlinks a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid #dde1e4; color: var(--blue); font-weight: 600; font-size: 1.0625rem; letter-spacing: .5px; text-decoration: none; }
.nextlinks a svg { flex: none; width: 22px; height: 22px; color: var(--teal-deep); transition: transform .2s var(--ease); }
.nextlinks a:hover { color: var(--teal-deep); }
.nextlinks a:hover svg { transform: translateX(4px); }

/* ------------------------------------------------ Health's split ("Values" / "Expert Healthcare"):
   50/50 full bleed, the photograph half runs to the edge, the words half padded 6.5vw.
   About (her portrait beside the mission) and For professionals (the nurses beside
   their training). Stacks at 900 with the photograph first, as Health does. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.split__photo { position: relative; margin: 0; min-height: clamp(460px, 44vw, 760px); background: #d9dee2; overflow: hidden; }
.split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.split__caption { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 24px); padding: 12px 20px; background: var(--blue); color: var(--paper); font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.split__words { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6.5vw, 170px); }
.split h2 { font-size: clamp(2.2rem, 1.55rem + 1.2vw, 2.875rem); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.split__lede { margin-top: 26px; font-size: clamp(1.25rem, .9rem + .7vw, 1.75rem); font-weight: 600; letter-spacing: .02em; line-height: 2; }   /* her mission keeps its own case (10/2) */
.split__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__photo { min-height: 0; aspect-ratio: 5 / 4; }
  .split__words { padding: 44px 30px 56px; }
  .split__lede { line-height: 2; }
}

/* ------------------------------------------------ laptop review, 9/29 (four critiques at 1440 and 1512)
   Title bands: Health's is one height on every page (572 to 576px), so the first card never
   jumps between sibling pages. The words keep their place; a long title grows the band. */
@media (min-width: 1200px) {
  .title { min-height: 576px; padding-bottom: 72px; }
}
.title h1 { line-height: 1.06; }
.title__line { text-wrap: balance; }
.title--todo h1, .title--todo .title__line { text-shadow: none; }

/* The menu shows where you are, as Health's does (the hover style, held). */
.nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Rows of feature cards: the icons, headings and texts each share a row, so a two-line heading
   never drops one card's text below the others (About's "Why, how, and now"). */
@media (min-width: 901px) {
  .features.whyband__cols { grid-auto-rows: auto; row-gap: 0; }
  .whyband__cols .feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .whyband__cols .feature h3 { align-self: end; }
}

/* Health's split, words column: the section subtitle size (22px), not the display lede. */
.split__lede { font-size: clamp(1.1875rem, 1rem + .45vw, 1.375rem); }

/* A link that must not break: the text line in every fact card. */
.sidecard a[href^="sms:"], .appt__danger a[href^="sms:"] { white-space: nowrap; }

/* Get help now: the main card and the fact card share top and bottom (Health). The card's
   sections breathe apart and the onward links sit at its foot, so no empty band sits under
   them (the "Four things to know first" box, owner 9/29). */
@media (min-width: 961px) and (max-width: 1799px) {
  .page-template-page-hub-gethelp .dept { grid-template-columns: minmax(0, 1fr) 36%; }
  .page-template-page-hub-gethelp .dept__main { display: flex; flex-direction: column; }
  .page-template-page-hub-gethelp .steps { gap: 22px; }
  .page-template-page-hub-gethelp .dept__main > .dept__section:last-child { flex: 1; display: flex; flex-direction: column; }
  .page-template-page-hub-gethelp .dept__section + .dept__section { margin-top: 56px; }
  .page-template-page-hub-gethelp .dept__main h2 + * { margin-top: 26px; }
  .page-template-page-hub-gethelp .nextlinks { margin-top: auto; padding-top: 22px; }
}

/* Her nurse team behind the title (Give, Get involved, Team): the approved homepage hero's
   flat overlay (.50), so the faces read; the words sit low, over the scrubs. */
.page-template-page-give .title__shade, .page-template-page-jobs .title__shade, .page-template-page-team .title__shade { background: rgba(24, 54, 96, .5); }
.page-template-page-jobs .title { --y: 20; }
.page-template-page-give .title { --y: 40; }

/* The footer's two buttons fill their column (Health). */
.foot__actions { justify-items: stretch; }

/* The funders' row sits on the page frame, edge to edge with the cards above it. */
@media (min-width: 901px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1200px; } }

/* The form band's message box: Health's is about 120px; ours read as a white block across the photograph. */
.formband textarea { height: 150px; min-height: 120px; }

/* The film band on the waiting room: framed on the seal and the cove, so the chairs are not sliced along the bottom edge (laptop review, 9/29). */
.film__bg img { --y: 32; }

/* The hero headline never breaks inside "Survivor-Centered" on a laptop (it split at the hyphen at
   every laptop width), and it holds two lines, the gold "Expert Care" on the second, from 1050 to
   2560: the size is set so "Free Survivor-Centered" fits the words column. A phone keeps the break. */
.hero h1 .hero__whole { color: inherit; }
@media (min-width: 601px) {
  .hero h1 .hero__whole { white-space: nowrap; }
  .hero h1 { font-size: clamp(2.5rem, .8rem + 2.9vw, 4.25rem); }
}

/* ------------------------------------------------ Health's fact card, read off its department page (10/2):
   an 18px semibold capital heading over a 2px rule, then plain rows, 17px on a 38px line,
   between 1px #dcdcdc rules, 10px x 20px; no icons, no boxes. The phone line is Health's
   (semibold, tracked 1px, centred), made a 56px tap target because ours is a crisis number. */
.dept__side .sidecard__row { display: block; padding: 10px 20px; }
.dept__side .sidecard__row > svg { display: none; }
.dept__side .sidecard__row:last-of-type { border-bottom: 1px solid #dcdcdc; }
.dept__side .todo--card { display: inline; padding: 0; border: 0; background: none; color: #4b5a68; font-size: inherit; }   /* 7.0 on white */
.dept__side .sidecard p:not(.sidecard__row) { padding-inline: 20px; }
.sidecard__phone { margin-top: 14px; text-align: center; }
.sidecard__phone a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 12px; font-size: 1.375rem; font-weight: 600; letter-spacing: 1px; color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sidecard__phone a:hover { color: var(--teal-deep); }
.sidecard__phone svg { width: 22px; height: 22px; color: var(--teal-deep); flex: none; }
/* Health's title-band button (About, Departments, Articles): one, centred, 30px under the line. */
.title__actions { display: flex; justify-content: center; margin-top: 30px; }

/* The gala poster (About): the ice sculpture centred behind the heading, at its own width. */
.gala .film__bg img { width: 100%; object-position: 50% 50%; --y: 50; }

/* ------------------------------------------------ Health's small button and menu type (10/2): the header's
   button, the footer's two, the coloured panels' and any fact-card button take Health's small
   one (Montserrat 14px, 13px x 29px, square); the menu is Health's Montserrat 14px regular, so
   the header reads as one face. */
.head__give, .foot__actions .btn, .panel__links .btn, .sidecard .btn { min-height: 47px; padding: 11px 29px; font-size: .875rem; letter-spacing: .12em; border-radius: 0; }
.nav__list a { font-family: "Montserrat", "Open Sans", sans-serif; font-weight: 400; font-size: .875rem; letter-spacing: .08em; }
@media (max-width: 1100px) { .nav__list a { font-size: .8125rem; letter-spacing: .05em; } }

/* Get help now: the main card's two sections share its height, so any spare room falls
   between them, never between a paragraph and its own links. */
@media (min-width: 961px) and (max-width: 1799px) {
  .page-template-page-hub-gethelp .dept__main { justify-content: space-between; }
  .page-template-page-hub-gethelp .dept__main > .dept__section:last-child { flex: 0 0 auto; }
  .page-template-page-hub-gethelp .nextlinks { margin-top: 22px; padding-top: 0; }
}

/* Numbered steps are sentences, not Health's one-line checks: they take Health's paragraph line (38px). */
.dept__main .steps li, .dept__main .steps p { line-height: 2.25; }
.steps li::before { margin-top: 5px; }
.gala .film__shade { background: rgba(18, 42, 75, .76); }   /* the sculpture's lettering sits behind the heading */

/* ------------------------------------------------ Health's closing photo band (10/2), the last band before
   the footer on Health's pages: 150px above and 110px below, the photograph behind a flat blue
   shade, drifting right; 46px semibold capital heading, a 280px rule, the line, the page's action. */
.closeband { position: relative; overflow: hidden; isolation: isolate; color: var(--paper); text-align: center; padding: clamp(96px, 10.4vw, 150px) 30px clamp(80px, 7.6vw, 110px); background: #1d2b42; }
.closeband__bg { position: absolute; inset: 0; z-index: -2; }
.closeband__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.closeband__shade { position: absolute; inset: 0; z-index: -1; background: rgba(18, 42, 75, .7); }
.closeband__inner { max-width: 764px; margin: 0 auto; }
.closeband__icon { display: inline-grid; place-items: center; margin-bottom: 20px; color: var(--gold); }
.closeband__icon svg { width: 64px; height: 64px; stroke-width: 1.4; }
.closeband h2 { font-size: clamp(2.2rem, 1.8rem + 1.64vw, 2.875rem); font-weight: 600; line-height: 1.25; text-transform: uppercase; }
.closeband__rule { width: 280px; height: 2px; border: 0; background: rgba(255, 253, 252, .85); margin: 30px auto; }
.closeband__line { font-size: 1.375rem; font-weight: 600; line-height: 2.2; letter-spacing: .05em; text-transform: capitalize; }
.closeband__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.closeband__line + .closeband__actions { margin-top: 32px; }
.closeband .btn--line-blue { border-color: var(--paper); color: var(--paper); }
.closeband .btn--line-blue:hover { background: var(--paper); color: var(--blue); }
.closeband__credit { position: absolute; right: var(--pad); bottom: 14px; font-size: .75rem; color: rgba(255, 253, 252, .86); }