/* Generated by css/build-css.js (flat: no cascade layers). Do not edit. */


/* Generated by tokens/build.js from tokens/tokens.json. Do not edit. */
  .bu.bu {
    /* color */
    --color-red: #ce1432;
    --color-red-hover: #ac1a2c;
    --color-blue: #a3bee0;
    --color-black: #121212;
    --color-gray-dark: #5a5a5c;
    --color-gray-medium: #939598;
    --color-gray-light: #d2d3d4;
    --color-gray-bg: #f5f5f5;
    --color-white: #ffffff;
    --color-text: #121212;
    --color-text-muted: #5a5a5c;
    --color-text-subtle: #939598;
    --color-text-inverse: #ffffff;
    --color-heading: #5a5a5c;
    --color-heading-strong: #121212;
    --color-link: #ce1432;
    --color-link-hover: #ac1a2c;
    --color-brand: #ce1432;
    --color-brand-hover: #ac1a2c;
    --color-accent: #a3bee0;
    --color-surface: #ffffff;
    --color-surface-stone: #f5f5f5;
    --color-surface-brand: #ce1432;
    --color-surface-tint: rgba(206, 20, 50, 0.1);
    --color-rule: #d2d3d4;
    --color-control-border: #5a5a5c;
    --color-focus: #ce1432;
    --color-error: #ce1432;

    /* font */
    --font-family-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Bebas Neue', 'Lato', sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* text */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-compact: 1rem;
    --text-body: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
    --text-lead: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
    --text-eyebrow: 0.9375rem;
    --text-button: 1rem;
    --text-h4: 1.125rem;
    --text-h3: 1.375rem;
    --text-h2: clamp(2rem, 1.63rem + 1.52vw, 3rem);
    --text-h1: clamp(2.5rem, 1.76rem + 3.05vw, 4.5rem);
    --text-hero-sub: clamp(1.25rem, 0.972rem + 1.14vw, 2rem);
    --text-stat: clamp(3.5rem, 2.98rem + 2.15vw, 4.9rem);

    /* leading */
    --leading-tight: 1;
    --leading-heading: 1.15;
    --leading-snug: 1.4;
    --leading-body: 1.55;

    /* tracking */
    --tracking-heading: -0.02em;
    --tracking-eyebrow: 0.067em;
    --tracking-button: 0.02em;

    /* space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-band: clamp(3rem, 2.26rem + 3.05vw, 5rem);
    --space-gutter: 1.5rem;
    --space-stack: 1rem;

    /* size */
    --size-measure-prose: 800px;
    --size-grid: 1200px;
    --size-page: 1500px;
    --size-measure-text: 70ch;

    /* radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* border */
    --border-width: 1px;
    --border-width-strong: 2px;
    --border-width-rule: 4px;

    /* shadow */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.18);

    /* motion */
    --motion-fast: 150ms;
    --motion-base: 300ms;
    --motion-ease: ease;

    /* breakpoint */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1100px;
    --breakpoint-xl: 1440px;

    /* z */
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 1000;
  }

/* ---- base ---- */
/* base — element defaults inside the .bu.bu scope. Typography only: no margins, no layout, so a
   host's existing spacing survives. Explicit where a host's legacy element rules could leak in
   (font-family, text-transform, colour on headings). Decisions: visual-baseline.md §7, V1–V6. */
  .bu.bu {
    font-family: var(--font-family-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
  }

  .bu.bu :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading-strong);
    text-transform: none;
    text-wrap: balance;
  }
  .bu.bu h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
  .bu.bu h2 { font-size: var(--text-h2); font-weight: var(--font-weight-black); color: var(--color-heading); }
  .bu.bu h3 { font-size: var(--text-h3); }
  .bu.bu h4 { font-size: var(--text-h4); }
  .bu.bu :is(h5, h6) { font-size: var(--text-body); }

  .bu.bu p { line-height: var(--leading-body); }

  /* content links only: never navigation, header or footer lists. :where() keeps the exclusion at
     zero specificity, so this is (0,1,3) and a component's own link rule (.bu.bu .card__title a) wins. */
  .bu.bu :is(p, li, dd, td, th, figcaption) a:not(:where(nav, header, footer, [role="navigation"]) a) {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .bu.bu :is(p, li, dd, td, th, figcaption) a:not(:where(nav, header, footer, [role="navigation"]) a):hover { color: var(--color-link-hover); }

  .bu.bu img, .bu.bu video { max-inline-size: 100%; block-size: auto; }

  .bu.bu :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* ---- band ---- */
/* band — contract: components/band/band.html
   The section surface. Owns padding, content width and the flow gaps between its children so
   neither the editor nor the component has to. Variants: (none) white · --stone · --brand · --tight. */
  .bu.bu .band {
    --_gap: var(--space-6);
    /* the content width is the band's own padding, so children need no width or centring rules */
    padding-block: var(--space-band);
    padding-inline: max(var(--space-gutter), calc((100% - var(--size-grid)) / 2));
    background: var(--color-surface);
    color: var(--color-text);
  }
  /* (0,3,0): children reset their own margins at (0,2,0), and the band must win those ties */
  .bu.bu .band > :not(:first-child) { margin-block-start: var(--_gap); }
  .bu.bu .band > :last-child { margin-block-end: 0; }
  /* a paragraph directly in the band reads at the prose measure; longer copy goes in .prose */
  .bu.bu .band > p:not(.lead) { max-inline-size: var(--size-measure-prose); }   /* the lead keeps its own 60ch */

  /* the heading group sits tighter than the gap to the component */
  .bu.bu .band > .eyebrow + :is(h1, h2, h3) { margin-block-start: var(--space-2); }
  .bu.bu .band > :is(h1, h2, h3) + .lead { margin-block-start: var(--space-3); }

  .bu.bu .band--stone { background: var(--color-surface-stone); }

  .bu.bu .band--brand {
    background: var(--color-surface-brand);
    color: var(--color-text-inverse);
  }
  .bu.bu .band--brand > :is(h1, h2, h3, h4, .eyebrow, .lead) { color: var(--color-text-inverse); }
  /* prose links would be brand red on brand red; components inside keep their own link rules */
  .bu.bu .band--brand :is(p, li) a { color: inherit; }
  .bu.bu .band--brand :is(p, li) a:hover { color: inherit; text-decoration-thickness: 2px; }

  .bu.bu .band--tight { padding-block: var(--space-7); }

/* ---- button ---- */
/* button — contract: components/button/button.html
   Direction: the theme's components/bits/button (homepage), ported to tokens and the contract
   shape, with focus-visible, disabled, sizes and an optional arrow. Decisions in README.md.
   Base = primary. Modifiers: --secondary, --tertiary, --on-dark, --sm, --block. */
  .bu.bu .button {
    /* per-variant knobs; the rules below only read these */
    --_fg: var(--color-text-inverse);
    --_bg: var(--color-brand);
    --_bd: var(--color-brand);
    --_fg-hover: var(--color-brand);
    --_bg-hover: transparent;
    --_bd-hover: var(--color-brand);
    --_icon: var(--color-accent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    inline-size: auto;
    min-block-size: 2.75rem;                 /* 44px touch target */
    padding: var(--space-3) var(--space-5);  /* 12px 24px */
    border: var(--border-width-strong) solid var(--_bd);
    border-radius: var(--radius-md);
    background: var(--_bg);
    color: var(--_fg);
    font-family: var(--font-family-body);
    font-size: var(--text-button);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    text-decoration: none;
    text-transform: none;                    /* hosts often uppercase every <button> */
    text-align: center;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--motion-base) var(--motion-ease),
                border-color var(--motion-base) var(--motion-ease),
                color var(--motion-base) var(--motion-ease);
  }
  .bu.bu .button:hover,
  .bu.bu .button:active {
    background: var(--_bg-hover);
    border-color: var(--_bd-hover);
    color: var(--_fg-hover);
  }
  .bu.bu .button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .bu.bu .button__icon {
    flex: none;
    inline-size: 1.375em;
    block-size: 1.375em;
    color: var(--_icon);
    transition: transform var(--motion-base) var(--motion-ease);
  }
  .bu.bu .button:hover .button__icon,
  .bu.bu .button:active .button__icon {
    transform: translateX(4px);
  }

  /* secondary: outlined, fills on hover */
  .bu.bu .button--secondary {
    --_fg: var(--color-brand);
    --_bg: transparent;
    --_bd: var(--color-brand);
    --_fg-hover: var(--color-text-inverse);
    --_bg-hover: var(--color-brand);
    --_bd-hover: var(--color-brand);
  }

  /* tertiary: bold underlined text, optional arrow; keeps the button's height so pairs align */
  .bu.bu .button--tertiary {
    --_fg: var(--color-brand);
    --_bg: transparent;
    --_bd: transparent;
    --_fg-hover: var(--color-brand);
    --_bg-hover: transparent;
    --_bd-hover: transparent;
    padding-inline: 0;
    font-weight: var(--font-weight-bold);
  }
  .bu.bu .button--tertiary .button__text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: text-decoration-thickness var(--motion-base) var(--motion-ease);
  }
  .bu.bu .button--tertiary:hover .button__text,
  .bu.bu .button--tertiary:active .button__text {
    text-decoration-thickness: 3px;
  }

  /* on a brand (red) surface */
  .bu.bu .button--on-dark {
    --_fg: var(--color-brand);
    --_bg: var(--color-surface);
    --_bd: var(--color-surface);
    --_fg-hover: var(--color-text-inverse);
    --_bg-hover: transparent;
    --_bd-hover: var(--color-surface);
  }
  .bu.bu .button--secondary.button--on-dark {
    --_fg: var(--color-text-inverse);
    --_bg: transparent;
    --_bd: var(--color-surface);
    --_fg-hover: var(--color-brand);
    --_bg-hover: var(--color-surface);
    --_bd-hover: var(--color-surface);
  }
  .bu.bu .button--tertiary.button--on-dark {
    --_fg: var(--color-text-inverse);
    --_bg: transparent;
    --_bd: transparent;
    --_fg-hover: var(--color-text-inverse);
    --_bg-hover: transparent;
    --_bd-hover: transparent;
  }
  .bu.bu .button--on-dark:focus-visible {
    outline-color: var(--color-surface);
  }

  /* sizes */
  .bu.bu .button--sm {
    min-block-size: 2.25rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
  .bu.bu .button--block {
    display: flex;
    inline-size: 100%;
  }

  /* disabled */
  .bu.bu .button:disabled,
  .bu.bu .button[aria-disabled="true"] {
    --_fg: var(--color-text-muted);
    --_bg: var(--color-gray-light);
    --_bd: var(--color-gray-light);
    --_icon: var(--color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
  }

  /* button-group: one to three buttons in a row, wrapping on narrow containers.
     The hero has its own (page-hero__actions); this is for buttons in a section. */
  .bu.bu .button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .bu.bu .button-group--center { justify-content: center; }

/* ---- card ---- */
/* card — contract: components/card/card.html
   First designed (not measured) contract; chosen from four treatments on 2026-09-30.
   Default: outlined. Modifier: --plain (no box). Grid: .card-grid with --card-min. */
  .bu.bu .card-grid {
    --card-min: 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bu.bu .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--motion-base) var(--motion-ease);
  }
  .bu.bu .card:hover { border-color: var(--color-brand); }
  .bu.bu .card:has(.card__title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

  .bu.bu .card__media { aspect-ratio: 3 / 2; overflow: hidden; }
  .bu.bu .card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  .bu.bu .card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
  }
  .bu.bu .card__body > * { margin: 0; }
  .bu.bu .card__body > * + * { margin-block-start: var(--space-3); }

  .bu.bu .card__eyebrow {
    font-size: var(--text-eyebrow);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-heading);
  }
  .bu.bu .card__eyebrow + .card__title { margin-block-start: var(--space-2); }

  .bu.bu .card__title {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading-strong);
    text-wrap: balance;
  }
  .bu.bu .card__title a { color: inherit; font-weight: inherit; text-decoration: none; }   /* weight too: hosts often set one on content links */
  .bu.bu .card__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link target */
  .bu.bu .card__title a:focus { outline: none; }                                /* the card draws the ring instead */
  .bu.bu .card:hover .card__title a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }

  .bu.bu .card__lead {
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
  }
  .bu.bu .card__meta {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }
  .bu.bu .card__text {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  .bu.bu .card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand);
  }
  .bu.bu .card__cta svg {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
    color: var(--color-accent);
    transition: transform var(--motion-base) var(--motion-ease);
  }
  .bu.bu .card:hover .card__cta svg { transform: translateX(4px); }

  /* plain: no box; the grid draws hairlines between rows */
  .bu.bu .card-grid--plain { gap: 0; border-block-start: var(--border-width) solid var(--color-rule); }
  .bu.bu .card--plain {
    border: 0;
    border-radius: 0;
    border-block-end: var(--border-width) solid var(--color-rule);
    background: transparent;
  }
  .bu.bu .card--plain .card__body { padding-inline: 0; padding-inline-end: var(--space-6); }
  .bu.bu .card--plain:hover { border-color: var(--color-rule); }

/* ---- event-announcement ---- */
/* event-announcement — contract: components/event-announcement/event-announcement.html
   One featured occurrence of a recurring event, in the card's box. Parts marked data-when show
   in one state only; the state is switched with the `hidden` attribute (by the host at render,
   by elements/bu-event-announcement.js in the browser), never by a class. */
  .bu.bu bu-event-announcement { display: block; }

  .bu.bu .event-announcement {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  /* components inside set their own display, which would beat the UA's [hidden] rule */
  .bu.bu .event-announcement[hidden],
  .bu.bu .event-announcement [hidden] { display: none; }

  /* stacked by default; the photo keeps the face when it is cropped to a band */
  .bu.bu .event-announcement__media {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-surface-stone);
  }
  .bu.bu .event-announcement__media img {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 20%;
  }

  .bu.bu .event-announcement__body {
    flex: 1 1 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-5);
  }
  .bu.bu .event-announcement__body > * { margin: 0; }
  .bu.bu .event-announcement__body > * + * { margin-block-start: var(--space-4); }

  /* beside the body once there is room: 3:4 at least, stretching if the body is taller */
  @container (min-width: 40rem) {
    .bu.bu .event-announcement__media { flex: 0 0 min(30%, 16rem); aspect-ratio: 3 / 4; }
    .bu.bu .event-announcement__body { flex: 1 1 0; padding: var(--space-6); }
  }

  .bu.bu .event-announcement__kicker {
    font-size: var(--text-eyebrow);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-heading);
  }
  .bu.bu .event-announcement__body > .event-announcement__kicker + .event-announcement__headline { margin-block-start: var(--space-2); }
  .bu.bu .event-announcement__headline {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading-strong);
    text-wrap: balance;
  }

  .bu.bu .event-announcement__details { line-height: var(--leading-snug); }
  /* the size is explicit: hosts often size every paragraph in their content region */
  .bu.bu .event-announcement__details p { margin: 0; font-size: var(--text-body); line-height: inherit; }
  .bu.bu .event-announcement__date { font-weight: var(--font-weight-bold); color: var(--color-heading-strong); }
  .bu.bu .event-announcement__venue { color: var(--color-text-muted); }

  .bu.bu .event-announcement__text {
    max-inline-size: var(--size-measure-text);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  /* the after-the-event note that replaces the announcement */
  .bu.bu .event-announcement__note {
    flex: 1 1 100%;
    margin: 0;
    padding: var(--space-5);
    font-size: var(--text-body);
    color: var(--color-text-muted);
  }
  @container (min-width: 40rem) {
    .bu.bu .event-announcement__note { padding: var(--space-5) var(--space-6); }
  }

/* ---- eyebrow ---- */
/* eyebrow — contract: components/eyebrow/eyebrow.html
   The 2026 signature above a section heading (V6): Lato 400 15px, +1px tracking, uppercase, grey.
   Carries no margin; the container (band) sets the gap to the heading. */
  .bu.bu .eyebrow {
    margin: 0;
    font-size: var(--text-eyebrow);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-heading);
  }

/* ---- fact-list ---- */
/* fact-list — contract: components/fact-list/fact-list.html
   Labelled rows: a heading on the left, freeform content on the right, hairlines between.
   A fact's first child is its label; everything after it is the body (no wrapper, so a host
   can build it from plain containers). Side by side once the list is 44rem wide.
   Modifier: --compact (short labels, one line of content: Who / Cost / Time). */
  .bu.bu .fact-list {
    --_label: 16rem;
    container-type: inline-size;
    border-block-start: var(--border-width) solid var(--color-rule);
  }

  .bu.bu .fact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-5);
    border-block-end: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .fact > * { margin: 0; min-inline-size: 0; }
  .bu.bu .fact > * + * { margin-block-start: var(--space-3); }

  .bu.bu .fact > :first-child {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading-strong);
    text-wrap: balance;
  }
  /* the size is explicit: hosts often size every paragraph and list item in their content region */
  .bu.bu .fact > :is(p, ul, ol):not(:first-child, .stat-strip, .steps, .card-grid) { max-inline-size: var(--size-measure-text); font-size: var(--text-body); line-height: var(--leading-body); }
  .bu.bu .fact > :is(ul, ol):not(.stat-strip, .steps, .card-grid) { padding-inline-start: var(--space-5); }
  .bu.bu .fact li { font-size: var(--text-body); line-height: var(--leading-body); }

  @container (min-width: 44rem) {
    .bu.bu .fact { grid-template-columns: var(--_label) minmax(0, 1fr); column-gap: var(--space-7); }
    .bu.bu .fact > :first-child { grid-column: 1; grid-row: 1 / span 30; }
    .bu.bu .fact > :not(:first-child) { grid-column: 2; }
    .bu.bu .fact > :nth-child(2) { margin-block-start: 0; }
  }

  .bu.bu .fact-list--compact { --_label: 8rem; }
  .bu.bu .fact-list--compact .fact { padding-block: var(--space-3); }
  .bu.bu .fact-list--compact .fact > :first-child {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: 0;
  }
  @container (min-width: 24rem) {
    .bu.bu .fact-list--compact .fact { grid-template-columns: var(--_label) minmax(0, 1fr); column-gap: var(--space-5); }
    .bu.bu .fact-list--compact .fact > :first-child { grid-column: 1; grid-row: 1 / span 30; }
    .bu.bu .fact-list--compact .fact > :not(:first-child) { grid-column: 2; }
    .bu.bu .fact-list--compact .fact > :nth-child(2) { margin-block-start: 0; }
  }

/* ---- form ---- */
/* form — contract: components/form/form.html
   Labels above controls, one field per line unless a .form__row pairs them, hint before the
   control and the error after it, a status banner at the top, actions at the end. Treatment A
   (hairline box: 1px near-grey border, 4px radius, white field). Decisions in decisions.md.

   Two roots share every rule: `.bu .form` (our markup, inside the scope like every contract) and
   `form[data-fw-form]`, the <form> that Slate's embed script generates on a page. The Slate root
   is its own scope: it can't match anything but a Slate form, so it needs no `.bu` ancestor and no
   tagging of embeds; the build gives that root the tokens (css/build-css.js). Slate's structural
   classes (.form_question, .form_label, …) are mapped in form.host.css, which ships unlayered
   because Slate's own embed.css is unlayered. */
  :is(.bu.bu .form, form[data-fw-form]) {
    --form-max: 40rem;                 /* a form is narrower than prose: 640px */
    --_control-h: 2.75rem;             /* 44px, the button's height */
    box-sizing: border-box;
    max-inline-size: var(--form-max);
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--text-compact);
    line-height: var(--leading-body);
    text-align: start;
  }
  :is(.bu.bu .form, form[data-fw-form]) * { box-sizing: border-box; }

  /* a field: label, hint, control, error */
  .bu.bu .form__field {
    min-inline-size: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
  }
  .bu.bu .form__row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
  }
  .bu.bu .form__row > .form__field { flex: 1 1 12rem; }

  .bu.bu .form__label {
    display: block;
    margin: 0 0 var(--space-2);
    padding: 0;
    float: none;
    font-size: var(--text-compact);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading-strong);
  }
  .bu.bu .form__required {
    margin-inline-start: 0.15em;
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
  }
  .bu.bu .form__hint {
    margin: calc(-1 * var(--space-1)) 0 var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }
  .bu.bu .form__error {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-error);
  }
  .bu.bu .form__error svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; }

  /* text-like controls */
  :is(.bu.bu .form, form[data-fw-form]) :is(
    input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="image"]),
    select,
    textarea
  ) {
    display: block;
    inline-size: 100%;
    min-block-size: var(--_control-h);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-control-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-compact);   /* 16px in rem: never below the size that makes iOS zoom */
    line-height: var(--leading-snug);
    box-shadow: none;
    appearance: none;
    transition: border-color var(--motion-fast) var(--motion-ease);
  }
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea)::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
  }
  :is(.bu.bu .form, form[data-fw-form]) textarea {
    min-block-size: calc(var(--_control-h) * 2);
    line-height: var(--leading-body);
    resize: vertical;
  }
  /* select: the native arrow is replaced by a chevron drawn in the text colour (no image, no hex) */
  :is(.bu.bu .form, form[data-fw-form]) select:not([multiple], [size]:not([size="1"])) {
    padding-inline-end: var(--space-7);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
      linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
    background-size: 0.375rem 0.375rem;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-error);
    border-width: var(--border-width-strong);
  }
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea):disabled,
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea)[readonly] {
    background-color: var(--color-surface-stone);
    color: var(--color-text-muted);
  }
  :is(.bu.bu .form, form[data-fw-form]) :is(input, select, textarea):disabled { cursor: not-allowed; }

  /* checkboxes and radios: a list of choices, each control beside its own label */
  .bu.bu .form__choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
  }
  .bu.bu .form__choices--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .bu.bu .form__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
  }
  .bu.bu .form__choice label {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: var(--text-compact);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    color: var(--color-text);
    cursor: pointer;
  }
  :is(.bu.bu .form, form[data-fw-form]) input:is([type="checkbox"], [type="radio"]) {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0.125rem 0 0;
    accent-color: var(--color-brand);
    cursor: pointer;
  }
  :is(.bu.bu .form, form[data-fw-form]) input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* status banner: the accordion panel's idiom, a tinted field with a rule on the left */
  .bu.bu .form__status {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--border-width-rule) solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-surface-stone);
    color: var(--color-text);
    font-size: var(--text-compact);
    line-height: var(--leading-body);
  }
  .bu.bu .form__status > svg { flex: none; inline-size: 1.375rem; block-size: 1.375rem; margin-block-start: 0.1em; color: var(--color-text-muted); }
  .bu.bu .form__status > div > * { margin: 0; }
  .bu.bu .form__status > div > * + * { margin-block-start: var(--space-1); }
  .bu.bu .form__status ul { padding-inline-start: var(--space-5); }
  .bu.bu .form__status--error {
    border-inline-start-color: var(--color-error);
    background: var(--color-surface-tint);
  }
  .bu.bu .form__status--error > svg { color: var(--color-error); }
  .bu.bu .form__status--success { border-inline-start-color: var(--color-accent); }
  .bu.bu .form__status strong { font-weight: var(--font-weight-bold); }

  /* actions: the submit and, at most, one quiet companion; room above it */
  .bu.bu .form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: var(--space-6) 0 0;
  }

/* ---- honor-roll ---- */
/* honor-roll — contract: components/honor-roll/honor-roll.html
   A dated list of recognitions. The year is a Bebas Neue numeral (V12: display type is for
   numerals and date blocks). Default: outlined tiles, the card's box. Modifier: --rows. */
  .bu.bu .honor-roll {
    --honor-min: 15rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--honor-min), 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bu.bu .honor {
    position: relative;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-rule);
    border-radius: var(--radius-md);
  }
  .bu.bu .honor > * { margin: 0; }

  .bu.bu .honor__year {
    font-family: var(--font-family-display);
    font-size: var(--text-h3);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: 0.02em;
    color: var(--color-brand);
  }
  .bu.bu .honor__name {
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-heading-strong);
  }
  .bu.bu .honor__year + .honor__name { margin-block-start: var(--space-1); }
  .bu.bu .honor__name a { color: inherit; font-weight: inherit; text-decoration: none; }
  .bu.bu .honor__name a::after { content: ""; position: absolute; inset: 0; }
  .bu.bu .honor__name a:focus { outline: none; }
  .bu.bu .honor:hover .honor__name a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }
  .bu.bu .honor:has(.honor__name a) { transition: border-color var(--motion-base) var(--motion-ease); }
  .bu.bu .honor:has(.honor__name a):hover { border-color: var(--color-brand); }
  .bu.bu .honor:has(.honor__name a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

  .bu.bu .honor__title {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }

  /* rows: the year in its own column, hairlines between, no boxes */
  .bu.bu .honor-roll--rows {
    --honor-min: 22rem;
    gap: 0 var(--space-6);
    border-block-start: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .honor-roll--rows .honor {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    column-gap: var(--space-4);
    align-content: start;
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-block-end: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .honor-roll--rows .honor:has(.honor__name a):hover { border-color: var(--color-rule); }
  .bu.bu .honor-roll--rows .honor__year { grid-row: 1 / span 2; }
  .bu.bu .honor-roll--rows .honor__name,
  .bu.bu .honor-roll--rows .honor__title { grid-column: 2; }
  .bu.bu .honor-roll--rows .honor__year + .honor__name { margin-block-start: 0; }
  /* a list with no years at all gives the year column back */
  .bu.bu .honor-roll--rows:not(:has(.honor__year)) .honor { grid-template-columns: 1fr; }
  .bu.bu .honor-roll--rows:not(:has(.honor__year)) .honor > * { grid-column: 1; }
  /* One column wide (a phone): tiles become rows, so a long list is not a long page.
     The list is its own container; a container can restyle its entries but not itself, so the
     hairline is each entry's top border and the grid keeps its gap. */
  .bu.bu .honor-roll { container-type: inline-size; }
  @container (max-width: 31rem) {
    .bu.bu .honor-roll:not(.honor-roll--rows) > .honor {
      display: grid;
      grid-template-columns: 3.5rem 1fr;
      column-gap: var(--space-4);
      align-content: start;
      padding: var(--space-4) 0 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      border-block-start: var(--border-width) solid var(--color-rule);
    }
    .bu.bu .honor-roll:not(.honor-roll--rows) > .honor:has(.honor__name a):hover { border-color: var(--color-rule); }
    .bu.bu .honor-roll:not(.honor-roll--rows) .honor__year { grid-row: 1 / span 2; }
    .bu.bu .honor-roll:not(.honor-roll--rows) :is(.honor__name, .honor__title) { grid-column: 2; }
    .bu.bu .honor-roll:not(.honor-roll--rows) .honor__year + .honor__name { margin-block-start: 0; }
    .bu.bu .honor-roll:not(.honor-roll--rows):not(:has(.honor__year)) > .honor { grid-template-columns: 1fr; }
    .bu.bu .honor-roll:not(.honor-roll--rows):not(:has(.honor__year)) > .honor > * { grid-column: 1; }
  }

  /* <bu-honor-roll>: at the same width, the first six entries and a button for the rest.
     The element sets `collapsed` and adds the button; without the script the whole list shows. */
  .bu.bu bu-honor-roll { display: block; container-type: inline-size; }
  .bu.bu .honor-roll__more { display: none; margin-block-start: var(--space-5); }
  @container (max-width: 31rem) {
    .bu.bu bu-honor-roll[collapsed] .honor:nth-child(n + 7) { display: none; }
    .bu.bu bu-honor-roll[collapsed] .honor-roll__more { display: flex; }
  }

/* ---- lead ---- */
/* lead — contract: components/lead/lead.html
   Intro paragraph under a section heading: 18 → 20px fluid, snug leading, 60ch measure.
   Carries no margin; the container (band) sets the gap from the heading. */
  .bu.bu .lead {
    margin: 0;
    max-inline-size: 60ch;
    font-size: var(--text-lead);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
  }

/* ---- media-feature ---- */
/* media-feature — contract: components/media-feature/media-feature.html
   A video or photo beside freeform copy. Open on the band (no box). Media first in the markup;
   side by side once the component itself is 44rem wide. Modifiers: --reverse, --narrow. */
  .bu.bu .media-feature {
    --_media: 58%;
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5) var(--space-7);
  }
  .bu.bu .media-feature--narrow { --_media: 40%; }

  .bu.bu .media-feature__media { flex: 0 0 100%; min-inline-size: 0; margin: 0; }
  .bu.bu .media-feature__media img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-none); }

  .bu.bu .media-feature__video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-stone);
  }
  .bu.bu .media-feature__video :is(iframe, video) {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    object-fit: cover;
  }

  .bu.bu .media-feature__caption {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }

  .bu.bu .media-feature__body { flex: 1 1 100%; min-inline-size: 0; }
  .bu.bu .media-feature__body > * { margin: 0; }
  .bu.bu .media-feature__body > * + * { margin-block-start: var(--space-4); }
  /* the size is explicit: hosts often size every paragraph and list item in their content region */
  .bu.bu .media-feature__body :is(p, li) { font-size: var(--text-body); line-height: var(--leading-body); text-wrap: pretty; }
  .bu.bu .media-feature__body > :is(ul, ol) { padding-inline-start: var(--space-5); }

  @container (min-width: 44rem) {
    .bu.bu .media-feature__media { flex: 0 0 calc(var(--_media) - var(--space-7) / 2); }
    .bu.bu .media-feature__body { flex: 1 1 0; }
    .bu.bu .media-feature--reverse .media-feature__media { order: 2; }
  }

/* ---- note ---- */
/* note — contract: components/note/note.html
   An aside for some readers: a short heading, a few sentences in smaller type, an optional icon
   and one optional text-link button. Sits among other content in a band, at the prose measure.
   The card's outlined box; the icon sits in a red-tint circle. */
  .bu.bu .note {
    display: flex;
    flex-wrap: wrap;   /* the body drops below the icon when it would be under 16rem beside it */
    gap: var(--space-3) var(--space-4);
    box-sizing: border-box;
    max-inline-size: var(--size-measure-prose);
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    color: var(--color-text);
  }

  .bu.bu .note__icon {
    flex: none;
    box-sizing: border-box;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-tint);
    color: var(--color-brand);
  }
  .bu.bu .note__icon svg { display: block; inline-size: 100%; block-size: 100%; }

  .bu.bu .note__body { flex: 1 1 16rem; min-inline-size: 0; }
  .bu.bu .note .button { text-align: start; }
  .bu.bu .note__body > * { margin: 0; }
  .bu.bu .note__body > * + * { margin-block-start: var(--space-3); }

  .bu.bu .note__title {
    font-size: var(--text-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: 0;
    color: var(--color-heading-strong);
  }
  .bu.bu .note__title + .note__text { margin-block-start: var(--space-2); }

  .bu.bu .note__text > * { margin: 0; }
  .bu.bu .note__text > * + * { margin-block-start: var(--space-2); }
  /* the size is explicit: hosts often size every paragraph and list item in their content region */
  .bu.bu .note__text :is(p, li) { font-size: var(--text-compact); line-height: var(--leading-body); text-wrap: pretty; }
  .bu.bu .note__text :is(ul, ol) { padding-inline-start: var(--space-5); }

/* ---- page-hero ---- */
/* page-hero — contract: components/page-hero/page-hero.html
   Replaces template-parts/featured-image.php (15 templates) and the hand-built Kadence
   photo + red-fade hero on the no-feat-image pages (visual-baseline.md §4.3).
   Surfaces: (none) plain · --brand · --split · --fade. Alignment: centred · --start.
   Decisions: README.md. */
  .bu.bu .page-hero {
    --_fg: var(--color-heading-strong);
    --_fg-soft: var(--color-heading);
    --_bg: var(--color-surface-stone);
    --hero-focus: 50% 50%;

    position: relative;
    display: grid;
    align-items: center;
    box-sizing: border-box;
    padding-block: var(--space-band);
    padding-inline: var(--space-gutter);
    background: var(--_bg);
    color: var(--_fg);
  }

  .bu.bu .page-hero__content {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--size-measure-prose);
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  .bu.bu .page-hero__content > * { margin: 0; }
  .bu.bu .page-hero__content > * + * { margin-block-start: var(--space-4); }

  .bu.bu .page-hero__eyebrow {
    font-size: var(--text-eyebrow);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--_fg-soft);
  }
  .bu.bu .page-hero__eyebrow + .page-hero__title { margin-block-start: var(--space-2); }

  .bu.bu .page-hero__title {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
    color: var(--_fg);
  }

  .bu.bu .page-hero__lead {
    font-size: var(--text-hero-sub);
    line-height: var(--leading-snug);
    text-wrap: pretty;
  }

  .bu.bu .page-hero__meta {
    font-size: var(--text-body);
    line-height: var(--leading-snug);
    color: var(--_fg-soft);
  }

  .bu.bu .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }

  .bu.bu .page-hero__media img,
  .bu.bu .page-hero__media video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--hero-focus);
  }

  /* alignment (plain and brand) */
  .bu.bu .page-hero--start .page-hero__content { margin-inline: 0; text-align: start; }
  .bu.bu .page-hero--start .page-hero__actions { justify-content: flex-start; }
  @media (min-width: 900px) {
    .bu.bu .page-hero--start .page-hero__content { max-inline-size: var(--size-grid); margin-inline: auto; }
    .bu.bu .page-hero--start .page-hero__lead { max-inline-size: 48ch; }
  }

  /* brand: red band, white text */
  .bu.bu .page-hero--brand {
    --_fg: var(--color-text-inverse);
    --_fg-soft: var(--color-text-inverse);
    --_bg: var(--color-surface-brand);
  }

  /* split: text panel beside a clear photo; combines with --brand for a red panel */
  .bu.bu .page-hero--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    min-block-size: clamp(22rem, 40vw, 36.5rem);
    padding: 0;
  }
  .bu.bu .page-hero--split .page-hero__content {
    align-self: center;
    max-inline-size: none;
    margin-inline: 0;
    /* left edge lines up with a centred 1200px grid; never less than the gutter */
    padding: var(--space-band) var(--space-7) var(--space-band)
             max(var(--space-gutter), calc((100vw - var(--size-grid)) / 2));
    text-align: start;
  }
  .bu.bu .page-hero--split .page-hero__actions { justify-content: flex-start; }
  .bu.bu .page-hero--split .page-hero__media { position: relative; }
  .bu.bu .page-hero--split .page-hero__media img,
  .bu.bu .page-hero--split .page-hero__media video { position: absolute; inset: 0; }
  @media (max-width: 767px) {
    .bu.bu .page-hero--split { grid-template-columns: 1fr; min-block-size: 0; }
    .bu.bu .page-hero--split .page-hero__media { order: -1; aspect-ratio: 4 / 3; }
    .bu.bu .page-hero--split .page-hero__content { max-inline-size: none; padding-inline: var(--space-gutter); }
  }

  /* fade: photo above, red fade on its bottom 38%, title lifted into the fade, red band below */
  .bu.bu .page-hero--fade {
    --_fg: var(--color-text-inverse);
    --_fg-soft: var(--color-text-inverse);
    --_bg: var(--color-surface-brand);
    padding: 0;
  }
  .bu.bu .page-hero--fade .page-hero__media {
    order: -1;
    position: relative;
    min-block-size: clamp(16rem, 38vw, 34rem);
    overflow: hidden;
  }
  .bu.bu .page-hero--fade .page-hero__media img,
  .bu.bu .page-hero--fade .page-hero__media video { position: absolute; inset: 0; }
  .bu.bu .page-hero--fade .page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      var(--color-brand) 0%,
      color-mix(in srgb, var(--color-brand) 85%, transparent) 10%,
      transparent 38%);
  }
  .bu.bu .page-hero--fade .page-hero__content {
    margin-block-start: calc(-1 * var(--space-8));
    padding: 0 var(--space-gutter) var(--space-band);
  }
  @media (max-width: 767px) {
    .bu.bu .page-hero--fade .page-hero__media { min-block-size: 0; aspect-ratio: 4 / 3; }
    .bu.bu .page-hero--fade .page-hero__content { margin-block-start: calc(-1 * var(--space-6)); }
  }

/* ---- people-grid ---- */
/* people-grid — contract: components/people-grid/people-grid.html
   Chosen from four treatments on 2026-09-30 (explore.html): portrait is the default, row is the
   modifier for long rosters. Photos are 3:4 because 96% of the site's staff headshots are. */
  .bu.bu .people-grid {
    --person-min: 13rem;
    display: grid;
    /* never fewer than two across: a single column of portraits is a very long phone page */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--person-min), calc(50% - var(--space-5) / 2)), 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bu.bu .person { position: relative; }
  .bu.bu .person > * { margin: 0; }

  .bu.bu .person__photo {
    aspect-ratio: 3 / 4;
    margin-block-end: var(--space-3);
    overflow: hidden;
    background: var(--color-surface-stone);
  }
  .bu.bu .person__photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 20%;   /* a source that isn't 3:4 keeps the face, not the midriff */
  }

  .bu.bu .person__name {
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-heading-strong);
  }
  .bu.bu .person__name a { color: inherit; font-weight: inherit; text-decoration: none; }
  .bu.bu .person__name a::after { content: ""; position: absolute; inset: 0; }   /* the whole tile is the link target */
  .bu.bu .person__name a:focus { outline: none; }                                /* the tile draws the ring instead */
  .bu.bu .person:hover .person__name a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }
  .bu.bu .person:has(.person__name a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 4px; }

  .bu.bu .person__role {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }
  .bu.bu .person__tag {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand);
  }

  /* row: small photo beside the text, hairlines between; one column on a phone */
  .bu.bu .people-grid--row {
    --person-min: 19rem;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--person-min), 100%), 1fr));
    gap: 0 var(--space-6);
    border-block-start: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .people-grid--row .person {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    column-gap: var(--space-4);
    align-content: start;
    padding-block: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .people-grid--row .person__photo { grid-row: 1 / span 3; margin: 0; }
  .bu.bu .people-grid--row .person__name { padding-block-start: var(--space-1); }
  .bu.bu .people-grid--row .person__tag { grid-column: 2; }

/* ---- prose ---- */
/* prose — contract: components/prose/prose.html
   Running text at the reading measure (V13: 800px). Sets the measure and trims the first and last
   margins; spacing between paragraphs is the host's or the base layer's, not this component's; headings
   get a gap above so a run of question-and-answer pairs reads as pairs. */
  .bu.bu .prose { max-inline-size: var(--size-measure-prose); }
  .bu.bu .prose > :first-child { margin-block-start: 0; }
  .bu.bu .prose > :last-child { margin-block-end: 0; }
  /* a heading inside running text opens a new group: more above it than below */
  .bu.bu .prose > :is(h2, h3, h4):not(:first-child) { margin-block-start: var(--space-6); }
  .bu.bu .prose > :is(h2, h3, h4) { margin-block-end: var(--space-2); }

/* ---- quote ---- */
/* quote — contract: components/quote/quote.html
   Someone's words with their name. Open on the band under a red opening mark; several sit in a .quote-grid.
   The source line is a photo (optional), a name and a role. */
  .bu.bu .quote-grid {
    --quote-min: 20rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--quote-min), 100%), 1fr));
    align-items: start;
    gap: var(--space-6) var(--space-7);
  }

  .bu.bu .quote { margin: 0; }

  .bu.bu .quote__text { margin: 0; padding: 0; border: 0; quotes: "“" "”"; }
  .bu.bu .quote__text p { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); text-wrap: pretty; }
  .bu.bu .quote__text p + p { margin-block-start: var(--space-3); }
  .bu.bu .quote__text::before {
    content: open-quote;
    display: block;
    block-size: 0.55em;
    margin-block-end: var(--space-2);
    font-family: var(--font-family-display);
    font-size: var(--text-stat);
    line-height: var(--leading-tight);
    color: var(--color-brand);
  }

  .bu.bu .quote__source {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-4);
  }
  .bu.bu .quote__source:has(.quote__photo) { grid-template-columns: 3rem minmax(0, 1fr); }
  .bu.bu .quote__photo { grid-row: 1 / span 2; inline-size: 3rem; block-size: 3rem; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-pill); }
  .bu.bu .quote__name { font-size: var(--text-body); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); color: var(--color-heading-strong); }
  .bu.bu .quote__role { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }

  /* one quote on its own reads at the lead size */
  .bu.bu .quote--feature .quote__text p { font-size: var(--text-lead); }

/* ---- section-nav ---- */
/* section-nav — contract: components/section-nav/section-nav.html
   The bar below the hero: one nested list rendered as tiers when wide and as a tree behind a
   button when narrow. The nav is the container, so the switch follows the bar's own width.
   Rows never wrap: a row wider than the bar scrolls sideways, and a sub row stays pinned beneath it.
   Variants: (none) · --back. Decisions: decisions.md. */
  .bu.bu bu-section-nav { display: contents; }   /* the nav must stick against the page, not a wrapper */

  .bu.bu .section-nav {
    /* the content edge of a centred grid, or the gutter; 100cqi is the bar's own width */
    --_pad: max(var(--space-gutter), calc((100cqi - var(--size-grid)) / 2));
    position: sticky;   /* also the containing block for the edge fades */
    top: var(--section-nav-top, 0px);   /* the host sets this to its sticky header's height */
    z-index: var(--z-sticky);
    container-type: inline-size;
    background: var(--color-surface);
    color: var(--color-text);
    border-block-end: var(--border-width) solid var(--color-rule);
  }
  .bu.bu .section-nav__head { display: none; }

  /* ---- the list, as tiers ----
     A row is a grid flowing by column, so items never wrap; when they are wider than the bar the
     row scrolls sideways (no scrollbar drawn). A sub list is placed on the grid's second row and
     stuck to the left edge, so it stays put while the row above it scrolls and scrolls on its own.
     The side padding is carried by the first and last items so the scroll runs edge to edge. */
  .bu.bu .section-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .bu.bu .section-nav__list::-webkit-scrollbar { display: none; }
  .bu.bu .section-nav__list > li { display: flex; margin-inline-end: var(--space-6); }
  .bu.bu .section-nav__list > :first-child { margin-inline-start: var(--_pad); }
  .bu.bu .section-nav__list > li:last-child,
  .bu.bu .section-nav__list > .section-nav__branch:last-child > a { margin-inline-end: var(--_pad); }
  /* a branch keeps its link in the row and lets its own list fall through to the next row */
  .bu.bu .section-nav__list > .section-nav__branch { display: contents; }
  .bu.bu .section-nav__list > .section-nav__branch > a { margin-inline-end: var(--space-6); }

  .bu.bu .section-nav__list a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-block-size: 3.5rem;
    padding-block: var(--space-2);
    font-size: var(--text-compact);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-button);
    color: var(--color-heading);
    text-decoration: none;
    white-space: nowrap;
    border-block-end: 3px solid transparent;
    transition: color var(--motion-fast) var(--motion-ease);
  }
  /* the row is a scroll container, so a focus ring outside the link would be clipped */
  .bu.bu .section-nav__list a:focus-visible { outline-offset: -3px; }
  .bu.bu .section-nav__list a:hover { color: var(--color-text); }
  .bu.bu .section-nav__list a[aria-current="page"],
  .bu.bu .section-nav__branch > a {
    color: var(--color-text);
    border-block-end-color: var(--color-brand);
  }
  .bu.bu .section-nav__root { padding-inline-end: var(--space-6); border-inline-end: var(--border-width) solid var(--color-rule); }
  .bu.bu .section-nav__root a { color: var(--color-text); }

  /* a sub row: the grid's second row, as wide as the bar, pinned to the left while the row above
     scrolls; on stone, and the next level back on white. Up to 24 items per row. */
  .bu.bu .section-nav__list--sub {
    grid-row: 2;
    grid-column: 1 / span 24;
    position: sticky;
    inset-inline-start: 0;
    box-sizing: border-box;
    inline-size: 100cqi;
    border-block-start: var(--border-width) solid var(--color-rule);
    background: var(--color-surface-stone);
  }
  .bu.bu .section-nav__list--sub a { min-block-size: 2.75rem; font-size: var(--text-sm); }
  .bu.bu .section-nav__list--sub .section-nav__list--sub { background: var(--color-surface); }

  /* ---- fades at the edges of a row that scrolls ----
     The element reads each row's scroll position and sets data-scroll-1 (first row) and
     data-scroll-2 (sub row) on the nav: start · middle · end · none. The fades are the nav's two
     pseudo-elements laid over the rows, each in its row's own surface colour, so the text fades
     out where there is more to scroll to. Without the script there are no fades. */
  .bu.bu .section-nav::before,
  .bu.bu .section-nav::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
    --_fade-start: 0;
    --_fade-end: 0;
    background-image:
      linear-gradient(to right, var(--_surface), transparent),
      linear-gradient(to left, var(--_surface), transparent);
    background-repeat: no-repeat;
    background-position: left, right;
    background-size: calc(var(--_fade-start) * 3rem) 100%, calc(var(--_fade-end) * 3rem) 100%;
  }
  .bu.bu .section-nav::before { --_surface: var(--color-surface); top: 0; block-size: 3.5rem; }
  .bu.bu .section-nav::after { --_surface: var(--color-surface-stone); top: calc(3.5rem + var(--border-width)); block-size: 2.75rem; }
  .bu.bu .section-nav[data-scroll-1="start"]::before, .bu.bu .section-nav[data-scroll-1="middle"]::before { --_fade-end: 1; }
  .bu.bu .section-nav[data-scroll-1="middle"]::before, .bu.bu .section-nav[data-scroll-1="end"]::before { --_fade-start: 1; }
  .bu.bu .section-nav[data-scroll-2="start"]::after, .bu.bu .section-nav[data-scroll-2="middle"]::after { --_fade-end: 1; }
  .bu.bu .section-nav[data-scroll-2="middle"]::after, .bu.bu .section-nav[data-scroll-2="end"]::after { --_fade-start: 1; }

  /* ---- back: one link to the parent ---- */
  .bu.bu .section-nav--back { padding-inline: var(--_pad); }
  .bu.bu .section-nav__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-block-size: 3.5rem;
    font-size: var(--text-compact);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-button);
    color: var(--color-text);
    text-decoration: none;
  }
  .bu.bu .section-nav__back::before {
    content: "";
    flex: none;
    inline-size: .5em;
    block-size: .5em;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--color-heading);
    transition: color var(--motion-fast) var(--motion-ease);
  }
  .bu.bu .section-nav__back:hover::before { color: var(--color-brand); }

  /* ---- narrow: the root's name as a link, a toggle beside it, the list as a tree ---- */
  @container (width < 768px) {
    .bu.bu .section-nav__head { display: flex; align-items: stretch; gap: var(--space-3); min-block-size: 3.25rem; padding-inline: var(--_pad); }
    .bu.bu .section-nav__home {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      min-inline-size: 0;
      font-size: var(--text-compact);
      font-weight: var(--font-weight-bold);
      line-height: var(--leading-snug);
      color: var(--color-text);
      text-decoration: none;
    }
    .bu.bu .section-nav__toggle {
      flex: none;
      display: grid;
      place-items: center;
      inline-size: 3rem;
      margin: 0 calc(-1 * var(--space-3)) 0 0;
      padding: 0;
      border: 0;
      border-inline-start: var(--border-width) solid var(--color-rule);
      background: none;
      color: var(--color-text);
      cursor: pointer;
    }
    /* the element sets aria-expanded; without it there is no button and the tree shows open */
    .bu.bu .section-nav__toggle:not([aria-expanded]) { display: none; }
    .bu.bu .section-nav__toggle svg { transition: transform var(--motion-fast) var(--motion-ease); }
    .bu.bu .section-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

    .bu.bu .section-nav__list { display: flex; flex-direction: column; overflow: visible; padding: var(--space-2) 0 var(--space-3); }
    .bu.bu .section-nav__list > li, .bu.bu .section-nav__list > :first-child, .bu.bu .section-nav__list > .section-nav__branch > a { margin: 0; }
    .bu.bu .section-nav__head:has(.section-nav__toggle[aria-expanded="false"]) + .section-nav__list { display: none; }
    .bu.bu .section-nav__list > li, .bu.bu .section-nav__list > .section-nav__branch { display: block; }
    /* the head already names and links the root */
    .bu.bu .section-nav__list > .section-nav__root { display: none; }
    .bu.bu .section-nav__list--sub {
      position: static;
      inline-size: auto;
      margin: 0;
      padding: 0 0 0 var(--space-5);
      border: 0;
      background: none;
    }
    .bu.bu .section-nav__list a,
    .bu.bu .section-nav__list--sub a {
      display: flex;
      margin: 0;
      min-block-size: 2.75rem;
      padding-inline-start: var(--space-3);
      font-size: var(--text-compact);
      border-block-end: 0;
      border-inline-start: 3px solid transparent;
      white-space: normal;
    }
    .bu.bu .section-nav__list a[aria-current="page"] { border-inline-start-color: var(--color-brand); }
    .bu.bu .section-nav__branch > a { border-inline-start-color: transparent; }
    .bu.bu .section-nav__back { min-block-size: 3.25rem; }
    .bu.bu .section-nav::before, .bu.bu .section-nav::after { content: none; }
  }

/* ---- stat-strip ---- */
/* stat-strip — contract: components/stat-strip/stat-strip.html
   Finishes the theme's components/partials/stat (homepage statistics and rankings) as a
   contract and retires template-parts/stats-ribbon.php. Decisions in README.md.
   Variants: (none) centred with dividers · --start · --on-dark · --sm. */
  .bu.bu .stat-strip {
    --_value: var(--color-brand);
    --_label: var(--color-heading-strong);
    --_note: var(--color-text-muted);
    --_rule: var(--color-rule);
    --_value-size: var(--text-stat);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-6) 0;
    margin: 0;
    padding: 0;
    list-style: none;
    container-type: inline-size;
  }

  .bu.bu .stat {
    padding-inline: var(--space-5);
    text-align: center;
    border-inline-start: var(--border-width) solid var(--_rule);
  }
  .bu.bu .stat:first-child { border-inline-start: 0; }
  .bu.bu .stat > * { margin: 0; }

  .bu.bu .stat__value {
    font-family: var(--font-family-display);
    font-size: var(--_value-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-tight);
    color: var(--_value);
  }
  .bu.bu .stat__label {
    margin-block-start: var(--space-2);
    font-size: var(--text-lead);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    color: var(--_label);
    text-wrap: balance;
  }
  .bu.bu .stat__note {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--_note);
    text-wrap: pretty;
  }

  /* start-aligned, no dividers (the homepage's arrangement) */
  .bu.bu .stat-strip--start { gap: var(--space-6) var(--space-7); }
  .bu.bu .stat-strip--start .stat { padding-inline: 0; text-align: start; border: 0; }

  /* on a brand (red) band */
  .bu.bu .stat-strip--on-dark {
    --_value: var(--color-text-inverse);
    --_label: var(--color-text-inverse);
    --_note: var(--color-text-inverse);
    --_rule: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
  }
  .bu.bu .stat-strip--on-dark .stat__note { opacity: 0.85; }

  /* smaller numerals, for use inside a panel or beside copy */
  .bu.bu .stat-strip--sm { --_value-size: var(--text-h1); }
  .bu.bu .stat-strip--sm .stat__label { font-size: var(--text-body); }

  /* narrow: two columns, rules become top rules */
  @container (max-width: 40rem) {
    .bu.bu .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
    .bu.bu .stat { padding-inline: 0; border-inline-start: 0; }
  }
  @container (max-width: 22rem) {
    .bu.bu .stat-strip { grid-template-columns: 1fr; }
    .bu.bu .stat + .stat { padding-block-start: var(--space-5); border-block-start: var(--border-width) solid var(--_rule); }
  }

  .bu.bu .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

/* ---- steps ---- */
/* steps — contract: components/steps/steps.html
   A numbered sequence. An ordered list; the number is generated, in a red circle.
   Default: across, as many as fit. Modifier: --stacked (number beside the text, one per row). */
  .bu.bu .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-6) var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .bu.bu .step { counter-increment: step; min-inline-size: 0; }
  .bu.bu .step > * { margin: 0; }
  .bu.bu .step > * + * { margin-block-start: var(--space-2); }
  .bu.bu .step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface-brand);
    color: var(--color-text-inverse);
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
  }

  .bu.bu .step__title {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading-strong);
    text-wrap: balance;
  }
  .bu.bu .step__text { font-size: var(--text-body); line-height: var(--leading-body); text-wrap: pretty; }

  .bu.bu .steps--stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .bu.bu .steps--stacked .step { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-3); max-inline-size: var(--size-measure-text); }
  .bu.bu .steps--stacked .step::before { grid-row: 1 / span 3; inline-size: 1.75rem; block-size: 1.75rem; margin: 0; font-size: var(--text-sm); }
  .bu.bu .steps--stacked .step > * { grid-column: 2; }

/* ---- form (host overrides, unlayered; tokens on form[data-fw-form]) ---- */
  form[data-fw-form] {
    /* color */
    --color-red: #ce1432;
    --color-red-hover: #ac1a2c;
    --color-blue: #a3bee0;
    --color-black: #121212;
    --color-gray-dark: #5a5a5c;
    --color-gray-medium: #939598;
    --color-gray-light: #d2d3d4;
    --color-gray-bg: #f5f5f5;
    --color-white: #ffffff;
    --color-text: #121212;
    --color-text-muted: #5a5a5c;
    --color-text-subtle: #939598;
    --color-text-inverse: #ffffff;
    --color-heading: #5a5a5c;
    --color-heading-strong: #121212;
    --color-link: #ce1432;
    --color-link-hover: #ac1a2c;
    --color-brand: #ce1432;
    --color-brand-hover: #ac1a2c;
    --color-accent: #a3bee0;
    --color-surface: #ffffff;
    --color-surface-stone: #f5f5f5;
    --color-surface-brand: #ce1432;
    --color-surface-tint: rgba(206, 20, 50, 0.1);
    --color-rule: #d2d3d4;
    --color-control-border: #5a5a5c;
    --color-focus: #ce1432;
    --color-error: #ce1432;

    /* font */
    --font-family-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Bebas Neue', 'Lato', sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* text */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-compact: 1rem;
    --text-body: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
    --text-lead: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
    --text-eyebrow: 0.9375rem;
    --text-button: 1rem;
    --text-h4: 1.125rem;
    --text-h3: 1.375rem;
    --text-h2: clamp(2rem, 1.63rem + 1.52vw, 3rem);
    --text-h1: clamp(2.5rem, 1.76rem + 3.05vw, 4.5rem);
    --text-hero-sub: clamp(1.25rem, 0.972rem + 1.14vw, 2rem);
    --text-stat: clamp(3.5rem, 2.98rem + 2.15vw, 4.9rem);

    /* leading */
    --leading-tight: 1;
    --leading-heading: 1.15;
    --leading-snug: 1.4;
    --leading-body: 1.55;

    /* tracking */
    --tracking-heading: -0.02em;
    --tracking-eyebrow: 0.067em;
    --tracking-button: 0.02em;

    /* space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-band: clamp(3rem, 2.26rem + 3.05vw, 5rem);
    --space-gutter: 1.5rem;
    --space-stack: 1rem;

    /* size */
    --size-measure-prose: 800px;
    --size-grid: 1200px;
    --size-page: 1500px;
    --size-measure-text: 70ch;

    /* radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* border */
    --border-width: 1px;
    --border-width-strong: 2px;
    --border-width-rule: 4px;

    /* shadow */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.18);

    /* motion */
    --motion-fast: 150ms;
    --motion-base: 300ms;
    --motion-ease: ease;

    /* breakpoint */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1100px;
    --breakpoint-xl: 1440px;

    /* z */
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 1000;
  }
/* root: form[data-fw-form] */
/* form, host overrides — contract: components/form/form.html ("Embedded Slate form" variant)
   Maps the classes Slate's embed script generates onto the form contract. Every rule is rooted on
   `form[data-fw-form]`, not the scope class: the Slate root is the scope, so embeds need no
   wrapper and the bundle styles every Slate form on a page that loads it. Ships UNLAYERED (the
   build appends *.host.css after the layers, with the tokens on this root): Slate's embed.css and
   base_safe.css are unlayered, and a layered rule loses to an unlayered one whatever its
   specificity. These rules compete on specificity instead: `form[data-fw-form] .form_question`
   (0,2,1) beats Slate's `div.form_question` (0,1,1).
   Slate's own rules, for reference: embed.css gives questions 1em below, labels display:block,
   `input + label` inline, an invalid question a pink background (.required) and a yellow one
   while focused (.selected); base_safe.css gives .error a yellow panel with an orange rule.
   Inline styles Slate writes (float/width on a question, margins on birthdate selects, a colour
   on the submit button set by the form's own script) are not fought here; see README. */

/* structure: Slate floats side-by-side questions; a flex page ignores the floats and honours the
   inline width as the basis, so two 40% questions share a row and a lone one fills it */
form[data-fw-form] .form_pages { container-type: inline-size; }
form[data-fw-form] .form_page {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  margin: 0;
  padding: 0;
}
form[data-fw-form] .form_page > * { flex: 1 1 100%; min-inline-size: 0; }
form[data-fw-form] .form_page > .form_question[style*="width"] { flex-basis: auto; }
@container (max-width: 30rem) {
  form[data-fw-form] .form_page > .form_question[style*="width"] { flex-basis: 100%; }
}
form[data-fw-form] .form_page + .form_page { margin-block-start: 0; }

/* a question is a field */
form[data-fw-form] .form_question {
  position: relative;
  margin: 0 0 var(--space-5);
  padding: 0;
  background: none;
}
form[data-fw-form] .form_question.selected,
form[data-fw-form] .form_question.required { background: none; }
form[data-fw-form] .form_question fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
form[data-fw-form] .form_question fieldset > legend { display: none; } /* as embed.css does: Slate repeats it as .form_label */
/* the description Slate puts above the questions: a heading and a line about the required marker.
   Sized here because the form sits outside the scope, where a host sizes every p, span and h3 */
form[data-fw-form] #form_description { margin: 0 0 var(--space-5); }
form[data-fw-form] #form_description > * { margin: 0; }
form[data-fw-form] #form_description > * + * { margin-block-start: var(--space-2); }
form[data-fw-form] #form_description :is(h1, h2, h3, h4) {
  font-family: var(--font-family-body);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: none;
  color: var(--color-heading-strong);
}
form[data-fw-form] #form_description :is(p, span) { font-size: var(--text-compact); line-height: var(--leading-body); }
form[data-fw-form] .form_label span { font-size: inherit; }
form[data-fw-form] .form_loading { color: var(--color-text-muted); }
form[data-fw-form] .hidden { display: none; } /* embed.css does this with !important; here for a host without it */

/* labels: the question label is the field label; a label after a checkbox or radio is a choice */
form[data-fw-form] .form_question .form_label,
form[data-fw-form] .form_question > label,
form[data-fw-form] .form_question fieldset > .form_label {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  background: none;
  font-size: var(--text-compact);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-heading-strong);
}
form[data-fw-form] .form_question.form_p .form_label { font-weight: var(--font-weight-regular); color: var(--color-text); }
form[data-fw-form] .form_question.form_h1 .form_label { font-size: var(--text-h3); margin-block-start: var(--space-4); }
form[data-fw-form] .form_question.form_h2 .form_label { font-size: var(--text-h4); margin-block-start: var(--space-3); }
form[data-fw-form] .form_question.form_h3 .form_label,
form[data-fw-form] .form_question.form_header .form_label { font-size: var(--text-compact); padding: 0; }
form[data-fw-form] .form_responses { white-space: normal; }
form[data-fw-form] .form_response {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
form[data-fw-form] .form_response input + label {
  display: inline;
  margin: 0;
  font-size: var(--text-compact);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text);
  cursor: pointer;
}
form[data-fw-form] .form_response span.full_message {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}

/* grouped questions: birthdate is three selects on one line; an address is stacked sub-fields */
form[data-fw-form] .form_birthdate .form_responses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
form[data-fw-form] .form_birthdate .form_responses select { inline-size: auto; flex: 1 1 6rem; }
form[data-fw-form] .form_question.form_address > fieldset > div { margin-block-start: var(--space-4); }

/* the invalid question: a thicker red border on its control and a red label, in place of Slate's
   pink background; the message Slate shows is the .error banner above */
form[data-fw-form] .form_question.required :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  border-color: var(--color-error);
  border-width: var(--border-width-strong);
}
form[data-fw-form] .form_question.required > .form_label,
form[data-fw-form] .form_question.required > label,
form[data-fw-form] .form_question.required > fieldset > .form_label { color: var(--color-error); }
form[data-fw-form] input.validate_error { color: var(--color-error); }

/* the banners */
form[data-fw-form] > .error,
form[data-fw-form] .form_success {
  display: block;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-inline-start: var(--border-width-rule) solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-stone);
  color: var(--color-text);
  font-size: var(--text-compact);
  line-height: var(--leading-body);
}
form[data-fw-form] > .error {
  border-inline-start-color: var(--color-error);
  background: var(--color-surface-tint);
}
form[data-fw-form] > .error.hidden { display: none; }

/* the submit: Slate's button becomes the primary button (kept in step with button.css) */
form[data-fw-form] .form_action { margin: var(--space-6) 0 0; padding: 0; }
form[data-fw-form] .form_action_submit { margin-block-start: var(--space-6); }
form[data-fw-form] .form_button_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: auto;
  min-block-size: 2.75rem;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width-strong) solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-family: var(--font-family-body);
  font-size: var(--text-button);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease);
}
form[data-fw-form] .form_button_submit:hover,
form[data-fw-form] .form_button_submit:active {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
form[data-fw-form] .form_button_submit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
form[data-fw-form] .form_button_submit:disabled {
  background: var(--color-gray-light);
  border-color: var(--color-gray-light);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* the school / location lookup list Slate attaches to a text field */
form[data-fw-form] .suggest {
  border: var(--border-width) solid var(--color-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
}
form[data-fw-form] .suggest_item { padding: var(--space-1) var(--space-2); }
form[data-fw-form] .suggest_item_selected { background: var(--color-surface-stone); }