/* Home Safety & Independence Assessment — 203.amadaseniorcare.com
   Brand: 2026 Amada Senior Care Brand Book (Oswald / Source Sans 3 / Montserrat) */

:root {
  --amada-blue: #002942;
  --amada-blue-80: #3D5366;
  --amada-berry: #701E46;
  --amada-berry-80: #85506A;
  --berry-3: #B76C7A;
  --berry-4: #D792A9;
  --light-blue: #C5CFDB;
  --gray-10: #63656A;
  --light-gray: #C8C8C8;
  --paper: #FAFAF7;
  --white: #ffffff;

  --font-title: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;

  --radius: 10px;
  --shadow: 0 2px 14px rgba(0, 41, 66, 0.08);
  --shadow-lift: 0 8px 28px rgba(0, 41, 66, 0.14);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

/* the `hidden` attribute must beat component display rules (.btn, .followup) */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--amada-blue);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating body copy in landscape */
}

/* the sticky header must not cover the section an in-page link jumps to */
section[id] { scroll-margin-top: 5rem; }

img { max-width: 100%; }

/* no grey flash on tap; the .selected state is the feedback */
a, button, label.option, .chip { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--amada-berry); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* full-bleed bar — spans the viewport rather than sitting inside the content column */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.8rem clamp(1rem, 3.5vw, 2.75rem);
}

.brand-mark { height: 40px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: clamp(0.9rem, 2.5vw, 1.75rem); }

.header-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-10);
}

.header-phone-num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--amada-blue);
}

.header-phone:hover .header-phone-num { color: var(--amada-berry); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: translateY(1px); }

.btn-sm { padding: 0.68rem 1.25rem; font-size: 0.9rem; }
.btn-lg { padding: 1.15rem 2.6rem; font-size: 1.1rem; }

.btn-primary { background: var(--amada-berry); color: var(--white); }
.btn-primary:hover { background: var(--amada-berry-80); }

.btn-ghost {
  background: transparent;
  color: var(--amada-blue-80);
  border-color: var(--light-gray);
}
.btn-ghost:hover { border-color: var(--amada-blue-80); color: var(--amada-blue); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline:hover { background: var(--white); color: var(--amada-blue); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;          /* copy sits low; the two faces stay in the clear */
  /* Compact band. The video is the page's first ask, so the hero takes only the
     height its own copy needs and hands the rest of the first screen to the
     player. Still sized off WIDTH, not viewport height, so the crop behaves the
     same at every window size. A band this short only shows a slice of the
     photo, so .hero-media img re-anchors it to keep both faces in frame. */
  min-height: clamp(15rem, calc(9vw + 9rem), 22rem);
  /* bottom padding: the video card is pulled up into this space */
  padding: 1.75rem 0 3.25rem;
  color: var(--white);
  background: var(--amada-blue); /* shows while the photo decodes */
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The compact band shows only a horizontal slice of the 16:9 crop, and the
     faces sit at roughly 0.42 of its height — top-aligning here (which the
     taller hero wanted, to protect the 3% headroom) now frames the empty
     kitchen above their heads. 25% brings both faces into the band while
     still clearing the crowns; 37% centres them but clips the foreheads.
     The portrait crop below 720px is tall enough to still align top; see the
     media query. */
  object-position: 50% 25%;
}

/* The subjects sit in the upper half of the frame, so the heavy scrim rises from the
   bottom and leaves both faces visible. A light left-bias and a soft top wash keep the
   headline and the white header edge legible without flattening the photo.
   Copy sits over >=0.86 alpha (white on ~#173D57, ~11:1). */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0, 41, 66, 0.55) 0%,
      rgba(0, 41, 66, 0.16) 18%,
      rgba(0, 41, 66, 0.48) 38%,
      rgba(0, 41, 66, 0.88) 62%,
      rgba(0, 41, 66, 0.95) 100%);
}

.hero-inner { display: block; }

/* centred headline column — wide enough to hold the headline on one line at
   desktop widths; the lede keeps its own narrower measure below */
.hero-copy { max-width: 62rem; margin: 0 auto; text-align: center; }

.hero .lede { margin: 0 auto; max-width: 40rem; }

/* the copy sits on live photo, so it carries its own contrast insurance */
.hero h1 {
  text-shadow: 0 1px 18px rgba(0, 20, 33, 0.45);
  text-wrap: balance;   /* even line lengths; the nbsp handles older browsers */
}
.hero .lede, .hero .hero-note { text-shadow: 0 1px 12px rgba(0, 20, 33, 0.55); }

/* berry-4 disappears against the bright kitchen — go light and shadow it */
.hero .eyebrow {
  color: #F2DCE4;
  text-shadow: 0 1px 10px rgba(0, 20, 33, 0.75);
}

/* ---------- introduction video (the funnel's first ask) ---------- */

.intro-video-section { padding: 0 0 3rem; }

/* pulled up over the hero so the video is the first thing below the headline.
   The intro cut is square, so the column is narrower than the 54rem a 16:9
   film would want — a 1:1 video at that width would be nearly 900px tall.

   Because the frame is 1:1, the column's width IS its height — so this is
   still capped against the viewport, just with less headroom reserved than
   the original above-the-fold version: 2026-09-03, Eric asked for a larger
   desktop video after confirming mobile (bound by its own narrow container,
   not this formula — see the media query below) already looked right.
   22rem was chosen empirically, not by formula: 20rem gave a noticeably
   bigger video (~540px at 900px viewport height) but clipped the CTA button
   itself by 34-38px at 900px/720px; at 22rem that's down to a 2-7px sliver
   at those same two sizes (fully clear at 1280x800 and 1366x768), while
   still growing the video ~28px (roughly 6-9%) over the original at all
   four. Push below 22rem only after checking those sizes again — the 16rem
   floor still stops the video collapsing to a stamp on very short windows. */
.intro-video {
  max-width: min(42rem, max(16rem, calc(100vh - 22rem)));
  /* svh = the small viewport, so a mobile URL bar can't push things around */
  max-width: min(42rem, max(16rem, calc(100svh - 22rem)));
  margin: -3rem auto 0;
  position: relative;
  z-index: 2;
}

.intro-video .video-frame {
  border: none;
  border-radius: 12px;
  box-shadow: 0 22px 55px rgba(0, 20, 33, 0.35);
}

/* Tight on purpose: this block sits between the video and the fold, so every
   rem here comes straight out of the video's height budget above. */
.video-cta { text-align: center; margin-top: 1.15rem; }

.video-cta-note {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--gray-10);
  margin: 0.6rem 0 0;
}

.trust-strip {
  list-style: none;
  margin: 2.25rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  max-width: 60rem;   /* wide enough to hold all three on one line at desktop */
}

.trust-strip li {
  position: relative;
  font-size: 0.95rem;
  color: var(--amada-blue-80);
  padding-left: 1.6rem;
}

/* small berry check, drawn rather than an icon file */
.trust-strip li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.45em;
  width: 6px;
  height: 11px;
  border: solid var(--amada-berry);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

/* ---------- repeated funnel CTAs ---------- */

.section-cta { text-align: center; margin: 2.5rem 0 0; }

/* mobile sticky CTA — off entirely on desktop, where the header CTA does this job */
.sticky-cta { display: none; }

.final-cta {
  background: linear-gradient(160deg, var(--amada-blue) 0%, #0A3E5E 100%);
  color: var(--white);
  padding: 4.5rem 0;
  text-align: center;
}

.final-cta-inner { max-width: 44rem; }

.final-cta h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 400;
  color: var(--white);
}

.final-cta p { color: var(--light-blue); }

.final-cta .btn-primary { margin-top: 0.6rem; }

.final-cta-alt { font-size: 0.95rem; margin: 1.4rem 0 0; }
.final-cta-alt a { color: var(--berry-4); font-weight: 600; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--berry-4);
  margin-bottom: 0.45rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 400;
  margin-bottom: 0.32em;
}

.lede { font-size: 1.1rem; color: var(--light-blue); max-width: 34em; }

.hero-note {
  font-size: 0.9rem;
  color: var(--light-blue);
  margin-top: 1rem;
  margin-bottom: 0;
}

/* ---------- video placeholders ---------- */

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px),
    linear-gradient(150deg, var(--amada-blue-80), var(--berry-3));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* Square source (1:1). Overrides the 16/9 default so the player is not
   pillarboxed with dead bars either side. */
.video-frame--square { aspect-ratio: 1 / 1; }

/* Portrait source (9:16) — the client testimonials, shot as vertical clips
   (confirmed 240x426 via Vimeo's oEmbed). Same reasoning as --square: match
   the source so there's no letterboxing. */
.video-frame--portrait { aspect-ratio: 9 / 16; }

.play-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-badge::after {
  content: "";
  border-left: 18px solid var(--amada-berry);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

.video-label {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--white);
  text-align: center;
  padding: 0 1rem;
  font-size: 1rem;
}

.video-flag {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(0, 41, 66, 0.55);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
}

.video-caption {
  font-size: 0.92rem;
  color: var(--light-blue);
  margin-top: 0.7rem;
  margin-bottom: 0;
  text-align: center;
}

/* ---------- steps ---------- */

.steps { padding: 4rem 0 1rem; }

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  text-align: center;
}

.section-sub {
  text-align: center;
  color: var(--gray-10);
  max-width: 38em;
  margin: 0 auto 2.5rem;
}

.step-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.step-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.9rem 1.6rem;
  border-top: 4px solid var(--amada-berry);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--light-blue);
  color: var(--amada-blue);
  font-family: var(--font-title);
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}

.step-card h3 { font-size: 1.25rem; }
.step-card p { color: var(--gray-10); font-size: 0.98rem; margin: 0; }

/* ---------- assessment ---------- */

.assessment-section { padding: 4.5rem 0; }

.assessment-card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 2.2rem 2.2rem 2rem;
  max-width: 760px;
  margin: 0 auto;
}

.progress { margin-bottom: 1.8rem; }

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--gray-10);
  margin-bottom: 0.5rem;
}

.progress-track {
  height: 7px;
  background: var(--light-blue);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 9%;
  background: var(--amada-berry);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.question-title {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 400;
  margin: 0 0 0.35em;
}

.question-help {
  color: var(--gray-10);
  font-size: 0.95rem;
  margin-bottom: 1.3rem;
}

.options { display: grid; gap: 0.7rem; margin-bottom: 0.5rem; }

.option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 2px solid var(--light-gray);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.02rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.option:hover { border-color: var(--berry-3); background: rgba(215, 146, 169, 0.06); }

.option input { position: absolute; opacity: 0; width: 0; height: 0; }

.option .marker {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--light-gray);
  background: var(--white);
  position: relative;
}

.option .marker.radio { border-radius: 50%; }
.option .marker.check { border-radius: 5px; }

.option.selected { border-color: var(--amada-berry); background: rgba(112, 30, 70, 0.05); }
.option.selected .marker { border-color: var(--amada-berry); background: var(--amada-berry); }

.option.selected .marker.radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--white);
}

.option.selected .marker.check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

.followup {
  margin-top: 1.1rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border-left: 3px solid var(--berry-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Direct child only: a checkbox follow-up nests .option labels inside this
   block, and those are flex cards — `display: block` would flatten them. */
.followup > label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}

/* the group label already sits above, so the help line tightens up under it */
.followup .question-help { margin: -0.2rem 0 0.6rem; }
.followup .options { margin-bottom: 0; }

.field {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--light-gray);
  border-radius: 8px;
  background: var(--white);
  color: var(--amada-blue);
}

.field:focus { outline: none; border-color: var(--amada-berry); }

textarea.field { min-height: 110px; resize: vertical; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }

.chip {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--light-gray);
  background: var(--white);
  color: var(--amada-blue-80);
  cursor: pointer;
}

.chip:hover { border-color: var(--amada-berry); color: var(--amada-berry); }

.nav-row {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--light-gray);
}

.nav-row .btn-ghost { margin-right: auto; }

.step-hint {
  font-size: 0.88rem;
  color: var(--amada-berry);
  text-align: right;
  margin: 0.7rem 0 0;
  min-height: 1.2em;
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-grid .full { grid-column: 1 / -1; }

.field-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--gray-10);
  margin-top: 0.4rem;
}

.done { text-align: center; padding: 1.5rem 0; }

.done-mark {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--amada-berry);
  margin: 0 auto 1.2rem;
  position: relative;
}

.done-mark::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 16px;
  width: 14px;
  height: 28px;
  border: solid var(--white);
  border-width: 0 4px 4px 0;
  transform: rotate(43deg);
}

.summary {
  text-align: left;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-top: 1.6rem;
  font-size: 0.95rem;
}

.summary h4 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-10);
  margin-bottom: 0.8rem;
}

.summary dl { margin: 0; display: grid; gap: 0.55rem; }
.summary dt { font-weight: 600; color: var(--amada-blue); }
.summary dd { margin: 0 0 0.4rem; color: var(--gray-10); }

/* ---------- google reviews (reputationhub.site third-party widget) ----------
   No fixed height on the iframe: the loader script sizes it to content via a
   `height` attribute it writes itself once loaded — confirmed genuinely
   different per instance (~395px on the top/widgetId one, ~1835px on the
   bottom one), so a shared fixed height would either clip the tall one or
   pad the short one with dead space. min-height is only a floor against the
   flash of an unstyled ~150px iframe before that attribute lands, so it must
   stay below the smaller widget's real height or it fights that resize. */
.reviews-section { padding: 3.5rem 0; }
.reviews-section iframe.lc_reviews_widget { display: block; border: 0; min-height: 200px; }

/* ---------- schedule directly (Calendly inline embed) ---------- */

.schedule-section { padding: 3.5rem 0; }
/* the inline widget's own 320px min-width can force a horizontal scrollbar
   below that viewport width; clamp it to the wrap instead */
.schedule-section .calendly-inline-widget { max-width: 100%; }

/* ---------- faq + cases ---------- */

.faq-section { background: var(--white); padding: 4.5rem 0; border-top: 1px solid var(--light-gray); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.video-card .video-caption { color: var(--amada-blue); font-weight: 600; font-family: var(--font-ui); text-align: left; }

/* ---------- testimonials ---------- */

.testimonials-section { padding: 4.5rem 0; }

/* Narrower than .video-grid's 260px floor: at that width a 9:16 card runs
   ~462px tall, and four of them wrap awkwardly instead of filling a row.
   160px keeps a comfortable four-across on desktop. */
.testimonial-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.cases-section { padding: 4.5rem 0; }

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.case-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.case-thumb {
  aspect-ratio: 3 / 2;
  background: linear-gradient(140deg, var(--light-blue), var(--berry-4));
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-thumb span {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amada-blue);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.case-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.case-body h3 { font-size: 1.2rem; }
.case-body p { color: var(--gray-10); font-size: 0.96rem; flex: 1; }

.case-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.case-link:hover { text-decoration: underline; }

/* ---------- footer ---------- */

.site-footer { background: var(--amada-blue); color: var(--white); padding: 3rem 0; }

.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }

.brand-mark-light { filter: brightness(0) invert(1); height: 36px; }

.footer-copy { color: var(--light-blue); max-width: 34em; margin: 0; font-size: 0.95rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .step-list { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  /* copy spans the full width here, so drop the left bias and lean harder on the
     bottom rise — the faces still get the top half of the frame to themselves */
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(0, 41, 66, 0.52) 0%,
        rgba(0, 41, 66, 0.20) 24%,
        rgba(0, 41, 66, 0.52) 48%,
        rgba(0, 41, 66, 0.92) 74%,
        rgba(0, 41, 66, 0.96) 100%);
  }
}

@media (max-width: 720px) {
  .hero {
    /* same compact treatment as desktop, still sized off width: the portrait
       crop holds both faces high in the frame, so a short band still reads */
    min-height: clamp(11rem, calc(26vw + 6rem), 17rem);
    padding: 1.5rem 0 3rem;   /* room for the video card to overlap */
    align-items: flex-end;
  }
  .hero-media img { object-position: 50% 0%; }

  .intro-video-section { padding: 0 0 2.25rem; }
  .intro-video { margin-top: -2.5rem; }
  .intro-video .video-frame { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 20, 33, 0.32); }

  .trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    width: fit-content;
    margin-top: 1.75rem;
  }
}

@media (max-width: 640px) {
  body { font-size: 17px; }

  .site-header { position: static; }   /* reclaim vertical space on small screens */
  .brand-mark { height: 32px; }
  section[id] { scroll-margin-top: 1rem; }

  /* the bar can't hold logo + label + number + button at 390px.
     Keep the tap-to-call number; the hero CTA is a thumb-length away anyway. */
  .header-phone-label { display: none; }
  .header-phone-num { font-size: 1rem; }
  .header-cta { display: none; }

  .final-cta { padding: 3.25rem 0; }
  .section-cta { margin-top: 2rem; }
  .btn-lg { padding: 1.05rem 1.6rem; font-size: 1.02rem; }

  /* sticky CTA so the primary action is always a thumb away, even though the
     button itself lives below the video */
  .sticky-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--light-gray);
    box-shadow: 0 -4px 18px rgba(0, 41, 66, 0.10);
    transform: translateY(0);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .sticky-cta .btn { width: 100%; text-align: center; }

  .sticky-cta-note {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: var(--gray-10);
  }

  /* slide away while the assessment is on screen so it never covers Continue */
  .sticky-cta.is-off { transform: translateY(120%); opacity: 0; pointer-events: none; }

  /* keep the footer clear of the bar */
  .site-footer { padding-bottom: 7rem; }

  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .lede { font-size: 1.02rem; }
  /* keep the eyebrow on one line at 390px */
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.07em; }

  .steps { padding: 3rem 0 0.5rem; }
  .assessment-section, .faq-section, .cases-section, .reviews-section, .schedule-section, .testimonials-section { padding: 3rem 0; }
  .section-sub { margin-bottom: 1.8rem; }

  .assessment-card { padding: 1.4rem 1.1rem 1.5rem; }

  /* comfortable thumb targets — every control clears 44px */
  .header-phone { display: inline-flex; align-items: center; min-height: 44px; padding-left: 0.5rem; }
  .case-link { display: inline-flex; align-items: center; min-height: 44px; }
  .option { padding: 0.95rem 1rem; min-height: 3rem; }
  .chip { padding: 0.6rem 1rem; min-height: 2.6rem; display: inline-flex; align-items: center; }
  .field { padding: 0.8rem 0.85rem; font-size: 1rem; }

  .contact-grid { grid-template-columns: 1fr; gap: 0.9rem; }

  /* full-width Continue: the primary action should be the easiest thing to hit */
  .nav-row { flex-wrap: wrap; gap: 0.6rem; }
  .nav-row .btn { padding: 0.95rem 1.2rem; }
  .nav-row #btn-next { flex: 1 1 auto; }
  .nav-row .btn-ghost { flex: 0 0 auto; margin-right: 0; }
  .step-hint { text-align: left; }

  .video-grid, .case-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* Preview-only notice on the confirmation step. Shown when no submission
   endpoint is configured, so the page never tells a family a care advisor is
   coming when nothing was sent. Disappears by itself once SUBMIT_ENDPOINT is
   set in assessment.js. */
.preview-flag {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-family: var(--font-ui, inherit);
  font-weight: 600;
  font-size: 0.95rem;
}


/* Sections whose content is still filler. Hidden rather than deleted so the
   markup, styles and grid code stay ready for the real videos and stories.
   assessment.js can reveal them by setting SHOW_UNFINISHED. */
.unfinished { display: none; }