/* ==========================================================================
   Precision Performance Physio — site styles
   Order: reset → base → layout → components → sections → utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.2 SC 2.4.11 — keep focused targets clear of the sticky header
     and the sticky mobile booking bar. */
  scroll-padding-top: calc(var(--header-real, var(--header-h)) + 1rem);
  scroll-padding-bottom: calc(var(--mobile-cta-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long unbreakable strings (handles, URLs, long single words) must never
     force a horizontal scrollbar, including at large text-zoom settings. */
  overflow-wrap: break-word;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  color: var(--heading);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p, ul, ol, dl { margin: 0 0 var(--sp-5); }
code, samp, kbd {
  font-size: 0.9em;
  overflow-wrap: anywhere;
  padding: 0.1em 0.35em;
  background: var(--surface-2);
  border-radius: var(--r-xs);
}
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
p { max-width: var(--measure); text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--link-hover); }

strong, b { font-weight: 650; color: var(--heading); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-9) 0;
}

ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--accent); }

:target { scroll-margin-top: calc(var(--header-real, var(--header-h)) + 1.5rem); }

/* Focus — visible, high contrast, never removed.
   WCAG 2.2 SC 2.4.13 (AAA) shape adopted deliberately: >=2px perimeter,
   >=3:1 against both the component and the background. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--dark-focus-ring); }

::selection { background: var(--purple-100); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--brand-white);
  color: var(--brand-eggplant);
  font-weight: 650;
  border: 2px solid var(--brand-purple);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

.section--surface { background: var(--surface); }
.section--tint { background: var(--purple-050); }

.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  --heading: var(--dark-heading);
  --text: var(--dark-text);
  --text-muted: var(--dark-muted);
  --link: var(--dark-accent);
  --link-hover: var(--brand-white);
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-border: var(--dark-hairline);
  --hairline: var(--dark-hairline);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--dark-heading); }
.section--dark strong { color: var(--brand-white); }
.section--deep { background: var(--dark-bg-deep); }

.stack > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-7); }

.grid { display: grid; gap: var(--sp-6); }
.grid > *, .split > *, .hero__grid > * { min-width: 0; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.section-head { max-width: 46rem; margin-bottom: var(--sp-9); }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Brand motifs
   -------------------------------------------------------------------------- */
/* Eyebrow with the logo's velocity-slash motif rendered in pure CSS. */
.eyebrow {
  /* Block rather than flex so the label wraps normally at large text sizes. */
  display: block;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 650;
  font-stretch: 96%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.section--dark .eyebrow { color: var(--dark-accent); }
.eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.625rem;
  margin-top: -0.15em;
  width: 22px;
  height: 10px;
  background:
    linear-gradient(to right, currentColor 0 100%) left 0 top 1px / 22px 2px no-repeat,
    linear-gradient(to right, currentColor 0 100%) left 4px top 5px / 18px 2px no-repeat,
    linear-gradient(to right, currentColor 0 100%) left 8px top 9px / 14px 2px no-repeat;
  opacity: 0.9;
}
.section-head--center .eyebrow { text-align: center; }

.rule-accent {
  width: 56px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 0;
  margin: 0 0 var(--sp-6);
}
.section--dark .rule-accent { background: var(--dark-accent); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-purple);
  --btn-fg: var(--brand-white);
  --btn-bd: var(--brand-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;               /* WCAG 2.2 SC 2.5.8 with margin to spare */
  padding: 0.8125rem 1.5rem;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--purple-400);
  --btn-bd: var(--purple-400);
  color: var(--brand-white);
  box-shadow: var(--sh-md);
}
.btn:active { transform: translateY(1px); }

/* Secondary — outlined, light context */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-eggplant);
  --btn-bd: var(--control-border);
}
.btn--ghost:hover {
  --btn-bg: var(--purple-050);
  --btn-bd: var(--brand-purple);
  color: var(--brand-eggplant);
  box-shadow: none;
}

/* Primary on dark surfaces — white fill keeps a 3:1 component boundary
   against the dark background, which a purple fill cannot achieve. */
.on-dark .btn,
.section--dark .btn,
.site-footer .btn,
.mobile-nav .btn {
  --btn-bg: var(--brand-white);
  --btn-fg: var(--brand-eggplant);
  --btn-bd: var(--brand-white);
}
.on-dark .btn:hover,
.section--dark .btn:hover,
.site-footer .btn:hover,
.mobile-nav .btn:hover {
  --btn-bg: var(--purple-100);
  --btn-bd: var(--purple-100);
  color: var(--brand-eggplant);
}
.on-dark .btn--ghost,
.section--dark .btn--ghost,
.site-footer .btn--ghost,
.mobile-nav .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-white);
  --btn-bd: var(--dark-control-border);
}
.on-dark .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.mobile-nav .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bd: var(--purple-150);
  color: var(--brand-white);
}

.btn--lg { min-height: 56px; padding: 1rem 1.875rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: stretch;   /* side-by-side buttons match height when a label wraps */
}
/* Below 40rem a two-button row is too tight to sit side by side: the labels
   wrap unevenly and the buttons end up different widths. Stack them instead. */
@media (max-width: 40rem) {
  .btn-row { gap: var(--sp-3); }
  .btn-row > .btn { flex: 1 1 100%; }
}
/* Between 40 and 52rem, share the row evenly so the two buttons match height
   and width rather than sizing to their labels. */
@media (min-width: 40.0625rem) and (max-width: 52rem) {
  .btn-row > .btn { flex: 1 1 0; min-width: 0; }
}

/* Booking glyph — a calendar with a confirmed date, trailed by the logo's
   velocity slashes. Custom-drawn for this brand; scales with the button label. */
.btn__icon {
  flex: none;
  width: 1.3em;
  height: 1.12em;
  margin-right: -0.1em;
}

/* Returning-patient routes. Deliberately quieter than the primary CTA so the
   free consult stays the dominant action. */
.cta-band__alt,
.footer__alt {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--dark-muted);
  max-width: none;
}
.cta-band__alt a,
.footer__alt a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  min-height: 32px;
  margin-left: 0.15rem;
  font-weight: 600;
  color: var(--purple-100);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.cta-band__alt a:hover,
.footer__alt a:hover { color: var(--brand-white); }
.footer__alt { margin-top: var(--sp-4); }

.mobile-nav__alt-label {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-200);
}

/* Quiet text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 24px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-white);
  border-bottom: 1px solid var(--hairline);
}
.site-header.is-stuck { box-shadow: var(--sh-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
  padding-block: 0.625rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Allowed to shrink so the header survives large text-zoom settings
     without pushing the menu button out of the viewport. */
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  border-radius: var(--r-xs);
}
.brand img { width: 150px; max-width: 100%; height: auto; }
@media (min-width: 30rem) { .brand img { width: 170px; } }
@media (min-width: 64rem) { .brand img { width: 188px; } }

.nav { margin-left: auto; display: none; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.1vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 0.5rem;
  font-size: 0.9688rem;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-xs);
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 12px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
/* Current page uses text weight + colour + underline, never colour alone */
.nav a[aria-current="page"] { color: var(--brand-eggplant); font-weight: 700; }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand-eggplant); }

.header-cta { display: none; flex: none; }

/* Primary CTA — subtle gloss sweep on hover. A "\"-oriented highlight (the 45deg
   gradient axis) travels perpendicular to its own slant, from the lower-left to
   the upper-right corner, so the wipe reads unambiguously as moving up and to the
   right (no barber-pole illusion). The oversized band keeps full coverage as it
   crosses; reduced-motion users get a near-instant transition via the global
   prefers-reduced-motion block, so no sweep is perceived. */
.header-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.header-cta::after {
  content: "";
  position: absolute;
  top: -80%;
  left: 0;
  z-index: 1;
  width: 60%;
  height: 260%;
  pointer-events: none;
  background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  transform: translate(-160%, 70%);
  opacity: 0;
}
.header-cta:hover::after {
  animation: header-cta-gloss var(--dur-slow) var(--ease-out);
}
@keyframes header-cta-gloss {
  0% { transform: translate(-160%, 70%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(300%, -70%); opacity: 0; }
}

/* Quiet returning-patient route, deliberately much lighter than the primary CTA. */
.header-alt {
  display: none;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.header-alt:hover { color: var(--link); border-bottom-color: currentColor; }

.nav-toggle {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surface); }
.nav-toggle__bars {
  position: relative;
  width: 18px; height: 12px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile panel — full-screen so it does not depend on the sticky header
   staying put (locking scroll on the document detaches sticky elements). */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: var(--purple-900);
  color: var(--dark-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(var(--sp-10) + env(safe-area-inset-bottom));
}
.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: 0.625rem;
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--dark-hairline);
}
.mobile-nav__bar img { width: 168px; max-width: 52vw; height: auto; }
.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  min-height: 44px;
  padding: 0 0.75rem;
  background: transparent;
  border: 1px solid var(--dark-control-border);
  border-radius: var(--r-sm);
  color: var(--brand-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.mobile-nav__close:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--purple-150); }
.mobile-nav.is-open { display: block; animation: navIn var(--dur) var(--ease-out); }
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mobile-nav ul { list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--dark-hairline); }
.mobile-nav nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-white);
  text-decoration: none;
}
.mobile-nav .btn { color: var(--btn-fg); }
.mobile-nav nav a[aria-current="page"] { color: var(--purple-200); }
.mobile-nav nav a[aria-current="page"]::after {
  content: "Current";
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-200);
}
.mobile-nav__meta {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--dark-muted);
}
.mobile-nav__meta a {
  font-size: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--purple-100);   /* 15:1 on the panel background */
}
.mobile-nav__meta a:hover { color: var(--brand-white); }

@media (min-width: 64rem) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
@media (min-width: 78rem) {
  .header-alt { display: inline-flex; }
  .site-header__inner { gap: clamp(0.75rem, 1.4vw, 1.5rem); }
}

/* --------------------------------------------------------------------------
   6. Sticky mobile booking bar
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--purple-900);
  border-top: 1px solid var(--dark-hairline);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn {
  --btn-bg: var(--brand-white);
  --btn-fg: var(--brand-eggplant);
  --btn-bd: var(--brand-white);
  width: 100%;
}
.mobile-cta .btn:hover { --btn-bg: var(--purple-100); --btn-bd: var(--purple-100); }
.mobile-cta :focus-visible { outline-color: var(--dark-focus-ring); }

@media (max-width: 63.99rem) {
  .mobile-cta { display: block; }
  :root { --mobile-cta-h: 76px; }
  body { padding-bottom: 0; }
  /* Reserve room so the bar never covers the last line of the footer */
  .site-footer { padding-bottom: calc(var(--sp-8) + 76px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
  background:
    radial-gradient(60rem 40rem at 88% 8%, rgba(147, 21, 184, 0.07), transparent 62%),
    radial-gradient(48rem 34rem at 4% 92%, rgba(104, 45, 121, 0.06), transparent 60%),
    var(--shell);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(2.5rem, 4vw, 4.5rem); }
}
.hero h1 {
  font-size: var(--fs-display);
  font-stretch: 94%;
  margin-bottom: var(--sp-5);
  /* `balance` optimises for short headings and leaves a ragged edge on a
     four-line display setting; `pretty` keeps the measure even. */
  text-wrap: pretty;
  max-width: 15ch;
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text);
  max-width: 34rem;
  margin-bottom: var(--sp-7);
}
.hero__cta { margin-bottom: var(--sp-6); }
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 30rem;
}
.hero__note svg { flex: none; margin-top: 0.2em; color: var(--accent-strong); }

.hero__media { position: relative; }
/* The accent frame tracks the photograph only. Below 30rem the address badge
   drops into normal flow inside .hero__media, and an accent anchored to the
   media box would paint straight over it. */
.hero__frame { position: relative; }
.hero__media picture,
.hero__media img {
  width: 100%;
  border-radius: var(--r-xl);
}
.hero__media img {
  object-fit: cover;
  aspect-ratio: 5 / 4;
  box-shadow: var(--sh-lg);
}
/* Purple slab behind the photo — echoes the mark's forward lean */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 1.6vw, 24px) calc(-1 * clamp(14px, 1.6vw, 24px)) calc(-1 * clamp(14px, 1.6vw, 24px)) clamp(14px, 1.6vw, 24px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--brand-plum), var(--brand-eggplant));
  z-index: 0;
}
.hero__frame picture,
.hero__frame > img { position: relative; z-index: 1; }

.hero__badge {
  position: absolute;
  left: clamp(-2rem, -2.4vw, -1rem);
  bottom: clamp(-2.25rem, -2.6vw, -1.5rem);
  z-index: 2;
  max-width: 15rem;
  padding: 0.875rem 1.125rem;
  background: var(--brand-white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--brand-purple);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}
.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.125rem;
}
@media (max-width: 30rem) { .hero__badge { position: static; max-width: none; margin-top: var(--sp-4); box-shadow: var(--sh-md); } }

/* --------------------------------------------------------------------------
   Hero motion field
   Three parallax layers of tapered velocity wedges, drawn from the same shape
   language as the logo's speed slashes. Composited transforms only, so it
   costs nothing on the main thread; paused entirely when the hero is off
   screen or when the visitor prefers reduced motion.
   -------------------------------------------------------------------------- */
.motion-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fades in from the left so the headline always sits on clean ground, and
     out at the edges so the loop seam is never visible. */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 58%, #000 88%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 58%, #000 88%, transparent 100%);
}
.motion-field span {
  position: absolute;
  top: -12%;
  left: 0;
  display: block;
  width: 200%;
  height: 124%;
  background-repeat: repeat;
  transform: rotate(-7deg) translate3d(0, 0, 0);
  transform-origin: 0 50%;
  /* No will-change: nine composited layers of it is real memory pressure on
     iOS, and translate3d already promotes each layer. */
}
.motion-field span:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22280%22%20viewBox%3D%220%200%20420%20280%22%3E%3Cpath%20d%3D%22M10%2043.5%20L160%2040%20L160%2047%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M48%2065.0%20L160%2062%20L160%2068%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.4%22%2F%3E%3Cpath%20d%3D%22M86%2084.5%20L164%2082%20L164%2087%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M230%20153.5%20L362%20150%20L362%20157%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M262%20173.0%20L360%20170%20L360%20176%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.36%22%2F%3E%3Cpath%20d%3D%22M296%20190.5%20L362%20188%20L362%20193%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.26%22%2F%3E%3Cpath%20d%3D%22M120%20235.0%20L224%20232%20L224%20238%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M152%20252.5%20L226%20250%20L226%20255%20Z%22%20fill%3D%22%23682D79%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E");
  background-size: 420px 280px;
  opacity: 0.42;
  animation: heroDrift 46s linear infinite;
  --drift: -420px;
}
.motion-field span:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22620%22%20height%3D%22320%22%20viewBox%3D%220%200%20620%20320%22%3E%3Cpath%20d%3D%22M30%2035.0%20L240%2030%20L240%2040%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M86%2064.0%20L244%2060%20L244%2068%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.36%22%2F%3E%3Cpath%20d%3D%22M140%2089.5%20L248%2086%20L248%2093%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.26%22%2F%3E%3Cpath%20d%3D%22M300%20195.0%20L490%20190%20L490%20200%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.44%22%2F%3E%3Cpath%20d%3D%22M350%20222.0%20L490%20218%20L490%20226%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M170%20143.5%20L290%20140%20L290%20147%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E");
  background-size: 620px 320px;
  opacity: 0.34;
  animation: heroDrift 31s linear infinite;
  --drift: -620px;
}
.motion-field span:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22300%22%20viewBox%3D%220%200%20900%20300%22%3E%3Cpath%20d%3D%22M40%2097.0%20L340%2090%20L340%20104%20Z%22%20fill%3D%22%234C2358%22%20opacity%3D%220.34%22%2F%3E%3Cpath%20d%3D%22M130%20139.5%20L356%20134%20L356%20145%20Z%22%20fill%3D%22%234C2358%22%20opacity%3D%220.24%22%2F%3E%3Cpath%20d%3D%22M220%20176.5%20L370%20172%20L370%20181%20Z%22%20fill%3D%22%234C2358%22%20opacity%3D%220.16%22%2F%3E%3C%2Fsvg%3E");
  background-size: 900px 300px;
  opacity: 0.22;
  animation: heroDrift 22s linear infinite;
  --drift: -900px;
}

@keyframes heroDrift {
  /* Drift left-to-right (and, because the field is tilted -7deg, slightly
     upward) so the hero streaks travel the same way as the CTA gloss. Starting
     shifted one tile left and easing to 0 keeps the loop seamless and the field
     fully covered throughout. */
  from { transform: rotate(-7deg) translate3d(var(--drift), 0, 0); }
  to   { transform: rotate(-7deg) translate3d(0, 0, 0); }
}

/* Only run while the hero is actually on screen. */
.hero:not(.is-onscreen) .motion-field span { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .motion-field span { animation: none !important; }
  .motion-field { opacity: 0.7; }
}

/* Content always sits above the field. */
.hero__grid,
.cta-band .container,
.section--dark .container { position: relative; z-index: 1; }

/* Dark call-out bands: the same wedges, brightened so they read on plum, and
   drifting a little slower so they stay in the background. */
.motion-field--dark {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 55%, #000 86%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 55%, #000 86%, transparent 100%);
}
.motion-field--dark span:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22280%22%20viewBox%3D%220%200%20420%20280%22%3E%3Cpath%20d%3D%22M10%2043.5%20L160%2040%20L160%2047%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M48%2065.0%20L160%2062%20L160%2068%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.4%22%2F%3E%3Cpath%20d%3D%22M86%2084.5%20L164%2082%20L164%2087%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M230%20153.5%20L362%20150%20L362%20157%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M262%20173.0%20L360%20170%20L360%20176%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.36%22%2F%3E%3Cpath%20d%3D%22M296%20190.5%20L362%20188%20L362%20193%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.26%22%2F%3E%3Cpath%20d%3D%22M120%20235.0%20L224%20232%20L224%20238%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M152%20252.5%20L226%20250%20L226%20255%20Z%22%20fill%3D%22%23C77DE0%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.30; animation-duration: 58s;
}
.motion-field--dark span:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22620%22%20height%3D%22320%22%20viewBox%3D%220%200%20620%20320%22%3E%3Cpath%20d%3D%22M30%2035.0%20L240%2030%20L240%2040%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M86%2064.0%20L244%2060%20L244%2068%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.36%22%2F%3E%3Cpath%20d%3D%22M140%2089.5%20L248%2086%20L248%2093%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.26%22%2F%3E%3Cpath%20d%3D%22M300%20195.0%20L490%20190%20L490%20200%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.44%22%2F%3E%3Cpath%20d%3D%22M350%20222.0%20L490%20218%20L490%20226%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M170%20143.5%20L290%20140%20L290%20147%20Z%22%20fill%3D%22%23D9A8EC%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.24; animation-duration: 39s;
}
.motion-field--dark span:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22300%22%20viewBox%3D%220%200%20900%20300%22%3E%3Cpath%20d%3D%22M40%2097.0%20L340%2090%20L340%20104%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.34%22%2F%3E%3Cpath%20d%3D%22M130%20139.5%20L356%20134%20L356%20145%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.24%22%2F%3E%3Cpath%20d%3D%22M220%20176.5%20L370%20172%20L370%20181%20Z%22%20fill%3D%22%239315B8%22%20opacity%3D%220.16%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.20; animation-duration: 28s;
}

/* Section-level positioning for any band hosting a field. */
.section--dark[data-motion],
.cta-band[data-motion] { position: relative; overflow: hidden; }

/* Compact page hero for interior pages */
.page-hero {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  background:
    radial-gradient(46rem 30rem at 82% 0%, rgba(147, 21, 184, 0.06), transparent 60%),
    var(--shell);
  border-bottom: 1px solid var(--hairline);
}
.page-hero h1 { max-width: 22ch; }

/* Interior hero with a portrait alongside the heading (About). */
.page-hero--split { padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.page-hero__grid { display: grid; gap: clamp(2rem, 1rem + 3.5vw, 3.5rem); align-items: center; }
.page-hero__grid > * { min-width: 0; }
.page-hero__media { margin: 0; position: relative; }
.page-hero__media picture,
.page-hero__media > img { position: relative; z-index: 1; }
.page-hero__media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 62rem) {
  /* Keep the portrait from towering over a short text column. */
  .page-hero__media { max-width: 24rem; margin-inline-start: auto; }
}
.page-hero__media::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.4vw, 20px) calc(-1 * clamp(12px, 1.4vw, 20px)) calc(-1 * clamp(12px, 1.4vw, 20px)) clamp(12px, 1.4vw, 20px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--brand-plum), var(--brand-eggplant));
  z-index: 0;
}
.page-hero__media figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
@media (min-width: 62rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .page-hero--split .page-hero__grid { align-items: center; }
}
.page-hero p { font-size: var(--fs-lead); color: var(--text-muted); max-width: 46rem; }

.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--fs-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--hairline); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--link); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); font-size: 1rem; }
.card__foot { margin-top: auto; padding-top: var(--sp-5); }

.card--link:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--purple-100); }
.section--dark .card--link:hover { border-color: var(--dark-control-border); box-shadow: none; background: rgba(255,255,255,0.075); }
.card--link { position: relative; }
.card--link a { color: inherit; text-decoration: none; }
.card--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover h3 { color: var(--accent-strong); }
.section--dark .card--link:hover h3 { color: var(--dark-accent); }
.card--link:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-lg); }
.card--link a:focus-visible { outline: none; }

.card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--purple-050);
  color: var(--brand-eggplant);
}
.card__icon svg { width: 24px; height: 24px; stroke-width: 1.85; }
.section--dark .card__icon { background: rgba(255,255,255,0.09); color: var(--purple-150); }

/* Numbered step cards */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--sp-6); border-top: 3px solid var(--hairline); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 88%;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.section--dark .step { border-top-color: var(--dark-hairline); }
.section--dark .step::before { color: var(--dark-accent); }
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--text-muted); font-size: var(--fs-small); }

/* Fact / credential list */
.facts { display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .facts--3 { grid-template-columns: repeat(3, 1fr); } }
.facts li { margin: 0; display: flex; align-items: flex-start; gap: var(--sp-4); }
.facts svg { flex: none; color: var(--accent); margin-top: 0.15em; }
.section--dark .facts svg { color: var(--dark-accent); }
.facts strong { display: block; font-family: var(--font-display); color: var(--heading); margin-bottom: 0.15rem; }
.facts span { font-size: var(--fs-small); color: var(--text-muted); }

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
}
.check-list svg { flex: none; margin-top: 0.25em; color: var(--accent); }
.section--dark .check-list svg { color: var(--dark-accent); }

/* --------------------------------------------------------------------------
   9. Split / feature bands
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A supporting note beside a long passage should start level with it. */
  .split:has(> aside) { align-items: start; }
  .split--media-first .split__media { order: -1; }
  /* Media column with an offset accent block, so a photo shorter than the
     text beside it reads as a deliberate composition rather than a gap. */
  .split--framed .split__media { position: relative; }
  .split--framed .split__media picture,
  .split--framed .split__media > img { position: relative; z-index: 1; display: block; }
  .split--framed .split__media img { border-radius: var(--r-xl); }
  .split--framed .split__media::before {
    content: "";
    position: absolute;
    inset: clamp(14px, 1.6vw, 22px) calc(-1 * clamp(14px, 1.6vw, 22px)) calc(-1 * clamp(14px, 1.6vw, 22px)) clamp(14px, 1.6vw, 22px);
    border-radius: var(--r-xl);
    background: linear-gradient(140deg, var(--brand-purple), var(--brand-eggplant));
    opacity: 0.55;
    z-index: 0;
  }
  .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.split__media img { border-radius: var(--r-lg); width: 100%; }
.split__media figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.pull-quote {
  margin: 0;
  padding-left: var(--sp-6);
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.section--dark .pull-quote { border-left-color: var(--dark-accent); }

/* --------------------------------------------------------------------------
   10. Accordion (native details/summary)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--hairline); }
.accordion details {
  border-bottom: 1px solid var(--hairline);
}
.accordion summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 56px;
  padding: var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 650;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--accent-strong); }
.section--dark .accordion summary:hover { color: var(--dark-accent); }
.accordion summary:focus-visible { outline-offset: -3px; }
.accordion__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-top: 0.1em;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  color: var(--accent-strong);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.section--dark .accordion__icon { border-color: var(--dark-control-border); color: var(--dark-accent); }
details[open] > summary .accordion__icon { transform: rotate(45deg); background: var(--purple-050); }
.section--dark details[open] > summary .accordion__icon { background: rgba(255,255,255,0.08); }
.accordion__body { padding: 0 0 var(--sp-6); max-width: var(--measure); }
.accordion__body p { font-size: var(--fs-small); }
@media (min-width: 48rem) { .accordion__body { padding-right: 4rem; } }

@supports selector(::details-content) {
  .accordion details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* --------------------------------------------------------------------------
   11. Callouts, notes, disclaimers
   -------------------------------------------------------------------------- */
.note {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--brand-purple);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
}
.note > :last-child { margin-bottom: 0; }
.note h3, .note h4 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.section--dark .note {
  background: rgba(255,255,255,0.05);
  border-color: var(--dark-hairline);
  border-left-color: var(--purple-200);
}
.note--urgent { border-left-color: #b3261e; background: #fdf3f2; border-color: #f2d9d7; }
.note--urgent strong { color: #7a1a15; }

.disclaimer-strip {
  padding-block: var(--sp-6);
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.disclaimer-strip p { max-width: none; }

/* Chip row */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chips span,
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-eggplant);
  text-decoration: none;
  background: var(--brand-white);
}
.section--dark .chips span,
.section--dark .chips a {
  background: transparent;
  border-color: var(--dark-control-border);
  color: var(--purple-100);
}
.chips a:hover { border-color: var(--brand-purple); color: var(--brand-purple); }

/* --------------------------------------------------------------------------
   12. Prose (legal + long-form pages)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-9); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-7); }
.prose ul, .prose ol { max-width: var(--measure); }
.prose li { font-size: var(--fs-body); }
.prose__meta { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-7); }

.toc {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-8);
}
.toc h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-h4); }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { font-size: var(--fs-small); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   13. Map facade (no third-party request until the visitor asks)
   -------------------------------------------------------------------------- */
.map-embed {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 440px);
  border: 0;
}

/* --------------------------------------------------------------------------
   14. CTA band + footer
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38rem 26rem at 84% 12%, rgba(147, 21, 184, 0.30), transparent 62%),
    radial-gradient(30rem 22rem at 8% 96%, rgba(104, 45, 121, 0.42), transparent 60%),
    var(--purple-900);
}
.cta-band__inner { max-width: 42rem; }
.cta-band h2 { font-size: var(--fs-h2); }
.cta-band p { font-size: var(--fs-lead); color: var(--dark-text); }

.site-footer {
  background: var(--purple-900);
  color: var(--dark-text);
  --heading: var(--brand-white);
  --link: var(--purple-100);
  --link-hover: var(--brand-white);
  --hairline: var(--dark-hairline);
  padding-block: var(--sp-10) var(--sp-8);
  font-size: var(--fs-small);
}
.site-footer h2, .site-footer h3 { color: var(--brand-white); }
.site-footer a:not(.btn) { color: var(--purple-100); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--brand-white); text-decoration: underline; }
.site-footer .btn { color: var(--btn-fg); text-decoration: none; }
.footer__grid {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--dark-hairline);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.5fr 0.78fr 1fr 1.42fr; gap: clamp(1.75rem, 2.6vw, 3rem); } }
.site-footer .btn { width: 100%; }
.footer__brand img { width: 208px; margin-bottom: var(--sp-5); }
.footer__brand p { color: var(--dark-muted); max-width: 34ch; }
.brand-motto {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-stretch: 96%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-white);
}
.brand-motto span { color: var(--purple-200); margin: 0 0.2em; }
.footer h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-200);
  margin-bottom: var(--sp-4);
}
.site-footer h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-200);
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.125rem; }
.footer__list a { display: inline-flex; align-items: center; min-height: 36px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  color: var(--dark-muted);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 32px; }
.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.social-row a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--dark-control-border);
  border-radius: var(--r-sm);
  color: var(--purple-100);
}
.social-row a:hover { border-color: var(--purple-150); color: var(--brand-white); background: rgba(255,255,255,0.07); }

/* --------------------------------------------------------------------------
   15. Reveal on scroll — only applied when JS is available and motion allowed
   -------------------------------------------------------------------------- */
/* The reveal moves content, it never hides it. An earlier version faded from
   opacity 0, which meant every section was invisible until a deferred script
   had loaded, parsed, and run an IntersectionObserver, and it put text through
   a range of partial opacity where it no longer met contrast. Motion alone
   gives the same sense of arrival with neither cost. */

/* Fallback path, for browsers without scroll-driven animations. JS adds
   `is-in`. Anything inside the first viewport is given `is-in` synchronously
   so it never waits on the script. */
.js .reveal {
  transform: translateY(14px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-in { transform: none; }
.js .reveal.is-instant { transition: none; }

/* Preferred path. The resting state is the finished state and the animation
   only decorates the way in, so nothing is gated on JavaScript: content can
   never be left displaced by a slow script, a failed request, a background
   tab, or a prerender that has not been activated. An element already inside
   the viewport at load has passed its entry range and paints settled on the
   first frame. */
@supports (animation-timeline: view()) {
  .js .reveal {
    transform: none;
    transition: none;
    animation: revealIn 1s var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
@keyframes revealIn {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.lead { font-size: var(--fs-lead); color: var(--text); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--text-muted); }
.measure-narrow { max-width: var(--measure-narrow); }
.no-wrap { white-space: nowrap; }

@media print {
  .site-header, .mobile-cta, .mobile-nav, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}