/* Hoba core.css - deterministic base stylesheet emitted by Gen. */
:root {
  /* --- canonical design tokens (single vocabulary for Gen + Composer) --- */
  /* typography */
  --hoba-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --hoba-font-h1: 2rem;
  --hoba-font-h2: 1.35rem;
  --hoba-font-h3: 1.15rem;
  --hoba-font-body: 1rem;
  --hoba-font-small: 0.875rem;
  --hoba-line-tight: 1.2;
  --hoba-line-heading: 1.3;
  --hoba-line-body: 1.6;
  --hoba-line-loose: 1.9;
  --hoba-tracking-tight: -0.02em;
  --hoba-tracking-normal: 0;
  --hoba-tracking-wide: 0.05em;
  --hoba-opacity-soft: 0.75;
  --hoba-opacity-faint: 0.5;
  --hoba-weight-normal: 400;
  --hoba-weight-semibold: 600;
  --hoba-weight-bold: 700;
  /* colors */
  --hoba-color-bg: #f7fafc;
  --hoba-color-surface: #ffffff;
  --hoba-color-text: #1a202c;
  --hoba-color-muted: #4a5568;
  --hoba-color-primary: #2b6cb0;
  --hoba-color-primary-hover: #265f9b;
  --hoba-color-primary-ink: #ffffff;
  --hoba-color-border: #e2e8f0;
  --hoba-color-accent: #2b6cb0;
  --hoba-color-danger: #c53030;
  --hoba-color-success: #276749;
  /* spacing scale */
  --hoba-space-xs: calc(var(--hoba-space) * 0.25);
  --hoba-space-sm: calc(var(--hoba-space) * 0.5);
  --hoba-space-md: var(--hoba-space);
  --hoba-space-lg: calc(var(--hoba-space) * 2);
  --hoba-space-xl: calc(var(--hoba-space) * 3);
  --hoba-space-section: calc(var(--hoba-space) * 1.5);
  /* shape */
  --hoba-radius-sm: 0.25rem;
  --hoba-radius-md: var(--hoba-radius);
  --hoba-radius-lg: 0.75rem;
  /* effects */
  --hoba-shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.06);
  --hoba-shadow-md: 0 8px 24px rgba(26, 32, 44, 0.18);
  /* container */
  --hoba-measure-content: var(--hoba-measure);
  --hoba-measure-wide: calc(var(--hoba-measure) * 1.4);
  --hoba-page-padding: var(--hoba-space-section);
  --hoba-brand-height: 2.5rem;
  /* --- legacy aliases (kept so existing rules and releases keep resolving) --- */
  --hoba-ink: var(--hoba-color-text);
  --hoba-muted: var(--hoba-color-muted);
  --hoba-accent: var(--hoba-color-primary);
  --hoba-accent-ink: var(--hoba-color-primary-ink);
  --hoba-surface: var(--hoba-color-surface);
  --hoba-border: var(--hoba-color-border);
  --hoba-radius: 0.5rem;
  --hoba-space: 1rem;
  --hoba-measure: 68rem;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--hoba-color-text);
  background: var(--hoba-color-bg);
  font-family: var(--hoba-font-sans);
  font-size: var(--hoba-font-body);
  line-height: var(--hoba-line-body);
}
/* Deterministic text flow: a long unbroken token wraps instead of pushing the
   page wider, and headings never inherit an accidental browser margin. */
h1,
h2,
h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
main {
  display: block;
  max-width: var(--hoba-measure-content);
  margin: 0 auto;
  padding: var(--hoba-page-padding) var(--hoba-space);
  background: var(--hoba-color-surface);
}
/* A page with a Header area promotes that area (and the site navigation) into a
   full-bleed header band: `main` spans the viewport and every content area keeps
   its own measure, so band backgrounds run edge to edge while text stays
   centred. Pages without a Header keep the constrained legacy `main`. */
main[data-header-area="aware"] {
  max-width: none;
  padding: 0;
  background: var(--hoba-color-bg);
  display: flex;
  flex-direction: column;
  /* One shared measure and gutter for the whole header band. Every band row
     (nav links, branded Header bar, page title, content) resolves its inner
     measure from these tokens, so nothing can drift left when a Header
     container declares `layout.max_width: wide|full`. */
  --hoba-band-measure: var(--hoba-measure-wide);
  --hoba-band-gutter: var(--hoba-space);
}
/* Order the band deterministically: menu, branded bar, page title, content,
   footer — regardless of the fixed area order the renderer emits. */
main[data-header-area="aware"] > .site-navigation {
  order: 1;
}
main[data-header-area="aware"] > [data-area="Header"] {
  order: 2;
}
main[data-header-area="aware"] > h1 {
  order: 3;
}
main[data-header-area="aware"] > [data-area="Content"] {
  order: 4;
}
main[data-header-area="aware"] > [data-area="Footer"] {
  order: 5;
}
main[data-header-area="aware"] > [data-area="Header"] + h1,
main[data-header-area="aware"] > h1 + [data-area="Content"] {
  margin-top: 0;
}
main[data-header-area="aware"] > [data-area="Content"],
main[data-header-area="aware"] > [data-area="Footer"] {
  /* Vertical rhythm stays on the area; the horizontal gutter moves onto the
     measured band row below so a wide viewport lines the row up with the nav,
     while a narrow viewport does not get a doubled gutter. */
  padding: var(--hoba-page-padding) 0;
}
main[data-header-area="aware"] > [data-area="Content"] {
  background: var(--hoba-color-surface);
}
main[data-header-area="aware"] > h1 {
  width: 100%;
  max-width: var(--hoba-band-measure);
  margin-inline: auto;
  padding: var(--hoba-page-padding) var(--hoba-band-gutter) 0;
  background: var(--hoba-color-surface);
}
/* The branded Header bar's inner row is a direct `hoba-layout` container. Even
   when it declares a width token (`--width-wide`/`--width-content`/`--width-full`)
   the band overrides it to the shared measure and gutter so the brand/CTA line
   up pixel-perfectly with the navigation links and the page title. Nested
   layouts inside the Header keep their own width tokens. */
main[data-header-area="aware"] > [data-area="Header"] > .hoba-layout {
  width: 100%;
  max-width: var(--hoba-band-measure);
  margin-inline: auto;
  padding-inline: var(--hoba-band-gutter);
}
/* Content and Footer rows share the band measure too, so prose and the branded
   bar start on the same vertical line as the navigation. The row owns both the
   measure and the gutter; the area above supplies only vertical padding. */
main[data-header-area="aware"] > [data-area="Content"] > .hoba-layout,
main[data-header-area="aware"] > [data-area="Footer"] > .hoba-layout {
  width: 100%;
  max-width: var(--hoba-band-measure);
  margin-inline: auto;
  padding-inline: var(--hoba-band-gutter);
}
/* A content/footer block that is not wrapped in a layout container still keeps a
   gutter, so removing the area's horizontal padding never lets text touch the
   viewport edge. */
main[data-header-area="aware"] > [data-area="Content"] > :not(.hoba-layout),
main[data-header-area="aware"] > [data-area="Footer"] > :not(.hoba-layout) {
  padding-inline: var(--hoba-band-gutter);
}
h1 {
  font-size: var(--hoba-font-h1);
  font-weight: var(--hoba-weight-bold);
  line-height: var(--hoba-line-tight);
  margin: 0 0 var(--hoba-space-section);
}
h2 {
  font-size: var(--hoba-font-h2);
  font-weight: var(--hoba-weight-bold);
  line-height: var(--hoba-line-heading);
  margin: 0 0 var(--hoba-space);
}
h3 {
  font-size: var(--hoba-font-h3);
  font-weight: var(--hoba-weight-semibold);
  line-height: var(--hoba-line-heading);
  margin: 0 0 var(--hoba-space-sm);
}
p {
  margin: 0 0 var(--hoba-space);
}
small {
  font-size: var(--hoba-font-small);
  color: var(--hoba-color-muted);
}
a {
  color: var(--hoba-color-primary);
}
a:hover,
a:focus {
  color: var(--hoba-color-primary-hover);
}
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hoba-radius-sm);
}
/* A brand mark in the header band is a direct child of a horizontal layout.
   Cap it to a fixed height so a large intrinsic asset (a square logo, say)
   cannot stretch the row to its full pixel width; the width follows the aspect
   ratio. Scoped to the Header area so content images keep their natural size. */
[data-area="Header"] img {
  max-height: var(--hoba-brand-height);
  width: auto;
}
[data-area] {
  display: block;
}
[data-area]:not(:empty) + [data-area]:not(:empty) {
  margin-top: var(--hoba-space-section);
}
main[data-header-area="aware"] > [data-area]:not(:empty) + [data-area]:not(:empty) {
  margin-top: 0;
}
/* A page whose content declares a container width token must not be silently
   clamped by the base measure: the containers own their own measure. The
   renderer adds `data-layout-width="aware"` to `main` only when at least one
   node carries `layout.max_width`, so pages without a width token keep
   `main { max-width: 68rem }` and legacy output is unchanged. */
main[data-layout-width="aware"] {
  max-width: none;
}
.site-navigation {
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hoba-color-surface);
  border-bottom: 1px solid var(--hoba-color-border);
}
/* A page with a Header area turns the navigation into the first row of a
   full-bleed header band: the links sit on the content measure and the branded
   Header bar joins directly beneath with no seam. Sticky is inherited from the
   base rule; the band adds the elevation shadow. */
main[data-header-area="aware"] > .site-navigation {
  box-shadow: var(--hoba-shadow-sm);
}
.site-navigation > ul {
  max-width: calc(var(--hoba-measure) * 1.4);
  margin-inline: auto;
  padding: var(--hoba-space-sm) var(--hoba-space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hoba-space-xs) var(--hoba-space-lg);
}
/* On a header-aware page the bar background stays full-bleed (the `nav` itself),
   while its inner list resolves the band measure and gutter. Because the Header
   inner row and the title use the same tokens, the nav links, brand and title
   all sit on one vertical line — no left-shifted nav and no double gutter. */
main[data-header-area="aware"] > .site-navigation > ul {
  max-width: var(--hoba-band-measure);
  margin-inline: auto;
  padding-inline: var(--hoba-band-gutter);
}
.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-navigation li {
  position: relative;
  margin: 0;
}
.site-navigation a,
.site-navigation span {
  display: inline-block;
  padding: var(--hoba-space-xs) var(--hoba-space-sm);
  border-radius: var(--hoba-radius-sm);
  color: var(--hoba-color-muted);
  text-decoration: none;
  font-weight: var(--hoba-weight-semibold);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-navigation a:hover,
.site-navigation a:focus {
  color: var(--hoba-color-primary);
  background: var(--hoba-color-bg);
}
/* Nested levels are dropdowns: stacked under their parent, revealed on hover or
   keyboard focus, never part of the top-level flex flow (so a deep tree can no
   longer wrap the bar into several rows). */
.site-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  padding: var(--hoba-space-xs) 0;
  background: var(--hoba-color-surface);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  box-shadow: var(--hoba-shadow-md);
}
.site-navigation li:hover > ul,
.site-navigation li:focus-within > ul {
  display: block;
}
.site-navigation ul ul li {
  display: block;
}
.site-navigation ul ul a,
.site-navigation ul ul span {
  display: block;
  padding: var(--hoba-space-sm) var(--hoba-space);
  border-radius: 0;
  color: var(--hoba-color-text);
  white-space: nowrap;
}
.site-navigation ul ul a:hover,
.site-navigation ul ul a:focus {
  background: var(--hoba-color-bg);
  color: var(--hoba-color-primary);
}
.site-navigation ul ul ul {
  top: 0;
  left: 100%;
}
/* --- navigation variants --------------------------------------------------
   The runtime is variant-agnostic; presentation differences live here, keyed
   off `[data-nav-variant]`. `bar` is the default above and stays untouched. */

/* Centered: top-level links are centred; dropdowns behave exactly as `bar`. */
.site-navigation[data-nav-variant="centered"] > ul {
  justify-content: center;
  text-align: center;
}

/* Drawer: the hamburger opens a full-height side panel. The panel styling is
   scoped to small screens; on wide screens the drawer behaves exactly like the
   default bar, so a desktop reader never gets a fixed off-canvas panel. Only the
   `> ul` becomes the panel, so the hamburger (a child of the bar, not of the
   panel) stays visible to open and close it. */
@media (max-width: 40rem) {
  .site-navigation[data-nav-variant="drawer"] > ul {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(22rem, 85vw);
    max-width: 100%;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    display: block;
    background: var(--hoba-color-surface);
    box-shadow: var(--hoba-shadow-md);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 60;
    border-inline-start: 1px solid var(--hoba-color-border);
    padding: var(--hoba-space-lg) var(--hoba-space);
  }
  .site-navigation[data-nav-variant="drawer"][data-nav-open="true"] > ul {
    transform: translateX(0);
  }
  /* The nav owns a stacking context (sticky + z-index), so the fixed panel's
     z-index resolves within it. Lift the nav above the runtime scrim (z-index
     50) while open, exactly like the bar variant, so the panel (inside the nav)
     stays interactive and the scrim dims only the page behind it. */
  .site-navigation[data-nav-variant="drawer"][data-nav-open="true"] {
    z-index: 55;
  }
  .site-navigation[data-nav-variant="drawer"] ul ul {
    position: static;
    display: block;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 0 var(--hoba-space);
    background: transparent;
  }
}

/* Scrim behind a modal drawer, only rendered by the runtime. */
.hoba-nav__scrim {
  position: fixed;
  inset: 0;
  background: var(--hoba-color-text);
  opacity: 0.4;
  z-index: 50;
}
.hoba-nav__scrim[hidden] {
  display: none;
}
/* Body scroll lock while the drawer is open. */
html.hoba-nav-locked,
body.hoba-nav-locked {
  overflow: hidden;
}

/* Submenu toggle: injected by the runtime as a sibling of the link. Hidden on
   wide screens, where the hover/focus dropdown is the interaction. */
.hoba-nav__submenu-toggle {
  display: none;
  font: inherit;
  line-height: 1;
  padding: var(--hoba-space-xs) var(--hoba-space-sm);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-sm);
  background: var(--hoba-color-surface);
  color: var(--hoba-color-text);
  cursor: pointer;
  min-width: 2rem;
  text-align: center;
}
.hoba-nav__submenu-toggle:hover,
.hoba-nav__submenu-toggle:focus-visible {
  border-color: var(--hoba-color-primary);
  color: var(--hoba-color-primary);
}
header {
  display: block;
}
/* The Header area is the branded bar of the full-bleed header band: a primary
   strip whose content (brand + call to action) sits on the content measure,
   directly under the navigation with no gap so the two read as one header. */
main[data-header-area="aware"] > [data-area="Header"] {
  padding: 0;
}
main[data-header-area="aware"] > [data-area="Header"] .hoba-style--pad-md {
  padding: var(--hoba-space) var(--hoba-space);
}
[data-area] > header {
  font-size: var(--hoba-font-h3);
  font-weight: var(--hoba-weight-bold);
  margin: 0;
}
/* The header brand reads as a wordmark: larger than body, tight, and inheriting
   the bar's ink so it never depends on the default heading colour. */
main[data-header-area="aware"] > [data-area="Header"] > .hoba-layout > .hoba-layout > header {
  font-size: calc(var(--hoba-font-h3) * 1.15);
  letter-spacing: 0.01em;
  line-height: var(--hoba-line-tight);
}
/* --- button --- */
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
  text-decoration: none;
  font-weight: var(--hoba-weight-semibold);
  line-height: var(--hoba-line-tight);
  box-shadow: var(--hoba-shadow-sm);
}
.button:hover,
.button:focus {
  background: var(--hoba-color-primary-hover);
  color: var(--hoba-color-primary-ink);
}
.button:focus-visible {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 2px;
}
/* --- quote --- */
blockquote {
  margin: 0;
  padding: var(--hoba-space) var(--hoba-space-lg);
  border-left: 4px solid var(--hoba-color-primary);
  border-radius: var(--hoba-radius-sm);
  background: var(--hoba-color-bg);
  color: var(--hoba-color-text);
}
blockquote cite {
  display: block;
  margin-top: var(--hoba-space-sm);
  font-style: normal;
  color: var(--hoba-color-muted);
}
/* --- icon --- */
/* A leaf that embeds one symbol from the site's working sprite. Size comes
   from the `--sm|md|lg` modifier; colour inherits `currentColor` so an icon
   takes the ink of whatever text it sits beside. */
.hoba-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  vertical-align: middle;
}
.hoba-icon--sm {
  width: 1rem;
  height: 1rem;
}
.hoba-icon--lg {
  width: 2rem;
  height: 2rem;
}
.hoba-icon-link {
  display: inline-flex;
  align-items: center;
  color: var(--hoba-color-primary);
  text-decoration: none;
}
.hoba-icon-link:hover,
.hoba-icon-link:focus {
  color: var(--hoba-color-primary-hover);
}
.hoba-icon-link:focus-visible {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 2px;
}
/* --- list sections (benefits / features / contacts / link list) --- */
.benefits,
.features,
.contacts,
.collection-showcase,
.about,
.link-list {
  display: block;
  margin: 0 0 var(--hoba-space-section);
}
.benefits ul,
.features ul,
.contacts ul {
  margin: 0;
  padding-left: 1.25rem;
}
.benefits li,
.features li,
.contacts li,
.link-list li {
  margin: var(--hoba-space-xs) 0;
}
.collection-showcase p {
  color: var(--hoba-color-muted);
}
.about a {
  font-weight: var(--hoba-weight-semibold);
}
.link-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A link list placed directly in a horizontal row (a header menu) lays its
   links out inline and drops the column heading, so it reads as a nav bar. */
.hoba-layout--row > .link-list,
.hoba-layout--row .link-list {
  margin: 0;
}
.hoba-layout--row .link-list > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hoba-layout--row .link-list > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hoba-space-sm) var(--hoba-space);
  align-items: center;
}
.hoba-layout--row .link-list li {
  margin: 0;
}
.hoba-layout--row .link-list a {
  color: inherit;
  font-weight: var(--hoba-weight-semibold);
}
.link-list a {
  text-decoration: none;
}
.link-list a:hover,
.link-list a:focus {
  text-decoration: underline;
}
[data-plugin] {
  display: block;
}
/* --- form --- */
form {
  margin: 0 0 var(--hoba-space-section);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 var(--hoba-space);
}
.form-field label {
  font-weight: var(--hoba-weight-semibold);
}
.form-field input,
.form-field textarea,
.form-field select {
  font: inherit;
  color: inherit;
  padding: var(--hoba-space-sm) 0.65rem;
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-surface);
  max-width: 100%;
}
.form-field textarea {
  min-height: 6rem;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 1px;
}
.form-field input:invalid,
.form-field textarea:invalid,
.form-field select:invalid {
  border-color: var(--hoba-color-danger);
}
form button[type="submit"] {
  font: inherit;
  font-weight: var(--hoba-weight-semibold);
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
  cursor: pointer;
}
form button[type="submit"]:hover,
form button[type="submit"]:focus {
  background: var(--hoba-color-primary-hover);
}
.form-success {
  margin-top: var(--hoba-space);
  color: var(--hoba-color-success);
  font-weight: var(--hoba-weight-semibold);
}
/* --- sections: generic page rhythm and card surfaces ---------------------
   Every direct child of a Grid container is a card: a surface panel with a
   border and radius, so a plain 3-column feature/contact grid reads as distinct
   sections without any per-page styling. Children of Row/Stack containers stay
   flush, which keeps prose and media groupings clean. A layout-less page emits
   no `hoba-layout` wrapper, so it never receives these rules (legacy output is
   unchanged). */
.hoba-layout--grid > * {
  background: var(--hoba-color-surface);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  padding: var(--hoba-space);
  box-shadow: var(--hoba-shadow-sm);
}
/* Opt-out: a grid child the operator marked `plain` keeps no card underlay, so
   one node can sit flush in an otherwise carded grid. The extra class beats the
   `> *` selector above. */
.hoba-layout--grid > .hoba-plain {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Canonical LayoutSpec containers (Core -> Gen). Token based, no pixels. */
.hoba-layout {
  display: flex;
  flex-direction: column;
  gap: var(--hoba-space);
  /* A positioned ancestor so a freeform child's absolute coordinates resolve
     against its own layout container. */
  position: relative;
}
/* A node the operator placed freely: positioned by its canonical placement
   instead of being arranged by the parent layout. The inline style still wins
   for the base breakpoint; these rules derive the box from the `--hoba-ff-*`
   custom properties so a node with no inline width/height still works and a
   media query can override geometry the inline style cannot express. */
.hoba-freeform {
  position: absolute;
  left: 50%;
  top: var(--hoba-ff-y, auto);
  width: var(--hoba-ff-w, auto);
  height: var(--hoba-ff-h, auto);
  z-index: var(--hoba-ff-z, auto);
  transform: translateX(calc(-50% + var(--hoba-ff-x, 0px)));
  transform-origin: center;
}
/* A laid-out container whose children are all Freeform has no in-flow content,
   so it reserves their bounding box via `min-height`. The box is written per
   breakpoint (`--hoba-ff-min`, `--hoba-ff-min-md`, `--hoba-ff-min-sm`) so the
   wider, shorter two-column layouts do not reserve the phone stack's height and
   push the footer far below the last section. */
.hoba-reserved {
  min-height: var(--hoba-ff-min, auto);
}
.hoba-layout--row {
  flex-direction: row;
  flex-wrap: wrap;
}
.hoba-layout--grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hoba-layout--gap-none {
  gap: 0;
}
.hoba-layout--gap-sm {
  gap: calc(var(--hoba-space) * 0.5);
}
.hoba-layout--gap-md {
  gap: var(--hoba-space);
}
.hoba-layout--gap-lg {
  gap: calc(var(--hoba-space) * 2);
}
.hoba-layout--align-start {
  align-items: flex-start;
}
.hoba-layout--align-center {
  align-items: center;
}
.hoba-layout--align-end {
  align-items: flex-end;
}
.hoba-layout--align-stretch {
  align-items: stretch;
}
.hoba-layout--justify-start {
  justify-content: flex-start;
}
.hoba-layout--justify-center {
  justify-content: center;
}
.hoba-layout--justify-end {
  justify-content: flex-end;
}
.hoba-layout--justify-between {
  justify-content: space-between;
}
.hoba-layout--width-content {
  /* `width: 100%` is what makes the measure authoritative: without it a
     width-tokened container that is a flex item in a column stack shrinks to
     its content, because `margin-inline: auto` overrides the parent's
     `align-items: stretch`. It then fills the parent up to the measure and the
     auto margins centre it. */
  width: 100%;
  max-width: var(--hoba-measure);
  margin-inline: auto;
}
.hoba-layout--width-wide {
  width: 100%;
  max-width: calc(var(--hoba-measure) * 1.4);
  margin-inline: auto;
}
.hoba-layout--width-full {
  max-width: none;
}
/* Overlap: children share one track and stack. `z-index` (set per child, from
   the bounded token vocabulary) decides which one paints on top; without it the
   later sibling wins, exactly like normal grid stacking. */
.hoba-layout--overlap-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}
.hoba-layout--overlap-stack > * {
  grid-area: 1 / 1;
}
.hoba-layout__item--z-neg-5 { position: relative; z-index: -5; }
.hoba-layout__item--z-neg-4 { position: relative; z-index: -4; }
.hoba-layout__item--z-neg-3 { position: relative; z-index: -3; }
.hoba-layout__item--z-neg-2 { position: relative; z-index: -2; }
.hoba-layout__item--z-neg-1 { position: relative; z-index: -1; }
.hoba-layout__item--z-0 { position: relative; z-index: 0; }
.hoba-layout__item--z-1 { position: relative; z-index: 1; }
.hoba-layout__item--z-2 { position: relative; z-index: 2; }
.hoba-layout__item--z-3 { position: relative; z-index: 3; }
.hoba-layout__item--z-4 { position: relative; z-index: 4; }
.hoba-layout__item--z-5 { position: relative; z-index: 5; }
.hoba-layout--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hoba-layout--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hoba-layout--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hoba-layout--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hoba-layout--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hoba-layout--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.hoba-layout--cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.hoba-layout--cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.hoba-layout--cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.hoba-layout--cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.hoba-layout--cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.hoba-layout--cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Per-child placement inside a layout container. Inert outside one. */
.hoba-layout__item {
  min-width: 0;
}
.hoba-layout__item--span-1 {
  grid-column: span 1;
}
.hoba-layout__item--span-2 {
  grid-column: span 2;
}
.hoba-layout__item--span-3 {
  grid-column: span 3;
}
.hoba-layout__item--span-4 {
  grid-column: span 4;
}
.hoba-layout__item--span-5 {
  grid-column: span 5;
}
.hoba-layout__item--span-6 {
  grid-column: span 6;
}
.hoba-layout__item--span-7 {
  grid-column: span 7;
}
.hoba-layout__item--span-8 {
  grid-column: span 8;
}
.hoba-layout__item--span-9 {
  grid-column: span 9;
}
.hoba-layout__item--span-10 {
  grid-column: span 10;
}
.hoba-layout__item--span-11 {
  grid-column: span 11;
}
.hoba-layout__item--span-12 {
  grid-column: span 12;
}
.hoba-layout__item--self-start {
  align-self: flex-start;
}
.hoba-layout__item--self-center {
  align-self: center;
}
.hoba-layout__item--self-end {
  align-self: flex-end;
}
.hoba-layout__item--self-stretch {
  align-self: stretch;
}
/* A wrapped leaf keeps the same direct-child presentation as an unwrapped one. */
.hoba-layout__item > header {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--hoba-space);
}
/* Canonical container presentation (Core -> Gen). Token based, no pixels.
   Every value resolves through the active theme variables, so a theme change
   recolours every styled container at once. */
.hoba-style--bg-bg {
  background: var(--hoba-color-bg);
}
.hoba-style--bg-surface {
  background: var(--hoba-color-surface);
}
.hoba-style--bg-primary {
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
}
.hoba-style--bg-accent {
  background: var(--hoba-color-accent);
  color: var(--hoba-color-primary-ink);
}
.hoba-style--bg-muted {
  background: var(--hoba-color-muted);
  color: var(--hoba-color-primary-ink);
}
/* A primary button on an already-filled section would be the same colour as its
   background; invert it to the surface ink so it stays a visible control. */
.hoba-style--bg-primary .button,
.hoba-style--bg-accent .button,
.hoba-style--bg-muted .button {
  background: var(--hoba-color-surface);
  color: var(--hoba-color-text);
  box-shadow: none;
}
.hoba-style--bg-primary .button:hover,
.hoba-style--bg-accent .button:hover,
.hoba-style--bg-muted .button:hover,
.hoba-style--bg-primary .button:focus,
.hoba-style--bg-accent .button:focus,
.hoba-style--bg-muted .button:focus {
  background: var(--hoba-color-bg);
  color: var(--hoba-color-text);
}
.hoba-style--pad-sm {
  padding: var(--hoba-space-sm);
}
.hoba-style--pad-md {
  padding: var(--hoba-space);
}
.hoba-style--pad-lg {
  padding: var(--hoba-space-lg);
}
.hoba-style--border-subtle {
  border: 1px solid var(--hoba-color-border);
}
.hoba-style--border-strong {
  border: 2px solid var(--hoba-color-border);
}
.hoba-style--border-accent.hoba-style--border-subtle {
  border-color: var(--hoba-color-accent);
}
.hoba-style--border-accent.hoba-style--border-strong {
  border-color: var(--hoba-color-accent);
}
.hoba-style--text-start {
  text-align: start;
}
.hoba-style--text-center {
  text-align: center;
}
.hoba-style--text-end {
  text-align: end;
}
.hoba-style--radius-none {
  border-radius: 0;
}
.hoba-style--radius-sm {
  border-radius: var(--hoba-radius-sm);
}
.hoba-style--radius-md {
  border-radius: var(--hoba-radius-md);
}
.hoba-style--radius-lg {
  border-radius: var(--hoba-radius-lg);
}
.hoba-style--radius-full {
  border-radius: 999px;
}
/* A radius set on a wrapper (a freeform image, or any container) rounds the
   images inside it too, so the corner setting is visible wherever the image
   sits — the published mirror of the editor's wrapper rule. */
.hoba-style--radius-none img,
.hoba-style--radius-sm img,
.hoba-style--radius-md img,
.hoba-style--radius-lg img,
.hoba-style--radius-full img {
  border-radius: inherit;
}
.hoba-style--margin-sm {
  margin: var(--hoba-space-sm);
}
.hoba-style--margin-md {
  margin: var(--hoba-space);
}
.hoba-style--margin-lg {
  margin: var(--hoba-space-lg);
}
.hoba-style--shadow-sm {
  box-shadow: var(--hoba-shadow-sm);
}
.hoba-style--shadow-md {
  box-shadow: var(--hoba-shadow-md);
}
.hoba-style--font-h1 {
  font-size: var(--hoba-font-h1);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-h2 {
  font-size: var(--hoba-font-h2);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-h3 {
  font-size: var(--hoba-font-h3);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-body {
  font-size: var(--hoba-font-body);
  line-height: var(--hoba-line-body);
}
.hoba-style--font-small {
  font-size: var(--hoba-font-small);
  line-height: var(--hoba-line-body);
}
.hoba-style--weight-normal {
  font-weight: var(--hoba-weight-normal);
}
.hoba-style--weight-semibold {
  font-weight: var(--hoba-weight-semibold);
}
.hoba-style--weight-bold {
  font-weight: var(--hoba-weight-bold);
}
.hoba-style--leading-tight {
  line-height: var(--hoba-line-tight);
}
.hoba-style--leading-normal {
  line-height: var(--hoba-line-body);
}
.hoba-style--leading-loose {
  line-height: var(--hoba-line-loose);
}
.hoba-style--tracking-tight {
  letter-spacing: var(--hoba-tracking-tight);
}
.hoba-style--tracking-normal {
  letter-spacing: var(--hoba-tracking-normal);
}
.hoba-style--tracking-wide {
  letter-spacing: var(--hoba-tracking-wide);
}
.hoba-style--case-upper {
  text-transform: uppercase;
}
.hoba-style--case-lower {
  text-transform: lowercase;
}
.hoba-style--case-capitalize {
  text-transform: capitalize;
}
.hoba-style--opacity-soft {
  opacity: var(--hoba-opacity-soft);
}
.hoba-style--opacity-faint {
  opacity: var(--hoba-opacity-faint);
}
/* Vertical alignment needs a flex context, so a vertically-aligned container
   becomes a column flex box; without this it is inert. */
.hoba-style--valign-start,
.hoba-style--valign-center,
.hoba-style--valign-end {
  display: flex;
  flex-direction: column;
}
.hoba-style--valign-start {
  justify-content: flex-start;
}
.hoba-style--valign-center {
  justify-content: center;
}
.hoba-style--valign-end {
  justify-content: flex-end;
}
.hoba-style--width-content {
  max-width: var(--hoba-measure-content);
}
.hoba-style--width-wide {
  max-width: var(--hoba-measure-wide);
}
.hoba-style--width-full {
  max-width: none;
}
/* Nested containers must be able to shrink within a grid/flex track. */
.hoba-layout .hoba-layout {
  min-width: 0;
}
/* Every direct child of a layout can shrink below its content width, so a row
   wraps only when the tracks truly cannot fit and grid cells never overflow. */
.hoba-layout--grid > *,
.hoba-layout--row > * {
  min-width: 0;
}
/* The `md` breakpoint is the tablet override: it applies at <=64rem and the
   `sm` block above takes precedence below 40rem because it is later in the
   cascade. Both breakpoints carry the same token vocabulary the compiler emits
   (`md-stack|row|grid`, `md-cols-N`, `md-gap-*`, `md-align-*`). */
@media (max-width: 64rem) {
  .hoba-layout--md-stack {
    display: flex;
    flex-direction: column;
  }
  .hoba-layout--md-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hoba-layout--md-grid {
    display: grid;
  }
  .hoba-layout--md-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hoba-layout--md-gap-none {
    gap: 0;
  }
  .hoba-layout--md-gap-sm {
    gap: calc(var(--hoba-space) * 0.5);
  }
  .hoba-layout--md-gap-md {
    gap: var(--hoba-space);
  }
  .hoba-layout--md-gap-lg {
    gap: calc(var(--hoba-space) * 2);
  }
  .hoba-layout--md-align-start {
    align-items: flex-start;
  }
  .hoba-layout--md-align-center {
    align-items: center;
  }
  .hoba-layout--md-align-end {
    align-items: flex-end;
  }
  .hoba-layout--md-align-stretch {
    align-items: stretch;
  }
  /* Responsive container style (SETTINGS-01 follow-up): the same token
     vocabulary as the base `.hoba-style--*` rules, prefixed with `md-`. */
  .hoba-style--md-bg-bg { background: var(--hoba-color-bg); }
  .hoba-style--md-bg-surface { background: var(--hoba-color-surface); }
  .hoba-style--md-bg-primary { background: var(--hoba-color-primary); color: var(--hoba-color-primary-ink); }
  .hoba-style--md-bg-accent { background: var(--hoba-color-accent); color: var(--hoba-color-primary-ink); }
  .hoba-style--md-bg-muted { background: var(--hoba-color-muted); color: var(--hoba-color-primary-ink); }
  .hoba-style--md-pad-sm { padding: var(--hoba-space-sm); }
  .hoba-style--md-pad-md { padding: var(--hoba-space); }
  .hoba-style--md-pad-lg { padding: var(--hoba-space-lg); }
  .hoba-style--md-margin-sm { margin: var(--hoba-space-sm); }
  .hoba-style--md-margin-md { margin: var(--hoba-space); }
  .hoba-style--md-margin-lg { margin: var(--hoba-space-lg); }
  .hoba-style--md-border-subtle { border: 1px solid var(--hoba-color-border); }
  .hoba-style--md-border-strong { border: 2px solid var(--hoba-color-border); }
  .hoba-style--md-border-accent.hoba-style--md-border-subtle { border-color: var(--hoba-color-accent); }
  .hoba-style--md-border-accent.hoba-style--md-border-strong { border-color: var(--hoba-color-accent); }
  .hoba-style--md-text-start { text-align: start; }
  .hoba-style--md-text-center { text-align: center; }
  .hoba-style--md-text-end { text-align: end; }
  .hoba-style--md-radius-sm { border-radius: var(--hoba-radius-sm); }
  .hoba-style--md-radius-md { border-radius: var(--hoba-radius-md); }
  .hoba-style--md-radius-lg { border-radius: var(--hoba-radius-lg); }
  .hoba-style--md-shadow-sm { box-shadow: var(--hoba-shadow-sm); }
  .hoba-style--md-shadow-md { box-shadow: var(--hoba-shadow-md); }
  .hoba-style--md-font-h1 { font-size: var(--hoba-font-h1); line-height: var(--hoba-line-heading); }
  .hoba-style--md-font-h2 { font-size: var(--hoba-font-h2); line-height: var(--hoba-line-heading); }
  .hoba-style--md-font-h3 { font-size: var(--hoba-font-h3); line-height: var(--hoba-line-heading); }
  .hoba-style--md-font-body { font-size: var(--hoba-font-body); line-height: var(--hoba-line-body); }
  .hoba-style--md-font-small { font-size: var(--hoba-font-small); line-height: var(--hoba-line-body); }
  .hoba-style--md-weight-normal { font-weight: var(--hoba-weight-normal); }
  .hoba-style--md-weight-semibold { font-weight: var(--hoba-weight-semibold); }
  .hoba-style--md-weight-bold { font-weight: var(--hoba-weight-bold); }
  .hoba-style--md-leading-tight { line-height: var(--hoba-line-tight); }
  .hoba-style--md-leading-normal { line-height: var(--hoba-line-body); }
  .hoba-style--md-leading-loose { line-height: var(--hoba-line-loose); }
  .hoba-style--md-tracking-tight { letter-spacing: var(--hoba-tracking-tight); }
  .hoba-style--md-tracking-normal { letter-spacing: var(--hoba-tracking-normal); }
  .hoba-style--md-tracking-wide { letter-spacing: var(--hoba-tracking-wide); }
  .hoba-style--md-case-upper { text-transform: uppercase; }
  .hoba-style--md-case-lower { text-transform: lowercase; }
  .hoba-style--md-case-capitalize { text-transform: capitalize; }
  .hoba-style--md-opacity-soft { opacity: var(--hoba-opacity-soft); }
  .hoba-style--md-opacity-faint { opacity: var(--hoba-opacity-faint); }
  .hoba-style--md-valign-start,
  .hoba-style--md-valign-center,
  .hoba-style--md-valign-end { display: flex; flex-direction: column; }
  .hoba-style--md-valign-start { justify-content: flex-start; }
  .hoba-style--md-valign-center { justify-content: center; }
  .hoba-style--md-valign-end { justify-content: flex-end; }
  .hoba-style--md-width-content { max-width: var(--hoba-measure-content); }
  .hoba-style--md-width-wide { max-width: var(--hoba-measure-wide); }
  .hoba-style--md-width-full { max-width: none; }
  /* Responsive freeform geometry at the tablet breakpoint. Each field falls
     back to the base custom property, so a delta that sets only one field keeps
     the base value for the rest. `transform` is re-declared whole because it is
     not composable across rules. */
  .hoba-freeform--md {
    top: var(--hoba-ff-md-y, var(--hoba-ff-y, auto));
    width: var(--hoba-ff-md-w, var(--hoba-ff-w, auto));
    height: var(--hoba-ff-md-h, var(--hoba-ff-h, auto));
    z-index: var(--hoba-ff-md-z, var(--hoba-ff-z, auto));
    transform: translateX(calc(-50% + var(--hoba-ff-md-x, var(--hoba-ff-x, 0px))))
               rotate(var(--hoba-ff-md-rot, var(--hoba-ff-rot, 0deg)));
  }
  /* Reserve the tablet layout's own bounding box; the base value (sized for the
     phone stack) would leave a dead gap above the footer here. */
  .hoba-reserved {
    min-height: var(--hoba-ff-min-md, var(--hoba-ff-min, auto));
  }
}

@media (max-width: 40rem) {
  body {
    font-size: 1rem;
  }
  h1 {
    font-size: 1.6rem;
  }
  .site-navigation > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .site-navigation ul ul {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--hoba-space);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .site-navigation ul ul a,
  .site-navigation ul ul span {
    padding: var(--hoba-space-xs) 0;
  }
  main {
    padding: var(--hoba-space);
  }
  .hoba-layout--sm-stack {
    display: flex;
    flex-direction: column;
  }
  .hoba-layout--sm-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hoba-layout--sm-grid {
    display: grid;
  }
  .hoba-layout--sm-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hoba-layout--sm-gap-none {
    gap: 0;
  }
  .hoba-layout--sm-gap-sm {
    gap: calc(var(--hoba-space) * 0.5);
  }
  .hoba-layout--sm-gap-md {
    gap: var(--hoba-space);
  }
  .hoba-layout--sm-gap-lg {
    gap: calc(var(--hoba-space) * 2);
  }
  .hoba-layout--sm-align-start {
    align-items: flex-start;
  }
  .hoba-layout--sm-align-center {
    align-items: center;
  }
  .hoba-layout--sm-align-end {
    align-items: flex-end;
  }
  .hoba-layout--sm-align-stretch {
    align-items: stretch;
  }
  /* Responsive container style at the phone breakpoint (`sm-`). Later in the
     cascade than `md`, so `sm` wins below 40rem. */
  .hoba-style--sm-bg-bg { background: var(--hoba-color-bg); }
  .hoba-style--sm-bg-surface { background: var(--hoba-color-surface); }
  .hoba-style--sm-bg-primary { background: var(--hoba-color-primary); color: var(--hoba-color-primary-ink); }
  .hoba-style--sm-bg-accent { background: var(--hoba-color-accent); color: var(--hoba-color-primary-ink); }
  .hoba-style--sm-bg-muted { background: var(--hoba-color-muted); color: var(--hoba-color-primary-ink); }
  .hoba-style--sm-pad-sm { padding: var(--hoba-space-sm); }
  .hoba-style--sm-pad-md { padding: var(--hoba-space); }
  .hoba-style--sm-pad-lg { padding: var(--hoba-space-lg); }
  .hoba-style--sm-margin-sm { margin: var(--hoba-space-sm); }
  .hoba-style--sm-margin-md { margin: var(--hoba-space); }
  .hoba-style--sm-margin-lg { margin: var(--hoba-space-lg); }
  .hoba-style--sm-border-subtle { border: 1px solid var(--hoba-color-border); }
  .hoba-style--sm-border-strong { border: 2px solid var(--hoba-color-border); }
  .hoba-style--sm-border-accent.hoba-style--sm-border-subtle { border-color: var(--hoba-color-accent); }
  .hoba-style--sm-border-accent.hoba-style--sm-border-strong { border-color: var(--hoba-color-accent); }
  .hoba-style--sm-text-start { text-align: start; }
  .hoba-style--sm-text-center { text-align: center; }
  .hoba-style--sm-text-end { text-align: end; }
  .hoba-style--sm-radius-sm { border-radius: var(--hoba-radius-sm); }
  .hoba-style--sm-radius-md { border-radius: var(--hoba-radius-md); }
  .hoba-style--sm-radius-lg { border-radius: var(--hoba-radius-lg); }
  .hoba-style--sm-shadow-sm { box-shadow: var(--hoba-shadow-sm); }
  .hoba-style--sm-shadow-md { box-shadow: var(--hoba-shadow-md); }
  .hoba-style--sm-font-h1 { font-size: var(--hoba-font-h1); line-height: var(--hoba-line-heading); }
  .hoba-style--sm-font-h2 { font-size: var(--hoba-font-h2); line-height: var(--hoba-line-heading); }
  .hoba-style--sm-font-h3 { font-size: var(--hoba-font-h3); line-height: var(--hoba-line-heading); }
  .hoba-style--sm-font-body { font-size: var(--hoba-font-body); line-height: var(--hoba-line-body); }
  .hoba-style--sm-font-small { font-size: var(--hoba-font-small); line-height: var(--hoba-line-body); }
  .hoba-style--sm-weight-normal { font-weight: var(--hoba-weight-normal); }
  .hoba-style--sm-weight-semibold { font-weight: var(--hoba-weight-semibold); }
  .hoba-style--sm-weight-bold { font-weight: var(--hoba-weight-bold); }
  .hoba-style--sm-leading-tight { line-height: var(--hoba-line-tight); }
  .hoba-style--sm-leading-normal { line-height: var(--hoba-line-body); }
  .hoba-style--sm-leading-loose { line-height: var(--hoba-line-loose); }
  .hoba-style--sm-tracking-tight { letter-spacing: var(--hoba-tracking-tight); }
  .hoba-style--sm-tracking-normal { letter-spacing: var(--hoba-tracking-normal); }
  .hoba-style--sm-tracking-wide { letter-spacing: var(--hoba-tracking-wide); }
  .hoba-style--sm-case-upper { text-transform: uppercase; }
  .hoba-style--sm-case-lower { text-transform: lowercase; }
  .hoba-style--sm-case-capitalize { text-transform: capitalize; }
  .hoba-style--sm-opacity-soft { opacity: var(--hoba-opacity-soft); }
  .hoba-style--sm-opacity-faint { opacity: var(--hoba-opacity-faint); }
  .hoba-style--sm-valign-start,
  .hoba-style--sm-valign-center,
  .hoba-style--sm-valign-end { display: flex; flex-direction: column; }
  .hoba-style--sm-valign-start { justify-content: flex-start; }
  .hoba-style--sm-valign-center { justify-content: center; }
  .hoba-style--sm-valign-end { justify-content: flex-end; }
  .hoba-style--sm-width-content { max-width: var(--hoba-measure-content); }
  .hoba-style--sm-width-wide { max-width: var(--hoba-measure-wide); }
  .hoba-style--sm-width-full { max-width: none; }
  /* Responsive freeform geometry at the phone breakpoint, identical to the
     `.hoba-freeform--md` block but reading the `--sm` custom properties. Later
     in the cascade than `md`, so `sm` wins below 40rem. */
  .hoba-freeform--sm {
    top: var(--hoba-ff-sm-y, var(--hoba-ff-y, auto));
    width: var(--hoba-ff-sm-w, var(--hoba-ff-w, auto));
    height: var(--hoba-ff-sm-h, var(--hoba-ff-h, auto));
    z-index: var(--hoba-ff-sm-z, var(--hoba-ff-z, auto));
    transform: translateX(calc(-50% + var(--hoba-ff-sm-x, var(--hoba-ff-x, 0px))))
               rotate(var(--hoba-ff-sm-rot, var(--hoba-ff-rot, 0deg)));
  }
  /* Reserve the phone stack's own bounding box. */
  .hoba-reserved {
    min-height: var(--hoba-ff-min-sm, var(--hoba-ff-min, auto));
  }
}

/* --- carousel --------------------------------------------------------------
   A carousel is a layout-bearing row of slides. It degrades to a plain
   horizontal, swipeable strip with scroll-snap — no JavaScript is required to
   read all slides. The shared runtime adds autoplay/controls when enabled. */
.hoba-carousel {
  display: flex;
  gap: var(--hoba-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--hoba-space-xs);
  -webkit-overflow-scrolling: touch;
}
.hoba-carousel > * {
  scroll-snap-align: start;
  flex: 0 0 min(88%, 40rem);
}
.hoba-carousel::-webkit-scrollbar { height: 8px; }
.hoba-carousel::-webkit-scrollbar-thumb { background: var(--hoba-color-border); border-radius: var(--hoba-radius-sm); }
.hoba-carousel__nav {
  display: flex;
  gap: var(--hoba-space-sm);
  justify-content: flex-end;
  margin-top: var(--hoba-space-sm);
}
.hoba-carousel__nav button {
  font: inherit;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-sm);
  background: var(--hoba-color-surface, #fff);
  color: inherit;
  cursor: pointer;
}
.hoba-slide {
  display: block;
  margin: 0;
}
.hoba-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hoba-radius-md);
}
.hoba-slide h3 {
  margin: var(--hoba-space-sm) 0 var(--hoba-space-xs);
}
.hoba-slide p { margin: 0 0 var(--hoba-space-sm); }

/* JS is off in the editor/static preview and on in the served release; the
   carousel class is applied by the runtime so a single shared component works
   both as a plain row (canvas) and as a snap strip (published). */
[data-carousel="true"] {
  display: flex;
  gap: var(--hoba-space-md);
  /* A carousel is a single scrolling strip, so it must not inherit the wrapping
     row it is built from. Without this the 88%-wide slides stack onto several
     rows inside a horizontally scrollable box and the strip collapses into a
     vertical list. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--hoba-space-xs);
}
[data-carousel="true"] > * {
  scroll-snap-align: start;
  flex: 0 0 min(88%, 40rem);
}
/* The runtime converts the strip into a transformed track. Until it does (no
   JavaScript, or a runtime failure that rolls it back) the rules above keep the
   native scroll strip; once `--engine` is set the container is a clipping
   viewport and the track owns the horizontal flex row. */
[data-carousel="true"].hoba-carousel--engine {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grab;
  touch-action: pan-y;
}
[data-carousel="true"].hoba-carousel--engine.is-dragging {
  cursor: grabbing;
  user-select: none;
}
/* The generic `[data-carousel] > *` slide sizing must not apply to the track
   wrapper itself, or the row would be sized as a single 88% slide. */
[data-carousel="true"].hoba-carousel--engine > .hoba-carousel__track {
  flex: 1 1 auto;
  width: 100%;
}
.hoba-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hoba-space-md);
  will-change: transform;
}
.hoba-carousel__track > * {
  flex: 0 0 min(88%, 40rem);
  min-width: 0;
  scroll-snap-align: start;
}
/* Dots: one per group, round and token-coloured. */
.hoba-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--hoba-space-sm);
  margin-top: var(--hoba-space-md);
}
.hoba-carousel__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hoba-color-border);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.hoba-carousel__dot:hover {
  transform: scale(1.15);
}
.hoba-carousel__dot:focus-visible {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 2px;
}
.hoba-carousel__dot--active {
  background: var(--hoba-color-primary);
}
/* Fade variant: the runtime only toggles the class; the stack, cross-fade and
   the neutralised transforms are pure CSS. A no-JS reader never gets the class,
   so the strip stays scrollable. */
[data-carousel="true"].hoba-carousel--fade.hoba-carousel--engine {
  cursor: default;
}
.hoba-carousel--fade .hoba-carousel__track {
  display: block;
  transform: none !important;
  transition: none !important;
}
.hoba-carousel--fade .hoba-carousel__track > * {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hoba-carousel--fade {
  position: relative;
}
.hoba-carousel--fade .hoba-carousel__track {
  position: relative;
}
.hoba-carousel--fade .hoba-carousel__track > .hoba-carousel__slide--active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* --- collection listings --------------------------------------------------- */
.collection-list {
  display: block;
  margin: 0 0 var(--hoba-space-section);
}
.collection-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hoba-space-md);
}
.collection-list--grid .collection-list__items {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.collection-list--list .collection-list__items {
  grid-template-columns: 1fr;
}
.collection-list__item h3 {
  margin: 0 0 var(--hoba-space-xs);
}
.collection-item {
  display: flex;
  gap: var(--hoba-space-xs);
  align-items: baseline;
  margin: var(--hoba-space-2xs, 0.25rem) 0;
}
.collection-item__label {
  font-weight: var(--hoba-weight-semibold);
}

/* --- stats / steps / tabs / table (structured sections) --- */
.stats,
.steps,
.tabs,
.table {
  display: block;
  margin: 0 0 var(--hoba-space-section);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--hoba-space-2xs, 0.25rem);
}
.stat__value {
  font-size: 2rem;
  font-weight: var(--hoba-weight-semibold);
  line-height: 1.1;
}
.stat__label {
  color: var(--hoba-color-muted);
}
.stat__detail {
  font-size: 0.875rem;
  color: var(--hoba-color-muted);
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--hoba-space-xs);
}
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--hoba-color-primary);
  color: var(--hoba-color-on-primary, #fff);
  font-weight: var(--hoba-weight-semibold);
}
.step__title {
  margin: 0;
}
.step__text {
  margin: 0;
  color: var(--hoba-color-muted);
}
.tab {
  display: block;
}
.tab__title {
  margin: 0 0 var(--hoba-space-xs);
}
.tab__text {
  margin: 0;
}
.table {
  display: flex;
  flex-direction: column;
}
.table__row {
  display: flex;
  justify-content: space-between;
  gap: var(--hoba-space-md);
  padding: var(--hoba-space-xs) 0;
  border-bottom: 1px solid var(--hoba-color-border, rgba(0, 0, 0, 0.1));
}
.table__label {
  font-weight: var(--hoba-weight-semibold);
}
.table__value {
  text-align: right;
}
.collection-list__image,
.collection-field__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hoba-radius-md, 0.5rem);
  margin-bottom: var(--hoba-space-xs);
}
.collection-list__fields {
  margin: 0;
  display: grid;
  gap: var(--hoba-space-2xs, 0.25rem);
}
.collection-list__field {
  display: flex;
  justify-content: space-between;
  gap: var(--hoba-space-sm);
}
.collection-list__field dt {
  color: var(--hoba-color-muted);
}
.collection-list__field dd {
  margin: 0;
  text-align: right;
}
.collection-field__price {
  font-weight: var(--hoba-weight-semibold);
}
.collection-field__prose {
  display: grid;
  gap: var(--hoba-space-sm, 0.75rem);
  max-width: 68ch;
}
.collection-field__paragraph {
  margin: 0;
}

/* --- visual effects (token driven) -----------------------------------------
   Effect tokens compile to `hoba-effect--*`, `hoba-hover--*` and `hoba-bg--*`
   classes. Animations only run where motion is allowed and never hide content:
   the element is visible from the first paint. The `md-`/`sm-` prefixed
   variants mirror the responsive style-delta mechanism. */
@keyframes hoba-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hoba-slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hoba-slide-in-left {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hoba-slide-in-right {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hoba-zoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hoba-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.4rem); }
  100% { transform: translateY(0); }
}
@keyframes hoba-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5rem); }
}
@keyframes hoba-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes hoba-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.25rem); }
  40% { transform: translateX(0.25rem); }
  60% { transform: translateX(-0.18rem); }
  80% { transform: translateX(0.18rem); }
}
@keyframes hoba-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-1.5deg); }
  75% { transform: rotate(1.5deg); }
}
@keyframes hoba-tilt {
  from { transform: rotate(-4deg); }
  to { transform: rotate(1deg); }
}
@keyframes hoba-flip-in {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}
@keyframes hoba-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hoba-slide-down {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hoba-reveal-zoom {
  from { opacity: 0; transform: scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--fade-in {
  animation: hoba-fade-in 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--slide-up {
  animation: hoba-slide-up 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--slide-in-left {
  animation: hoba-slide-in-left 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--slide-in-right {
  animation: hoba-slide-in-right 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--zoom {
  animation: hoba-zoom 0.5s ease both;
}
.hoba-effect--float {
  animation: hoba-float 3s ease-in-out infinite;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--bounce {
  animation: hoba-bounce 0.9s ease-in-out 2 both;
}
.hoba-effect--pulse {
  animation: hoba-pulse 1.6s ease-in-out infinite;
}
.hoba-effect--shake {
  animation: hoba-shake 0.5s ease-in-out 2;
}
.hoba-effect--wiggle {
  animation: hoba-wiggle 0.6s ease-in-out 2;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--tilt {
  animation: hoba-tilt 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--flip-in {
  animation: hoba-flip-in 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--fade-out {
  animation: hoba-fade-out 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--slide-down {
  animation: hoba-slide-down 0.6s ease both;
}
.hoba-reveal-ready .hoba-in-view.hoba-effect--reveal-zoom {
  animation: hoba-reveal-zoom 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hoba-hover--lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hoba-hover--lift:hover,
.hoba-hover--lift:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: var(--hoba-shadow-md);
}
.hoba-hover--glow {
  transition: box-shadow 0.18s ease;
}
.hoba-hover--glow:hover,
.hoba-hover--glow:focus-within {
  box-shadow: 0 0 0 3px var(--hoba-color-accent);
}
.hoba-hover--scale {
  transition: transform 0.18s ease;
}
.hoba-hover--scale:hover,
.hoba-hover--scale:focus-within {
  transform: scale(1.03);
}
/* Brighten lifts the surface toward white using a token colour mix; no raw
   colour is introduced. Runs only on hover/focus, so the static look is
   unchanged. */
.hoba-hover--brighten {
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.hoba-hover--brighten:hover,
.hoba-hover--brighten:focus-within {
  background-color: var(--hoba-color-surface);
  box-shadow: var(--hoba-shadow-md);
}
/* Raise is a stronger lift with a subtle scale for "крутые" hero cards. */
.hoba-hover--raise {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hoba-hover--raise:hover,
.hoba-hover--raise:focus-within {
  transform: translateY(-0.5rem) scale(1.01);
  box-shadow: var(--hoba-shadow-md);
}
/* Underline marks links/headings on hover/focus without changing the static
   look. */
.hoba-hover--underline {
  transition: text-decoration-color 0.18s ease;
}
.hoba-hover--underline:hover,
.hoba-hover--underline:focus-within {
  text-decoration: underline;
}
/* Slate tints the surface with the muted token and switches the ink to the
   primary ink so contrast stays theme-driven. */
.hoba-hover--slate {
  transition: background-color 0.18s ease, color 0.18s ease;
}
.hoba-hover--slate:hover,
.hoba-hover--slate:focus-within {
  background-color: var(--hoba-color-muted);
  color: var(--hoba-color-primary-ink);
}
.hoba-hover--pop {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hoba-hover--pop:hover,
.hoba-hover--pop:focus-within {
  transform: scale(1.05);
  box-shadow: var(--hoba-shadow-md);
}
.hoba-hover--shrink {
  transition: transform 0.18s ease;
}
.hoba-hover--shrink:hover,
.hoba-hover--shrink:focus-within {
  transform: scale(0.98);
}
.hoba-hover--tilt-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hoba-hover--tilt-hover:hover,
.hoba-hover--tilt-hover:focus-within {
  transform: rotate(-1.5deg) translateY(-0.25rem);
  box-shadow: var(--hoba-shadow-md);
}
.hoba-bg--gradient {
  background-image: linear-gradient(135deg, var(--hoba-color-primary) 0%, var(--hoba-color-bg) 45%, var(--hoba-color-surface) 100%);
  background-repeat: repeat;
}
.hoba-bg--grid {
  background-image:
    linear-gradient(var(--hoba-color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--hoba-color-border) 1px, transparent 1px);
  background-size: var(--hoba-space-lg) var(--hoba-space-lg);
  background-repeat: repeat;
}
.hoba-bg--dots {
  background-image: radial-gradient(var(--hoba-color-muted) 1.5px, transparent 1.5px);
  background-size: var(--hoba-space-md) var(--hoba-space-md);
  background-repeat: repeat;
  background-position: 0 0;
}
/* Noise: a purely gradient-based grain (no image asset), tinted by the border
   token so it recolours with the theme. */
.hoba-bg--noise {
  background-image:
    repeating-conic-gradient(var(--hoba-color-border) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
  background-repeat: repeat;
}
/* Waves: layered radial gradients forming a soft topographic pattern. The sheet
   tiles across the whole element (repeat, no centred lock) so a tall section
   is patterned edge to edge rather than only in a middle band. */
.hoba-bg--waves {
  background-image:
    radial-gradient(circle at 50% 120%, transparent 0 42%, var(--hoba-color-border) 43% 44%, transparent 45%),
    radial-gradient(circle at 20% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%),
    radial-gradient(circle at 80% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%);
  background-size: 12rem 8rem;
  background-repeat: repeat;
}
/* Stripes: diagonal bands built from the border token. */
.hoba-bg--stripes {
  background-image:
    repeating-linear-gradient(45deg, var(--hoba-color-border) 0 1px, transparent 1px 0.75rem);
  background-repeat: repeat;
}
/* Checker: two layered gradients form a token-tinted board. */
.hoba-bg--checker {
  background-image:
    linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%),
    linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%);
  background-size: 1.5rem 1.5rem;
  background-position: 0 0, 0.75rem 0.75rem;
  background-repeat: repeat;
}
/* Rays: a repeating conic fan from the border token. */
.hoba-bg--rays {
  background-image:
    repeating-conic-gradient(from 22deg, var(--hoba-color-border) 0deg 6deg, transparent 6deg 12deg);
  background-repeat: repeat;
}
/* Blobs: soft surface/border radial pools, no image asset. Repeated so the
   pools cover the full element instead of one centred cluster. */
.hoba-bg--blobs {
  background-image:
    radial-gradient(circle at 20% 30%, var(--hoba-color-surface) 0 18%, transparent 19%),
    radial-gradient(circle at 75% 65%, var(--hoba-color-surface) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 90%, var(--hoba-color-border) 0 12%, transparent 13%);
  background-size: 24rem 18rem;
  background-repeat: repeat;
}
/* Mesh: several overlapping token-tinted radial gradients, tiled to cover. */
.hoba-bg--mesh {
  background-image:
    radial-gradient(at 15% 20%, var(--hoba-color-surface) 0 12%, transparent 45%),
    radial-gradient(at 80% 15%, var(--hoba-color-border) 0 10%, transparent 40%),
    radial-gradient(at 65% 80%, var(--hoba-color-surface) 0 14%, transparent 50%),
    radial-gradient(at 25% 85%, var(--hoba-color-border) 0 10%, transparent 45%);
  background-size: 28rem 22rem;
  background-repeat: repeat;
}
/* Aurora: broad, softly offset token washes for a north-lights field, tiled so
   the wash reaches every edge of a tall section. */
.hoba-bg--aurora {
  background-image:
    radial-gradient(at 10% 0%, var(--hoba-color-accent) 0 18%, transparent 55%),
    radial-gradient(at 90% 10%, var(--hoba-color-primary) 0 20%, transparent 60%),
    radial-gradient(at 50% 100%, var(--hoba-color-surface) 0 22%, transparent 65%);
  background-size: 30rem 24rem;
  background-repeat: repeat;
}

/* Reveal on scroll. The starting hidden state is only applied once the runtime
   has added `hoba-reveal-ready`, so the content is fully visible without
   JavaScript. Motion-sensitive users never see the transition. */
.hoba-reveal-ready [data-hoba-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hoba-reveal-ready [data-hoba-reveal].hoba-in-view {
  opacity: 1;
  transform: none;
}

/* Tabs: the strip is built by the runtime; panels remain visible by default and
   are hidden by the runtime only. */
.hoba-tabs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hoba-space-sm);
  margin-bottom: var(--hoba-space);
}
.hoba-tabs__tab {
  font: inherit;
  font-weight: var(--hoba-weight-semibold);
  padding: var(--hoba-space-xs) var(--hoba-space-sm);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-surface);
  color: var(--hoba-color-muted);
  cursor: pointer;
}
.hoba-tabs__tab[aria-selected="true"] {
  background: var(--hoba-color-primary);
  border-color: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
}

/* FAQ accordion: the trigger is only interactive once the runtime has marked
   the item open; without JavaScript the plain heading/answer flow is untouched. */
[data-accordion-item] h3 {
  cursor: default;
}
.hoba-faq-item[data-accordion-open] h3 {
  cursor: pointer;
}

/* Hamburger: hidden on wide screens, where the existing hover dropdown works.
   Only shown on small screens and only when the runtime has added the button. */
.hoba-nav__toggle {
  display: none;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--hoba-space-xs) var(--hoba-space-sm);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-sm);
  background: var(--hoba-color-surface);
  color: inherit;
  cursor: pointer;
}
@media (max-width: 40rem) {
  .hoba-nav__toggle {
    display: inline-block;
    margin: var(--hoba-space-xs) var(--hoba-space);
  }
  /* JavaScript active: every variant collapses behind the hamburger. The default
     `bar`/`centered` variants reveal the list as a full-width dropdown panel;
     `drawer` keeps its own off-canvas panel (see `[data-nav-variant="drawer"]`),
     so it is excluded here to leave that transform untouched. Without
     JavaScript the list stays visible below (the hamburger never appears). */
  html[data-hoba-js] .site-navigation:not([data-nav-variant="drawer"]) > ul {
    display: none;
  }
  /* Lift the opened bar/centered navigation above the runtime scrim so its
     links stay clickable; the scrim still dims the page behind it. */
  html[data-hoba-js] .site-navigation:not([data-nav-variant="drawer"])[data-nav-open="true"] {
    z-index: 55;
  }
  html[data-hoba-js] .site-navigation:not([data-nav-variant="drawer"])[data-nav-open="true"] > ul {
    display: block;
    max-width: none;
    margin-inline: 0;
    background: var(--hoba-color-surface);
    border-block-start: 1px solid var(--hoba-color-border);
    box-shadow: var(--hoba-shadow-md);
  }
  .site-navigation[data-nav-open="true"] > ul {
    display: block;
  }
  .site-navigation > ul {
    flex-direction: column;
    align-items: stretch;
  }
  .site-navigation li {
    width: 100%;
  }
  /* No JavaScript: submenus are expanded inline, so every link is reachable
     even though there is no hover and no toggle button. */
  .site-navigation ul ul {
    position: static;
    display: block;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 0 var(--hoba-space);
    background: transparent;
  }
  .site-navigation ul ul ul {
    left: 0;
  }
  /* JavaScript active: the runtime owns submenu expansion, so collapse them
     until the user opens one. */
  html[data-hoba-js] .site-navigation ul ul {
    display: none;
  }
  html[data-hoba-js] .site-navigation li[data-submenu-open="true"] > ul {
    display: block;
  }
  html[data-hoba-js] .hoba-nav__submenu-toggle {
    display: inline-block;
  }
  /* The submenu toggle and its link share a row. */
  .site-navigation li[data-nav-has-children="true"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-navigation li[data-nav-has-children="true"] > a,
  .site-navigation li[data-nav-has-children="true"] > span {
    flex: 1 1 auto;
  }
  .site-navigation li[data-nav-has-children="true"] > ul {
    flex: 0 0 100%;
  }
}

/* Responsive effect deltas (sm before md, matching the style-delta order). */
@media (max-width: 64rem) {
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-fade-in { animation: hoba-fade-in 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-up { animation: hoba-slide-up 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-in-left { animation: hoba-slide-in-left 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-in-right { animation: hoba-slide-in-right 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-zoom { animation: hoba-zoom 0.5s ease both; }
  .hoba-effect--md-float { animation: hoba-float 3s ease-in-out infinite; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-bounce { animation: hoba-bounce 0.9s ease-in-out 2 both; }
  .hoba-effect--md-pulse { animation: hoba-pulse 1.6s ease-in-out infinite; }
  .hoba-effect--md-shake { animation: hoba-shake 0.5s ease-in-out 2; }
  .hoba-effect--md-wiggle { animation: hoba-wiggle 0.6s ease-in-out 2; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-tilt { animation: hoba-tilt 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-flip-in { animation: hoba-flip-in 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-fade-out { animation: hoba-fade-out 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-down { animation: hoba-slide-down 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-reveal-zoom { animation: hoba-reveal-zoom 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hoba-hover--md-lift:hover, .hoba-hover--md-lift:focus-within { transform: translateY(-0.25rem); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--md-glow:hover, .hoba-hover--md-glow:focus-within { box-shadow: 0 0 0 3px var(--hoba-color-accent); }
  .hoba-hover--md-scale:hover, .hoba-hover--md-scale:focus-within { transform: scale(1.03); }
  .hoba-hover--md-brighten:hover, .hoba-hover--md-brighten:focus-within { background-color: var(--hoba-color-surface); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--md-raise:hover, .hoba-hover--md-raise:focus-within { transform: translateY(-0.5rem) scale(1.01); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--md-underline:hover, .hoba-hover--md-underline:focus-within { text-decoration: underline; }
  .hoba-hover--md-slate:hover, .hoba-hover--md-slate:focus-within { background-color: var(--hoba-color-muted); color: var(--hoba-color-primary-ink); }
  .hoba-hover--md-pop:hover, .hoba-hover--md-pop:focus-within { transform: scale(1.05); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--md-shrink:hover, .hoba-hover--md-shrink:focus-within { transform: scale(0.98); }
  .hoba-hover--md-tilt-hover:hover, .hoba-hover--md-tilt-hover:focus-within { transform: rotate(-1.5deg) translateY(-0.25rem); box-shadow: var(--hoba-shadow-md); }
  .hoba-bg--md-gradient { background-image: linear-gradient(135deg, var(--hoba-color-primary) 0%, var(--hoba-color-bg) 45%, var(--hoba-color-surface) 100%); background-repeat: repeat; }
  .hoba-bg--md-grid { background-image: linear-gradient(var(--hoba-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--hoba-color-border) 1px, transparent 1px); background-size: var(--hoba-space-lg) var(--hoba-space-lg); background-repeat: repeat; }
  .hoba-bg--md-dots { background-image: radial-gradient(var(--hoba-color-muted) 1.5px, transparent 1.5px); background-size: var(--hoba-space-md) var(--hoba-space-md); background-repeat: repeat; background-position: 0 0; }
  .hoba-bg--md-noise { background-image: repeating-conic-gradient(var(--hoba-color-border) 0% 25%, transparent 0% 50%); background-size: 4px 4px; background-repeat: repeat; }
  .hoba-bg--md-waves { background-image: radial-gradient(circle at 50% 120%, transparent 0 42%, var(--hoba-color-border) 43% 44%, transparent 45%), radial-gradient(circle at 20% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%), radial-gradient(circle at 80% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%); background-size: 12rem 8rem; background-repeat: repeat; }
  .hoba-bg--md-stripes { background-image: repeating-linear-gradient(45deg, var(--hoba-color-border) 0 1px, transparent 1px 0.75rem); background-repeat: repeat; }
  .hoba-bg--md-checker { background-image: linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%), linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%); background-size: 1.5rem 1.5rem; background-position: 0 0, 0.75rem 0.75rem; background-repeat: repeat; }
  .hoba-bg--md-rays { background-image: repeating-conic-gradient(from 22deg, var(--hoba-color-border) 0deg 6deg, transparent 6deg 12deg); background-repeat: repeat; }
  .hoba-bg--md-blobs { background-image: radial-gradient(circle at 20% 30%, var(--hoba-color-surface) 0 18%, transparent 19%), radial-gradient(circle at 75% 65%, var(--hoba-color-surface) 0 22%, transparent 23%), radial-gradient(circle at 50% 90%, var(--hoba-color-border) 0 12%, transparent 13%); background-size: 24rem 18rem; background-repeat: repeat; }
  .hoba-bg--md-mesh { background-image: radial-gradient(at 15% 20%, var(--hoba-color-surface) 0 12%, transparent 45%), radial-gradient(at 80% 15%, var(--hoba-color-border) 0 10%, transparent 40%), radial-gradient(at 65% 80%, var(--hoba-color-surface) 0 14%, transparent 50%), radial-gradient(at 25% 85%, var(--hoba-color-border) 0 10%, transparent 45%); background-size: 28rem 22rem; background-repeat: repeat; }
  .hoba-bg--md-aurora { background-image: radial-gradient(at 10% 0%, var(--hoba-color-accent) 0 18%, transparent 55%), radial-gradient(at 90% 10%, var(--hoba-color-primary) 0 20%, transparent 60%), radial-gradient(at 50% 100%, var(--hoba-color-surface) 0 22%, transparent 65%); background-size: 30rem 24rem; background-repeat: repeat; }
}
@media (max-width: 40rem) {
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-fade-in { animation: hoba-fade-in 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-up { animation: hoba-slide-up 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-in-left { animation: hoba-slide-in-left 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-in-right { animation: hoba-slide-in-right 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-zoom { animation: hoba-zoom 0.5s ease both; }
  .hoba-effect--sm-float { animation: hoba-float 3s ease-in-out infinite; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-bounce { animation: hoba-bounce 0.9s ease-in-out 2 both; }
  .hoba-effect--sm-pulse { animation: hoba-pulse 1.6s ease-in-out infinite; }
  .hoba-effect--sm-shake { animation: hoba-shake 0.5s ease-in-out 2; }
  .hoba-effect--sm-wiggle { animation: hoba-wiggle 0.6s ease-in-out 2; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-tilt { animation: hoba-tilt 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-flip-in { animation: hoba-flip-in 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-fade-out { animation: hoba-fade-out 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-down { animation: hoba-slide-down 0.6s ease both; }
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-reveal-zoom { animation: hoba-reveal-zoom 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hoba-hover--sm-lift:hover, .hoba-hover--sm-lift:focus-within { transform: translateY(-0.25rem); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--sm-glow:hover, .hoba-hover--sm-glow:focus-within { box-shadow: 0 0 0 3px var(--hoba-color-accent); }
  .hoba-hover--sm-scale:hover, .hoba-hover--sm-scale:focus-within { transform: scale(1.03); }
  .hoba-hover--sm-brighten:hover, .hoba-hover--sm-brighten:focus-within { background-color: var(--hoba-color-surface); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--sm-raise:hover, .hoba-hover--sm-raise:focus-within { transform: translateY(-0.5rem) scale(1.01); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--sm-underline:hover, .hoba-hover--sm-underline:focus-within { text-decoration: underline; }
  .hoba-hover--sm-slate:hover, .hoba-hover--sm-slate:focus-within { background-color: var(--hoba-color-muted); color: var(--hoba-color-primary-ink); }
  .hoba-hover--sm-pop:hover, .hoba-hover--sm-pop:focus-within { transform: scale(1.05); box-shadow: var(--hoba-shadow-md); }
  .hoba-hover--sm-shrink:hover, .hoba-hover--sm-shrink:focus-within { transform: scale(0.98); }
  .hoba-hover--sm-tilt-hover:hover, .hoba-hover--sm-tilt-hover:focus-within { transform: rotate(-1.5deg) translateY(-0.25rem); box-shadow: var(--hoba-shadow-md); }
  .hoba-bg--sm-gradient { background-image: linear-gradient(135deg, var(--hoba-color-primary) 0%, var(--hoba-color-bg) 45%, var(--hoba-color-surface) 100%); background-repeat: repeat; }
  .hoba-bg--sm-grid { background-image: linear-gradient(var(--hoba-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--hoba-color-border) 1px, transparent 1px); background-size: var(--hoba-space-lg) var(--hoba-space-lg); background-repeat: repeat; }
  .hoba-bg--sm-dots { background-image: radial-gradient(var(--hoba-color-muted) 1.5px, transparent 1.5px); background-size: var(--hoba-space-md) var(--hoba-space-md); background-repeat: repeat; background-position: 0 0; }
  .hoba-bg--sm-noise { background-image: repeating-conic-gradient(var(--hoba-color-border) 0% 25%, transparent 0% 50%); background-size: 4px 4px; background-repeat: repeat; }
  .hoba-bg--sm-waves { background-image: radial-gradient(circle at 50% 120%, transparent 0 42%, var(--hoba-color-border) 43% 44%, transparent 45%), radial-gradient(circle at 20% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%), radial-gradient(circle at 80% 140%, transparent 0 38%, var(--hoba-color-border) 39% 40%, transparent 41%); background-size: 12rem 8rem; background-repeat: repeat; }
  .hoba-bg--sm-stripes { background-image: repeating-linear-gradient(45deg, var(--hoba-color-border) 0 1px, transparent 1px 0.75rem); background-repeat: repeat; }
  .hoba-bg--sm-checker { background-image: linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%), linear-gradient(45deg, var(--hoba-color-border) 25%, transparent 25% 75%, var(--hoba-color-border) 75%); background-size: 1.5rem 1.5rem; background-position: 0 0, 0.75rem 0.75rem; background-repeat: repeat; }
  .hoba-bg--sm-rays { background-image: repeating-conic-gradient(from 22deg, var(--hoba-color-border) 0deg 6deg, transparent 6deg 12deg); background-repeat: repeat; }
  .hoba-bg--sm-blobs { background-image: radial-gradient(circle at 20% 30%, var(--hoba-color-surface) 0 18%, transparent 19%), radial-gradient(circle at 75% 65%, var(--hoba-color-surface) 0 22%, transparent 23%), radial-gradient(circle at 50% 90%, var(--hoba-color-border) 0 12%, transparent 13%); background-size: 24rem 18rem; background-repeat: repeat; }
  .hoba-bg--sm-mesh { background-image: radial-gradient(at 15% 20%, var(--hoba-color-surface) 0 12%, transparent 45%), radial-gradient(at 80% 15%, var(--hoba-color-border) 0 10%, transparent 40%), radial-gradient(at 65% 80%, var(--hoba-color-surface) 0 14%, transparent 50%), radial-gradient(at 25% 85%, var(--hoba-color-border) 0 10%, transparent 45%); background-size: 28rem 22rem; background-repeat: repeat; }
  .hoba-bg--sm-aurora { background-image: radial-gradient(at 10% 0%, var(--hoba-color-accent) 0 18%, transparent 55%), radial-gradient(at 90% 10%, var(--hoba-color-primary) 0 20%, transparent 60%), radial-gradient(at 50% 100%, var(--hoba-color-surface) 0 22%, transparent 65%); background-size: 30rem 24rem; background-repeat: repeat; }
}

@media (prefers-reduced-motion: reduce) {
  .hoba-reveal-ready .hoba-in-view.hoba-effect--fade-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--slide-up,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--slide-in-left,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--slide-in-right,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--zoom,
  .hoba-effect--float,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--bounce,
  .hoba-effect--pulse,
  .hoba-effect--shake,
  .hoba-effect--wiggle,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--tilt,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--flip-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--fade-out,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--slide-down,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--reveal-zoom,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-fade-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-up,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-in-left,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-in-right,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-zoom,
  .hoba-effect--md-float,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-bounce,
  .hoba-effect--md-pulse,
  .hoba-effect--md-shake,
  .hoba-effect--md-wiggle,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-tilt,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-flip-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-fade-out,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-slide-down,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--md-reveal-zoom,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-fade-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-up,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-in-left,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-in-right,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-zoom,
  .hoba-effect--sm-float,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-bounce,
  .hoba-effect--sm-pulse,
  .hoba-effect--sm-shake,
  .hoba-effect--sm-wiggle,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-tilt,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-flip-in,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-fade-out,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-slide-down,
  .hoba-reveal-ready .hoba-in-view.hoba-effect--sm-reveal-zoom {
    animation: none;
  }
  .hoba-reveal-ready [data-hoba-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hoba-carousel__track,
  .hoba-carousel--fade .hoba-carousel__track > *,
  .site-navigation[data-nav-variant="drawer"] {
    transition: none !important;
  }
  .hoba-to-top {
    transition: none;
  }
}

/* --- back to top -----------------------------------------------------------
   Fixed, token-styled control created by the runtime when the page opted in via
   `data-hoba-to-top="true"`. Without the runtime the button does not exist, so
   nothing depends on it. */
.hoba-to-top {
  position: fixed;
  inset-block-end: var(--hoba-space-lg);
  inset-inline-end: var(--hoba-space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
  box-shadow: var(--hoba-shadow-md);
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  transform: translateY(0.625rem);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.18s ease;
}
.hoba-to-top--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hoba-to-top:hover,
.hoba-to-top:focus-visible {
  background: var(--hoba-color-primary-hover);
}
.hoba-to-top:focus-visible {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 2px;
}
.hoba-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
@media (max-width: 40rem) {
  .hoba-to-top {
    width: 2.25rem;
    height: 2.25rem;
    inset-block-end: var(--hoba-space-sm);
    inset-inline-end: var(--hoba-space-sm);
  }
  .hoba-to-top svg {
    width: 1rem;
    height: 1rem;
  }
}
:root {
  --hoba-color-bg: #f5f6fa;
  --hoba-color-surface: #ffffff;
  --hoba-color-text: #0f1f3d;
  --hoba-color-muted: #254da4;
  --hoba-color-primary: #2563eb;
  --hoba-color-primary-hover: #2157cf;
  --hoba-color-primary-ink: #ffffff;
  --hoba-color-border: #bfcae3;
  --hoba-color-accent: #0f766e;
  --hoba-ink: #0f1f3d;
  --hoba-muted: #254da4;
  --hoba-accent: #0f766e;
  --hoba-accent-ink: #ffffff;
  --hoba-surface: #ffffff;
  --hoba-border: #bfcae3;
  --hoba-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hoba-font-h1: 2rem;
  --hoba-font-h2: 1.35rem;
  --hoba-font-h3: 1.15rem;
  --hoba-font-body: 1rem;
  --hoba-font-small: 0.875rem;
  --hoba-radius: 0.75rem;
  --hoba-radius-sm: 0.375rem;
  --hoba-radius-md: 0.75rem;
  --hoba-radius-lg: 1.125rem;
  --hoba-shadow-sm: 0 2px 4px rgba(26, 32, 44, 0.1);
  --hoba-shadow-md: 0 8px 20px rgba(26, 32, 44, 0.16);
}