/* Hero system — SINGLE SOURCE (2026-09-06). tools/build-hero-media.py writes this file into a marked
   "GENERATED hero-system" region directly above every registered hero and stamps data-hero-variant on the
   section from hero-media.json. One geometry for the whole site, expressed as tokens measured on the approved
   ae/index.html planner hero (1440 wide: 648px tall · padding 66/68 · wrap 1180 · copy 529 · panel 539 · H1 52/1.05),
   with six variants: planner · service-wizard · intake · service-cta · editorial · compact. Pages keep their own
   hero markup and colour; this layer owns block size, padding, container width, grid proportions, heading and
   body scale, action spacing and panel width. Specificity :root [data-hero-variant] (0,2,0) outranks the
   page-level .hero / .svc-hero / .bk-hero rules without !important. */
:root {
  --site-header-height: 64px;
  --hero-min-block-size-desktop: 648px; --hero-min-block-size-tablet: 560px; --hero-min-block-size-mobile: auto;
  --hero-min-block-size-editorial: 520px; --hero-min-block-size-compact: 0px;
  --hero-padding-block-start: 66px; --hero-padding-block-end: 68px;
  --hero-content-max-width: 1180px; --hero-grid-gap: 56px; --hero-copy-column: minmax(0, 1fr); --hero-media-column: minmax(0, 1.02fr);
  --hero-copy-max-width: 560px; --hero-action-gap: 12px; --hero-tool-width: minmax(0, 1.02fr); --hero-tool-max-width: 560px; --hero-tool-offset: 0px;
  --hero-image-radius: 18px; --hero-transition-spacing: 0px;
  --hero-eyebrow-size: 12px; --hero-heading-size-desktop: clamp(36px, 4.2vw, 52px); --hero-heading-size-tablet: clamp(32px, 5vw, 44px); --hero-heading-size-mobile: clamp(28px, 8vw, 36px);
  --hero-heading-line-height: 1.05; --hero-heading-letter-spacing: -.035em; --hero-heading-max-measure: 18ch;
  --hero-body-size: 17px; --hero-body-line-height: 1.6; --hero-body-max-measure: 52ch; --hero-meta-size: 13px;
  --hero-surface: var(--bg); --hero-text: var(--text); --hero-text-muted: var(--muted);
  --hero-card-surface: var(--surface-paper, var(--surface)); --hero-card-border: var(--line); --hero-card-shadow: 0 22px 56px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.12); --hero-focus-ring: var(--focus-ring, var(--mineral));
  --hero-media-aspect: auto; --hero-media-position-desktop: center center; --hero-media-position-tablet: center center; --hero-media-position-mobile: 60% center;
}
:root[data-theme="light"] { --hero-card-shadow: 0 18px 44px rgba(47,42,32,.10), 0 4px 12px rgba(47,42,32,.05); }
/* block */
:root [data-hero-variant] { box-sizing: border-box; padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end); margin: 0; }
:root [data-hero-variant="planner"], :root [data-hero-variant="service-wizard"], :root [data-hero-variant="intake"] { min-block-size: var(--hero-min-block-size-desktop); }
:root [data-hero-variant="service-cta"], :root [data-hero-variant="editorial"] { min-block-size: var(--hero-min-block-size-editorial); }
:root [data-hero-variant="compact"] { min-block-size: var(--hero-min-block-size-compact); padding-block: 56px 48px; }
:root [data-hero-variant] > .wrap { max-width: var(--hero-content-max-width); align-content: center; }
:root [data-hero-variant]:not([data-hero-variant="compact"]) > .wrap { min-height: calc(var(--hero-min-block-size-desktop) - var(--hero-padding-block-start) - var(--hero-padding-block-end)); }
:root [data-hero-variant="service-cta"] > .wrap, :root [data-hero-variant="editorial"] > .wrap { min-height: calc(var(--hero-min-block-size-editorial) - var(--hero-padding-block-start) - var(--hero-padding-block-end)); display: grid; }
/* typography */
:root [data-hero-variant] h1 { font-size: var(--hero-heading-size-desktop); line-height: var(--hero-heading-line-height); letter-spacing: var(--hero-heading-letter-spacing); max-width: var(--hero-heading-max-measure); color: var(--hero-text); text-wrap: balance; }
:root [data-hero-variant] h1 + p, :root [data-hero-variant] .lede, :root [data-hero-variant] [class*="-lede"]:not([class*="wzs-"]) { font-size: var(--hero-body-size); line-height: var(--hero-body-line-height); max-width: var(--hero-body-max-measure); color: var(--hero-text-muted); }
:root [data-hero-variant] .btn { gap: var(--hero-action-gap); }
:root [data-hero-variant] :is(.hero-cta, .acts, .ctas, .svc-hero-cta, .cta-row) { gap: var(--hero-action-gap); }
/* panel */
:root [data-hero-variant] :is(aside, form, [class*="wiz"], [class*="-panel"], [class*="shell"], [class*="facts"], [class*="planner"]) { max-width: var(--hero-tool-max-width); border-radius: var(--hero-image-radius); }
:root [data-hero-variant] :is(aside, form, [class*="wiz"], [class*="-panel"], [class*="shell"], [class*="facts"]) :focus-visible { outline-color: var(--hero-focus-ring); }
@media (max-width: 1000px) {
  :root [data-hero-variant="planner"], :root [data-hero-variant="service-wizard"], :root [data-hero-variant="intake"] { min-block-size: var(--hero-min-block-size-tablet); }
  :root [data-hero-variant]:not([data-hero-variant="compact"]) > .wrap, :root [data-hero-variant="service-cta"] > .wrap, :root [data-hero-variant="editorial"] > .wrap { min-height: 0; }
  :root [data-hero-variant] h1 { font-size: var(--hero-heading-size-tablet); }
  :root [data-hero-variant] :is(aside, form, [class*="wiz"], [class*="-panel"], [class*="shell"], [class*="facts"], [class*="planner"]) { max-width: none; }
}
@media (max-width: 640px) {
  :root [data-hero-variant] { padding-block: 40px 44px; min-block-size: var(--hero-min-block-size-mobile); }
  :root [data-hero-variant] h1 { font-size: var(--hero-heading-size-mobile); }
  :root [data-hero-variant] h1 + p, :root [data-hero-variant] .lede, :root [data-hero-variant] [class*="-lede"]:not([class*="wzs-"]) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { :root [data-hero-variant] * { transition-duration: 0s; } }