/* ---- theme tokens ---- */
.hai-site {
  --hai-bg: #ffffff;
  --hai-bg-alt: #f4f5f7;
  --hai-fg: #1c1f24;
  --hai-fg-muted: #5b6270;
  --hai-border: #dfe3e8;
  --hai-accent: #334155;
  --hai-accent-fg: #ffffff;
  --hai-accent-soft: #e2e8f0;
  --hai-link: #1d4ed8;
  --hai-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /*
   * THE ALIAS IS FROZEN, AND WRONG. A var() reference is substituted where it is USED, so a site-wide BODY choice
   * ('.hai-site.hai-fb--g-lora' re-points --hai-font-body on this very element) silently dragged the headings,
   * the navigation and the labels along with it - while the same choice made on a BLOCK left them alone. This
   * rule is legacy and byte-frozen (golden.test.ts), so it is NOT edited: theme/css.ts legacyFacesCss re-states
   * --hai-font-heading literally, later and at matching specificity, for this rule and for the serif preset below.
   * The computed value is unchanged for every stored page; only site.css says it twice.
   */
  --hai-font-heading: var(--hai-font-body);
  --hai-radius: 10px;
  --hai-measure: 68ch;
  --hai-wide: 1120px;
  --hai-gap: 1.25rem;
  --hai-section: clamp(2rem, 5vw, 4rem);
  color: var(--hai-fg);
  background: var(--hai-bg);
  font-family: var(--hai-font-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  margin: 0;
}
.hai-site[data-palette="ocean"] {
  --hai-accent: #0369a1; --hai-accent-soft: #e0f2fe; --hai-link: #0369a1; --hai-bg-alt: #f0f9ff;
}
.hai-site[data-palette="forest"] {
  --hai-accent: #15803d; --hai-accent-soft: #dcfce7; --hai-link: #166534; --hai-bg-alt: #f2fbf4;
}
.hai-site[data-palette="sunset"] {
  --hai-accent: #c2410c; --hai-accent-soft: #ffedd5; --hai-link: #b45309; --hai-bg-alt: #fff7ed;
}
@media (prefers-color-scheme: dark) {
  .hai-site {
    --hai-bg: #121417; --hai-bg-alt: #1b1f25; --hai-fg: #e8eaee; --hai-fg-muted: #a0a7b4; --hai-border: #2b313b;
    --hai-accent: #cbd5e1; --hai-accent-fg: #0f172a; --hai-accent-soft: #273244; --hai-link: #93c5fd;
  }
  .hai-site[data-palette="ocean"] { --hai-accent: #38bdf8; --hai-accent-fg: #082f49; --hai-accent-soft: #0c3550; --hai-link: #7dd3fc; --hai-bg-alt: #0f1d27; }
  .hai-site[data-palette="forest"] { --hai-accent: #4ade80; --hai-accent-fg: #052e16; --hai-accent-soft: #123524; --hai-link: #86efac; --hai-bg-alt: #0f1f16; }
  .hai-site[data-palette="sunset"] { --hai-accent: #fb923c; --hai-accent-fg: #431407; --hai-accent-soft: #432312; --hai-link: #fdba74; --hai-bg-alt: #241812; }
}
.hai-site[data-fonts="serif"] {
  --hai-font-body: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
  --hai-font-heading: var(--hai-font-body);
}
.hai-site[data-fonts="mixed"] {
  --hai-font-heading: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
}
.hai-site[data-radius="none"] { --hai-radius: 0; }
.hai-site[data-radius="small"] { --hai-radius: 4px; }
.hai-site[data-radius="medium"] { --hai-radius: 10px; }
.hai-site[data-radius="large"] { --hai-radius: 22px; }

/* ---- theme: semantic aliases, typography defaults, text sizes (legacy palettes and presets resolve through these) ---- */
.hai-site {
  --hai-surface: var(--hai-bg-alt);
  --hai-primary: var(--hai-accent);
  --hai-primary-fg: var(--hai-accent-fg);
  --hai-primary-alt: transparent;
  --hai-primary-muted: var(--hai-accent-fg);
  --hai-primary-border: var(--hai-accent-fg);
  --hai-secondary: var(--hai-fg-muted);
  --hai-highlight: var(--hai-accent-soft);
  --hai-highlight-fg: var(--hai-fg);
  --hai-focus: var(--hai-accent);
  --hai-accent-ink: var(--hai-accent);
  --hai-overlay: rgb(0 0 0 / 0.6);
  --hai-dark-bg: var(--hai-band-bg);
  --hai-dark-fg: var(--hai-band-fg);
  --hai-dark-muted: var(--hai-band-muted);
  /*
   * The navigation and label faces of the LEGACY presets, written out rather than aliased to --hai-font-body.
   * A var() here is substituted on .hai-site, which is the element a SITE-WIDE body choice re-points, so the
   * alias made "Body text" retype the nav and every eyebrow, tag and big number too. The default is the system
   * stack, which is what the alias resolved to for 'sans' and 'mixed'; 'serif' gets its Georgia faces from
   * legacyFacesCss below. No stored page changes - the computed value is the same in every case.
   */
  --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-font-label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-heading-weight: 700;
  --hai-heading-tracking: normal;
  --hai-heading-leading: 1.2;
  --hai-nav-weight: 400;
  --hai-label-tracking: 0.08em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1;
  --hai-text-display: calc(clamp(2.5rem, 7vw, 4.75rem) * var(--hai-type-scale));
  --hai-text-h1: calc(clamp(2rem, 5vw, 3.25rem) * var(--hai-type-scale));
  --hai-text-h2: calc(clamp(1.5rem, 3.5vw, 2.25rem) * var(--hai-type-scale));
  --hai-text-h3: calc(1.25rem * var(--hai-type-scale));
  --hai-text-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --hai-text-small: 0.875rem;
}
/*
 * The legacy palettes inside a primary band. Their colours flip with the OS setting, so the band's muted text,
 * hairline and inset are mixed by the browser (the fixed palettes carry ready-made hex values instead). The inset
 * moves away from the button text, which is white in light mode and dark in dark mode. Without color-mix() the
 * defaults above apply: muted text and hairlines in the button-text colour, a transparent inset.
 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .hai-site {
    --hai-primary-alt: color-mix(in srgb, black 14%, var(--hai-accent));
    --hai-primary-muted: color-mix(in srgb, var(--hai-accent-fg) 92%, var(--hai-accent));
    --hai-primary-border: color-mix(in srgb, var(--hai-accent-fg) 35%, var(--hai-accent));
  }
  @media (prefers-color-scheme: dark) {
    .hai-site { --hai-primary-alt: color-mix(in srgb, white 14%, var(--hai-accent)); }
  }
}
/* ---- the legacy presets' heading/nav/label faces, literal (the frozen rules alias them to --hai-font-body) ---- */
.hai-site { --hai-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hai-font-label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.hai-site[data-fonts="serif"] { --hai-font-heading: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; --hai-font-nav: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; --hai-font-label: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; }
.hai-site[data-fonts="mixed"] { --hai-font-heading: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hai-font-label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* ---- palettes (generated from theme/palettes.ts; fixed colours, no dark-mode flip) ---- */
.hai-site[data-palette="minimal-black"] {
  color-scheme: light;
  --hai-bg: #ffffff; --hai-bg-alt: #f5f5f5; --hai-fg: #111111; --hai-fg-muted: #666666; --hai-border: #dddddd; --hai-accent: #111111; --hai-accent-fg: #ffffff; --hai-accent-soft: #ededed; --hai-link: #111111; --hai-accent-ink: #111111; --hai-primary-alt: #292929; --hai-primary-muted: #ececec; --hai-primary-border: #646464; --hai-secondary: #888888; --hai-highlight: #e5e5e5; --hai-highlight-fg: #111111; --hai-focus: #111111; --hai-overlay: rgb(17 17 17 / 0.65); --hai-band-bg: #111111; --hai-band-alt: #292929; --hai-band-fg: #ffffff; --hai-band-muted: #b3b3b3; --hai-band-border: #4f4f4f; --hai-band-link: #e5e5e5;
}
.hai-site[data-palette="warm-editorial"] {
  color-scheme: light;
  --hai-bg: #f7f3ec; --hai-bg-alt: #efe7da; --hai-fg: #28241f; --hai-fg-muted: #6a6359; --hai-border: #d8cfc2; --hai-accent: #28241f; --hai-accent-fg: #ffffff; --hai-accent-soft: #f0ded2; --hai-link: #28241f; --hai-accent-ink: #28241f; --hai-primary-alt: #3e3a35; --hai-primary-muted: #eeeded; --hai-primary-border: #73716d; --hai-secondary: #a08f78; --hai-highlight: #c96f4a; --hai-highlight-fg: #000000; --hai-focus: #28241f; --hai-overlay: rgb(40 36 31 / 0.65); --hai-band-bg: #28241f; --hai-band-alt: #3d3934; --hai-band-fg: #f7f3ec; --hai-band-muted: #b5b1aa; --hai-band-border: #5e5a54; --hai-band-link: #f7f3ec;
}
.hai-site[data-palette="soft-studio"] {
  color-scheme: light;
  --hai-bg: #fafaf8; --hai-bg-alt: #f0f0ea; --hai-fg: #242424; --hai-fg-muted: #696969; --hai-border: #deded7; --hai-accent: #242424; --hai-accent-fg: #ffffff; --hai-accent-soft: #ebeae5; --hai-link: #242424; --hai-accent-ink: #242424; --hai-primary-alt: #3a3a3a; --hai-primary-muted: #ededed; --hai-primary-border: #717171; --hai-secondary: #9a9a8f; --hai-highlight: #b8afa1; --hai-highlight-fg: #242424; --hai-focus: #242424; --hai-overlay: rgb(36 36 36 / 0.65); --hai-band-bg: #242424; --hai-band-alt: #393939; --hai-band-fg: #fafaf8; --hai-band-muted: #b6b6b4; --hai-band-border: #5c5c5b; --hai-band-link: #b8afa1;
}
.hai-site[data-palette="deep-ocean"] {
  color-scheme: light;
  --hai-bg: #f5fafc; --hai-bg-alt: #e5f1f5; --hai-fg: #102a33; --hai-fg-muted: #546d76; --hai-border: #c9dde3; --hai-accent: #176b87; --hai-accent-fg: #ffffff; --hai-accent-soft: #f4e7d9; --hai-link: #176b87; --hai-accent-ink: #176b87; --hai-primary-alt: #145c74; --hai-primary-muted: #ecf3f5; --hai-primary-border: #689fb1; --hai-secondary: #62a7ba; --hai-highlight: #f0a35b; --hai-highlight-fg: #102a33; --hai-focus: #176b87; --hai-overlay: rgb(16 42 51 / 0.65); --hai-band-bg: #102a33; --hai-band-alt: #273f47; --hai-band-fg: #f5fafc; --hai-band-muted: #acb7bc; --hai-band-border: #4c6067; --hai-band-link: #f0a35b;
}
.hai-site[data-palette="deep-forest"] {
  color-scheme: light;
  --hai-bg: #f5f7f2; --hai-bg-alt: #e7ece2; --hai-fg: #1f2a20; --hai-fg-muted: #5e685d; --hai-border: #d4dcd0; --hai-accent: #31543a; --hai-accent-fg: #ffffff; --hai-accent-soft: #e9e3d5; --hai-link: #31543a; --hai-accent-ink: #31543a; --hai-primary-alt: #2a4832; --hai-primary-muted: #eff1ef; --hai-primary-border: #79907f; --hai-secondary: #70866e; --hai-highlight: #b48a52; --hai-highlight-fg: #1f2a20; --hai-focus: #31543a; --hai-overlay: rgb(31 42 32 / 0.65); --hai-band-bg: #1f2a20; --hai-band-alt: #343f35; --hai-band-fg: #f5f7f2; --hai-band-muted: #b1b5af; --hai-band-border: #575f57; --hai-band-link: #f5f7f2;
}
.hai-site[data-palette="terracotta"] {
  color-scheme: light;
  --hai-bg: #fff8f2; --hai-bg-alt: #f5e6d8; --hai-fg: #35251f; --hai-fg-muted: #796054; --hai-border: #e5d2c2; --hai-accent: #a94f35; --hai-accent-fg: #ffffff; --hai-accent-soft: #f6dfc5; --hai-link: #a14c33; --hai-accent-ink: #a14c33; --hai-primary-alt: #91442e; --hai-primary-muted: #f8f1ef; --hai-primary-border: #c78d7c; --hai-secondary: #c27a5e; --hai-highlight: #e0a45b; --hai-highlight-fg: #35251f; --hai-focus: #a94f35; --hai-overlay: rgb(53 37 31 / 0.65); --hai-band-bg: #35251f; --hai-band-alt: #493a34; --hai-band-fg: #fff8f2; --hai-band-muted: #beb4ae; --hai-band-border: #6a5c56; --hai-band-link: #e0a45b;
}
.hai-site[data-palette="lavender"] {
  color-scheme: light;
  --hai-bg: #faf8fc; --hai-bg-alt: #eee9f4; --hai-fg: #2c2535; --hai-fg-muted: #6d6379; --hai-border: #ded5e5; --hai-accent: #76568f; --hai-accent-fg: #ffffff; --hai-accent-soft: #f2e1e9; --hai-link: #76568f; --hai-accent-ink: #76568f; --hai-primary-alt: #654a7b; --hai-primary-muted: #f4f1f6; --hai-primary-border: #a691b6; --hai-secondary: #a68bb5; --hai-highlight: #d99aab; --hai-highlight-fg: #2c2535; --hai-focus: #76568f; --hai-overlay: rgb(44 37 53 / 0.65); --hai-band-bg: #2c2535; --hai-band-alt: #413a49; --hai-band-fg: #faf8fc; --hai-band-muted: #b8b4bc; --hai-band-border: #625c69; --hai-band-link: #d99aab;
}
.hai-site[data-palette="midnight"] {
  color-scheme: dark;
  --hai-bg: #101418; --hai-bg-alt: #181e24; --hai-fg: #f4f6f7; --hai-fg-muted: #9da7af; --hai-border: #303840; --hai-accent: #ffffff; --hai-accent-fg: #101418; --hai-accent-soft: #1c2c39; --hai-link: #ffffff; --hai-accent-ink: #ffffff; --hai-primary-alt: #e7e8e8; --hai-primary-muted: #23272a; --hai-primary-border: #abadae; --hai-secondary: #64717b; --hai-highlight: #5da9e9; --hai-highlight-fg: #101418; --hai-focus: #ffffff; --hai-overlay: rgb(16 20 24 / 0.65); --hai-band-bg: #303437; --hai-band-alt: #424649; --hai-band-fg: #f4f6f7; --hai-band-muted: #abb4bb; --hai-band-border: #5e6164; --hai-band-link: #f4f6f7;
}
.hai-site[data-palette="cream-ink"] {
  color-scheme: light;
  --hai-bg: #f4ebdd; --hai-bg-alt: #e9ddcb; --hai-fg: #171717; --hai-fg-muted: #635c53; --hai-border: #d6c8b5; --hai-accent: #171717; --hai-accent-fg: #ffffff; --hai-accent-soft: #ead1c2; --hai-link: #171717; --hai-accent-ink: #171717; --hai-primary-alt: #2e2e2e; --hai-primary-muted: #ececec; --hai-primary-border: #686868; --hai-secondary: #8a8176; --hai-highlight: #b44b32; --hai-highlight-fg: #ffffff; --hai-focus: #171717; --hai-overlay: rgb(23 23 23 / 0.65); --hai-band-bg: #171717; --hai-band-alt: #2d2c2b; --hai-band-fg: #f4ebdd; --hai-band-muted: #ada79e; --hai-band-border: #504e4a; --hai-band-link: #f4ebdd;
}
.hai-site[data-palette="modern-blue"] {
  color-scheme: light;
  --hai-bg: #f7f9fc; --hai-bg-alt: #eaf0f8; --hai-fg: #172033; --hai-fg-muted: #5e6a80; --hai-border: #d5deec; --hai-accent: #2856a6; --hai-accent-fg: #ffffff; --hai-accent-soft: #f6e7d8; --hai-link: #2856a6; --hai-accent-ink: #2856a6; --hai-primary-alt: #224a8f; --hai-primary-muted: #eef1f8; --hai-primary-border: #7391c5; --hai-secondary: #6685be; --hai-highlight: #f2a65a; --hai-highlight-fg: #172033; --hai-focus: #2856a6; --hai-overlay: rgb(23 32 51 / 0.65); --hai-band-bg: #172033; --hai-band-alt: #2d3647; --hai-band-fg: #f7f9fc; --hai-band-muted: #afb4bc; --hai-band-border: #515867; --hai-band-link: #f2a65a;
}
.hai-site[data-palette="monochrome-dark"] {
  color-scheme: dark;
  --hai-bg: #0a0a0a; --hai-bg-alt: #171717; --hai-fg: #f5f5f5; --hai-fg-muted: #999999; --hai-border: #303030; --hai-accent: #ffffff; --hai-accent-fg: #0a0a0a; --hai-accent-soft: #292929; --hai-link: #ffffff; --hai-accent-ink: #ffffff; --hai-primary-alt: #e7e7e7; --hai-primary-muted: #1e1e1e; --hai-primary-border: #a9a9a9; --hai-secondary: #777777; --hai-highlight: #cccccc; --hai-highlight-fg: #0a0a0a; --hai-focus: #ffffff; --hai-overlay: rgb(10 10 10 / 0.65); --hai-band-bg: #2b2b2b; --hai-band-alt: #3e3e3e; --hai-band-fg: #f5f5f5; --hai-band-muted: #a9a9a9; --hai-band-border: #5a5a5a; --hai-band-link: #cccccc;
}
.hai-site[data-palette="playful"] {
  color-scheme: light;
  --hai-bg: #fffdf7; --hai-bg-alt: #fff1d6; --hai-fg: #242424; --hai-fg-muted: #706a5a; --hai-border: #e5dccb; --hai-accent: #ef6c4d; --hai-accent-fg: #242424; --hai-accent-soft: #f8ebcb; --hai-link: #a6523e; --hai-accent-ink: #a6523e; --hai-primary-alt: #f18166; --hai-primary-muted: #342a27; --hai-primary-border: #a8533f; --hai-secondary: #5d8c83; --hai-highlight: #e6b84e; --hai-highlight-fg: #242424; --hai-focus: #242424; --hai-overlay: rgb(36 36 36 / 0.65); --hai-band-bg: #242424; --hai-band-alt: #3a3a39; --hai-band-fg: #fffdf7; --hai-band-muted: #b9b8b3; --hai-band-border: #5d5c5b; --hai-band-link: #e6b84e;
}
/* ---- typography presets (generated from theme/typography.ts; system font stacks only) ---- */
.hai-site[data-fonts="modern-sans"] {
  --hai-font-body: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --hai-font-heading: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --hai-font-nav: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --hai-font-label: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --hai-heading-weight: 800;
  --hai-heading-tracking: -0.025em;
  --hai-heading-leading: 1.1;
  --hai-nav-weight: 500;
  --hai-label-tracking: 0.08em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1;
}
.hai-site[data-fonts="editorial-serif"] {
  --hai-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-font-heading: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-font-label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-heading-weight: 600;
  --hai-heading-tracking: -0.015em;
  --hai-heading-leading: 1.12;
  --hai-nav-weight: 400;
  --hai-label-tracking: 0.12em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1.1;
}
.hai-site[data-fonts="elegant-serif"] {
  --hai-font-body: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, serif;
  --hai-font-heading: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, Georgia, serif;
  --hai-font-nav: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  --hai-font-label: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  --hai-heading-weight: 400;
  --hai-heading-tracking: 0.005em;
  --hai-heading-leading: 1.15;
  --hai-nav-weight: 400;
  --hai-label-tracking: 0.18em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1.16;
}
.hai-site[data-fonts="geometric"] {
  --hai-font-body: Avenir, "Avenir Next", Montserrat, Corbel, "URW Gothic", "Century Gothic", source-sans-pro, sans-serif;
  --hai-font-heading: Avenir, "Avenir Next", Montserrat, Corbel, "URW Gothic", "Century Gothic", source-sans-pro, sans-serif;
  --hai-font-nav: Avenir, "Avenir Next", Montserrat, Corbel, "URW Gothic", "Century Gothic", source-sans-pro, sans-serif;
  --hai-font-label: Avenir, "Avenir Next", Montserrat, Corbel, "URW Gothic", "Century Gothic", source-sans-pro, sans-serif;
  --hai-heading-weight: 700;
  --hai-heading-tracking: -0.02em;
  --hai-heading-leading: 1.12;
  --hai-nav-weight: 500;
  --hai-label-tracking: 0.1em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1.04;
}
.hai-site[data-fonts="mono-accent"] {
  --hai-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-font-heading: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hai-font-label: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --hai-heading-weight: 700;
  --hai-heading-tracking: -0.02em;
  --hai-heading-leading: 1.12;
  --hai-nav-weight: 500;
  --hai-label-tracking: 0.04em;
  --hai-label-transform: uppercase;
  --hai-type-scale: 1;
}

/* ---- base ---- */
.hai-site *, .hai-site *::before, .hai-site *::after { box-sizing: border-box; }
.hai-site h1, .hai-site h2, .hai-site h3, .hai-site h4, .hai-site h5, .hai-site h6 {
  font-family: var(--hai-font-heading); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; overflow-wrap: anywhere;
}
.hai-site h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.hai-site h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.hai-site h3 { font-size: 1.25rem; }
.hai-site p { margin: 0 0 1em; overflow-wrap: anywhere; }
.hai-site a { color: var(--hai-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hai-site a:hover { text-decoration-thickness: 2px; }
.hai-site img, .hai-site iframe, .hai-site svg { max-width: 100%; display: block; }
.hai-site img { height: auto; }
.hai-site :focus-visible { outline: 3px solid var(--hai-accent); outline-offset: 2px; }
.hai-page { display: block; width: 100%; }
.hai-page > * { padding-left: max(1rem, 4vw); padding-right: max(1rem, 4vw); }
.hai-page > section { padding-top: var(--hai-section); padding-bottom: var(--hai-section); }
.hai-page > section + section { padding-top: 0; }
/* a hero is a coloured band: the section after it, and a hero after a section, keep their full top padding */
.hai-page > section + .hai-hero, .hai-page > .hai-hero + section { padding-top: var(--hai-section); }
.hai-page > .hai-columns { padding-top: var(--hai-section); padding-bottom: var(--hai-section); }

/* ---- theme base: headings follow the typography preset (defaults reproduce the legacy look) ---- */
.hai-site h1, .hai-site h2, .hai-site h3, .hai-site h4, .hai-site h5, .hai-site h6 {
  font-weight: var(--hai-heading-weight); letter-spacing: var(--hai-heading-tracking); line-height: var(--hai-heading-leading);
}
.hai-site h1 { font-size: var(--hai-text-h1); }
.hai-site h2 { font-size: var(--hai-text-h2); }
.hai-site h3 { font-size: var(--hai-text-h3); }
.hai-site :focus-visible { outline-color: var(--hai-focus); }
/*
 * The secondary button writes the primary colour as INK, and a loud primary is not readable as ink (Playful's coral:
 * 2.98:1 on its page). --hai-accent-ink is the same hue nudged to AA; on the legacy palettes it IS --hai-accent, so
 * stored pages do not change. The legacy rule (.hai-site a.hai-btn--secondary, in the buttons group further down)
 * stays verbatim, hence the doubled class to out-rank it from here.
 */
.hai-site .hai-btn.hai-btn--secondary { color: var(--hai-accent-ink); border-color: var(--hai-accent-ink); }

/* ---- shared utilities ---- */
/* a heading's LOOK independent of its level (keep the level semantic, pick the size with a modifier) */
.hai-site .hai-heading {
  font-family: var(--hai-font-heading); font-weight: var(--hai-heading-weight); letter-spacing: var(--hai-heading-tracking);
  line-height: var(--hai-heading-leading); margin: 0 0 0.5em; overflow-wrap: anywhere;
}
.hai-site .hai-heading--display { font-size: var(--hai-text-display); line-height: calc(var(--hai-heading-leading) * 0.94); }
.hai-site .hai-heading--xl { font-size: var(--hai-text-h1); }
.hai-site .hai-heading--lg { font-size: var(--hai-text-h2); }
.hai-site .hai-heading--md { font-size: var(--hai-text-h3); }
.hai-site .hai-heading--sm { font-size: 1.05rem; }
:where(.hai-site) .hai-eyebrow {
  font-family: var(--hai-font-label); font-size: var(--hai-text-small); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--hai-label-tracking); text-transform: var(--hai-label-transform); color: var(--hai-fg-muted); margin: 0 0 0.75em;
}
/* an eyebrow or a tag is usually a <p>, and ".hai-site p" (0,1,1) out-ranks the :where() rules: the margins need (0,2,0) */
.hai-site .hai-eyebrow { margin: 0 0 0.75em; }
.hai-site .hai-tag { margin: 0; }
:where(.hai-site) .hai-lead { font-size: var(--hai-text-lead); line-height: 1.55; color: var(--hai-fg-muted); max-width: var(--hai-measure); }
:where(.hai-site) .hai-card {
  background: var(--hai-bg-alt); color: var(--hai-fg); border: 1px solid var(--hai-border); border-radius: var(--hai-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
:where(.hai-site) .hai-card--outline { background: transparent; }
:where(.hai-site) .hai-card--plain { background: transparent; border-color: transparent; padding: 0; }
:where(.hai-site) .hai-card--raised { border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08); }
/* tag: a static label. chip: the same shape as a control (filter, category link) */
:where(.hai-site) .hai-tag, :where(.hai-site) .hai-chip, .hai-site a.hai-chip {
  display: inline-block; font-family: var(--hai-font-label); font-size: 0.78rem; font-weight: 600; line-height: 1.3;
  letter-spacing: var(--hai-label-tracking); text-transform: var(--hai-label-transform); text-decoration: none;
  padding: 0.3em 0.75em; border-radius: var(--hai-radius); border: 1px solid transparent;
  background: var(--hai-accent-soft); color: var(--hai-fg);
}
:where(.hai-site) .hai-tag--outline { background: transparent; border-color: var(--hai-border); }
:where(.hai-site) .hai-tag--highlight { background: var(--hai-highlight); color: var(--hai-highlight-fg); }
:where(.hai-site) .hai-chip, .hai-site a.hai-chip { background: transparent; border-color: var(--hai-border); padding: 0.45em 0.95em; cursor: pointer; }
:where(.hai-site) .hai-chip:hover, .hai-site a.hai-chip:hover { background: var(--hai-accent-soft); }
:where(.hai-site) .hai-chip--active, :where(.hai-site) .hai-chip[aria-current], :where(.hai-site) .hai-chip[aria-pressed="true"],
.hai-site a.hai-chip--active, .hai-site a.hai-chip[aria-current] {
  background: var(--hai-accent); color: var(--hai-accent-fg); border-color: var(--hai-accent);
}
/* the active chip keeps its fill on hover: the hover tint above out-ranks the --active class and would leave light ink on the soft tint */
:where(.hai-site) .hai-chip.hai-chip--active:hover, .hai-site a.hai-chip.hai-chip--active:hover,
:where(.hai-site) .hai-chip[aria-current]:hover, .hai-site a.hai-chip[aria-current]:hover, :where(.hai-site) .hai-chip[aria-pressed="true"]:hover {
  background: var(--hai-accent); color: var(--hai-accent-fg);
}
/* a tag or chip always has an edge, so it keeps its shape on a ground that is close to the soft tint (a tag inside a card) */
:where(.hai-site) .hai-tag { border-color: var(--hai-border); }
:where(.hai-site) .hai-tag--highlight { border-color: transparent; }
/* "Read more ->": the arrow is decoration, the link text carries the meaning */
:where(.hai-site) .hai-link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.4em; font-weight: 600; text-decoration: none;
}
:where(.hai-site) .hai-link-arrow::after { content: "\2192"; transition: transform .15s ease; }
:where(.hai-site) .hai-link-arrow:hover { text-decoration: underline; }
:where(.hai-site) .hai-link-arrow:hover::after { transform: translateX(3px); }
.hai-site .hai-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* "Skip to content" (render/index.ts): the first tab stop of a page with a header, shown only while it has focus */
.hai-site .hai-skip {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1000; padding: 0.6rem 1rem; border: 2px solid var(--hai-fg);
  border-radius: var(--hai-radius); background: var(--hai-bg); color: var(--hai-fg); font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
}
.hai-site .hai-skip:focus { transform: none; }
/* visitors who ask for less motion get none: blocks may animate freely and rely on this guard */
@media (prefers-reduced-motion: reduce) {
  .hai-site *, .hai-site *::before, .hai-site *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- sections: shared block settings (band, spacing, width, visibility) ---- */
.hai-site {
  --hai-xwide: 1400px;
  --hai-band-bg: #14171c; --hai-band-alt: #20252d; --hai-band-fg: #f4f5f7; --hai-band-muted: #b9bfca; --hai-band-border: #394150; --hai-band-link: #bfdbfe;
}
@media (prefers-color-scheme: dark) {
  .hai-site { --hai-band-bg: #050607; --hai-band-alt: #14171c; --hai-band-border: #2b313b; }
}
.hai-section { --hai-section-pad: var(--hai-section); position: relative; }
.hai-section--space-none { --hai-section-pad: 0px; }
.hai-section--space-compact { --hai-section-pad: calc(var(--hai-section) * 0.5); }
.hai-section--space-spacious { --hai-section-pad: calc(var(--hai-section) * 1.75); }
.hai-section__inner { max-width: var(--hai-wide); margin-left: auto; margin-right: auto; }
.hai-section--width-narrow > .hai-section__inner { max-width: var(--hai-measure); }
.hai-section--width-wide > .hai-section__inner { max-width: var(--hai-xwide); }
.hai-section--width-full > .hai-section__inner { max-width: none; }

/* bands */
.hai-section--banded {
  --hai-x-bg: var(--hai-bg); --hai-x-bg-alt: var(--hai-bg-alt); --hai-x-accent: var(--hai-accent);
  --hai-x-accent-fg: var(--hai-accent-fg); --hai-x-accent-soft: var(--hai-accent-soft);
  --hai-x-primary-alt: var(--hai-primary-alt); --hai-x-primary-muted: var(--hai-primary-muted); --hai-x-primary-border: var(--hai-primary-border);
  isolation: isolate;
}
/* the semantic aliases (theme/css.ts) are resolved on .hai-site, so a band re-derives them from the tokens it re-points */
.hai-section--banded > * { --hai-surface: var(--hai-bg-alt); --hai-primary: var(--hai-accent); --hai-primary-fg: var(--hai-accent-fg); }
/* a band inside a column has no page gutter to borrow, so it brings a little padding of its own (zero specificity: the page rules win at the top level) */
:where(.hai-section--banded) { padding: var(--hai-section-pad) var(--hai-gap); }
.hai-section--bg-surface { background: var(--hai-bg-alt); }
.hai-section--bg-surface > * { --hai-bg: var(--hai-x-bg-alt); --hai-bg-alt: var(--hai-x-bg); }
.hai-section--bg-accent { background: var(--hai-accent-soft); }
.hai-section--bg-accent > * { --hai-bg: var(--hai-x-accent-soft); --hai-bg-alt: var(--hai-x-bg); --hai-accent-soft: var(--hai-x-bg-alt); }
/* links on the tint are written in the primary-as-ink (phase 5 review). On the twelve spec palettes that IS the link
   colour (both are nudged to AA against the tint), so nothing changes there; legacy Sunset's hand-written link
   (#b45309) is only 4.38:1 on its own tint, its ink 4.52:1. Only a band puts a link on the tint, and stored legacy
   blocks have no bands, so no stored page changes (the legacy palettes themselves stay frozen: golden.test.ts). */
.hai-section--bg-accent > * { --hai-link: var(--hai-accent-ink); }
.hai-section--bg-primary { background: var(--hai-accent); color: var(--hai-accent-fg); }
.hai-section--bg-primary > * {
  --hai-bg: var(--hai-x-accent); --hai-bg-alt: var(--hai-x-primary-alt); --hai-fg: var(--hai-x-accent-fg); --hai-fg-muted: var(--hai-x-primary-muted);
  --hai-border: var(--hai-x-primary-border); --hai-link: var(--hai-x-accent-fg); --hai-accent: var(--hai-x-accent-fg);
  --hai-accent-fg: var(--hai-x-accent); --hai-accent-soft: var(--hai-x-primary-alt); --hai-accent-ink: var(--hai-x-accent-fg);
  /* a primary band nested in this one swaps ink and ground, so the palette-level mixes no longer apply to it */
  --hai-primary-alt: transparent; --hai-primary-muted: var(--hai-x-accent); --hai-primary-border: var(--hai-x-accent);
  --hai-secondary: var(--hai-x-accent-fg); --hai-focus: var(--hai-x-accent-fg);
  color: var(--hai-fg);
}
.hai-section--bg-dark, .hai-section--bg-image { background: var(--hai-band-bg); color: var(--hai-band-fg); }
.hai-section--bg-dark > *, .hai-section--bg-image > * {
  --hai-bg: var(--hai-band-bg); --hai-bg-alt: var(--hai-band-alt); --hai-fg: var(--hai-band-fg); --hai-fg-muted: var(--hai-band-muted);
  --hai-border: var(--hai-band-border); --hai-link: var(--hai-band-link); --hai-accent: var(--hai-band-fg);
  --hai-accent-fg: var(--hai-band-bg); --hai-accent-soft: var(--hai-band-alt); --hai-accent-ink: var(--hai-band-fg);
  --hai-secondary: var(--hai-band-muted); --hai-focus: var(--hai-band-fg);
  --hai-primary-alt: transparent; --hai-primary-muted: var(--hai-band-bg); --hai-primary-border: var(--hai-band-bg);
  color: var(--hai-fg);
}
.hai-section__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hai-section__media img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Text over a PICTURE. Nobody knows how bright the picture is, so the arithmetic assumes the worst case, pure white:
 * under the default overlay (black at 0.6) the band's ink keeps 4.5:1 on every palette (theme/theme.test.ts does the
 * sum). The muted tone and the link colour cannot make that promise, so on a picture they become full ink: a block's
 * eyebrow, lead and links stay readable without the block knowing it sits on a photo. "light" (0.3) is for pictures
 * that are dark already, "none" for pictures that carry their own darkening.
 */
.hai-section--bg-image > * { --hai-fg-muted: var(--hai-band-fg); --hai-link: var(--hai-band-fg); }
.hai-section__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.6); }
.hai-section--overlay-none > .hai-section__media::after { background: none; }
.hai-section--overlay-light > .hai-section__media::after { background: rgb(0 0 0 / 0.3); }
.hai-section--overlay-strong > .hai-section__media::after { background: rgb(0 0 0 / 0.75); }

/* page rhythm (published page: blocks are direct children of .hai-page) */
.hai-site .hai-page > .hai-section { padding-top: var(--hai-section-pad); padding-bottom: var(--hai-section-pad); }
/*
 * PLAIN means: no visible edge. Not a band, and not a hero (a hero paints its own ground even without a band, and
 * keeps the class hai-section only when a section setting is non-default), EXCEPT the minimal hero, which is
 * transparent type on the page. A plain block after a plain block gives up the shared unit of top padding; any
 * other neighbour keeps both paddings. The hero is excluded on BOTH sides: as the target it would otherwise lose
 * its top padding to this rule, which out-ranks the legacy ".hai-page > section + .hai-hero".
 */
.hai-site .hai-page > :is(section, .hai-section):not(.hai-section--banded, .hai-hero:not(.hai-hero--v-minimal)) + :is(.hai-section, .hai-hero--v-minimal):not(.hai-section--banded, .hai-hero:not(.hai-hero--v-minimal)) {
  padding-top: max(0px, calc(var(--hai-section-pad, var(--hai-section)) - var(--hai-section)));
}
/* a legacy section after a plain block that is not a <section> element (as="div" | "header" ...) or after a minimal hero: the legacy collapse does not see those */
.hai-site .hai-page > :is(.hai-section, .hai-hero--v-minimal):not(.hai-section--banded, .hai-hero:not(.hai-hero--v-minimal)) + section:not(.hai-section, .hai-hero) { padding-top: 0; }
.hai-site .hai-page > .hai-section--banded + section:not(.hai-section) { padding-top: var(--hai-section); }
/*
 * width "full" lifts the max-width, NOT the page gutter: text must never touch the edge of the screen. Only a block
 * that lays out edge-to-edge content itself (Section inner={false}, which adds hai-section--bleed) gives the gutter up.
 */
.hai-site .hai-page > .hai-section--bleed { padding-left: 0; padding-right: 0; }

/* visibility: not in the canvas, where a hidden section stays visible (dimmed) so it can be selected; the block keeps its own display there (grid heroes) */
@media (max-width: 719px) { .hai-site:not(.hai-site--editing) .hai-section--hide-mobile { display: none !important; } }
@media (min-width: 720px) { .hai-site:not(.hai-site--editing) .hai-section--hide-desktop { display: none !important; } }
/* ---- per-item and site-wide font choices (generated from theme/fonts.ts; class -> CSS variable, no inline styles) ---- */
.hai-site .hai-fh--sans, .hai-site.hai-fh--sans { --hai-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hai-font-nav: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hai-font-label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.hai-site .hai-fb--sans, .hai-site.hai-fb--sans { --hai-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--hai-font-body); }
.hai-site .hai-fh--serif, .hai-site.hai-fh--serif { --hai-font-heading: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; --hai-font-nav: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; --hai-font-label: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; }
.hai-site .hai-fb--serif, .hai-site.hai-fb--serif { --hai-font-body: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif; font-family: var(--hai-font-body); }
.hai-site .hai-fh--block, .hai-site.hai-fh--block { --hai-font-heading: "Archivo Black", "Arial Black", Impact, Haettenschweiler, "Franklin Gothic Heavy", sans-serif; --hai-font-nav: "Archivo Black", "Arial Black", Impact, Haettenschweiler, "Franklin Gothic Heavy", sans-serif; --hai-heading-weight: 400; --hai-nav-weight: 400; }
.hai-site .hai-fb--block, .hai-site.hai-fb--block { --hai-font-body: "Archivo Black", "Arial Black", Impact, Haettenschweiler, "Franklin Gothic Heavy", sans-serif; font-family: var(--hai-font-body); }
.hai-site .hai-fh--mono, .hai-site.hai-fh--mono { --hai-font-heading: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --hai-font-nav: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --hai-font-label: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.hai-site .hai-fb--mono, .hai-site.hai-fb--mono { --hai-font-body: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-family: var(--hai-font-body); }

/* ---- buttons ---- */
.hai-btn {
  display: inline-block; padding: 0.7em 1.4em; border-radius: var(--hai-radius); font-weight: 600; text-decoration: none;
  border: 2px solid var(--hai-accent); line-height: 1.2; cursor: pointer; font-family: inherit; font-size: 1rem;
  transition: filter .15s ease, background-color .15s ease;
}
.hai-btn--primary, .hai-site a.hai-btn--primary { background: var(--hai-accent); color: var(--hai-accent-fg); }
.hai-btn--secondary, .hai-site a.hai-btn--secondary { background: transparent; color: var(--hai-accent); }
.hai-btn--link { background: transparent; border-color: transparent; color: var(--hai-link); padding-left: 0; padding-right: 0; text-decoration: underline; }
.hai-btn:hover { filter: brightness(1.08); text-decoration: none; }
.hai-btn--link:hover { text-decoration: underline; }

/* ---- markdown text ---- */
.hai-md > :first-child { margin-top: 0; }
.hai-md > :last-child { margin-bottom: 0; }
.hai-md ul, .hai-md ol { padding-left: 1.4em; margin: 0 0 1em; }
.hai-md li { margin: 0.25em 0; }
.hai-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--hai-bg-alt); padding: 0.1em 0.35em; border-radius: 4px; }
.hai-md hr { border: 0; border-top: 1px solid var(--hai-border); margin: 1.5em 0; }
.hai-md blockquote { margin: 1.25em 0; padding: 0.1em 0 0.1em 1.1em; border-left: 3px solid var(--hai-accent); color: var(--hai-fg); font-style: italic; }
.hai-md blockquote p { margin: 0; }

/* ---- hero ---- */
.hai-hero:not(.hai-section--banded) { background: var(--hai-bg-alt); }
.hai-hero__inner { max-width: var(--hai-wide); margin: 0 auto; display: grid; gap: calc(var(--hai-gap) * 2); align-items: center; }
.hai-hero--with-image .hai-hero__inner { grid-template-columns: 1fr; }
@media (min-width: 760px) { .hai-hero--with-image .hai-hero__inner { grid-template-columns: 1.1fr 1fr; } }
.hai-hero--center .hai-hero__body { text-align: center; }
.hai-hero--center:not(.hai-hero--with-image) .hai-hero__body { margin: 0 auto; max-width: 46rem; }
.hai-hero__sub { font-size: 1.2rem; color: var(--hai-fg-muted); max-width: 40rem; }
.hai-hero--center .hai-hero__sub { margin-left: auto; margin-right: auto; }
.hai-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hai-hero--center .hai-hero__actions { justify-content: center; }
.hai-hero__media img { width: 100%; border-radius: var(--hai-radius); object-fit: cover; }

/* ---- hero: parts added by the upgrade ---- */
/* the parts are <p> elements: ".hai-site p" (0,1,1) out-ranks a single class, hence the leading .hai-site */
.hai-site .hai-hero__eyebrow { margin-bottom: 1rem; }
.hai-site .hai-hero__badge { margin: 0 0 1rem; }
/* named layouts only: on a stored hero (variant auto) this would take the last paragraph's margin away and shrink the band */
.hai-hero[class*="hai-hero--v-"] .hai-hero__body > :last-child { margin-bottom: 0; }
.hai-site .hai-hero__placeholder { margin: 0; min-height: 14rem; display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--hai-fg-muted); border: 1px dashed var(--hai-border); border-radius: var(--hai-radius); }

/* section settings on the hero's own inner box (it does not use .hai-section__inner) */
.hai-hero.hai-section--width-narrow .hai-hero__inner { max-width: var(--hai-measure); }
.hai-hero.hai-section--width-wide .hai-hero__inner { max-width: var(--hai-xwide); }
.hai-hero.hai-section--width-full .hai-hero__inner { max-width: none; }

/* the named layouts share a slightly roomier rhythm than the classic hero */
.hai-hero[class*="hai-hero--v-"] .hai-hero__sub { font-size: var(--hai-text-lead); line-height: 1.55; }
.hai-hero[class*="hai-hero--v-"] .hai-hero__actions { margin-top: 2rem; }
/* balance is an enhancement: browsers without it wrap as before */
.hai-hero[class*="hai-hero--v-"] .hai-hero__heading { text-wrap: balance; }
/* a measure for the left-aligned heading of a NAMED layout; hai-hero--left alone is the alignment class every stored left hero carries */
.hai-hero[class*="hai-hero--v-"].hai-hero--left .hai-hero__heading { max-width: 22ch; }
.hai-hero[class*="hai-hero--v-"].hai-hero--with-image .hai-hero__heading { max-width: none; }

/* centered with a picture: the picture is a wide banner under the text */
.hai-hero--banner .hai-hero__inner { gap: clamp(2rem, 5vw, 3.5rem); }
.hai-hero--banner.hai-hero--shape-landscape .hai-hero__media img { aspect-ratio: 2 / 1; }
/* a square or portrait shot must not become a page-tall slab under a centred hero */
.hai-hero--banner .hai-hero__media img { max-height: min(60vh, 520px); }

/* split and product: side of the picture, product stage, price */
@media (min-width: 760px) {
  .hai-hero--v-split .hai-hero__inner, .hai-hero--v-product .hai-hero__inner { gap: clamp(2rem, 5vw, 4.5rem); }
  .hai-hero--media-left .hai-hero__inner { grid-template-columns: 1fr 1.1fr; }
  .hai-hero--media-left .hai-hero__media { order: -1; }
}
.hai-hero--v-product .hai-hero__media { order: -1; }
@media (min-width: 760px) { .hai-hero--v-product:not(.hai-hero--media-left) .hai-hero__media { order: 0; } }
.hai-hero--v-product .hai-hero__media img { background: var(--hai-bg); border: 1px solid var(--hai-border); }
.hai-site .hai-hero__price { font-family: var(--hai-font-label); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.2; margin: 0 0 1rem; }

/* picture shape and focus */
.hai-hero--shape-landscape .hai-hero__media img { aspect-ratio: 16 / 9; }
.hai-hero--shape-square .hai-hero__media img { aspect-ratio: 1 / 1; }
.hai-hero--shape-portrait .hai-hero__media img { aspect-ratio: 4 / 5; }
.hai-hero--focus-top img, .hai-hero--focus-top .hai-hero__video { object-position: center top; }
.hai-hero--focus-bottom img, .hai-hero--focus-bottom .hai-hero__video { object-position: center bottom; }
.hai-hero--focus-left img, .hai-hero--focus-left .hai-hero__video { object-position: left center; }
.hai-hero--focus-right img, .hai-hero--focus-right .hai-hero__video { object-position: right center; }

/* minimal: type on the page itself */
.hai-hero--v-minimal:not(.hai-section--banded) { background: transparent; }
.hai-hero--v-minimal .hai-hero__heading, .hai-hero--v-fullscreen .hai-hero__heading, .hai-hero--v-video .hai-hero__heading {
  font-size: var(--hai-text-display); line-height: calc(var(--hai-heading-leading) * 0.94);
}
.hai-hero.hai-hero--v-minimal.hai-hero--left .hai-hero__heading { max-width: 18ch; }

/* fullscreen and video: the picture behind the text */
.hai-hero--v-fullscreen, .hai-hero--v-video { display: grid; align-items: center; min-height: min(85vh, 860px); overflow: hidden; }
/* the escape hatch: height "auto" on a backdrop hero means "as tall as the content" */
.hai-hero--v-fullscreen.hai-hero--h-auto, .hai-hero--v-video.hai-hero--h-auto { min-height: 0; }
.hai-hero--v-fullscreen > .hai-hero__inner, .hai-hero--v-video > .hai-hero__inner { width: 100%; }
/* the display-size heading needs a wider column than the classic 46rem; the text under it keeps its 40rem measure */
.hai-hero--v-fullscreen.hai-hero--center .hai-hero__body, .hai-hero--v-video.hai-hero--center .hai-hero__body, .hai-hero--v-minimal.hai-hero--center .hai-hero__body { max-width: 60rem; }
.hai-hero__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
.hai-hero__backdrop img, .hai-hero__backdrop .hai-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.hai-hero__backdrop::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(0 0 0 / 0.6); }
.hai-hero--overlay-light .hai-hero__backdrop::after { background: rgb(0 0 0 / 0.4); }
.hai-hero--overlay-strong .hai-hero__backdrop::after { background: rgb(0 0 0 / 0.75); }
.hai-hero--v-fullscreen .hai-hero__sub, .hai-hero--v-video .hai-hero__sub, .hai-hero--v-fullscreen .hai-hero__eyebrow, .hai-hero--v-video .hai-hero__eyebrow { color: var(--hai-fg); }
.hai-hero--v-fullscreen .hai-hero__body, .hai-hero--v-video .hai-hero__body { text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
.hai-hero--v-fullscreen .hai-hero__actions, .hai-hero--v-video .hai-hero__actions { text-shadow: none; }

/*
 * video: WCAG 2.2.2 wants a way to pause, stop or HIDE motion that starts by itself. The switch is a plain
 * checkbox (keyboard and screen-reader friendly, no script): checked hides the film and leaves the poster.
 * Visitors who asked for reduced motion never see the film at all.
 */
.hai-hero__pause {
  -webkit-appearance: none; appearance: none; position: absolute; right: 1rem; bottom: 1rem; z-index: 1; width: 2.75rem; height: 2.75rem; margin: 0;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.7); background: rgb(0 0 0 / 0.5); cursor: pointer;
}
.hai-hero__pause::before {
  content: ""; box-sizing: content-box; position: absolute; top: 50%; left: 50%; width: 0.3rem; height: 0.9rem; transform: translate(-50%, -50%);
  border-style: solid; border-color: rgb(255 255 255 / 0.95); border-width: 0 0.28rem;
}
.hai-hero__pause:checked::before { width: 0; height: 0; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: rgb(255 255 255 / 0) rgb(255 255 255 / 0) rgb(255 255 255 / 0) rgb(255 255 255 / 0.95); transform: translate(-40%, -50%); }
.hai-hero__pause:checked ~ .hai-hero__backdrop .hai-hero__video { display: none; }
/* editor only: why the film is not moving in the canvas */
.hai-site .hai-hero__note { margin: 1.5rem 0 0; display: inline-block; padding: 0.4rem 0.75rem; font-size: var(--hai-text-small); text-shadow: none; border: 1px dashed var(--hai-border); border-radius: var(--hai-radius); }
/* on a phone the switch would sit beside a wrapped button: give it a row of its own under the content */
@media (max-width: 639px) { .hai-hero--v-video > .hai-hero__inner { padding-bottom: 3rem; } }
@media (prefers-reduced-motion: reduce) { .hai-hero__video, .hai-hero__pause { display: none; } }

/* height: the band becomes a grid so the content sits in the middle of the extra room */
.hai-hero--h-medium, .hai-hero--h-large, .hai-hero--h-full { display: grid; align-items: center; }
.hai-hero--h-medium > .hai-hero__inner, .hai-hero--h-large > .hai-hero__inner, .hai-hero--h-full > .hai-hero__inner { width: 100%; }
.hai-hero--h-medium { min-height: min(60vh, 560px); }
.hai-hero--h-large { min-height: min(80vh, 760px); }
.hai-hero--h-full { min-height: min(100vh, 1000px); }
@supports (min-height: 100svh) { .hai-hero--h-full { min-height: min(100svh, 1000px); } }

/* ---- nav ---- */
.hai-nav { position: relative; border-bottom: 1px solid var(--hai-border); background: var(--hai-bg); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.hai-nav__inner { max-width: var(--hai-wide); margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.hai-site .hai-nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--hai-fg); text-decoration: none; font-weight: 700; font-family: var(--hai-font-heading); font-size: 1.2rem; margin-right: auto; }
.hai-nav__logo { height: 2.25rem; width: auto; }
.hai-nav__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hai-nav__burger { display: none; width: 2.5rem; height: 2.5rem; border-radius: var(--hai-radius); cursor: pointer; position: relative; }
.hai-nav__burger span, .hai-nav__burger span::before, .hai-nav__burger span::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; height: 2px; background: var(--hai-fg); top: 50%; transition: transform .15s ease;
}
.hai-nav__burger span::before { top: -7px; }
.hai-nav__burger span::after { top: 7px; }
.hai-nav__menu { display: flex; align-items: center; gap: 1.25rem; }
.hai-nav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.hai-nav__menu a { color: var(--hai-fg); text-decoration: none; padding: 0.35rem 0; }
.hai-nav__menu a:hover, .hai-nav__menu a[aria-current="page"] { color: var(--hai-accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.hai-nav__menu a.hai-nav__cta { color: var(--hai-accent-fg); padding: 0.55em 1.1em; }
.hai-nav__menu a.hai-nav__cta:hover { text-decoration: none; }
@media (max-width: 719px) {
  .hai-nav__burger { display: block; }
  .hai-nav__menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-top: 0.5rem; border-top: 1px solid var(--hai-border); margin-top: 0.5rem; }
  .hai-nav__menu ul { flex-direction: column; width: 100%; }
  .hai-nav__toggle:checked ~ .hai-nav__menu { display: flex; }
  .hai-nav__toggle:checked ~ .hai-nav__burger span { background: transparent; }
  .hai-nav__toggle:checked ~ .hai-nav__burger span::before { transform: translateY(7px) rotate(45deg); }
  .hai-nav__toggle:checked ~ .hai-nav__burger span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- nav v2 ---- */
.hai-nav--v2 .hai-nav__brand { min-width: 0; font-weight: var(--hai-heading-weight); letter-spacing: var(--hai-heading-tracking); line-height: 1.2; }
.hai-nav--v2 .hai-nav__logo { flex: none; height: 2.25rem; max-width: min(14rem, 50vw); object-fit: contain; }
.hai-nav--logo-small .hai-nav__logo { height: 1.75rem; }
.hai-nav--logo-large .hai-nav__logo { height: 3rem; }
.hai-nav__words { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; overflow-wrap: anywhere; }
.hai-nav__tagline { font: 400 var(--hai-text-small)/1.35 var(--hai-font-body); letter-spacing: 0; color: var(--hai-fg-muted); }
.hai-nav--v2 .hai-nav__menu a { font-family: var(--hai-font-nav); font-weight: var(--hai-nav-weight); font-size: 0.95rem; }
.hai-nav--v2 .hai-nav__cta { padding: 0.55em 1.1em; font-size: 0.95rem; }
.hai-nav--v2 .hai-btn--link { padding-left: 0; padding-right: 0; color: var(--hai-fg); text-underline-offset: 4px; }
.hai-nav__extra { display: none; width: 100%; font-size: var(--hai-text-small); color: var(--hai-fg-muted); }
.hai-nav__social { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.hai-nav .hai-nav__social a { display: inline-block; padding: 0.3rem 0; color: inherit; text-decoration: none; }
.hai-nav .hai-nav__social a:hover { color: var(--hai-fg); text-decoration: underline; }
.hai-nav .hai-nav__contact { margin: 0; }
.hai-nav .hai-nav__note { max-width: var(--hai-wide); margin: 0.75rem auto 0; padding: 0.4rem 0.75rem; font-size: var(--hai-text-small); color: var(--hai-fg-muted); border: 1px dashed var(--hai-border); border-radius: var(--hai-radius); }
.hai-nav--v2 .hai-nav__burger { width: 2.75rem; height: 2.75rem; }
.hai-nav--v2 .hai-nav__burger span::before, .hai-nav--v2 .hai-nav__burger span::after { left: 0; right: 0; }
/* both generations (the classic header too, phase 5 review): the invisible checkbox draws its focus ring on the
   hamburger, and from 720px - no hamburger, the menu always open - it leaves the tab order */
.hai-nav__toggle:focus-visible ~ .hai-nav__burger { outline: 3px solid var(--hai-focus); outline-offset: 2px; }
@media (min-width: 720px) { .hai-nav__toggle { display: none; } }
@media (max-width: 719px) {
.hai-nav--v2 .hai-nav__brand { max-width: calc(100% - 4.25rem); }
.hai-nav--v2 .hai-nav__menu { padding-top: 0.25rem; }
.hai-nav--v2 .hai-nav__menu ul { gap: 0; }
.hai-nav--v2 .hai-nav__menu li + li { border-top: 1px solid var(--hai-border); }
.hai-nav--v2 .hai-nav__menu a { display: block; padding: 0.75rem 0; font-size: 1.05rem; }
.hai-nav--v2 .hai-nav__cta { display: none; width: 100%; margin: 0.5rem 0; text-align: center; font-size: 1rem; }
.hai-nav--v2 .hai-btn--link { text-align: left; }
.hai-nav--v2 .hai-nav__toggle:checked ~ .hai-nav__cta, .hai-nav__toggle:checked ~ .hai-nav__extra { display: block; }
.hai-nav__extra { padding: 0.5rem 0 0.25rem; }
}

@media (min-width: 720px) {
.hai-nav--align-center .hai-nav__inner, .hai-nav--split .hai-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.hai-nav--align-center .hai-nav__cta, .hai-nav--split .hai-nav__cta { justify-self: end; }
.hai-nav--align-left .hai-nav__brand { margin-right: 1rem; }
.hai-nav--align-left .hai-nav__menu { margin-right: auto; }
.hai-nav--split .hai-nav__menu { grid-area: 1 / 1; }
.hai-nav--split .hai-nav__brand { grid-column: 2; margin: 0; text-align: center; font-size: 1.35rem; }
}

.hai-nav--centered .hai-nav__brand, .hai-nav--centered .hai-nav__words { align-items: center; text-align: center; }
.hai-nav--centered .hai-nav__brand { flex-direction: column; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
@media (max-width: 719px) {
.hai-nav--centered .hai-nav__inner { position: relative; justify-content: center; }
.hai-nav--centered .hai-nav__brand { margin: 0 3.25rem; max-width: calc(100% - 6.5rem); }
.hai-nav--centered .hai-nav__burger { position: absolute; top: 0; right: 0; }
/* the brand is at least as tall as that 2.75rem burger and centred on it: a one-line name was ~28px, so the absolute
   burger hung 16-21px below it and past the bar's bottom edge */
.hai-nav--centered .hai-nav__brand { min-height: 2.75rem; justify-content: center; }
.hai-nav--centered .hai-nav__menu a { text-align: center; }
}
@media (min-width: 720px) {
.hai-nav.hai-nav--centered { padding-top: 1.75rem; padding-bottom: 0.9rem; }
.hai-nav--centered .hai-nav__inner { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 0.9rem 0; }
.hai-nav--centered .hai-nav__inner::before { content: ""; grid-area: 2 / 1 / auto / -1; border-top: 1px solid var(--hai-border); }
.hai-nav--centered .hai-nav__brand { grid-area: 1 / 1 / auto / -1; justify-self: center; margin: 0 0 0.35rem; }
.hai-nav--centered .hai-nav__menu { grid-area: 3 / 2; }
.hai-nav--centered .hai-nav__menu ul { justify-content: center; column-gap: 1.75rem; }
.hai-nav--centered .hai-nav__cta { grid-area: 3 / 3; margin-left: 1.75rem; }
}

.hai-nav.hai-nav--minimal { border-color: transparent; padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.hai-nav--minimal .hai-nav__brand { font-family: var(--hai-font-nav); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.hai-nav--minimal .hai-nav__menu a { color: var(--hai-fg-muted); }
.hai-nav--minimal .hai-nav__menu a:hover, .hai-nav--minimal .hai-nav__menu a[aria-current="page"] { color: var(--hai-fg); }
@media (min-width: 720px) {
.hai-nav--minimal .hai-nav__menu ul { column-gap: 2rem; }
.hai-nav--minimal .hai-nav__menu a, .hai-nav--minimal .hai-nav__cta { font-size: var(--hai-text-small); }
}

.hai-nav.hai-nav--overlay, .hai-nav.hai-nav--overlay-canvas { background: transparent; border-color: transparent; }
.hai-nav--v2 { --hai-nav-solid: var(--hai-dark-bg); }
.hai-nav--tone-light { --hai-nav-solid: var(--hai-bg); }
.hai-nav.hai-nav--overlay:last-child, .hai-nav.hai-nav--overlay-canvas { background: var(--hai-nav-solid); }
.hai-nav--overlay:not(:last-child) { position: absolute; left: 0; right: 0; z-index: 30; }
.hai-nav--overlay.hai-section--banded:not(:last-child)::before { content: ""; position: absolute; top: 0; right: 0; bottom: -2.5rem; left: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0)); }
.hai-nav--overlay .hai-nav__tagline { color: inherit; }
.hai-site .hai-page > .hai-nav--overlay + * { padding-top: calc(var(--hai-section-pad, var(--hai-section)) + 4.5rem); }
@media (max-width: 719px) {
.hai-nav--overlay .hai-nav__menu { border-top-color: transparent; }
.hai-nav.hai-nav--overlay:has(:checked) { background: var(--hai-nav-solid); }
}

@media (min-width: 1000px) {
@supports selector(:has(*)) {
.hai-site:has(.hai-nav--sidebar) .hai-page { padding-left: 16rem; }
.hai-nav.hai-nav--sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 16rem; overflow-y: auto; padding: 2.75rem 2rem 2rem; border-bottom: 0; border-right: 1px solid var(--hai-border); }
.hai-nav--sidebar .hai-nav__inner { flex-flow: column; align-items: flex-start; gap: 2rem; min-height: 100%; }
.hai-nav--sidebar .hai-nav__brand { flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 100%; margin: 0; font-size: 1.35rem; }
.hai-nav--sidebar .hai-nav__menu, .hai-nav--sidebar .hai-nav__menu ul, .hai-nav--sidebar .hai-nav__social { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.hai-nav--sidebar .hai-nav__menu a { display: block; padding: 0.4rem 0; font-size: 1rem; }
.hai-nav--sidebar .hai-nav__extra { display: block; margin-top: auto; padding-top: 1rem; }
}
}

.hai-nav--tone-light:not(.hai-nav--overlay):not(.hai-nav--overlay-canvas) { background: var(--hai-bg-alt); }
.hai-nav--tone-dark:not(.hai-nav--overlay):not(.hai-nav--overlay-canvas) { background: var(--hai-dark-bg); border-color: transparent; }
.hai-nav--tone-primary:not(.hai-nav--overlay):not(.hai-nav--overlay-canvas) { background: var(--hai-accent); border-color: transparent; }
.hai-nav.hai-nav--borderless { border-color: transparent; }
.hai-nav--width-wide .hai-nav__inner { max-width: var(--hai-xwide); }
.hai-nav--width-full .hai-nav__inner { max-width: none; }
.hai-nav--sticky { position: sticky; top: 0; z-index: 40; box-shadow: 0 10px 24px -20px rgb(0 0 0 / 0.55); }
/* the bar's height for anything else that sticks (DocsNav reads top: var(--hai-nav-height, 0)): 0.75rem padding x2 + the 3rem line */
.hai-site:has(.hai-nav--sticky) { --hai-nav-height: 4.5rem; }
/* a bar that stays on screen must stay small on a small phone: under 380px a sticky header drops the tagline and the
   centred masthead its display size (phase 5: a two-word name + tagline was a 120px bar, 21% of a 568px screen) */
@media (max-width: 379px) {
  .hai-nav--sticky .hai-nav__tagline { display: none; }
  .hai-nav--sticky.hai-nav--centered .hai-nav__brand { font-size: 1.2rem; }
}

/* ---- footer ---- */
.hai-footer { border-top: 1px solid var(--hai-border); background: var(--hai-bg-alt); color: var(--hai-fg-muted); font-size: 0.925rem; padding-top: 2rem; padding-bottom: 2rem; margin-top: auto; }
.hai-footer__inner { max-width: var(--hai-wide); margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.hai-footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.hai-footer__links a { color: inherit; }
.hai-footer__copy { margin: 0; }

/* ---- footer: the upgrade (every selector below needs a class no stored footer has) ---- */
/* the band owns the ground again */
.hai-footer.hai-section--bg-surface { background: var(--hai-bg-alt); }
.hai-footer.hai-section--bg-accent { background: var(--hai-accent-soft); }
.hai-footer.hai-section--bg-primary { background: var(--hai-accent); color: var(--hai-accent-fg); border-top-color: transparent; }
.hai-footer.hai-section--bg-dark, .hai-footer.hai-section--bg-image { background: var(--hai-band-bg); color: var(--hai-band-fg); border-top-color: transparent; }

/* the framed shell: main content, then the social row, then the small print */
.hai-footer__inner.hai-section__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hai-footer__main { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 3vw, 3rem); }
.hai-footer__brand { flex: 1 1 13rem; max-width: 28rem; }
/* the 10rem track minimum (was 8rem) is in the text's own unit: two-up only where an ordinary e-mail address fits a
   column. At 8rem a 320-360px phone got two ~130-150px columns and "studio@example.co / m" broke mid-word. */
.hai-footer__cols { flex: 3 1 20rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.hai-footer__cols--1 { flex-grow: 0; max-width: 14rem; }
/* one track per column from the tablet breakpoint, so three columns never wrap into two ragged ones */
@media (min-width: 720px) {
  .hai-footer__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hai-footer__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hai-footer__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hai-footer__aside { flex: 1 1 12rem; max-width: 22rem; display: grid; gap: 1.75rem; align-content: start; }

/* brand column */
.hai-site .hai-footer__wordmark { font-family: var(--hai-font-heading); font-size: 1.3rem; letter-spacing: -0.01em; color: var(--hai-fg); margin: 0; }
.hai-site .hai-footer__logo { display: block; width: auto; max-width: min(100%, 11rem); max-height: 3.25rem; object-fit: contain; }
.hai-site .hai-footer__wordmark--under { font-size: 1rem; margin-top: 0.75rem; }
.hai-site .hai-footer__tagline { margin: 0.75rem 0 0; max-width: 34ch; }

/* link columns */
.hai-site .hai-footer__col-heading { font-size: var(--hai-text-small); letter-spacing: 0.09em; text-transform: uppercase; color: var(--hai-fg); margin: 0 0 0.9rem; }
.hai-footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
/* a very long unbroken word (a pasted URL as a label) must break rather than widen the track */
.hai-footer__col-list, .hai-site .hai-footer__tagline, .hai-site .hai-footer__address, .hai-site .hai-footer__contact-line { overflow-wrap: anywhere; }
.hai-site .hai-footer__col-list a, .hai-site .hai-footer__contact a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.hai-site .hai-footer__col-list a:hover, .hai-site .hai-footer__contact a:hover, .hai-site .hai-footer__base .hai-footer__links a:hover, .hai-site .hai-footer__top:hover { color: var(--hai-fg); text-decoration: underline; }

/* contact + newsletter */
.hai-site .hai-footer__address { white-space: pre-line; margin: 0 0 0.6rem; }
.hai-site .hai-footer__contact-line { margin: 0 0 0.4rem; }
.hai-site .hai-footer__contact > :last-child, .hai-site .hai-footer__news > :last-child { margin-bottom: 0; }
.hai-site .hai-footer__news-text { margin: 0 0 0.9rem; max-width: 32ch; }
.hai-site .hai-footer__news-cta { margin: 0; }
.hai-site .hai-footer__cta { color: var(--hai-accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.1rem; }
.hai-site .hai-footer__cta::after { content: " \2192"; }
.hai-site .hai-footer__cta:hover { color: var(--hai-fg); }

/* social row: round glyph buttons (the shared SocialLinks icon set); the name is the accessible label and the tooltip */
.hai-footer__social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hai-site .hai-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--hai-border); border-radius: 999px; color: inherit; text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.hai-site .hai-footer__social-link:hover { border-color: currentColor; color: var(--hai-fg); }
.hai-footer__social-icon { display: block; }

/* the small print line */
.hai-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; border-top: 1px solid var(--hai-border); padding-top: 1.4rem; }
.hai-footer__base:first-child { border-top: 0; padding-top: 0; }
.hai-footer__base .hai-footer__text { order: -2; flex: 1 1 100%; }
.hai-footer__base .hai-footer__copy { order: -1; }
.hai-footer__base .hai-footer__links { margin-left: auto; }
.hai-site .hai-footer__top-line { margin: 0; flex: 0 0 auto; }
.hai-site .hai-footer__top { color: inherit; text-decoration: none; }
.hai-site .hai-footer__top::before { content: "\2191\00a0"; }

/* columns: the default framed layout, brand on the left and the columns beside it */
.hai-footer--v-columns .hai-footer__brand { flex-basis: 14rem; }

/* centered: one stacked, centred column - the layout a personal site or a portfolio wants */
.hai-footer--v-centered .hai-footer__main { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.hai-footer--v-centered .hai-footer__brand, .hai-footer--v-centered .hai-footer__aside { flex: 0 1 auto; max-width: 42rem; justify-items: center; }
.hai-site .hai-footer--v-centered .hai-footer__tagline, .hai-site .hai-footer--v-centered .hai-footer__news-text { margin-left: auto; margin-right: auto; }
.hai-footer--v-centered .hai-footer__cols { flex: 0 1 auto; width: 100%; justify-items: center; text-align: center; }
.hai-footer--v-centered .hai-footer__social ul { justify-content: center; }
.hai-footer--v-centered .hai-footer__base { justify-content: center; text-align: center; }
.hai-footer--v-centered .hai-footer__base .hai-footer__links { margin-left: 0; }
.hai-footer--v-centered .hai-footer__base .hai-footer__links ul { justify-content: center; }

/* minimal: one quiet line, name on the left and the legal links on the right */
.hai-footer--v-minimal:not([class*="hai-section--space-"]) { --hai-section-pad: calc(var(--hai-section) * 0.45); }
.hai-footer--v-minimal .hai-footer__inner.hai-section__inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.75rem; }
.hai-footer--v-minimal .hai-footer__main { flex: 0 1 auto; gap: 1rem 1.75rem; align-items: center; }
.hai-footer--v-minimal .hai-footer__brand { flex: 0 1 auto; }
.hai-site .hai-footer--v-minimal .hai-footer__wordmark { font-size: 1rem; }
.hai-site .hai-footer--v-minimal .hai-footer__tagline { margin-top: 0.25rem; }
.hai-footer--v-minimal .hai-footer__base { flex: 1 1 auto; justify-content: flex-end; border-top: 0; padding-top: 0; gap: 0.4rem 1.25rem; }
.hai-footer--v-minimal .hai-footer__base .hai-footer__links { margin-left: 0; }
@media (max-width: 719px) { .hai-footer--v-minimal .hai-footer__base { justify-content: flex-start; } }

/* big: the name is the design - an oversized wordmark over the columns */
.hai-footer--v-big .hai-footer__inner.hai-section__inner { gap: clamp(2.25rem, 5vw, 3.5rem); }
.hai-footer--v-big .hai-footer__brand { flex: 1 1 100%; max-width: none; }
.hai-site .hai-footer--v-big .hai-footer__wordmark { font-size: clamp(2.5rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -0.025em; }
.hai-site .hai-footer--v-big .hai-footer__logo { max-width: min(100%, 20rem); max-height: 6rem; }
.hai-site .hai-footer--v-big .hai-footer__tagline { font-size: var(--hai-text-lead); max-width: 30ch; margin-top: 1rem; }
.hai-footer--v-big .hai-footer__cols { flex: 2 1 20rem; }

/* editor only: a footer with nothing in it at all (a published page renders the empty shell instead) */

/* ---- contact form ---- */
.hai-form { max-width: 40rem; margin-left: auto; margin-right: auto; }
.hai-form__form { display: flex; flex-direction: column; gap: 1rem; }
.hai-form__field { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
.hai-form__field input, .hai-form__field textarea {
  font: inherit; font-weight: 400; padding: 0.65em 0.8em; border: 1px solid var(--hai-border); border-radius: var(--hai-radius);
  background: var(--hai-bg); color: var(--hai-fg); width: 100%;
}
.hai-form__field textarea { resize: vertical; min-height: 7rem; }
.hai-form__form .hai-btn { align-self: flex-start; }
.hai-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hai-form__status:empty { display: none; }
.hai-form__status { margin: 0; padding: 0.75rem 1rem; border-radius: var(--hai-radius); background: var(--hai-accent-soft); }
.hai-form__status[data-state="error"] { background: var(--hai-bg-alt); color: var(--hai-fg); border-left: 4px solid var(--hai-fg); }
.hai-form__note { color: var(--hai-fg-muted); font-size: 0.9rem; margin: 0; }

/* ---- contact form: inputs added by the upgrade ---- */
.hai-form__opt { font-weight: 400; font-size: var(--hai-text-small); color: var(--hai-fg-muted); }
.hai-form__select {
  font: inherit; font-weight: 400; padding: 0.65em 0.8em; border: 1px solid var(--hai-border); border-radius: var(--hai-radius);
  background: var(--hai-bg); color: var(--hai-fg); width: 100%; min-height: 2.75rem;
}
/* a hint is muted ink, not the browser's grey (unreadable on the dark palettes) */
.hai-form__hinted::placeholder { color: var(--hai-fg-muted); opacity: 1; }
.hai-form__check { display: flex; align-items: center; gap: 0.65rem; min-height: 2.75rem; font-weight: 600; }
.hai-form__check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--hai-accent); }

/* ---- contact form: the layouts ---- */
/* the original root is a 40rem column; a layout root is a full section and the column moves to its inner box */
.hai-form.hai-section { max-width: none; }
.hai-form__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.hai-form[class*="hai-form--v-"]:not(.hai-form--with-aside) > .hai-form__inner { max-width: 40rem; }
/* <p> and <h2>: the element rules of the base sheet are (0,1,1), hence the leading .hai-site */
.hai-site .hai-form__eyebrow { margin-bottom: 1rem; }
.hai-site .hai-form__head .hai-form__heading { margin: 0 0 1rem; max-width: 22ch; }
.hai-site .hai-form__head .hai-form__heading:last-child { margin-bottom: 0; }
.hai-site .hai-form__head .hai-form__intro { margin: 0; max-width: 40rem; font-size: var(--hai-text-lead); line-height: 1.6; color: var(--hai-fg-muted); }
.hai-form__main, .hai-form__head { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  /* Name beside Email, Phone beside Company; everything else runs the full width */
  .hai-form__inner .hai-form__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .hai-form__inner .hai-form__form > * { grid-column: 1 / -1; }
  .hai-form__inner .hai-form__form > .hai-form__field--half { grid-column: auto; }
  .hai-form__inner .hai-form__form .hai-btn { justify-self: start; }
}

/* split-info, split-map: heading and details on the left, the form on the right; on a phone the form comes first */
.hai-form__info { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--hai-border); display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem 1.5rem; }
.hai-form__info dt {
  margin-bottom: 0.3rem; font-family: var(--hai-font-label); font-size: var(--hai-text-small); font-weight: 600;
  letter-spacing: var(--hai-label-tracking); text-transform: var(--hai-label-transform); color: var(--hai-fg-muted);
}
.hai-form__info dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.hai-site .hai-form__info a { color: var(--hai-fg); text-decoration: underline; text-underline-offset: 3px; }
.hai-site .hai-form__info a:hover { color: var(--hai-link); }
.hai-form__map { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--hai-border); border-radius: var(--hai-radius); background: var(--hai-bg-alt); }
.hai-form__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.hai-form__map + .hai-form__info, .hai-form__placeholder + .hai-form__info { margin-top: 1.5rem; padding-top: 0; border-top: 0; }
@media (min-width: 800px) {
  .hai-form--with-aside > .hai-form__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 2rem clamp(2.5rem, 6vw, 5rem); align-items: start; }
  .hai-form--with-aside .hai-form__head { grid-area: 1 / 1; }
  .hai-form--with-aside .hai-form__aside { grid-area: 2 / 1; }
  .hai-form--with-aside .hai-form__main { grid-area: 1 / 2 / span 2; }
  /* no heading: the details start at the top; no form (nowhere to send it): the details take its place */
  .hai-form--with-aside .hai-form__main:first-child ~ .hai-form__aside { grid-row: 1 / span 2; }
  .hai-form--with-aside .hai-form__head + .hai-form__aside { grid-area: 1 / 2 / span 2; }
}

/* fullscreen: a tall centred statement; the text is centred, the form keeps its left edge */
.hai-form--v-fullscreen { display: grid; align-items: center; min-height: min(92vh, 60rem); }
.hai-form.hai-form--v-fullscreen.hai-section > .hai-form__inner { width: 100%; max-width: 46rem; }
.hai-form--v-fullscreen .hai-form__head, .hai-form--v-card .hai-form__head { text-align: center; }
.hai-site .hai-form--v-fullscreen .hai-form__heading, .hai-site .hai-form--v-fullscreen .hai-form__intro,
.hai-site .hai-form--v-card .hai-form__heading, .hai-site .hai-form--v-card .hai-form__intro { margin-left: auto; margin-right: auto; text-wrap: balance; }
.hai-site .hai-form--v-fullscreen .hai-form__intro { color: var(--hai-fg); }
.hai-form--v-fullscreen .hai-form__main { width: 100%; max-width: 34rem; margin: 0 auto; }
.hai-form--v-fullscreen .hai-form__form .hai-btn, .hai-form--v-card .hai-form__form .hai-btn { align-self: stretch; justify-self: stretch; }

/* card: the form in a raised card (.hai-card); on a surface band the card takes the page colour */
.hai-form.hai-form--v-card.hai-section > .hai-form__inner { max-width: 44rem; }
.hai-form--v-card .hai-form__main { padding: clamp(1.5rem, 4vw, 2.75rem); }
/* the boxes take the card's ground: on a surface band the page colour would read as "disabled" */
.hai-form--v-card .hai-form__field input, .hai-form--v-card .hai-form__field textarea, .hai-form--v-card .hai-form__select { background: var(--hai-bg-alt); }

/* editor only: where the map goes */
.hai-site .hai-form__placeholder { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--hai-fg-muted); border: 1px dashed var(--hai-border); border-radius: var(--hai-radius); }

/* ---- services ---- */
.hai-services > .hai-section__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hai-services__head { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.hai-site .hai-services__eyebrow { margin: 0; }
.hai-site .hai-services__heading { margin: 0; max-width: 30ch; }
.hai-site .hai-services__intro { margin: 0; color: var(--hai-fg-muted); font-size: var(--hai-text-lead); line-height: 1.55; max-width: 42rem; }

.hai-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hai-gap); }
.hai-services__item { display: grid; gap: 0.5rem; align-content: start; }
.hai-site .hai-services__name { margin: 0; }
.hai-site .hai-services__text { margin: 0; color: var(--hai-fg-muted); }
.hai-site .hai-services__text, .hai-services__price { overflow-wrap: anywhere; }
.hai-services__price { font-family: var(--hai-font-label); font-size: var(--hai-text-small); font-weight: 600; letter-spacing: var(--hai-label-tracking); color: var(--hai-accent-ink); }
.hai-services__icon { display: block; font-size: 1.6rem; line-height: 1; }
.hai-services__icon--svg { color: var(--hai-accent-ink); line-height: 0; }
.hai-services__number { font-family: var(--hai-font-label); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: var(--hai-label-tracking); color: var(--hai-accent-ink); }
.hai-services__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hai-radius); }
.hai-services__cta { justify-self: start; margin-top: 0.25rem; }
.hai-services__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
/* a whole-item link: one <a> around the name with a stretched ::after, and the card answers the pointer */
.hai-services__item--linked { position: relative; transition: background-color .18s ease; }
.hai-services__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--hai-radius); }
.hai-site .hai-services__link { color: inherit; text-decoration: none; }
.hai-site .hai-services__link:hover { text-decoration: underline; }
.hai-site .hai-services--cards .hai-services__item--linked:hover, .hai-site .hai-services--media .hai-services__item--linked:hover { background: var(--hai-accent-soft); }

/* columns: no chrome at all, the air does the separating */
.hai-services--columns .hai-services__list { gap: clamp(2rem, 5vw, 3.25rem); }

/* numbered: the numeral is the design, and a rule carries each item */
.hai-services--numbered .hai-services__item { border-top: 2px solid var(--hai-fg); padding-top: 1.25rem; }

/* media: the picture runs the full width of the card, into the card's own padding */
.hai-services--media .hai-services__item { padding: 0 0 1.5rem; overflow: hidden; }
.hai-services--media .hai-services__image { border-radius: 0; }
.hai-services--media .hai-services__item > :not(.hai-services__image) { margin-left: 1.5rem; margin-right: 1.5rem; }

/* how many across; one column on a phone, two in between, the chosen count from 1000px */
@media (min-width: 640px) {
  .hai-services--cols-2 .hai-services__list, .hai-services--cols-3 .hai-services__list, .hai-services--cols-4 .hai-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .hai-services--cols-3 .hai-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hai-services--cols-4 .hai-services__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* list: hairline rows - name on the left, description beside it, the price at the end (one column on a phone) */
.hai-services--list .hai-services__list, .hai-services--accordion .hai-services__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hai-services--list .hai-services__item { border-top: 1px solid var(--hai-border); padding: 1.25rem 0; gap: 0.35rem 2rem; }
/* one grid for the whole list (subgrid), so every name, description and price lines up down the page */
@media (min-width: 720px) {
  .hai-services--list .hai-services__list { grid-template-columns: minmax(0, 7fr) minmax(0, 10fr) auto; }
  .hai-services--list .hai-services__item { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
  .hai-services--list .hai-services__name { grid-area: 1 / 1; }
  .hai-services--list .hai-services__text { grid-area: 1 / 2; }
  .hai-services--list .hai-services__price { grid-area: 1 / 3; text-align: right; }
  .hai-services--list .hai-services__cta { grid-area: 2 / 2; }
}

/* accordion: a details row per service, open and close with no JavaScript */
.hai-services--accordion .hai-services__item { border-top: 1px solid var(--hai-border); }
.hai-services--accordion .hai-services__item:last-child { border-bottom: 1px solid var(--hai-border); }
.hai-services__summary { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.hai-services__summary::-webkit-details-marker { display: none; }
.hai-site .hai-services__summary .hai-services__name { flex: 1 1 auto; }
/* on a phone the price beside the name squeezed it until a word split ("Bookkeepin/g"): the price moves under the
   name, which keeps the whole row beside the +/- marker (basis 0, so the marker never wraps away from it) */
@media (max-width: 419px) {
  .hai-services__summary { flex-wrap: wrap; row-gap: 0.2rem; }
  .hai-site .hai-services__summary .hai-services__name { flex: 1 1 0; }
  .hai-services__summary .hai-services__price { order: 1; flex-basis: 100%; }
}
.hai-services__summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--hai-fg-muted); }
.hai-services__details[open] .hai-services__summary::after { content: "\2212"; }
.hai-services__panel { display: grid; gap: 0.75rem; justify-items: start; padding: 0 0 1.35rem; max-width: 52rem; }

/* the header and the closing button follow the heading alignment */
.hai-services--align-left .hai-services__head { justify-items: start; text-align: left; }
.hai-services--align-left .hai-services__actions { justify-content: flex-start; }

/* editor only: the hint of an empty block (a published page renders nothing for it) */

/* ---- testimonials ---- */
.hai-testimonials > .hai-section__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hai-testimonials__head { max-width: 46rem; }
.hai-testimonials__head > :last-child { margin-bottom: 0; }
.hai-testimonials__heading { max-width: 24ch; }
.hai-site .hai-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hai-gap); }
.hai-testimonials__item { display: grid; min-width: 0; }

/* the card: four areas, the attribution kept at the bottom edge so a row of cards lines up */
.hai-testimonials__card { margin: 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rating rating" "quote quote" "avatar by"; align-items: start; row-gap: 1.1rem; }
.hai-site .hai-testimonials__rating { grid-area: rating; margin: 0; color: var(--hai-accent-ink); }
.hai-testimonials__stars { display: flex; gap: 0.1rem; }
.hai-testimonials__star { fill: none; }
.hai-testimonials__star--on { fill: currentColor; }
.hai-testimonials__quote { grid-area: quote; margin: 0; min-width: 0; }
.hai-site .hai-testimonials__quote p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.hai-site .hai-testimonials__avatar { grid-area: avatar; align-self: center; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; margin-right: 0.85rem; background: var(--hai-bg-alt); }
.hai-testimonials__by { grid-area: by; align-self: center; display: grid; gap: 0.1rem; min-width: 0; }
.hai-testimonials__author { font-weight: 600; overflow-wrap: anywhere; }
.hai-testimonials__meta { color: var(--hai-fg-muted); font-size: var(--hai-text-small); overflow-wrap: anywhere; }

/* cards: a grid of equal-height boxes, at most three across */
.hai-testimonials--cards .hai-testimonials__list { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.hai-testimonials--cards .hai-testimonials__card, .hai-testimonials--slider .hai-testimonials__card, .hai-testimonials--wall .hai-testimonials__card { grid-template-rows: auto 1fr auto; }
@media (min-width: 640px) {
  .hai-testimonials--cards.hai-testimonials--cols-2 .hai-testimonials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .hai-testimonials--cards.hai-testimonials--cols-3 .hai-testimonials__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* large: the quote is the design - heading font, an opening mark, hairlines between the quotes */
.hai-site .hai-testimonials--large .hai-testimonials__quote p { font-family: var(--hai-font-heading); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.32; letter-spacing: var(--hai-heading-tracking); max-width: 26ch; }
.hai-testimonials--large .hai-testimonials__quote::before { content: "\201C"; display: block; font-family: var(--hai-font-heading); font-size: 4rem; line-height: 0.55; color: var(--hai-accent-ink); margin-bottom: 0.4rem; }
.hai-testimonials--large .hai-testimonials__card { row-gap: 1.4rem; }
.hai-testimonials--large .hai-testimonials__list { gap: clamp(2rem, 5vw, 3.5rem); }
.hai-testimonials--large .hai-testimonials__item + .hai-testimonials__item { border-top: 1px solid var(--hai-border); padding-top: clamp(2rem, 5vw, 3.5rem); }

/* slider: a scroll-snap rail that needs no JS; site.js only adds the arrows and dots below it */
.hai-testimonials--slider .hai-testimonials__list { grid-auto-flow: column; grid-auto-columns: min(23rem, 82%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 0.25rem; }
/* position: relative: the absolutely positioned screen-reader rating text must take its containing block INSIDE the
   rail, or it escapes the overflow clip from an off-screen card and widens the page */
.hai-testimonials--slider .hai-testimonials__item { position: relative; scroll-snap-align: start; }
.hai-testimonials__controls { display: none; }
.hai-js .hai-testimonials__controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; }
.hai-testimonials__nav { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--hai-border); border-radius: 999px; background: var(--hai-bg); color: var(--hai-fg); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.hai-testimonials__nav:hover { background: var(--hai-accent-soft); border-color: var(--hai-fg); }
.hai-testimonials__nav[disabled] { opacity: 0.4; cursor: default; }
.hai-site .hai-testimonials__dots { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; }
.hai-testimonials__dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.hai-testimonials__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hai-border); transition: background-color 0.2s ease, transform 0.2s ease; }
.hai-testimonials__dot:hover::before { background: var(--hai-fg-muted); }
.hai-testimonials__dot[aria-current]::before { background: var(--hai-accent); transform: scale(1.35); }

/* portrait: a tall picture beside the quote, sides alternating down the page */
.hai-testimonials--portrait .hai-testimonials__list { gap: clamp(2.5rem, 6vw, 4.5rem); }
.hai-testimonials--portrait .hai-testimonials__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "rating" "quote" "by"; row-gap: 1.25rem; }
.hai-site .hai-testimonials--portrait .hai-testimonials__avatar { align-self: start; width: 100%; max-width: 22rem; height: auto; aspect-ratio: 4 / 5; border-radius: var(--hai-radius); margin-right: 0; }
.hai-site .hai-testimonials--portrait .hai-testimonials__quote p { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; }
@media (min-width: 720px) {
  .hai-testimonials--portrait .hai-testimonials__card { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "avatar rating" "avatar quote" "avatar by"; column-gap: clamp(2rem, 5vw, 4rem); align-content: center; }
  .hai-testimonials--portrait .hai-testimonials__item:nth-child(even) .hai-testimonials__card { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "rating avatar" "quote avatar" "by avatar"; }
}

/* minimal: text only, separated by hairlines - the quiet list an editorial page wants */
.hai-site .hai-testimonials--minimal .hai-testimonials__list { gap: 0; max-width: 46rem; }
.hai-testimonials--minimal .hai-testimonials__item { border-top: 1px solid var(--hai-border); padding: clamp(1.4rem, 3vw, 2rem) 0; }
.hai-testimonials--minimal .hai-testimonials__item:last-child { border-bottom: 1px solid var(--hai-border); }
.hai-testimonials--minimal .hai-testimonials__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rating" "quote" "by"; row-gap: 0.7rem; }
.hai-site .hai-testimonials--minimal .hai-testimonials__avatar { display: none; }
.hai-testimonials--minimal .hai-testimonials__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font-size: var(--hai-text-small); }

/* columns on the two single-column layouts: without them a wide band keeps its right half empty */
@media (min-width: 860px) {
  .hai-site .hai-testimonials--minimal.hai-testimonials--cols-2 .hai-testimonials__list,
  .hai-site .hai-testimonials--minimal.hai-testimonials--cols-3 .hai-testimonials__list { max-width: none; column-gap: clamp(2rem, 5vw, 4rem); }
  .hai-testimonials--minimal.hai-testimonials--cols-2 .hai-testimonials__list,
  .hai-testimonials--large.hai-testimonials--cols-2 .hai-testimonials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hai-testimonials--minimal.hai-testimonials--cols-3 .hai-testimonials__list,
  .hai-testimonials--large.hai-testimonials--cols-3 .hai-testimonials__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hai-testimonials--large.hai-testimonials--cols-2 .hai-testimonials__item + .hai-testimonials__item,
  .hai-testimonials--large.hai-testimonials--cols-3 .hai-testimonials__item + .hai-testimonials__item { border-top: 0; padding-top: 0; }
  .hai-site .hai-testimonials--large.hai-testimonials--cols-2 .hai-testimonials__quote p,
  .hai-site .hai-testimonials--large.hai-testimonials--cols-3 .hai-testimonials__quote p { max-width: none; font-size: clamp(1.2rem, 2vw, 1.5rem); }
}

/* wall: CSS columns, so quotes of very different lengths pack without leaving holes */
.hai-site .hai-testimonials--wall .hai-testimonials__list { display: block; column-count: 1; column-gap: var(--hai-gap); }
.hai-testimonials--wall .hai-testimonials__item { display: block; break-inside: avoid; margin-bottom: var(--hai-gap); }
@media (min-width: 640px) { .hai-site .hai-testimonials--wall .hai-testimonials__list { column-count: 2; } }
@media (min-width: 1000px) {
  .hai-site .hai-testimonials--wall .hai-testimonials__list { column-count: 3; }
  .hai-site .hai-testimonials--wall.hai-testimonials--cols-2 .hai-testimonials__list { column-count: 2; }
}

/* editor only: the hint of an empty block (a published page renders nothing for it) */

/* ---- about ---- */
.hai-about > .hai-section__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }

/* picture: a predictable box, so any upload keeps the column */
.hai-about__media { margin: 0; min-width: 0; }
.hai-about__media img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--hai-radius); }
.hai-about--square .hai-about__media img { border-radius: 0; }
.hai-about--aspect-3-4 .hai-about__media img { aspect-ratio: 3 / 4; }
.hai-about--aspect-1-1 .hai-about__media img { aspect-ratio: 1 / 1; }
.hai-about--aspect-4-3 .hai-about__media img { aspect-ratio: 4 / 3; }
.hai-about--aspect-16-9 .hai-about__media img { aspect-ratio: 16 / 9; }

.hai-about__body { min-width: 0; overflow-wrap: break-word; }
.hai-about__body > :last-child { margin-bottom: 0; }
.hai-site .hai-about__eyebrow { margin-bottom: 1rem; }
.hai-site .hai-about__heading { margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); max-width: 22ch; }
.hai-site .hai-about__lead { margin: 0 0 1.25rem; max-width: 38rem; }
.hai-about__text { color: var(--hai-fg-muted); max-width: 40rem; line-height: 1.65; }
.hai-about__text > :last-child { margin-bottom: 0; }
.hai-about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }

/* pull quote */
.hai-about__quote { margin: 1.75rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--hai-accent-ink); max-width: 30ch; }
.hai-site .hai-about__quote p { margin: 0; font-family: var(--hai-font-heading); font-size: var(--hai-text-h3); line-height: 1.35; color: var(--hai-fg); }

/* facts: label/value pairs, one to six */
.hai-about__facts { margin: 1.75rem 0 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); max-width: 40rem; }
.hai-about__fact { min-width: 0; border-top: 1px solid var(--hai-border); padding-top: 0.6rem; }
.hai-about__fact-label { font-family: var(--hai-font-label); font-size: var(--hai-text-small); letter-spacing: var(--hai-label-tracking); text-transform: var(--hai-label-transform); color: var(--hai-fg-muted); }
.hai-about__fact-value { margin: 0.15rem 0 0; }

/* signature line */
.hai-site .hai-about__signature { margin: 1.75rem 0 0; display: grid; gap: 0.1rem; }
.hai-about__name { font-family: var(--hai-font-heading); font-size: 1.15rem; }
.hai-about__role { font-size: var(--hai-text-small); color: var(--hai-fg-muted); }

/* timeline: one rule, a marker per milestone */
.hai-about__timeline { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0 0 0 2rem; border-left: 1px solid var(--hai-border); display: grid; gap: clamp(1.75rem, 3vw, 2.25rem); }
.hai-about__milestone { position: relative; min-width: 0; overflow-wrap: break-word; }
.hai-about__milestone::before { content: ""; position: absolute; left: -2.375rem; top: 0.4rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--hai-bg); border: 2px solid var(--hai-accent-ink); }
.hai-site .hai-about__year { margin: 0 0 0.3rem; font-family: var(--hai-font-label); font-size: var(--hai-text-small); letter-spacing: var(--hai-label-tracking); color: var(--hai-accent-ink); }
.hai-site .hai-about__milestone-title { margin: 0 0 0.35rem; }
.hai-site .hai-about__milestone-text { margin: 0; color: var(--hai-fg-muted); max-width: 46ch; }

/* biography: the long read */
.hai-about--biography .hai-about__body, .hai-about--biography .hai-about__timeline { max-width: var(--hai-measure); }
.hai-site .hai-about--biography .hai-about__heading { max-width: 20ch; }
.hai-site .hai-about--biography .hai-about__lead { font-size: calc(var(--hai-text-lead) * 1.05); color: var(--hai-fg); }

/* statement: centred large text */
.hai-about--statement { text-align: center; }
/* width: 100% (still capped at 44rem and centred): a grid item with auto side margins is sized fit-content, which
   cannot go below its min-content, and the facts grid made that 432-584px - wider than a phone, so the page scrolled sideways */
.hai-about--statement .hai-about__body { width: 100%; max-width: 44rem; margin: 0 auto; }
.hai-about--statement .hai-about__text { font-family: var(--hai-font-heading); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.5; color: var(--hai-fg); max-width: none; }
.hai-about--statement .hai-about__actions { justify-content: center; }
/* statement is centred, so the pull quote cannot hang off a left rule: at 30ch it read as a narrow block left of
   centre under the centred body. It centres, widens, and takes the accent ink instead of the rule. */
.hai-about--statement .hai-about__quote { max-width: 34rem; margin-inline: auto; padding-left: 0; border-left: 0; }
.hai-site .hai-about--statement .hai-about__quote p { color: var(--hai-accent-ink); }
/* the lead IS the statement here: at .hai-lead size and muted it read as a caption above the bigger body text */
.hai-site .hai-about--statement .hai-about__lead {
  font-family: var(--hai-font-heading); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.5; color: var(--hai-fg); max-width: none;
}
.hai-site .hai-about--statement .hai-about__heading { max-width: 24ch; margin-left: auto; margin-right: auto; }

/* timeline below: the reading measure */
.hai-about--timeline .hai-about__body { max-width: var(--hai-measure); }
/*
 * Milestones UNDER the text used to be one narrow file with the right two thirds of the band empty. From 900px
 * they run in two columns; the rail moves from the list to each milestone, because one border-left cannot cross
 * two grid columns. Biography keeps its single measured column, and so does the beside placement, which already
 * has a column of its own.
 */
@media (min-width: 900px) {
  .hai-about:not(.hai-about--timeline-beside):not(.hai-about--biography) .hai-about__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); padding-left: 0; border-left: 0;
  }
  .hai-about:not(.hai-about--timeline-beside):not(.hai-about--biography) .hai-about__milestone { padding-left: 2rem; border-left: 1px solid var(--hai-border); }
  .hai-about:not(.hai-about--timeline-beside):not(.hai-about--biography) .hai-about__milestone::before { left: -0.375rem; }
  .hai-site .hai-about:not(.hai-about--timeline-beside):not(.hai-about--biography) .hai-about__milestone-text { max-width: none; }
}

/* editorial */
.hai-site .hai-about--editorial .hai-about__heading { max-width: 16ch; }

@media (min-width: 720px) {
  /* portrait: picture beside the writing, mirrored by --side-right */
  .hai-about--with-image > .hai-section__inner { gap: clamp(2rem, 6vw, 4.5rem); }
  /* statement never splits into two columns: the picture sits under the words, at a size that does not shout */
  .hai-about--statement.hai-about--with-image > .hai-section__inner { grid-template-columns: minmax(0, 1fr); }
  .hai-about--statement.hai-about--with-image .hai-about__media { max-width: 34rem; margin-inline: auto; }
  .hai-about--portrait.hai-about--with-image > .hai-section__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .hai-about--side-right.hai-about--with-image > .hai-section__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .hai-about--side-right.hai-about--with-image .hai-about__media { order: 2; }
  /* in a two-column layout the timeline runs under both halves */
  .hai-about--with-image .hai-about__timeline { grid-column: 1 / -1; }

  /* editorial: wider text column, picture dropped below the heading */
  .hai-about--editorial.hai-about--with-image > .hai-section__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hai-about--editorial.hai-about--side-right.hai-about--with-image > .hai-section__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hai-about--editorial .hai-about__media { margin-top: clamp(2rem, 7vw, 5rem); }

  /* beside: introduction left, milestones right */
  .hai-about--timeline-beside:not(.hai-about--with-image) > .hai-section__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); }
  .hai-about--timeline-beside .hai-about__timeline { margin-top: 0; }
  .hai-about--timeline-beside .hai-about__body { max-width: none; }
}

/* editor only: the hint of an empty block (published pages render nothing) */

/* ---- cta ---- */
.hai-cta__panel { display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-content: start; }
.hai-cta__body > :last-child { margin-bottom: 0; }
/* a <p> and a heading are decided at (0,1,1) by the base stylesheet: these need the leading .hai-site */
.hai-site .hai-cta__eyebrow { margin: 0 0 1rem; }
.hai-site .hai-cta__heading { max-width: 24ch; margin: 0; }
.hai-site .hai-cta__text { margin: 1rem 0 0; color: var(--hai-fg-muted); font-size: var(--hai-text-lead); line-height: 1.6; max-width: 40rem; }
.hai-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* simple: one centred column, the default closing band */
.hai-cta--simple { text-align: center; }
.hai-cta--simple .hai-cta__heading, .hai-cta--simple .hai-cta__text { margin-left: auto; margin-right: auto; }
.hai-cta--simple .hai-cta__actions { justify-content: center; }

/* split: the sentence keeps the left edge of the page, the buttons sit opposite it */
@media (min-width: 720px) {
  .hai-cta--split .hai-cta__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 6vw, 4rem); }
  .hai-cta--split .hai-cta__actions { justify-content: flex-end; }
}

/* banner: a compact strip - one line of news with a rule down its leading edge */
.hai-cta--banner .hai-cta__panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  border-inline-start: 3px solid var(--hai-accent-ink); padding-inline-start: clamp(1rem, 3vw, 1.75rem);
}
.hai-cta--banner .hai-cta__body { flex: 1 1 18rem; }
.hai-site .hai-cta--banner .hai-cta__heading { max-width: 34ch; }
.hai-site .hai-cta--banner .hai-cta__text { margin: 0.35rem 0 0; font-size: 1rem; }

/* image: a rounded picture panel; the scrim and the dark band's ink keep 4.5:1 over any photo */
.hai-cta--image .hai-cta__panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--hai-radius); text-align: center;
  padding: clamp(2rem, 6vw, 4.5rem); min-height: 18rem; align-content: center; justify-items: center;
  background: var(--hai-dark-bg); color: var(--hai-dark-fg);
  /* the ring sits on the scrim, not on the page: the palette's ring colour can be the dark ground itself */
  --hai-focus: var(--hai-dark-fg);
}
.hai-cta__media { position: absolute; inset: 0; z-index: -1; }
.hai-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.hai-cta__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.6); }
.hai-site .hai-cta--image .hai-cta__heading, .hai-site .hai-cta--image .hai-cta__text, .hai-site .hai-cta--image .hai-cta__eyebrow { color: var(--hai-dark-fg); }
.hai-cta--image .hai-cta__heading, .hai-cta--image .hai-cta__text { margin-left: auto; margin-right: auto; }
.hai-cta--image .hai-cta__actions { justify-content: center; }
/* both buttons read against the photo, not against the page behind it: a dark palette's black button would
   otherwise vanish into the scrim */
.hai-site .hai-cta--image .hai-btn--secondary { color: var(--hai-dark-fg); border-color: var(--hai-dark-fg); }
.hai-cta--image .hai-btn--primary { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.45); }

/* large: the heading is the design; the calls to action step back to arrow links */
.hai-cta--large .hai-cta__panel { gap: clamp(1.75rem, 4vw, 2.75rem); }
.hai-site .hai-cta--large .hai-cta__heading { max-width: 18ch; }
.hai-site .hai-cta--large .hai-cta__text { color: var(--hai-fg); max-width: 44rem; }
.hai-cta--large .hai-cta__actions { gap: 0.75rem 2rem; font-size: 1.05rem; }
/* on a wide band the sentence keeps the left column and the links sit opposite it: a full-bleed dark band with a
   22ch heading and nothing on its right half read as a hole */
@media (min-width: 900px) {
  .hai-cta--large .hai-cta__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(2rem, 6vw, 4.5rem); }
  .hai-cta--large .hai-cta__actions { justify-content: flex-end; }
}

/* card: the message floats on the band behind it */
.hai-cta--card .hai-cta__panel { padding: clamp(1.75rem, 5vw, 3rem); text-align: center; justify-items: center; }
.hai-cta--card .hai-cta__heading, .hai-cta--card .hai-cta__text { margin-left: auto; margin-right: auto; }
.hai-cta--card .hai-cta__actions { justify-content: center; }

/* editor only: the hint of an empty block (a published page renders nothing for it) */

/* ---- badge & 404 ---- */
.hai-badge {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50; font-size: 0.8rem; font-family: var(--hai-font-body);
  background: var(--hai-fg); color: var(--hai-bg); text-decoration: none; padding: 0.45em 0.9em; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); opacity: 0.9;
}
.hai-badge:hover { opacity: 1; text-decoration: none; }
.hai-notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--hai-section) 1rem; }
.hai-notfound h1 { font-size: clamp(2rem, 6vw, 3rem); }
.hai-notfound p { color: var(--hai-fg-muted); }