/* =====================================================
   Hispir Care — Shared site styles
   Source of truth: assets/brand-system-v1.md (v2 Draft)
   App-locked values starred (★)
   ===================================================== */

:root {
  /* Teal — primary brand */
  --teal-700:  #2A8A7E;
  --teal-600:  #3FA89A;
  --teal-500:  #5FBEB0; /* ★ APP PRIMARY */
  --teal-400:  #87D2C7;
  --teal-300:  #B5E5DD;
  --teal-200:  #DCF1ED;

  /* Petal — accent + client signal */
  --petal-800: #B72E73;
  --petal-700: #D54187;
  --petal-600: #F26AAB; /* logo pink */
  --petal-500: #F58BBB;
  --petal-400: #FAAACE;
  --petal-300: #FCCEDF;
  --petal-200: #FDE3EC;

  /* Leaf — aide signal */
  --leaf-800:  #1F6342;
  --leaf-700:  #2F7A55;
  --leaf-600:  #4FA77D;
  --leaf-500:  #7CC1A0;
  --leaf-400:  #A6D6BC;
  --leaf-300:  #C7EBD3;
  --leaf-200:  #DEF2E5;

  /* Honey — celebration */
  --honey-600: #E2A93C;
  --honey-500: #F2C268;
  --honey-400: #F8D790;
  --honey-300: #FCE8B8;

  /* Neutrals */
  --cream-50:      #FAF6EE;
  --parchment-100: #F2EBDB;
  --slate-200:     #E2E5E1;
  --slate-500:     #5A5F5C;
  --bark-700:      #2A2D2B;
  --ink-900:       #0F172A;
  --outline:       #3D2B1F;

  /* Type — Wix Madefor Display (display/headings), Hanken Grotesk (body/UI) */
  --font-display: 'Wix Madefor Display', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);

  /* Semantic surface tokens (light) — the dark theme below remaps these */
  --bg-page:        var(--cream-50);
  --bg-card:        #FFFFFF;
  --bg-card-soft:   var(--parchment-100);
  --bg-nav:         rgba(250, 246, 238, 0.85);
  --surface-teal-bg:  var(--teal-200);
  --surface-leaf-bg:  var(--leaf-200);
  --surface-petal-bg: var(--petal-200);
  --text-strong:    var(--bark-700);
  --text-muted:     var(--slate-500);
  --text-on-tinted: var(--bark-700);
  --border-card:    var(--slate-200);
  --vine-stroke:    var(--leaf-700);
  --eyebrow-color:  var(--petal-700);
  --link-color:     var(--teal-700);
  --on-teal:        var(--ink-900);
  --signup-bg:      var(--teal-500);
  --signup-text:    #FFFFFF;
  --partner-bg:
    linear-gradient(180deg, rgba(242,194,104,0.08) 0%, rgba(242,194,104,0.03) 30%, rgba(255,253,247,1) 65%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Always reserve the vertical scrollbar's track so the centred layout never
     shifts sideways when navigating between a tall page (with a scrollbar) and
     a short one (without) — no more horizontal "jump" between pages. */
  scrollbar-gutter: stable;
  /* Clip horizontal bleed at the root. The full-width colour bands extend a
     viewport-width past the content, and body-only overflow-x is unreliable on
     mobile — phones could scroll sideways into empty space. `clip` (not
     `hidden`) does NOT create a scroll container, so the sticky nav still works. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--text-strong);
  background: var(--bg-page);
  overflow-x: clip;
  line-height: 1.65;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
/* Wix Madefor Display: 800 for the big display headings (h1/h2), 600 for h3/h4. */
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 600; }

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =====================================================
   Top scroll progress
   ===================================================== */
.progress-vine {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--leaf-600), var(--teal-500), var(--petal-600));
  z-index: 100;
  transition: width 0.1s linear;
}

/* =====================================================
   Site navigation
   ===================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-nav);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-card);
}
.site-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  /* Reduced vertical padding so the bigger logo fills the bar without making
     the nav taller (keeps the ~93px height the hero's min-height assumes). */
  padding: 6px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-strong);
  text-decoration: none;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
/* Logo is an <img>; size it here (not inline) so it's consistent + easy to tune. */
.nav-logo img { height: 80px; width: auto; display: block; }
.nav-logo .accent { color: var(--petal-700); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover {
  background: var(--teal-200);
  text-decoration: none;
}
.nav-links a.is-current {
  color: var(--petal-700);
  background: var(--petal-200);
}
.nav-links a.nav-signup {
  background: var(--signup-bg);
  color: var(--signup-text);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-weight: 700;
  margin-left: 6px;
}
.nav-links a.nav-signup:hover {
  background: var(--teal-600);
  color: var(--signup-text);
}
[data-theme="dark"] .nav-links a.nav-signup:hover { background: var(--teal-500); }
[data-theme="dark"] .nav-links a:hover { background: rgba(95,190,176,0.18); }
[data-theme="dark"] .nav-links a.is-current { color: var(--petal-500); background: rgba(245,139,187,0.16); }

/* Divider that sets the action items (Get started / Sign up) apart */
.nav-sep {
  align-self: center;
  width: 1px;
  height: 20px;
  background: var(--border-card);
  margin: 0 4px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-strong);
  font-size: 1.2rem;
  line-height: 1;
}

@media (max-width: 820px) {
  /* Tighten the bar's side padding on phones (logo size is set globally now). */
  .site-nav-inner { padding: 6px 18px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 10px 16px; }
  .nav-sep { width: 100%; height: 1px; margin: 6px 0; }
}

/* =====================================================
   Vine frames (left + right, scroll-driven)
   ===================================================== */
.vine-frame {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 180px;
  pointer-events: none;
  z-index: 5;
}
.vine-frame.left  { left: 0; }
.vine-frame.right { right: 0; transform: scaleX(-1); }

.vine-path {
  fill: none;
  stroke: var(--vine-stroke);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 0.15s linear;
}

.leaf, .flower {
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}
.leaf {
  transition: transform 0.8s cubic-bezier(.2,.9,.3,1.2), opacity 0.6s ease;
}
.flower {
  transform: scale(0) rotate(-30deg);
  transition: transform 1.1s cubic-bezier(.2,.9,.3,1.3), opacity 0.7s ease;
}
.leaf.bloomed   { transform: scale(1); opacity: 1; }
.flower.bloomed { transform: scale(1) rotate(0); opacity: 1; }

@media (max-width: 1100px) {
  .vine-frame { width: 110px; }
}
@media (max-width: 900px) {
  .vine-frame { width: 80px; opacity: 0.55; }
}
@media (max-width: 600px) {
  .vine-frame { display: none; }
}

/* Portrait / vertical monitors: a tall, narrow frame forces the cover-scaled
   vine to zoom in and clip the flowers that sit toward the inner edge. Scale it
   to its own width instead (height follows the viewBox aspect) so every flower
   stays whole at any vertical aspect ratio. */
@media (orientation: portrait) and (min-width: 601px) {
  .vine-frame { height: auto; max-height: 100vh; }
}

/* =====================================================
   Layout primitives
   ===================================================== */
main {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}

section {
  padding: 96px 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: 16px;
}

.lede {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}

/* =====================================================
   Reveal-on-scroll
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   Buttons
   ===================================================== */
.cta {
  display: inline-block;
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  background: var(--teal-500);
  color: var(--on-teal);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
[data-theme="dark"] .cta { background: var(--teal-400); }
[data-theme="dark"] .cta:hover { background: var(--teal-500); }
.cta:hover {
  background: var(--teal-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.cta-secondary {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--petal-700);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 0.95rem;
  border: 2px solid var(--petal-600);
  transition: background 0.3s ease, color 0.3s ease;
  margin-left: 8px;
}
.cta-secondary:hover {
  background: var(--petal-600);
  color: #FFFFFF;
  text-decoration: none;
}
/* Honey/gold solid variant — get-started "Talk to us first". */
.cta-secondary.cta-secondary--honey {
  background: var(--honey-500);
  border-color: var(--honey-500);
  color: var(--bark-700);
}
.cta-secondary.cta-secondary--honey:hover {
  background: var(--honey-600);
  border-color: var(--honey-600);
  color: var(--bark-700);
}

/* "Get started" buttons — light-pink outline, used consistently sitewide (top
   nav + hero CTA). Same border treatment; padding sized to each context. */
.cta-getstarted {
  display: inline-block;
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--petal-800);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--petal-400);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cta-getstarted:hover {
  background: var(--petal-200);
  border-color: var(--petal-500);
  color: var(--petal-800);
  transform: translateY(-2px);
  text-decoration: none;
}
/* On tinted (e.g. green) sections the transparent outline blends into the
   background — this solid-fill variant keeps the pink border + text but pops
   the button off the colour behind it. */
.cta-getstarted.cta-getstarted--solid { background: #FFFFFF; }

/* Hero "Sign in" — solid in the primary teal, sits beside the pink-outline
   Get started. Same pill size so the pair reads as one balanced button row. */
.home-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cta-signin {
  display: inline-block;
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  background: var(--teal-500);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--teal-500);
  box-shadow: var(--shadow-md);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cta-signin:hover {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: #FFFFFF;
  transform: translateY(-2px);
  text-decoration: none;
}
[data-theme="dark"] .cta-signin { background: var(--teal-400); border-color: var(--teal-400); }
[data-theme="dark"] .cta-signin:hover { background: var(--teal-500); border-color: var(--teal-500); }

.nav-links a.nav-getstarted {
  background: transparent;
  color: var(--petal-800);
  border: 2px solid var(--petal-400);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-weight: 700;
}
.nav-links a.nav-getstarted:hover {
  background: var(--petal-200);
  border-color: var(--petal-500);
  color: var(--petal-800);
}

/* Honey / orange CTA — matches the "Helping Inspire Care" closing-band button,
   for the aide "Sign Up & Apply Today" call to action. */
.cta.cta--honey { background: var(--honey-500); color: var(--bark-700); }
.cta.cta--honey:hover { background: var(--honey-600); }

/* Pale-blue variant — used for the home "Visit FSCD's Website" external link,
   keyed to the Extraordinary service blue (#3F77A8) but soft. */
.cta.cta--ice { background: #CFE2F2; color: #1F4E78; box-shadow: var(--shadow-md); }
.cta.cta--ice:hover { background: #B9D4EC; }

/* Green variant — aide "Sign Up & Apply" calls to action (careers). */
.cta.cta--green { background: var(--leaf-700); color: #FFFFFF; }
.cta.cta--green:hover { background: var(--leaf-800); }

/* =====================================================
   Hero (home — clean) and Page hero (inner pages)
   ===================================================== */
.hero {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 80px 0 60px;
}

.hero-logo {
  width: min(440px, 82%);
  height: auto;
  margin-bottom: 8px;
  opacity: 0;
  animation: fadeUp 1.4s 0.3s ease forwards;
}

/* Visually hidden but available to screen readers / search engines */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-top: 20px;
  max-width: 540px;
  opacity: 0;
  animation: fadeUp 1.4s 1.2s ease forwards;
}

.hero-cta {
  margin-top: 32px;
  opacity: 0;
  animation: fadeUp 1.4s 1.5s ease forwards;
}

/* Page hero (smaller, for inner pages) */
.page-hero {
  text-align: center;
  padding: 80px 0 40px;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.page-hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 580px;
  margin: 0 auto;
}

/* ── Image editor handles (editor mode only) ─────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   Generic content cards
   ===================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-card);
}
.card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--link-color);
}
.card p { color: var(--text-muted); font-size: 0.98rem; }

/* Surface variants */
.surface-teal {
  background: var(--surface-teal-bg);
  margin: 0 -100vw;
  padding: 96px 100vw;
  color: var(--text-on-tinted);
}
.surface-leaf {
  background: var(--surface-leaf-bg);
  margin: 0 -100vw;
  padding: 96px 100vw;
  color: var(--text-on-tinted);
}
.surface-petal {
  background: var(--surface-petal-bg);
  margin: 0 -100vw;
  padding: 96px 100vw;
  color: var(--text-on-tinted);
}
.surface-beige {
  background: var(--parchment-100);
  margin: 0 -100vw;
  padding: 96px 100vw;
  color: var(--text-on-tinted);
}
[data-theme="dark"] .surface-teal h2,
[data-theme="dark"] .surface-leaf h2,
[data-theme="dark"] .surface-petal h2,
[data-theme="dark"] .surface-beige h2,
[data-theme="dark"] .surface-teal h3,
[data-theme="dark"] .surface-leaf h3,
[data-theme="dark"] .surface-petal h3,
[data-theme="dark"] .surface-beige h3 { color: var(--text-strong); }
.surface-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}

/* =====================================================
   Section: Mission (about page)
   ===================================================== */
.mission { text-align: center; }
.mission h2 {
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 28px;
  max-width: 720px;
  margin-inline: auto;
}
.mission p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 16px;
}
.mission .canonical {
  margin-top: 36px;
  padding: 28px 32px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--petal-600);
  color: var(--text-strong);
  text-align: left;
  max-width: 680px;
  margin-inline: auto;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
}
.mission-bouquet {
  width: 140px;
  height: auto;
  margin: 0 auto 28px;
  display: block;
}

/* =====================================================
   Section: Services
   ===================================================== */
.services h2,
.section-h h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-card .illus {
  width: 100%;
  height: 140px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.service-card .illus svg { width: 100%; height: 100%; }
.service-card .illus img { width: 100%; height: 100%; object-fit: contain; display: block; }
.service-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-strong);
}
.service-card .meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf-700);
  font-weight: 700;
}
.service-card p { color: var(--text-muted); font-size: 0.98rem; flex: 1; }

.sibling-note {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--surface-petal-bg);
  border-radius: var(--radius-lg);
  color: var(--petal-800);
}
[data-theme="dark"] .sibling-note,
[data-theme="dark"] .sibling-note strong { color: var(--petal-300);
  font-size: 0.98rem;
  line-height: 1.6;
}
.sibling-note strong {
  color: var(--petal-800);
  font-family: var(--font-display);
  font-weight: 700;
}

/* =====================================================
   Service card — flip variant
   ===================================================== */
.card-flippable {
  perspective: 900px;
  padding: 0;
  min-height: 420px;
}
.card-flippable .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4,0,.2,1);
}
.card-flippable.is-flipped .card-inner {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}
.card-face--back {
  transform: rotateY(180deg);
  background: var(--surface-leaf-bg);
}
.card-flip-btn {
  margin-top: auto;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--leaf-700);
  cursor: pointer;
  padding: 6px 0;
  text-align: left;
}
.card-flip-btn:hover { color: var(--petal-600); }
.card-back-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.card-back-list li {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}
.card-back-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--leaf-600);
  font-size: 0.6rem;
}

/* =====================================================
   How it works
   ===================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 24px; }
.step {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-card);
}
.step-num {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--petal-600);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.step h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 0.98rem; }

/* =====================================================
   Closing CTA
   ===================================================== */
.closing { text-align: center; }
.closing h2 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  max-width: 640px;
  margin-inline: auto;
}
.closing p {
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 520px;
  margin-inline: auto;
  font-size: 1.1rem;
}
.closing-illustration {
  width: 100%;
  max-width: 420px;
  margin: 48px auto 0;
  display: block;
}

/* Closing CTA band ("Helping Inspire Care." + Sign up) — shared by the home and
   About closings. Sits inside a surface-petal band; the band supplies the pink. */
.cta-band {
  background: transparent;
  padding: 0;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.cta-band p {
  color: var(--bark-700);
  font-size: 1.15rem;
  max-width: 540px;
  margin: 0 auto 30px;
  opacity: 0.92;
}
.cta-band__btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  background: var(--honey-500);          /* warm, light, complements the pink band */
  color: var(--bark-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cta-band__btn:hover { background: var(--honey-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }

/* Teal pill-outline variant of the closing CTA (About page "Sign up"). */
.cta-band__btn.cta-band__btn--teal {
  background: transparent;
  color: var(--teal-700);
  border: 2px solid var(--teal-500);
  box-shadow: none;
}
.cta-band__btn.cta-band__btn--teal:hover {
  background: var(--teal-500);
  color: #FFFFFF;
}

/* Green solid variant of the closing CTA (Careers aide "Sign up and Apply"). */
.cta-band__btn.cta-band__btn--green {
  background: var(--leaf-700);
  color: #FFFFFF;
}
.cta-band__btn.cta-band__btn--green:hover { background: var(--leaf-800); }

/* =====================================================
   FAQ accordion (get-started page)
   ===================================================== */
.faq {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2px 24px;
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--petal-600);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
  padding: 0 0 20px;
}

/* =====================================================
   Forms (shared — contact, careers, partner)
   ===================================================== */
.form {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-strong);
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--teal-500); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -6px;
}

/* =====================================================
   Contact-page specific
   ===================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.contact-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  will-change: transform;
}
.contact-card:hover { transform: translateY(-6px); }
/* Colour-matched highlight glow on hover — pink for Families, teal for Aides */
.contact-card:nth-child(1):hover {
  border-color: rgba(242,106,171,0.55);
  box-shadow:
    0 14px 32px rgba(242,106,171,0.22),
    0 4px 10px rgba(184,61,126,0.10);
}
.contact-card:nth-child(2):hover {
  border-color: rgba(95,190,176,0.55);
  box-shadow:
    0 14px 32px rgba(95,190,176,0.22),
    0 4px 10px rgba(29,105,96,0.10);
}
.contact-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--link-color);
}
.contact-card p { color: var(--text-muted); font-size: 0.98rem; margin-bottom: 12px; }
.contact-card a {
  display: inline-block;
  font-weight: 600;
  color: var(--eyebrow-color);
}

/* =====================================================
   Careers/aide-specific
   ===================================================== */
.aide-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.aide-type {
  background: var(--surface-leaf-bg);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.aide-type h3 { color: var(--leaf-700); font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; }
.aide-type p { color: var(--text-on-tinted); font-size: 0.98rem; }
[data-theme="dark"] .aide-type h3 { color: var(--leaf-400); }

/* =====================================================
   Footer
   ===================================================== */
footer {
  /* Horizontal padding scales with the viewport so the columns always clear the
     decorative side vines (≈180px wide on large screens, hidden ≤600px) instead
     of sliding under them / off the edge. */
  padding: 56px clamp(24px, 7vw, 90px) 40px;
  color: var(--text-muted);
  font-size: 0.85rem;
  position: relative;
  z-index: 2;
}
footer .botanical-band {
  width: 100%;
  max-width: 880px;
  height: 60px;
  margin: 0 auto 44px;
  display: block;
}
/* Footer flowers link to their matching service; soft fade on hover. */
.botanical-band a { cursor: pointer; }
.botanical-band a image { transition: opacity 0.2s ease; }
.botanical-band a:hover image { opacity: 0.6; }
.footer-grid {
  /* Capped near the botanical band's width (≈880px) and centred so the three
     columns stay visually grouped instead of stretching across the full page
     and stranding the middle column with huge gutters on wide monitors.
     Columns size to their content; gap scales with the viewport. */
  max-width: 960px;
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0 0 14px;
}
footer .tagline {
  font-family: var(--font-display);
  color: var(--leaf-700);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
footer .meta { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 6px; line-height: 1.55; }
footer .meta a { color: var(--text-muted); transition: color 0.2s ease; }
footer .meta a:hover { color: var(--leaf-700); }

/* Footer social icons (Instagram / Facebook) under the brand block. */
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--leaf-700); background: rgba(79, 167, 125, 0.10);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { transform: translateY(-2px); background: var(--leaf-700); color: #FFFFFF; }
.footer-social svg { width: 18px; height: 18px; }
footer .footer-nav {
  /* Single vertical list of links under the Explore heading. */
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  margin: 0;
}
footer .footer-nav a {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-family: var(--font-body);
  font-weight: 500;
  transition: color 0.2s ease;
}
footer .footer-nav a:hover { color: var(--leaf-700); }
.footer-hours {
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.footer-hours-label {
  display: block;
  font-weight: 700;
  color: var(--text-strong);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer-bottom {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--border-card);
  text-align: center;
}
@media (max-width: 980px) and (min-width: 761px) {
  /* Tablet / narrow desktop: three content-sized columns get cramped, so let
     the grid fill the available width and balance the columns evenly. */
  .footer-grid {
    max-width: 720px;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: stretch;
    gap: clamp(28px, 4vw, 48px);
  }
  .footer-bottom { max-width: 720px; }
}
@media (max-width: 760px) {
  /* Phones: brand sits full-width on top, then Explore + Get in touch share a
     row beneath it. The 8 Explore links flow into two compact sub-columns so
     the footer stays short instead of becoming one long single-file stack. */
  footer { padding: 44px clamp(22px, 7vw, 40px) 32px; }
  footer .botanical-band { height: 42px; margin-bottom: 28px; }
  .footer-grid {
    grid-template-columns: 1.15fr 1fr;
    column-gap: clamp(20px, 6vw, 40px);
    row-gap: 32px;
    margin-bottom: 32px;
  }
  .footer-col--brand { grid-column: 1 / -1; }
  footer .footer-nav {
    /* Two compact sub-columns, filled top-to-bottom then across. */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  /* Divide the Explore links from Get in touch with a soft hairline rule so the
     two blocks read as distinct sections instead of one packed grid. */
  .footer-col--contact {
    padding-left: clamp(18px, 5vw, 32px);
    border-left: 1px solid var(--border-card);
  }
  .footer-bottom { padding-top: 24px; }
}
/* Very narrow phones: the side-by-side links + contact gets too tight, so drop
   to a single column and let the links sit in two slim sub-columns. */
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; }
  footer .footer-nav { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  /* Single column now — drop the vertical rule, it has nothing to divide. */
  .footer-col--contact { padding-left: 0; border-left: none; }
}

/* ====================================================================
   Responsive widths for large / ultrawide screens.
   Default content containers cap at 880–1100px which leaves big empty
   cream strips on monitors above ~1500px. These rules progressively
   widen the major container shells while leaving paragraph max-widths
   alone so body copy stays readable.
   ==================================================================== */

@media (min-width: 1500px) {
  /* Widen the main content column itself — without this, every section below
     stays pinned to 980px and the wide-screen rules under it do nothing. */
  body main { max-width: 1280px; }
  body .home-hero-grid { max-width: 1200px; margin-inline: auto; }
  body .site-nav-inner { max-width: 1300px; }
  body .surface-inner { max-width: 1200px; }
  body .showcase-inner { max-width: 1300px; }
  body .resource-grid { max-width: 1300px; }
  body .mvv-row,
  body .mvv-row.img-left { max-width: 1180px; }

  /* Inline-styled hero/welcome containers (services, careers, resources, about) */
  main section > div[style*="max-width: 980px"],
  main section > div[style*="max-width:980px"] { max-width: 1200px !important; }
  main section.welcome > div[style*="max-width: 880px"],
  main section.welcome > div[style*="max-width:880px"] { max-width: 1180px !important; }
}

@media (min-width: 1800px) {
  body main { max-width: 1460px; }
  body .home-hero-grid { max-width: 1340px; }
  body .site-nav-inner { max-width: 1500px; }
  body .surface-inner { max-width: 1340px; }
  body .showcase-inner { max-width: 1500px; }
  body .resource-grid { max-width: 1500px; }
  body .mvv-row,
  body .mvv-row.img-left { max-width: 1340px; }

  main section > div[style*="max-width: 980px"],
  main section > div[style*="max-width:980px"] { max-width: 1340px !important; }
  main section.welcome > div[style*="max-width: 880px"],
  main section.welcome > div[style*="max-width:880px"] { max-width: 1320px !important; }
}

@media (min-width: 2200px) {
  body main { max-width: 1620px; }
  body .home-hero-grid { max-width: 1480px; }
  body .site-nav-inner { max-width: 1700px; }
  body .surface-inner { max-width: 1480px; }
  body .showcase-inner { max-width: 1700px; }
  body .resource-grid { max-width: 1700px; }
  body .mvv-row,
  body .mvv-row.img-left { max-width: 1480px; }

  main section > div[style*="max-width: 980px"],
  main section > div[style*="max-width:980px"] { max-width: 1500px !important; }
  main section.welcome > div[style*="max-width: 880px"],
  main section.welcome > div[style*="max-width:880px"] { max-width: 1480px !important; }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

/* Visible keyboard focus ring (previously missing). Shows for keyboard
   navigation only (:focus-visible), so it never appears on mouse clicks. */
:focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Honour the visitor's OS/browser "reduce motion" setting. The site's JS
   already respects it; this makes the CSS layer match — it neutralises
   smooth-scroll, the .reveal scroll-in fade/slide, hero keyframe entrances,
   the vine-draw + flower-bloom, the card flip, and all hover transitions —
   and forces any .reveal content fully visible so nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================
   LEGAL / STATEMENT PAGES (privacy, accessibility)
   ===================================================== */
.policy { max-width: 760px; margin: 0 auto; padding: 8px 24px 80px; }
.policy-updated { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 24px; }
.policy-updated .fill { font-style: normal; }

/* Editor draft banner — delete once the page is finalised. */
.policy-note {
  background: rgba(242, 194, 104, 0.16);
  border: 1px solid rgba(185, 117, 20, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px; margin: 0 0 32px;
  font-size: 0.92rem; color: var(--bark-700); line-height: 1.6;
}

/* Table of contents */
.policy-toc {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px 24px; margin: 0 0 40px;
}
.policy-toc h2 { font-size: 1rem; margin: 0 0 12px; }
.policy-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.policy-toc li { margin-bottom: 6px; break-inside: avoid; }
.policy-toc a { color: var(--link-color); text-decoration: none; }
.policy-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .policy-toc ol { columns: 1; } }

.policy-section { margin-bottom: 36px; scroll-margin-top: 96px; }
.policy-section h2 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); margin: 0 0 12px; color: var(--text-strong); }
.policy-section p { color: var(--bark-700); line-height: 1.75; margin: 0 0 12px; }
.policy-section ul { padding-left: 20px; margin: 0 0 12px; }
.policy-section li { color: var(--bark-700); line-height: 1.7; margin-bottom: 8px; }
.policy-section address { font-style: normal; line-height: 1.7; color: var(--bark-700); }

/* A slot for Hispir to fill in — highlighted so blanks are obvious. */
.policy .fill {
  background: rgba(242, 194, 104, 0.22);
  border-bottom: 1px dashed rgba(185, 117, 20, 0.6);
  padding: 0 3px; border-radius: 3px; font-style: italic;
}