/* ============================================================
   COMPONENTS — the library
   ------------------------------------------------------------
   Reusable, skin-agnostic components. Every value reads a token
   from tokens.css; nothing is hard-coded. Class prefix: c-

   Token vocabulary is Style Guide v2 (see tokens.css). The same
   markup renders under any of the 6 themes by setting
   [data-theme] on an ancestor.
   ============================================================ */

/* --- Scope base --------------------------------------------- */
.c-scope, .c-scope * { box-sizing: border-box; }
.c-scope {
  font-family: var(--font-body);
  font-size: var(--font-size-base, 16px);
  line-height: 1.65;
  color: var(--text-on-page);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
.c-scope h1, .c-scope h2, .c-scope h3, .c-scope h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 700);
  letter-spacing: var(--heading-tracking, normal);
  text-transform: var(--heading-transform, none);
  line-height: 1.15;
  color: var(--text-heading);
  margin: 0 0 var(--space-sm);
}
.c-scope h1 { font-size: var(--type-h1-size); }
.c-scope h2 { font-size: var(--type-h2-size); }
.c-scope h3 { font-size: var(--type-h3-size); }
.c-scope p { margin: 0 0 var(--space-sm); }
/* CONVENTION (Isaac, named): BODY text links are underlined so they read as links.
   Overridable per preset via --link-decoration. Hover changes colour; underline persists. */
.c-scope a:not([class*="c-btn"]) { color: var(--link-colour); text-decoration: var(--link-decoration, underline); }
.c-scope a:not([class*="c-btn"]):hover { color: var(--link-hover-colour); }

/* --- Layout helpers ----------------------------------------- */
.c-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad, var(--space-md)); }
.c-prose     { max-width: var(--container-prose); }
.c-eyebrow {
  display: inline-block;
  font-size: 0.8em;
  font-weight: var(--heading-weight, 700);
  letter-spacing: var(--label-tracking, normal);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-2xs);
}
.c-muted { color: var(--text-on-page); opacity: 0.72; }

/* ============================================================
   BUTTONS
   ============================================================ */
.c-btn {
  --_py: 0.8em;  --_px: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: var(--btn-weight, 600);
  line-height: 1;
  text-decoration: none;
  padding: var(--_py) var(--_px);
  border-radius: var(--btn-radius, 0);
  border: var(--btn-border-width, 2px) solid transparent;
  cursor: pointer;
  transition: transform var(--transition-speed) var(--ease),
              background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              border-color var(--transition-speed) ease;
}
.c-btn:hover { transform: translateY(var(--btn-hover-lift, -2px)); }
.c-btn:active { transform: translateY(0); }

/* HOVER MECHANICS (rigorous + contrast-safe, luminance-agnostic):
   · FILLED buttons darken with a translucent veil — an inset shadow tints the
     background ~12% darker regardless of its colour; the label sits ABOVE the
     veil so it stays fully legible. Works on light AND dark fills.
   · LINE buttons (outline/ghost) FILL on hover (transparent → solid), so they
     gain a clear, contrasting plate. */
.c-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
/* Hover uses the CAPTURED hover background (te_button_hover). No invented darken-veil. */
.c-btn--primary:hover { background: var(--btn-primary-hover-bg, var(--btn-primary-bg)); box-shadow: var(--shadow-md); }

/* Secondary: a captured fill if there is one, else an outline of the primary —
   coherent with the site, never a generic grey. Hover ALWAYS fills (guaranteed plate). */
.c-btn--secondary {
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-text, var(--btn-primary-bg, var(--text-on-page)));
  border-color: var(--btn-secondary-border, var(--btn-primary-bg, currentColor));
}
.c-btn--secondary:hover {
  background: var(--btn-secondary-hover-bg, var(--btn-secondary-border, var(--btn-primary-bg)));
  color: var(--btn-secondary-hover-text, var(--btn-primary-text, #fff));
  border-color: transparent;
}

/* Outline of the primary colour. Transparent until hover, then fills. */
.c-btn--outline { background: transparent; color: var(--btn-outline-color, var(--brand-primary)); border-color: var(--btn-outline-color, var(--brand-primary)); }
.c-btn--outline:hover { background: var(--btn-outline-color, var(--brand-primary)); color: var(--btn-primary-text); border-color: var(--btn-outline-color, var(--brand-primary)); }

/* Ghost: text-only. Hover gains a subtle tinted plate so the affordance is
   visible without relying on colour alone. */
.c-btn--ghost { background: transparent; color: var(--link-colour, var(--btn-primary-bg, var(--text-on-page))); }
.c-btn--ghost:hover { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--link-hover-colour, var(--brand-primary)); transform: translateY(0); }

/* ---- INVERSE buttons — for dark / emphasis / image surfaces -------------
   The surface's OWN paired text colour becomes the fill (guaranteed to contrast
   the surface it sits on), the surface colour becomes the label. Same hover
   mechanics. Use the explicit classes, OR they're applied automatically inside
   .c-band / .c-footer / .c-bghero below. */
.c-btn--inverse { background: var(--text-on-emphasis, #fff); color: var(--bg-emphasis, var(--brand-primary)); border-color: transparent; box-shadow: var(--shadow-sm); }
.c-btn--inverse:hover { box-shadow: var(--shadow-md); }  /* elevation only (token); no invented darken-veil */
.c-btn--inverse-outline { background: transparent; color: var(--text-on-emphasis, #fff); border-color: currentColor; }
.c-btn--inverse-outline:hover { background: var(--text-on-emphasis, #fff); color: var(--bg-emphasis, var(--brand-primary)); }

.c-btn--lg { font-size: 1.125em; --_px: 1.9em; }
.c-btn--sm { font-size: 0.875em; --_py: 0.6em; --_px: 1.1em; min-height: 38px; }

/* Split / joined button group — 2 or 3 buttons fused into one control.
   Outer corners keep the theme radius; inner edges square and borders merge. */
.c-btn-group { display: inline-flex; }
.c-btn-group .c-btn { border-radius: 0; }
.c-btn-group .c-btn:hover { transform: none; }
.c-btn-group .c-btn + .c-btn { margin-left: -2px; }
.c-btn-group .c-btn:first-child { border-top-left-radius: var(--btn-radius); border-bottom-left-radius: var(--btn-radius); }
.c-btn-group .c-btn:last-child  { border-top-right-radius: var(--btn-radius); border-bottom-right-radius: var(--btn-radius); }
.c-btn-group .c-btn--primary + .c-btn--primary,
.c-btn-group .c-btn--secondary + .c-btn--secondary { box-shadow: inset 1px 0 0 var(--btn-seam); }
.c-btn-group .c-btn--caret { --_px: 0.9em; }

/* Keyboard focus ring — a captured library value */
.c-scope a:focus-visible, .c-btn:focus-visible, .c-input:focus-visible, .c-textarea:focus-visible,
.c-select:focus-visible, .c-dropdown__toggle:focus-visible, .c-navm__toggle:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring, var(--brand-primary));
  outline-offset: var(--focus-offset, 2px);
}
/* Line-icon stroke weight — a captured library value (fill:none = our line icons) */
.c-scope svg[fill="none"] { stroke-width: var(--icon-stroke, 2); }

/* ============================================================
   BADGE
   ============================================================ */
.c-badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: 0.72em; font-weight: var(--heading-weight, 700); letter-spacing: var(--label-tracking, normal); text-transform: uppercase;
  padding: 0.35em 0.8em; border-radius: var(--radius-full);
  background: var(--bg-alt); color: var(--brand-primary);
}

/* ============================================================
   CARD
   ============================================================ */
.c-card {
  background: var(--bg-page);
  border: var(--line-width, 1px) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-speed) var(--ease), box-shadow var(--transition-speed) var(--ease);
  display: flex; flex-direction: column;
}
.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.c-card--featured { border: 2px solid var(--brand-primary); box-shadow: var(--shadow-md); }
.c-card--soft { background: var(--bg-alt); border-color: transparent; }
.c-card__media { aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-card__body { padding: var(--spacing-card, var(--space-lg)); display: flex; flex-direction: column; gap: var(--space-2xs); }
.c-card__title { font-size: var(--type-h3-size); margin: 0; }
.c-card__text  { margin: 0; font-size: 0.95em; color: var(--text-on-page); opacity: 0.72; }
.c-card__footer { margin-top: auto; padding-top: var(--space-sm); }

.c-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ============================================================
   SECTION SURFACES — aligned to slipstream-prod Style-Guide v2.
   A section picks a BACKGROUND SLOT: page / alt / emphasis / inverse.
   Class names (.bg-*) and tokens (--bg-<key> / --text-on-<key>) match the
   slipstream-prod runtime exactly, so a section renders identically there.
   Each slot's colours are derived (WCAG-checked, brand-anchored) by the
   Style Guide; the library only owns the surface STRUCTURE + scoped context.
   ============================================================ */
.c-section { padding-block: var(--spacing-section); }
.bg-page     { background-color: var(--bg-page);     color: var(--text-on-page); }
.bg-alt      { background-color: var(--bg-alt);      color: var(--text-on-alt); }
.bg-emphasis { background-color: var(--bg-emphasis); color: var(--text-on-emphasis); }
.bg-inverse  { background-color: var(--bg-inverse);  color: var(--text-on-inverse); }

/* Scoped surface context: on emphasis / inverse, descendants ride the on-colour. */
:is(.bg-emphasis,.bg-inverse) :is(h1,h2,h3,h4,h5,h6) { color: inherit; }
:is(.bg-emphasis,.bg-inverse) .c-eyebrow { color: inherit; opacity: .82; }
:is(.bg-emphasis,.bg-inverse) a:not([class*="c-btn"]) { color: inherit; text-decoration-color: currentColor; }
:is(.bg-emphasis,.bg-inverse) .c-btn--outline { color: inherit; border-color: currentColor; }
.bg-emphasis .c-btn--outline:hover { background: var(--text-on-emphasis); color: var(--bg-emphasis); }
.bg-inverse  .c-btn--outline:hover { background: var(--text-on-inverse);  color: var(--bg-inverse); }
/* cards lift off the surface rather than vanish into it */
.bg-inverse  .c-card { background: color-mix(in srgb, var(--bg-inverse) 86%, #ffffff); color: var(--text-on-inverse); border-color: transparent; }
.bg-emphasis .c-card { background: var(--bg-page); color: var(--text-on-page); border-color: transparent; }

/* ============================================================
   HERO
   ============================================================ */
.c-hero { padding-block: var(--spacing-section); }
/* default hero surface is the page — UNLESS a surface class (.bg-alt/.bg-emphasis/.bg-inverse)
   is present, in which case that surface paints it and the on-surface cascade applies
   (white outline buttons, inherited headings). :not() keeps existing heroes unchanged. */
.c-hero:not([class*="bg-"]) { background: var(--bg-page); }
.c-hero__inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.c-hero__title { font-size: var(--type-h1-size); margin-bottom: var(--space-md); }
/* .c-hero scope bumps specificity over the global `.c-scope p` margin reset,
   which was zeroing the auto side-margins and left-shifting the centred tagline. */
.c-hero .c-hero__lede {
  font-size: 1.2em; opacity: 0.8;
  max-width: 36rem; margin: 0 auto var(--space-lg);
}
.c-hero__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

.c-hero--split .c-hero__inner { max-width: var(--container); text-align: left; }
.c-hero--split .c-hero__grid { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr 1fr; }
.c-hero--split .c-hero__lede { margin-inline: 0; }
.c-hero--split .c-hero__actions { justify-content: flex-start; }
/* Content images (hero, about, image-card) all inherit the ONE captured content-image
   treatment via --img-* — so they can never diverge from the "how images are handled" block. */
.c-hero__figure { border-radius: var(--img-radius, var(--radius-lg)); overflow: hidden; box-shadow: var(--img-shadow, var(--shadow-lg)); border: var(--img-border, none); aspect-ratio: 4 / 3; }
.c-hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .c-hero--split .c-hero__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURE STRIP (emphasis band)
   ============================================================ */
.c-band {
  background: var(--gradient-accent, var(--bg-emphasis)); color: var(--text-on-emphasis);
  padding-block: var(--spacing-section); text-align: center;
}
.c-band h2 { color: var(--text-on-emphasis); }
/* On the emphasis band, EVERY button variant becomes inverse automatically
   (paired to the band's own colours) — filled primary, outline, ghost alike. */
.c-band .c-btn--primary { background: var(--text-on-emphasis); color: var(--bg-emphasis); border-color: transparent; }
.c-band .c-btn--primary:hover { box-shadow: var(--shadow-md); }
.c-band .c-btn--outline, .c-band .c-btn--secondary { background: transparent; color: var(--text-on-emphasis); border-color: var(--text-on-emphasis); }
.c-band .c-btn--outline:hover, .c-band .c-btn--secondary:hover { background: var(--text-on-emphasis); color: var(--bg-emphasis); border-color: transparent; }
.c-band .c-btn--ghost { color: var(--text-on-emphasis); }
.c-band .c-btn--ghost:hover { background: color-mix(in srgb, var(--text-on-emphasis) 16%, transparent); color: var(--text-on-emphasis); }
/* On the footer (inverse surface), buttons pair to the inverse colours. */
.c-footer .c-btn--primary { background: var(--text-on-inverse, #fff); color: var(--bg-inverse); border-color: transparent; }
.c-footer .c-btn--primary:hover { box-shadow: var(--shadow-md); }
.c-footer .c-btn--outline, .c-footer .c-btn--secondary { background: transparent; color: var(--text-on-inverse, #fff); border-color: var(--text-on-inverse, #fff); }
.c-footer .c-btn--outline:hover, .c-footer .c-btn--secondary:hover { background: var(--text-on-inverse, #fff); color: var(--bg-inverse); border-color: transparent; }
/* links on dark/emphasis backgrounds use the captured on-dark link colour */
.c-band a:not([class*="c-btn"]), .c-bghero a:not([class*="c-btn"]) { color: var(--link-on-inverse, inherit); }

/* ============================================================
   FORMS
   ============================================================ */
.c-field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.c-label { font-size: 0.9em; font-weight: var(--heading-weight, 600); color: var(--text-on-page); }
.c-input, .c-textarea, .c-select {
  font-family: var(--font-body); font-size: 1em; color: var(--text-on-page);
  background: var(--bg-page);
  border: var(--line-width, 1px) solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.7em 0.9em;
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.c-input:focus, .c-textarea:focus, .c-select:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.c-textarea { min-height: 7rem; resize: vertical; }

/* ============================================================
   NAV BAR  (chrome)
   ============================================================ */
/* Vertical centring is guaranteed by SYMMETRIC top/bottom padding (equal space above
   and below the content line) — no reliance on min-height + align-items interaction. */
.c-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); position: relative; flex-wrap: nowrap;
  padding-block: var(--space-md); padding-inline: var(--container-pad, var(--space-md));
  background: var(--bg-page); border-bottom: var(--line-width, 1px) solid var(--line); }
.c-nav__check { position: absolute; opacity: 0; width: 0; height: 0; }
.c-nav__burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 6px; }
.c-nav__burger span { display: block; width: 22px; height: 2px; background: var(--text-on-page); border-radius: var(--radius-full); }
.c-nav__brand { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.3em;
  color: var(--text-heading); text-decoration: none; }
/* .c-scope prefix lifts specificity (0,2,0) above the prose `.c-scope ul` reset
   (0,1,1) — otherwise the nav <ul> inherits a phantom bottom-margin + left-padding
   that pushes the menu/button cluster off vertical centre. */
/* nowrap on desktop: flex-wrap:wrap would invoke align-content on the single line,
   stretching it and packing items to the TOP (the real "nav sits too high" bug).
   The mobile @media below switches to flex-direction:column for small screens. */
/* line-height:1 stops the links' inherited 1.65 line-box from inflating the <ul> taller
   than the button — that inflation parked the button at the top of an over-tall box
   (the "button sits high" bug). With it tight, the ul == button height and centres cleanly. */
.c-scope .c-nav__links { display: flex; align-items: center; align-self: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; line-height: 1; }
/* each <li> centres its content; auto vertical margins absorb any extra UL height
   symmetrically (the UL renders taller than its tallest item — align-items alone left the
   items pinned to the top, the "button sits high" bug; auto margins force true centring). */
.c-scope .c-nav__links > li { display: flex; align-items: center; margin-block: auto; }
/* top-level nav menu items only (not items inside a dropdown, not buttons —
   a .c-btn link must keep its own text colour, else dark-on-dark CTA). */
.c-nav__links > li > a:not([class*="c-btn"]) { color: var(--text-on-page); text-decoration: none; font-family: var(--nav-font, var(--font-body)); font-weight: var(--nav-weight, 500); font-size: var(--nav-size, 0.95rem); text-transform: var(--nav-transform, none); letter-spacing: var(--nav-tracking, normal); }
/* Nav LINK hover. CONVENTION (not captured): shift to the captured --brand-primary colour.
   The underline that was here was GENERATIVE (invented, not from any teardown, wrong effect,
   leaked to all 6 libraries) — removed. The real hover treatment must be CAPTURED per site;
   until the capture exists this colour shift is the minimal honest convention, nothing invented. */
/* CONVENTION: NAV links carry oomph (placement/weight), so NO rest underline — underline on HOVER. */
.c-nav__links > li > a:not([class*="c-btn"]):hover { color: var(--brand-primary); text-decoration: var(--nav-hover-decoration, underline); }
.c-nav__links > li > a.is-active { color: var(--brand-primary); font-weight: var(--heading-weight, 700); }
/* Desktop → mobile: links collapse behind the hamburger (CSS-only, themed by tokens) */
@media (max-width: 720px) {
  .c-nav__burger { display: inline-flex; }
  .c-nav__links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: .5rem; padding-top: .4rem; border-top: var(--line-width, 1px) solid var(--line); }
  .c-nav__check:checked ~ .c-nav__links { display: flex; }
  .c-nav__links > li { width: 100%; }
  .c-nav__links > li > a { display: block; padding: .7rem .2rem; }
  .c-nav .c-dropdown { width: 100%; }
  .c-nav .c-dropdown__toggle { width: 100%; padding: .7rem .2rem; }
  .c-nav .c-dropdown__menu { position: static; display: block; box-shadow: none; border: 0; padding: .1rem 0 .3rem .9rem; min-width: 0; }
  .c-nav .c-dropdown__toggle svg { display: none; }
  .c-nav__links .c-btn { width: 100%; margin-top: .4rem; }
}

/* ============================================================
   DROPDOWN MENU  (reusable — nav sub-menus, action menus)
   CSS-only: opens on hover/focus; .is-open pins it for demos.
   ============================================================ */
.c-dropdown { position: relative; display: inline-block; }
.c-dropdown__toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; font-weight: var(--heading-weight, 500); font-size: 0.95em; color: var(--text-on-page); }
.c-dropdown__toggle:hover { color: var(--brand-primary); }
.c-dropdown__toggle svg { width: 14px; height: 14px; transition: transform var(--transition-speed) ease; }
.c-dropdown__menu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 210px; z-index: 10;
  background: var(--bg-page); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 0.4rem; display: none; }
.c-dropdown:hover .c-dropdown__menu,
.c-dropdown:focus-within .c-dropdown__menu,
.c-dropdown.is-open .c-dropdown__menu { display: block; }
.c-dropdown:hover .c-dropdown__toggle svg,
.c-dropdown.is-open .c-dropdown__toggle svg { transform: rotate(180deg); }
.c-dropdown__item { display: block; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-on-page); font-size: 0.92em; }
.c-dropdown__item:hover { background: var(--bg-alt); color: var(--brand-primary); }
.c-dropdown__item.is-active { color: var(--brand-primary); font-weight: var(--heading-weight, 600); }
.c-dropdown__divider { height: 1px; background: var(--line); margin: 0.4rem 0; }

/* ============================================================
   MOBILE NAV  (hamburger + collapsible menu + sub-dropdown)
   Always-mobile demo; CSS-only toggle (checkbox), no JS.
   ============================================================ */
.c-navm { max-width: 390px; margin: 0 auto; background: var(--bg-page);
  border: var(--line-width, 1px) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.c-navm__check { position: absolute; opacity: 0; width: 0; height: 0; }
.c-navm__bar { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; }
.c-navm__brand { font-family: var(--font-heading); font-weight: var(--heading-weight, 700); font-size: 1.2em; color: var(--text-heading); text-decoration: none; }
.c-navm__toggle { display: inline-flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 6px; }
.c-navm__toggle span { display: block; width: 22px; height: 2px; background: var(--text-on-page); border-radius: var(--radius-full); }
.c-navm__menu { display: none; flex-direction: column; padding: .3rem .4rem .6rem; border-top: var(--line-width, 1px) solid var(--line); }
.c-navm__check:checked ~ .c-navm__menu { display: flex; }
.c-navm__menu > a { padding: .7rem .8rem; text-decoration: none; color: var(--text-on-page); font-weight: var(--heading-weight, 500); border-radius: var(--radius-sm); }
.c-navm__menu > a:hover { background: var(--bg-alt); color: var(--brand-primary); }
.c-navm__menu > a.is-active { color: var(--brand-primary); font-weight: var(--heading-weight, 700); }
.c-navm__menu .c-btn { margin: .5rem .8rem .3rem; }
.c-navm__sub summary { list-style: none; cursor: pointer; padding: .7rem .8rem; font-weight: var(--heading-weight, 500); color: var(--text-on-page); display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-sm); }
.c-navm__sub summary::-webkit-details-marker { display: none; }
.c-navm__sub summary::after { content: "+"; color: var(--brand-primary); }
.c-navm__sub[open] summary::after { content: "\2212"; }
.c-navm__sub a { display: block; padding: .55rem .8rem .55rem 1.6rem; text-decoration: none; color: var(--text-on-page); opacity: .85; border-radius: var(--radius-sm); font-size: .95em; }
.c-navm__sub a:hover { background: var(--bg-alt); color: var(--brand-primary); opacity: 1; }

/* ============================================================
   FOOTER  (chrome)
   ============================================================ */
.c-footer { background: var(--bg-inverse); color: var(--text-on-inverse); padding-block: var(--spacing-section); }
.c-footer__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad, var(--space-md)); }
.c-footer h4 { color: inherit; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.65; margin: 0 0 var(--space-xs); }
/* Footer sits on the inverse background — links must use the on-dark colour,
   and must out-specify the global .c-scope a rule (else black-on-black). */
.c-scope .c-footer a:not([class*="c-btn"]) { color: var(--link-on-inverse, var(--text-on-inverse, inherit)); }
.c-footer a { color: inherit; opacity: 0.85; text-decoration: none; display: block; padding: 0.2rem 0; font-size: 0.92em; }
/* CONVENTION: FOOTER links — no rest underline, underline on hover (50/50 default; knob: --footer-hover-decoration). */
.c-footer a:hover { opacity: 1; text-decoration: var(--footer-hover-decoration, underline); }
.c-footer__bottom { max-width: var(--container); margin: var(--space-lg) auto 0; padding: var(--space-md) var(--container-pad, var(--space-md)) 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); text-align: center; opacity: 0.6; font-size: 0.85em; }

/* ============================================================
   PRICING TABLE
   ============================================================ */
/* Pricing = .c-card primitives (+ .c-card--featured) in a grid. Only the
   price-specific CONTENT styles live here; the card chrome is the primitive. */
.c-pricing { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.c-price { font-family: var(--font-heading); font-size: 2.4em; line-height: 1; color: var(--text-heading); }
.c-price span { font-size: 0.95em; font-family: var(--font-body); opacity: 0.6; }
.c-price-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.c-price-list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95em; }
.c-tick { flex: none; width: 18px; height: 18px; color: var(--brand-primary); margin-top: 2px; }
/* Pricing composition (layout/promotion only — no skin): the CTA spans the card,
   and the FEATURED plan promotes its outline CTA to a filled one + a solid badge,
   so the highlighted plan reads as the recommended action without per-item branching. */
.c-pricing .c-card__footer .c-btn { width: 100%; }
.c-pricing .c-card--featured .c-btn--outline { background: var(--brand-primary); color: var(--btn-primary-text); border-color: transparent; }
.c-pricing .c-card--featured .c-badge { background: var(--brand-primary); color: var(--btn-primary-text); align-self: flex-start; }

/* ============================================================
   BEFORE / AFTER COMPARE  (draggable reveal)
   ------------------------------------------------------------
   Two equal-aspect images; the "before" is clipped to --pos and a
   divider sits at --pos. A range input (visually hidden, full-bleed)
   drives --pos via a tiny inline script in the section. With no JS the
   divider rests at its default and both images are still present.
   ============================================================ */
.c-compare { --pos: 50%; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--bg-alt); }
.c-compare > img, .c-compare__before img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.c-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.c-compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.c-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: var(--shadow-sm); }
.c-compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: var(--radius-full);
  background: #fff; box-shadow: var(--shadow-md); }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
/* Testimonial = a .c-card (--soft) with an .c-img--circle avatar. Only the
   quote CONTENT/layout lives here; card + avatar are primitives. */
.c-quote__text { font-size: 1.05em; line-height: 1.6; margin: 0; }
.c-quote__author { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.c-quote__avatar { width: 44px; flex: none; } /* shape comes from .c-img--circle */
.c-quote__name { font-weight: var(--heading-weight, 600); font-size: 0.9em; }
.c-quote__role { font-size: 0.8em; opacity: 0.65; }

/* ============================================================
   FEATURE GRID
   ============================================================ */
.c-features { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.c-feature { display: flex; flex-direction: column; gap: 0.5rem; }
.c-feature__icon { width: 48px; height: 48px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--bg-page)); color: var(--brand-primary);
  display: grid; place-items: center; }
.c-feature__icon svg { width: 24px; height: 24px; }
.c-feature h3 { font-size: 1.15em; margin: 0; }
.c-feature p { font-size: 0.95em; opacity: 0.75; margin: 0; }

/* ============================================================
   STATS BAND
   ============================================================ */
.c-stats { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); text-align: center; }
.c-stat__num { font-family: var(--font-heading); font-size: 2.6em; font-weight: var(--heading-weight, 700); line-height: 1; color: var(--brand-primary); }
.c-stat__label { font-size: 0.9em; opacity: 0.7; margin-top: 0.35rem; }

/* ============================================================
   ACCORDION  (native <details>)
   ============================================================ */
.c-accordion { border: var(--line-width) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.c-accordion details { border-bottom: var(--line-width) solid var(--line); }
.c-accordion details:last-child { border-bottom: 0; }
/* The QUESTION is a heading — it must carry the library's type voice (font/size/weight/colour
   from the type scale), not a hardcoded weight. This is what makes the FAQ vary per preset. */
.c-accordion summary { cursor: pointer; padding: var(--space-sm) var(--space-md); list-style: none;
  font-family: var(--font-heading); font-weight: var(--heading-weight, 600); font-size: var(--type-h6-size);
  color: var(--text-heading); line-height: 1.3;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.c-accordion summary::-webkit-details-marker { display: none; }
.c-accordion summary::after { content: "+"; color: var(--brand-primary); font-size: 1.25em; line-height: 1; }
.c-accordion details[open] summary::after { content: "\2212"; }
.c-accordion__body { padding: 0 var(--space-md) var(--space-md); color: var(--text-on-page); font-size: var(--font-size-base); }

/* ============================================================
   TABS  (CSS radio, no JS)
   ============================================================ */
.c-tabs { display: block; }
.c-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.c-tabs__labels { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.c-tabs__labels label { padding: 0.6rem 1rem; cursor: pointer; font-weight: var(--heading-weight, 600); font-size: 0.9em;
  color: var(--text-on-page); opacity: 0.55; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.c-tab-panel { display: none; padding: 1.1rem 0; font-size: 0.95em; opacity: 0.85; }
.c-tabs > input#ctab1:checked ~ .c-tabs__labels label[for="ctab1"],
.c-tabs > input#ctab2:checked ~ .c-tabs__labels label[for="ctab2"],
.c-tabs > input#ctab3:checked ~ .c-tabs__labels label[for="ctab3"] {
  color: var(--brand-primary); border-bottom-color: var(--brand-primary); opacity: 1; }
.c-tabs > input#ctab1:checked ~ .c-tab-panel[data-tab="1"],
.c-tabs > input#ctab2:checked ~ .c-tab-panel[data-tab="2"],
.c-tabs > input#ctab3:checked ~ .c-tab-panel[data-tab="3"] { display: block; }

/* ============================================================
   ALERTS  (semantic states — fixed hues, tinted per skin)
   ============================================================ */
.c-alert { display: flex; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--radius-md);
  border: 1px solid; font-size: 0.9em; align-items: flex-start; }
.c-alert--info    { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-page)); border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--bg-page)); }
/* Semantic state colours: the canonical hue is a NAMED Foundation default (tokens.css :root);
   a preset overrides --color-* with a brand-nudged value (derive.js R("--color-*")). No literal
   fallback here — Foundation always provides one, so nothing is ever unstyled. */
.c-alert--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--bg-page)); border-color: color-mix(in srgb, var(--color-success) 35%, var(--bg-page)); }
.c-alert--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--bg-page)); border-color: color-mix(in srgb, var(--color-warning) 35%, var(--bg-page)); }
.c-alert--danger  { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--bg-page)); border-color: color-mix(in srgb, var(--color-danger) 35%, var(--bg-page)); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.c-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; padding: 0; margin: 0; font-size: 0.85em; }
.c-breadcrumb a { color: var(--brand-primary); text-decoration: none; }
.c-breadcrumb a:hover { text-decoration: underline; }
.c-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; opacity: 0.4; }
.c-breadcrumb li[aria-current] { opacity: 0.6; }

/* ============================================================
   PAGINATION
   ============================================================ */
.c-pagination { display: flex; gap: 0.25rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.c-pagination a { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center;
  padding: 0 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text-on-page); font-size: 0.9em; }
.c-pagination a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.c-pagination a[aria-current] { background: var(--brand-primary); color: var(--btn-primary-text); border-color: var(--brand-primary); }

/* ============================================================
   TABLE
   ============================================================ */
.c-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.c-table th, .c-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
.c-table th { font-weight: var(--heading-weight, 700); color: var(--text-heading); background: var(--bg-alt); }
.c-table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 6%, var(--bg-page)); }

/* ============================================================
   STEPS / PROCESS
   ============================================================ */
.c-steps { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.c-step { display: flex; flex-direction: column; gap: 0.4rem; }
.c-step__num { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: var(--btn-primary-text);
  display: grid; place-items: center; font-weight: var(--heading-weight, 700); font-family: var(--font-heading); }
.c-step h3 { font-size: 1.05em; margin: 0; }
.c-step p { font-size: 0.9em; opacity: 0.75; margin: 0; }

/* ============================================================
   MODAL  (static layout demo)
   ============================================================ */
.c-modal-demo { border-radius: var(--radius-lg); padding: 2.5rem 1rem; display: grid; place-items: center; min-height: 220px;
  background: color-mix(in srgb, #000 45%, transparent); }
.c-modal { background: var(--bg-page); color: var(--text-on-page); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 360px; width: 100%; padding: var(--spacing-card); }
.c-modal h3 { margin-top: 0; }
.c-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: var(--space-md); }

/* ============================================================
   LIST GROUP
   ============================================================ */
.c-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.c-list li { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.95em; }
.c-list li:last-child { border-bottom: 0; }

/* ============================================================
   TEXT  — extend the scope element styles (h5/h6, prose bits)
   ============================================================ */
.c-scope h5 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.05em; margin: 0 0 var(--space-2xs); color: var(--text-heading); }
.c-scope h6 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.75; margin: 0 0 var(--space-2xs); color: var(--text-heading); }
.c-scope blockquote { margin: 0 0 var(--space-sm); padding-left: 1rem; border-left: 3px solid var(--brand-primary); font-style: italic; opacity: 0.9; }
.c-scope ul, .c-scope ol { margin: 0 0 var(--space-sm); padding-left: 1.25rem; }
.c-scope li { margin-bottom: 0.35rem; }
.c-scope small { font-size: 0.8em; opacity: 0.7; }
.c-scope code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg-alt); padding: 0.1em 0.35em; border-radius: var(--radius-sm); font-size: 0.9em; }
.c-scope hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-md) 0; }
.c-lead { font-size: 1.2em; line-height: 1.6; opacity: 0.85; }
.c-type-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.c-type-row span { font-size: 0.72em; opacity: 0.5; font-family: ui-monospace, monospace; min-width: 5rem; }

/* ============================================================
   TABLES — striped variant (base .c-table defined above)
   ============================================================ */
.c-table--striped tbody tr:nth-child(odd) { background: var(--bg-alt); }
.c-table--striped tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-page)); }
.c-table caption { text-align: left; font-weight: var(--heading-weight, 700); color: var(--text-heading); padding-bottom: 0.5rem; }
.c-table .is-today { color: var(--brand-primary); font-weight: var(--heading-weight, 700); }

/* ============================================================
   BACKGROUNDS — image with overlay + text halo (Principle #22)
   ============================================================ */
.c-bghero { position: relative; min-height: 380px; display: grid; place-items: center; text-align: center;
  padding: var(--spacing-section) 1rem; background-size: cover; background-position: center;
  color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
/* Legibility scrim — text-over-image needs a gradient (Principle #22). --scrim-hero & the
   --text-over-image-shadow halo are NAMED Foundation defaults (tokens.css); a preset overrides
   --scrim-* with a brand-tinted gradient (derive.js R("--scrim-*")). No literal fallback here. */
.c-bghero::before { content: ""; position: absolute; inset: 0; background: var(--scrim-hero); }
.c-bghero__inner { position: relative; max-width: 40rem; }
.c-bghero__inner h1 { color: #fff; text-shadow: var(--text-over-image-shadow); margin-bottom: var(--space-sm); }
.c-bghero__inner p { color: #fff; opacity: 0.95; text-shadow: var(--text-over-image-shadow); margin-bottom: var(--space-md); }
.c-bghero .c-btn--outline { color: #fff; border-color: #fff; background: transparent; }
.c-bghero .c-btn--outline:hover { background: #fff; color: var(--text-heading); border-color: #fff; }

.c-imgcard { position: relative; border-radius: var(--img-radius, var(--radius-lg)); overflow: hidden; min-height: 260px;
  display: flex; align-items: flex-end; color: #fff; background-size: cover; background-position: center; }
.c-imgcard::before { content: ""; position: absolute; inset: 0; background: var(--scrim-card); }
.c-imgcard__body { position: relative; padding: var(--spacing-card); }
.c-imgcard__body h3 { color: #fff; margin: 0 0 0.25rem; text-shadow: var(--text-over-image-shadow); }
.c-imgcard__body p { color: #fff; opacity: 0.9; margin: 0; font-size: 0.9em; }

/* ============================================================
   DROPSHADOWS — elevation scale
   ============================================================ */
.c-elev { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.c-elev__box { background: var(--bg-page); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem 1rem; text-align: center; font-size: 0.82em; }
.c-elev__box code { font-size: 0.72em; opacity: 0.6; display: block; margin-top: 0.35rem; }
.c-elev__box--flat { box-shadow: none; }
.c-elev__box--sm { box-shadow: var(--shadow-sm); }
.c-elev__box--md { box-shadow: var(--shadow-md); }
.c-elev__box--lg { box-shadow: var(--shadow-lg); }

/* ============================================================
   MEDIA SPLIT (about) · SERVICES · MENU · TEAM · GALLERY · MAP
   parity with slipstream-sections element types
   ============================================================ */
.c-media-split { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr; align-items: center; }
.c-media-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--img-radius, 0); box-shadow: var(--img-shadow, none); border: var(--img-border, none); }
@media (max-width: 760px) { .c-media-split { grid-template-columns: 1fr; } }

/* Layout ONLY — each service IS a .c-card; its CTA IS a .c-btn. */
.c-services { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.c-service__price { color: var(--brand-primary); font-weight: var(--heading-weight, 700); }

.c-menu__group + .c-menu__group { margin-top: var(--space-lg); }
.c-menu__group h3 { font-size: 1.15em; margin: 0 0 0.5rem; }
.c-menu__item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); }
.c-menu__item:last-child { border-bottom: 0; }
.c-menu__item .name { font-weight: var(--heading-weight, 600); }
.c-menu__item .desc { opacity: 0.7; font-size: 0.88em; }
.c-menu__item .price { color: var(--brand-primary); font-weight: var(--heading-weight, 700); white-space: nowrap; }

.c-team { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.c-member img { width: 120px; margin: 0 auto 0.75rem; } /* shape comes from .c-img--circle */
.c-member__name { font-weight: var(--heading-weight, 700); }
.c-member__role { opacity: 0.65; font-size: 0.9em; }

.c-gallery { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.c-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); display: block; }

.c-map { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.c-map__embed { background: var(--bg-alt); min-height: 240px; background-size: cover; background-position: center; }
.c-map__info { padding: var(--spacing-card); display: flex; flex-direction: column; gap: 0.5rem; }
@media (max-width: 620px) { .c-map { grid-template-columns: 1fr; } }

/* ============================================================
   NOTICE BAR + MOBILE QUICKBAR  (chrome)
   ============================================================ */
.c-notice { background: var(--bg-emphasis); color: var(--text-on-emphasis); text-align: center; padding: 0.6rem 1rem; font-size: 0.9em; }
.c-notice a { color: inherit; text-decoration: underline; font-weight: var(--heading-weight, 600); }

/* Layout ONLY — the actions are .c-btn primitives, so they wear the
   theme's button style. The bar just positions them. */
.c-quickbar { display: flex; gap: 0.5rem; padding: 0.6rem; background: var(--bg-page); border-top: 1px solid var(--line); max-width: 460px; }
.c-quickbar .c-btn { flex: 1; }
.c-quickbar .c-btn svg { width: 18px; height: 18px; }

/* ============================================================
   IMAGES — stackable treatments: rounding (incl. zero),
   borders, shadows, framed. Combine the modifiers freely.
   ============================================================ */
.c-img { display: block; max-width: 100%; height: auto; }

/* corner rounding */
.c-img--square      { border-radius: 0; }
.c-img--rounded-sm  { border-radius: var(--radius-sm); }
.c-img--rounded     { border-radius: var(--radius-md); }
.c-img--rounded-lg  { border-radius: var(--radius-lg); }
.c-img--circle      { border-radius: var(--radius-full); aspect-ratio: 1 / 1; object-fit: cover; }

/* borders */
.c-img--border       { border: 1px solid var(--line); }
.c-img--border-thick { border: 3px solid var(--brand-primary); }

/* shadows */
.c-img--shadow    { box-shadow: var(--shadow-md); }
.c-img--shadow-lg { box-shadow: var(--shadow-lg); }

/* framed (matted photo look) */
.c-img--frame { padding: 6px; background: var(--bg-page); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* showcase layout for the gallery specimens */
.c-img-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-start; }
.c-img-row figure { margin: 0; text-align: center; }
.c-img-row figure img { width: 120px; height: 120px; object-fit: cover; }
.c-img-row figcaption { margin-top: 0.55rem; font-size: 0.72em; opacity: 0.6; font-family: ui-monospace, monospace; }