/* ==========================================================================
   All Well Care — Edmonton, Alberta
   Design system: "Warm editorial care"

   Principles
   1. Restraint reads as luxury. Light display weights, few accents, hairlines
      instead of drop shadows.
   2. Scale contrast carries the hierarchy — very large headings against calm,
      highly legible body text (the audience includes people in their eighties).
   3. Asymmetry over centred symmetry. Editorial columns, not slide layouts.
   4. Texture and depth come from tone and grain, not from borders on everything.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* >>> generated colour tokens — do not hand-edit.
     Sampled from assets/All Well Care - Logo.png; change BRAND in
     tools/palette.py and re-run with --write. */
  /* Brand — from the logo: forest wordmark, leaf arc, orange highlight */
  --primary: #0B5232;
  --primary-deep: #084C2D;
  --primary-dark: #053520;
  --primary-soft: #DEEDE6;
  --secondary: #47791A;
  --secondary-mid: #68B126;
  --secondary-light: #A5E967;
  --secondary-soft: #EDF5E6;
  --accent: #CD4D01;
  --accent-hover: #B14201;
  --accent-text: #BF4701;
  --accent-light: #FE9F67;
  --accent-soft: #FDEEE5;

  /* Grounds */
  --bg: #F7FBF9;
  --surface: #FDFEFE;
  --surface-sunken: #EBF4F0;
  --on-brand: #FFFFFF;

  /* Text */
  --text: #1C2C24;
  --text-secondary: #3A4D44;
  --text-muted: #5C7268;

  /* Lines */
  --border: #D3E3DC;

  /* On dark grounds */
  --on-dark: #EAF1EE;
  --on-dark-soft: #C4D4CD;
  --on-dark-muted: #9DB4A9;
  --on-dark-rgb: 226, 240, 231;

  /* Functional */
  --success: #47791A;
  --success-soft: #EDF5E6;
  --error: #AE3F29;
  --error-text: #672A1E;
  --error-soft: #FCF0EB;

  /* Depth */
  --scrim-rgb: 6, 38, 23;
  --shadow: rgba(11, 82, 50, .30);
  /* <<< end generated colour tokens */
  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm — spacious */
  --wrap: 1240px;
  --gutter: clamp(1.375rem, 5vw, 3rem);
  --section: clamp(4.5rem, 11vw, 8.5rem);
  --section-sm: clamp(3rem, 7vw, 5rem);

  --radius-xs: 4px;
  --radius: 10px;
  --radius-lg: 20px;
  --pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Grain: a single inline turbulence tile, reused wherever depth is needed. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--text);
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 400;              /* light display weights read as considered */
  letter-spacing: -.025em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.032em; }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.15rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--text); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--secondary); }

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

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--secondary); margin-bottom: 1.35rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .55;
}
.lede {
  font-size: clamp(1.1rem, 1.55vw, 1.3rem); line-height: 1.62; color: var(--text-secondary);
  max-width: 34em;
}

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-sm); }
.section--surface { background: var(--surface); }

.section--dark { background: var(--primary-deep); color: var(--on-dark-soft); position: relative; isolation: isolate; }
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: .05; pointer-events: none;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--surface); }
.section--dark .lede { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--secondary-light); }
.section--dark .badge--accent { background: rgba(var(--on-dark-rgb), .07); border-color: var(--accent-light); color: var(--accent-light); }
.section--dark a:not(.btn):not(.logo) { color: var(--secondary-light); }
.section--dark strong, .cta-band strong, .site-footer strong { color: var(--surface); }

.section-head { max-width: 34em; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary-deep); color: var(--surface); padding: .9rem 1.5rem;
}
.skip-link:focus { left: 0; }

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;                       /* comfortable target for older hands */
  padding: .9rem 1.85rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  border-radius: var(--pill);
  font-family: var(--sans); font-size: .96rem; font-weight: 600; letter-spacing: .005em;
  line-height: 1.25; text-decoration: none; cursor: pointer; text-align: center;
  white-space: nowrap; overflow-wrap: break-word;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--primary-deep); --btn-fg: var(--surface); --btn-bd: var(--primary-deep); }
.btn--primary:hover { --btn-bg: var(--primary); --btn-bd: var(--primary); color: var(--surface); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-brand); --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); color: var(--on-brand); }

.btn--ghost { --btn-bd: var(--border); --btn-fg: var(--text); }
.btn--ghost:hover { --btn-bg: var(--primary-deep); --btn-fg: var(--surface); --btn-bd: var(--primary-deep); }

.btn--light { --btn-bg: var(--surface); --btn-fg: var(--primary-deep); --btn-bd: var(--surface); }
.btn--light:hover { --btn-bg: var(--secondary-soft); --btn-bd: var(--secondary-soft); color: var(--primary-deep); }

.btn--outline-light { --btn-bd: rgba(var(--on-dark-rgb), .4); --btn-fg: var(--surface); }
.btn--outline-light:hover { --btn-bg: rgba(var(--on-dark-rgb), .12); --btn-bd: rgba(var(--on-dark-rgb), .6); color: var(--surface); }

.btn--block { width: 100%; white-space: normal; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Quiet text link with an animated rule — used instead of a third button style */
.link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 600; font-size: .95rem; color: var(--primary-deep);
  text-decoration: none; padding-block: .75rem; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(1);
  transition: transform .3s var(--ease);
}
.link:hover { color: var(--secondary); }
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.section--dark .link { color: var(--surface); }
.section--dark .link:hover { color: var(--secondary-light); }

/* --- Header ------------------------------------------------------------- */
.topbar {
  background: var(--primary-dark); color: var(--on-dark-soft);
  font-size: .82rem; letter-spacing: .01em;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 0 2rem;
  align-items: center; justify-content: space-between;
}
.topbar a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  color: var(--on-dark); text-decoration: none;
}
.topbar strong { color: var(--surface); font-weight: 600; }
.topbar a:hover { color: var(--secondary-light); }
.topbar__list { display: flex; flex-wrap: wrap; gap: 0 1.6rem; align-items: center; min-height: 44px; }
.topbar__note { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 84px; }

.logo { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; text-decoration: none; margin-right: auto; flex: none; }
.logo__mark { flex: none; width: 54px; height: 54px; object-fit: contain; }
.logo__text { display: grid; line-height: 1.05; }
.logo__name {
  font-family: var(--display); font-weight: 500; font-size: 1.3rem;
  color: var(--primary-deep); letter-spacing: -.025em;
}
.logo__tag {
  /* A tagline is a phrase, not an eyebrow label: sentence case reads better
     and fits the header without shrinking below 12px. */
  white-space: nowrap; font-size: .8rem; font-weight: 500;
  letter-spacing: .01em; color: var(--secondary); margin-top: .15rem;
}

.nav-toggle {
  display: none; align-items: center; gap: .6rem; min-height: 48px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--pill);
  padding: .5rem 1.1rem; color: var(--primary-deep); font-weight: 600; font-size: .92rem; cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 17px; height: 1.5px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
}
.nav-toggle__bars::before { top: -5.5px; }
.nav-toggle__bars::after { top: 5.5px; }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem; white-space: nowrap;
  font-size: .93rem; font-weight: 500; color: var(--primary-deep); text-decoration: none;
  position: relative; transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1px;
  background: var(--secondary); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--secondary); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--secondary); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: .9rem; }

.nav__item--has-menu { position: relative; }
.nav__caret { width: 9px; height: 6px; flex: none; opacity: .55; transition: transform .25s var(--ease); }
.nav__item--has-menu.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + .55rem); left: 0; min-width: 310px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .55rem; margin: 0; list-style: none;
  box-shadow: 0 24px 48px -28px var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item--has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: .7rem .85rem; border-radius: var(--radius-xs);
  font-size: .93rem; font-weight: 500; color: var(--primary-deep); text-decoration: none;
  transition: background-color .18s var(--ease);
}
.nav__menu a:hover { background: var(--surface-sunken); }
.nav__menu a span { display: block; font-weight: 400; font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }

@media (max-width: 1150px) {
  /* `backdrop-filter` would make the header a containing block for the fixed
     drawer below, clipping it to the header's own height. Not used here. */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 70; display: block; overflow-y: auto;
    background: var(--bg); padding: 1.5rem var(--gutter) 4rem;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { display: block; }
  .nav__link {
    width: 100%; justify-content: space-between; min-height: 60px;
    padding: 1rem .1rem; font-size: 1.15rem; font-family: var(--display);
    font-weight: 400; letter-spacing: -.02em;
    border-bottom: 1px solid var(--border);
  }
  .nav__link::after { display: none; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: .25rem 0 1rem .9rem; display: none; min-width: 0;
    background: transparent;
  }
  .nav__item--has-menu.is-open .nav__menu { display: block; }
  .nav__menu a { min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
  .nav__cta { margin: 1.75rem 0 0; width: 100%; }
  .nav__close { display: flex !important; }
  body.nav-open { overflow: hidden; }
}
.nav__close {
  display: none; align-items: center; justify-content: space-between; width: 100%;
  min-height: 48px; margin-bottom: 1rem; background: none; border: 0; padding: 0;
  cursor: pointer; font-weight: 600; font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
}
.nav__close span { font-size: 1.6rem; line-height: 1; color: var(--text); }

/* --- Hero --------------------------------------------------------------- */
.hero { background: var(--bg); padding-block: clamp(3rem, 7vw, 6rem) 0; overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.hero h1 { margin-bottom: .45em; max-width: 12ch; }
.hero h1 em {
  font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--accent-text);
}
.hero__lede { margin-bottom: 2.25rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
  font-size: .9rem; color: var(--text-muted);
}
.hero__meta strong { color: var(--text); }

.hero__media { position: relative; }
.hero__media .frame { aspect-ratio: 4 / 5; }
@media (max-width: 940px) { .hero__media .frame { aspect-ratio: 16 / 11; } }

/* Editorial stat rail beneath the hero */
.hero__rail {
  /* Explicit columns rather than auto-fit: four items auto-fitting produced a
     lopsided 3 + 1 at tablet widths. 1 / 2 / 4 divides evenly at every size. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border); margin-top: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 1023px) { .hero__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The rule belongs BETWEEN cells, so it hangs off the left edge of every cell
   after the first, with matching padding either side of it. Putting it on the
   right instead left each label flush against the line to its left while a gap
   opened on its right. */
.hero__rail > div {
  padding: 1.75rem 1.5rem;
  border-left: 1px solid var(--border);
}
.hero__rail > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 700px) {
  /* One column below 700px. The auto-fit track was producing two columns from
     414px up with no gutter between them, so neighbouring cells' text touched,
     and the first-child padding reset left row-mates 29px out of line. */
  .hero__rail { grid-template-columns: 1fr; border-top: 0; }
  .hero__rail > div {
    border-left: 0; padding-left: 0; padding-right: 0;
    border-top: 1px solid var(--border);
  }
}
.hero__rail dt {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--secondary); margin-bottom: .5rem;
}
.hero__rail dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text-secondary); }
.hero__rail dd strong { font-variant-numeric: lining-nums proportional-nums; display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--text); letter-spacing: -.02em; margin-bottom: .1rem; }

/* --- Image frames ------------------------------------------------------- */
.frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--primary-soft);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1 / 1; }
/* Warm the placeholder art so it sits in the palette rather than beside it */
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(var(--scrim-rgb), .10), rgba(var(--scrim-rgb), .04) 55%, rgba(var(--scrim-rgb), .16));
  mix-blend-mode: multiply;
}
.frame--plain::after { display: none; }

.frame__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3.5rem 1.5rem 1.35rem;
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .94) 35%, rgba(var(--scrim-rgb), .55) 75%, rgba(var(--scrim-rgb), 0));
  color: var(--surface); font-size: .88rem; line-height: 1.5;
}
.frame__caption strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--on-brand); letter-spacing: -.015em; margin-bottom: .15rem; }

/* --- Page header (interior) --------------------------------------------- */
.page-header { background: var(--primary-deep); color: var(--on-dark-soft); position: relative; isolation: isolate; }
.page-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: .05;
}
.page-header__inner { padding-block: clamp(3.25rem, 8vw, 6rem); }
.page-header__inner > * { max-width: 20ch; }
.page-header__inner > p { max-width: 44ch; }
.page-header h1 { color: var(--surface); margin-bottom: .35em; }
.page-header p { color: var(--on-dark); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; margin-bottom: 0; }

.breadcrumbs { font-size: .78rem; letter-spacing: .06em; margin-bottom: 1.5rem; color: var(--on-dark-muted); max-width: none !important; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: .5rem; opacity: .5; }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--on-dark); text-decoration: none; }
.breadcrumbs a:hover { color: var(--surface); }

/* --- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* --- Cards: hairline planes, not floating boxes ------------------------- */
.card { display: flex; flex-direction: column; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; }

/* Bordered variant, used sparingly */
.card--framed {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2.15rem);
}
.section--dark .card--framed { background: rgba(var(--on-dark-rgb), .05); border-color: rgba(var(--on-dark-rgb), .16); }
.section--dark .card--framed p { color: var(--on-dark-soft); }

/* Icon lockup — a rule and a mark, no filled tile */
.icon-card { gap: 0; }
.icon-card__icon { color: var(--secondary); margin-bottom: 1.25rem; }
.icon-card__icon svg { width: 26px; height: 26px; }
.section--dark .icon-card__icon { color: var(--secondary-light); }

/* Numbered feature card */
.numbered { counter-reset: n; }
.numbered .card { position: relative; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.numbered .card::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  position: absolute; top: 1.1rem; left: 0;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; color: var(--secondary);
}
.section--dark .numbered .card { border-top-color: rgba(var(--on-dark-rgb), .18); }
.section--dark .numbered .card::before { color: var(--secondary-light); }

/* --- Service index (desktop) / service cards (mobile) -------------------- */
.svc-index { border-top: 1px solid var(--border); }
.svc {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr) 2.5rem;
  gap: 1.5rem; align-items: baseline;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background-color .3s var(--ease), padding-inline .3s var(--ease);
}
.svc:hover { background: var(--surface); padding-inline: 1.5rem; color: inherit; }
.svc__n { font-size: .78rem; font-weight: 600; letter-spacing: .18em; color: var(--secondary); }
.svc__title { font-variant-numeric: lining-nums proportional-nums; font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: -.022em; color: var(--text); line-height: 1.15; }
.svc__desc { font-size: .97rem; color: var(--text-muted); line-height: 1.6; }
.svc__go { justify-self: end; align-self: center; color: var(--secondary); }
.svc__go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.svc:hover .svc__go svg { transform: translateX(5px); }
@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .svc__n { grid-column: 1 / -1; }
  .svc__desc { grid-column: 1 / -1; }
  .svc:hover { padding-inline: 0; }
}

/* --- Editorial split ---------------------------------------------------- */
.split {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
@media (max-width: 900px) {
  .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
}
.split--reverse .split__media { order: -1; }
@media (max-width: 760px) { .split--reverse .split__media { order: 0; } }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; border-top: 1px solid var(--border); }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.5rem; padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--border);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.4rem);
  color: var(--secondary-mid); letter-spacing: -.02em; line-height: 1;
}
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .99rem; }
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: .6rem; }
  .step::before { font-size: 1.4rem; }
}
.section--dark .steps, .section--dark .step { border-color: rgba(var(--on-dark-rgb), .18); }
.section--dark .step::before { color: var(--secondary-light); }
.section--dark .step p { color: var(--on-dark-soft); }

/* --- Checklist ---------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.checklist li { position: relative; padding-left: 1.9rem; line-height: 1.6; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .95rem; height: 1px; background: var(--secondary-mid);
}
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: .95rem 2.5rem; }
.section--dark .checklist li::before { background: var(--secondary-light); }

/* --- Stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.stat { padding: 1.5rem 1.25rem 1.5rem 0; border-left: 1px solid rgba(var(--on-dark-rgb), .2); padding-left: 1.5rem; }
.stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 640px) {
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(var(--on-dark-rgb), .2); }
  .stat:first-child { border-top: 0; }
}
.stat__value { font-variant-numeric: lining-nums proportional-nums; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.85rem); color: var(--surface); line-height: 1; letter-spacing: -.03em; }
.stat__label { font-size: .88rem; color: var(--on-dark-soft); margin-top: .6rem; line-height: 1.5; }

/* --- Callout / note ----------------------------------------------------- */
.callout {
  border-top: 2px solid var(--secondary-mid); background: var(--surface);
  padding: clamp(1.4rem, 2.4vw, 2rem); font-size: .97rem; line-height: 1.68;
}
.section--dark .callout { background: rgba(var(--on-dark-rgb), .06); border-top-color: var(--secondary-light); color: var(--on-dark-soft); }
.note { font-size: .87rem; color: var(--text-muted); line-height: 1.6; }

/* --- Chips -------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  display: flex; align-items: center; min-height: 44px;
  padding: .5rem 1.05rem; border-radius: var(--pill); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 500; color: var(--primary-deep); background: transparent;
}
.section--dark .chips li { border-color: rgba(var(--on-dark-rgb), .25); color: var(--on-dark); }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem; border-radius: var(--pill);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--border); color: var(--primary-deep);
}
.badge--solid { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--surface); }
.badge--accent { background: var(--accent-soft); border-color: var(--accent-light); color: var(--accent-text); }
.section--dark .badge { border-color: rgba(var(--on-dark-rgb), .3); color: var(--on-dark); }

/* --- Tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border-top: 1px solid var(--border); }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: .96rem; }
th, td { text-align: left; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--secondary);
  padding-bottom: .9rem;
}
tbody th { font-weight: 500; color: var(--text); }
.section--dark .table-scroll { border-top-color: rgba(var(--on-dark-rgb), .25); }
.section--dark th, .section--dark td { border-bottom-color: rgba(var(--on-dark-rgb), .15); }
.section--dark thead th { color: var(--secondary-light); }
.section--dark tbody th { color: var(--surface); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.5rem 3rem 1.5rem 0; min-height: 56px;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  letter-spacing: -.018em; color: var(--text); transition: color .2s var(--ease);
}
.faq summary:hover { color: var(--secondary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before {
  content: ""; position: absolute; top: 50%; background: var(--secondary);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
/* The two bars share a centre at 11.5px from the right edge, so they cross. */
.faq summary::before { width: 15px; height: 1.5px; right: 4px; margin-top: -.75px; }
.faq summary::after { width: 1.5px; height: 15px; right: 10.75px; margin-top: -7.5px; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details > div { padding: 0 0 1.75rem; max-width: 62ch; }
.faq details > div p { font-size: .99rem; }

/* --- Forms -------------------------------------------------------------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.6rem, 3.2vw, 2.75rem); }
.field { margin-bottom: 1.35rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; letter-spacing: .04em; color: var(--text); margin-bottom: .55rem; }
.field .req { color: var(--secondary); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .85rem 1.05rem;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--on-dark-muted); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--secondary-mid); }
.field__hint { font-size: .82rem; color: var(--text-muted); margin-top: .45rem; line-height: 1.5; }
.field-row { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.field--check { display: flex; gap: .8rem; align-items: flex-start; }
.field--check { padding-block: .35rem; }
.field--check input { min-height: 0; width: 24px; height: 24px; margin-top: .15rem; flex: none; accent-color: var(--primary); cursor: pointer; }
.field--check label { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.field--check label { font-weight: 400; font-size: .92rem; color: var(--text-secondary); margin: 0; letter-spacing: 0; line-height: 1.55; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-xs); font-size: .94rem; line-height: 1.6; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--success-soft); border-left: 3px solid var(--success); color: var(--primary-deep); }
/* Error state sits outside the brand palette on purpose: a failure should
   read as a failure, not as a brand accent. Contrast verified. */
.form-status--error { background: var(--error-soft); border-left: 3px solid var(--error); color: var(--error-text); }

/* --- Contact list ------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-list li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.contact-list li:first-child { border-top: 1px solid var(--border); }
.contact-list svg { width: 20px; height: 20px; flex: none; margin-top: .3rem; color: var(--secondary); }
.contact-list strong { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
.contact-list a { text-decoration: none; font-weight: 500; font-size: 1.05rem; color: var(--text); }
.contact-list a:hover { color: var(--secondary); }
.section--dark .contact-list li { border-color: rgba(var(--on-dark-rgb), .18); }
.section--dark .contact-list strong { color: var(--on-dark-muted); }
.section--dark .contact-list a, .section--dark .contact-list span { color: var(--surface); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--primary-dark); color: var(--on-dark-soft); position: relative; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .06; }
.cta-band__inner {
  display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding-block: clamp(4rem, 9vw, 7rem);
}
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { color: var(--surface); }
.cta-band p { color: var(--on-dark-soft); }
.cta-band .lede { color: var(--on-dark); }
.cta-band a:not(.btn) { color: var(--secondary-light); }
.cta-band__phone { font-variant-numeric: lining-nums proportional-nums;
  font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 4.5vw, 3rem);
  color: var(--surface); text-decoration: none; letter-spacing: -.03em;
  display: inline-flex; align-items: center; min-height: 52px; line-height: 1.1;
}
.cta-band__phone:hover { color: var(--secondary-light); }
.cta-band__label { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .9rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--primary-dark); color: var(--on-dark-soft); font-size: .93rem; border-top: 1px solid rgba(var(--on-dark-rgb), .12); }
.site-footer a:not(.btn):not(.logo) { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--secondary-light); }
.site-footer__grid {
  display: grid; gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
@media (min-width: 940px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.25fr; } }
.site-footer h4 {
  color: var(--on-dark-muted); font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.35rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.site-footer ul.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer .chips li { border-color: rgba(var(--on-dark-rgb), .25); color: var(--on-dark); }
.site-footer .contact-list li { border-color: rgba(var(--on-dark-rgb), .16); }
.site-footer .contact-list strong { color: var(--on-dark-muted); }
.site-footer .contact-list a, .site-footer .contact-list span { color: var(--surface); }
.site-footer .contact-list svg { color: var(--secondary-light); }
.site-footer .logo__name { color: var(--surface); }
.site-footer .logo__tag { color: var(--on-dark-muted); }
.footer-bottom {
  border-top: 1px solid rgba(var(--on-dark-rgb), .12); padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  font-size: .82rem; color: var(--on-dark-muted);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; list-style: none; margin: 0; padding: 0; }

/* --- Sticky mobile call bar --------------------------------------------- */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: .65rem;
  padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--primary-dark); border-top: 1px solid rgba(var(--on-dark-rgb), .14);
}
.call-bar .btn { flex: 1; min-height: 50px; padding-inline: .65rem; font-size: .88rem; }
@media (max-width: 760px) { .call-bar { display: flex; } body { padding-bottom: 4.6rem; } }

/* --- Scroll reveal ------------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .85rem; } .mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.75rem; } .mt-4 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1.75rem; }
.anchor { scroll-margin-top: 120px; }
.measure { max-width: 62ch; }

/* --- Service detail blocks (services page) ------------------------------ */
.svc-body { display: flex; flex-direction: column; flex: 1; padding-top: 1.75rem; }
.svc-body h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 400; margin-bottom: .6rem; }
.svc-body > p:first-of-type { color: var(--text-secondary); }
.svc-body .checklist { margin-top: 1.25rem; }
.svc-body__cta { margin-top: auto; align-self: flex-start; }
.svc-body .note + .svc-body__cta, .svc-body .checklist + .svc-body__cta { margin-top: 1.75rem; }

/* Jump-link chips behave as links without inline styles */
.chips a { color: inherit; text-decoration: none; display: block; }
.chips li:has(a) { padding: 0; }
.chips li:has(a) a { display: flex; align-items: center; min-height: 44px; padding: .5rem 1.05rem; }
.chips li:hover { border-color: var(--secondary-mid); }

/* --- Small-screen trims -------------------------------------------------- */
@media (max-width: 760px) {
  /* Service area and languages are repeated in the footer; on a phone the top
     bar earns its space only with the email and phone number. */
  .topbar__inner > .topbar__list:first-child { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar { font-size: .8rem; }
}
@media (max-width: 365px) {
  /* At 320-360px the phone label wrapped to two lines while its neighbour
     stayed on one, leaving the two button labels out of line. */
  .call-bar { gap: .5rem; padding-inline: .6rem; }
  .call-bar .btn { font-size: .8rem; padding-inline: .5rem; }
}

@media (max-width: 380px) {
  .logo__mark { width: 42px; height: 42px; }
  .logo__name { font-size: 1.04rem; }
  .logo__tag { font-size: .75rem; }
  .nav-toggle { padding: .5rem .85rem; font-size: .88rem; }
  .site-header__inner { gap: .6rem; min-height: 74px; }
}

/* --- Small helpers replacing one-off inline styles ----------------------- */
.btn-row--center { justify-content: center; }
.section--flush-top { padding-top: 0; }
.steps-list { list-style: decimal; padding-left: 1.3rem; margin: 0; display: grid; gap: .6rem; }
.steps-list li { padding-left: .35rem; }

/* --- Very narrow screens: let button labels wrap rather than overflow ---- */
@media (max-width: 400px) {
  .btn { white-space: normal; }
}
.call-bar .btn { min-width: 0; white-space: normal; }

/* ==========================================================================
   Home banner — "A day at home"
   The signature element. Home care is measured in visits across a day, so the
   banner walks through one: the hours are the structure, not decoration, and
   they carry the point that care runs from a 30-minute call to overnight.
   ========================================================================== */
.daypanel { position: relative; }
.daypanel__stage {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 5; background: var(--primary-deep);
}
@media (max-width: 940px) { .daypanel__stage { aspect-ratio: 16 / 12; } }

.daypanel__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
.daypanel__slide.is-active { opacity: 1; visibility: visible; }
.daypanel__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transform-origin: 60% 40%;
}
/* A slow drift on the live slide only — enough to feel alive, not to distract. */
.daypanel__slide.is-active img { animation: drift 9s var(--ease) forwards; }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1.14); } }

.daypanel__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 5rem clamp(1.35rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .95) 38%, rgba(var(--scrim-rgb), .6) 74%, rgba(var(--scrim-rgb), 0));
  color: var(--on-dark);
}
.daypanel__time {
  display: block; font-family: var(--display);
  font-variant-numeric: lining-nums proportional-nums;
  font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1;
  letter-spacing: -.03em; color: var(--surface); margin-bottom: .65rem;
}
.daypanel__time i { font-style: normal; font-size: .4em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-light); margin-left: .45rem; }
.daypanel__slide figcaption strong {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -.018em;
  color: var(--surface); line-height: 1.25; margin-bottom: .4rem;
}
.daypanel__slide figcaption span:not(.daypanel__time) { font-size: .93rem; line-height: 1.55; color: var(--on-dark-soft); }

/* Controls: a day timeline rather than anonymous dots */
.daypanel__controls {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.1rem; min-width: 0;
}
.daypanel__timeline {
  display: flex; align-items: stretch; gap: .9rem; flex: 1;
  list-style: none; margin: 0; padding: 0;
}
.daypanel__timeline li { flex: 1 1 0; display: flex; min-width: 0; }
.daypanel__tab {
  flex: 1 1 0; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: .45rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); transition: color .25s var(--ease);
}
.daypanel__tab::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: var(--border); border-radius: 2px; overflow: hidden; position: relative;
}
.daypanel__tab:hover { color: var(--secondary); }
.daypanel__tab[aria-selected="true"] { color: var(--secondary); }
.daypanel__tab[aria-selected="true"]::after { background: var(--secondary-mid); }

.daypanel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--border); border-radius: var(--pill);
  color: var(--primary-deep); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.daypanel__btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--surface); }
.daypanel__btn svg { width: 15px; height: 15px; }
.daypanel__btn .icon-play { display: none; }
.daypanel__btn[aria-pressed="true"] .icon-play { display: block; }
.daypanel__btn[aria-pressed="true"] .icon-pause { display: none; }

/* ==========================================================================
   Full-width banner band
   ========================================================================== */
.banner { position: relative; isolation: isolate; overflow: hidden; background: var(--primary-deep); color: var(--on-dark-soft); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .06; }
.banner__inner {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 820px) { .banner__inner { grid-template-columns: 1fr; } }
.banner h2 { color: var(--surface); font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .5rem; }
.banner p { color: var(--on-dark); margin-bottom: 0; max-width: 52ch; }
.banner--accent { background: var(--secondary); }
.banner--accent h2, .banner--accent strong { color: var(--on-brand); }
.banner--accent p { color: var(--secondary-soft); }
.banner--accent .btn--light { --btn-fg: var(--secondary); }
.banner--accent a:not(.btn) { color: var(--on-brand); }

/* ==========================================================================
   Motion
   One orchestrated moment on load, then quiet staggered reveals on scroll.
   ========================================================================== */
[data-lift] { opacity: 0; transform: translateY(14px); }
.is-ready [data-lift] {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--lift-delay, 0ms);
}

[data-reveal] > [data-stagger] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in > [data-stagger] {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  [data-lift], .is-ready [data-lift],
  [data-reveal] > [data-stagger], [data-reveal].is-in > [data-stagger] {
    opacity: 1 !important; transform: none !important;
  }
  .daypanel__slide.is-active img { animation: none; transform: scale(1.02); }
  .daypanel__slide { transition-duration: .01ms; }
}
.no-js [data-lift], .no-js [data-reveal] > [data-stagger] { opacity: 1; transform: none; }
.no-js .daypanel__slide { position: relative; opacity: 1; visibility: visible; }
.no-js .daypanel__controls { display: none; }

/* Narrow screens: the hours are already set large in the caption, so the
   timeline drops to bars alone. The labels stay for screen readers. */
@media (max-width: 620px) {
  .daypanel__tab-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .daypanel__tab { gap: 0; }
  .daypanel__tab::after { height: 3px; }
  .daypanel__controls { gap: .6rem; }
}

/* --- Footer credit ------------------------------------------------------- */
/* Copyright and credit read as one line, wrapping to two on narrow screens. */
.footer-bottom__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.15rem; }
.footer-credit a {
  color: var(--on-dark); text-decoration: underline;
  text-decoration-color: rgba(var(--on-dark-rgb), .35);
  text-underline-offset: .25em; text-decoration-thickness: 1px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.footer-credit a:hover { color: var(--secondary-light); text-decoration-color: var(--secondary-light); }

/* --- Long-form legal pages ---------------------------------------------- */
/* The display scale is built for marketing headlines. A sixteen-section
   policy needs a quieter, denser hierarchy that still scans. */
.section--legal h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 3rem 0 .85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.section--legal h2:first-of-type { margin-top: 0; }
.section--legal h3 {
  font-size: 1.02rem;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: .01em;
  color: var(--secondary);
  margin-bottom: .7rem;
}
.section--legal p, .section--legal li { font-size: 1rem; }
.section--legal .checklist { gap: .7rem; }
.section--legal .callout { margin-block: 1.5rem; }
.section--legal .note { padding-bottom: .5rem; }