/* ==========================================================================
   Baiond — Navigation (Phase 3): header pill, mega panels, mobile drawer
   --------------------------------------------------------------------------
   Consumes tokens.css. Markup: templates/partials/header.php +
   templates/partials/nav/*.php. Behaviour: public/assets/js/nav.js.

   Sections:
     1. Header pill (sticky, solid, same --shell-max as the hero panel)
     2. Nav items: link + chevron toggle
     3. Tools: language toggle, theme toggle, icon buttons
     4. Mega panel — one wide surface below the pill, content swaps per item
     5. Mega content: category columns, tiles, featured aside
     6. Drawer (native <dialog>) with accordions
     7. Active dot (current page)
     8. Reduced motion
   ========================================================================== */

@layer components {

  /* ======================================================================
     1. HEADER BAR (default) / PILL (variant)
     A flat sticky bar: the ground runs edge to edge, solid from the first
     pixel — white on light, black on dark — with one hairline under it.
     The content keeps the shell width, so the logo lines up with the hero
     panel. No glass, no shadow (round-2 decision). The bar keeps one
     width in every state so nothing jumps.
     `<html data-header="pill">` (review switch) restores the floating pill
     this started as — the class name .site-header__pill is historical.
     ====================================================================== */

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    padding-inline: var(--gutter);
    pointer-events: none;            /* let clicks through the gutter */
  }

  /* The announcement bar (partials/announce.php) sits above the pill and
     sticks with it: a full-bleed lime strip, one line, the text a link.
     `--announce-height` feeds --header-offset so the sticky sub-elements
     down the page (story menus, plan stage) clear it. */
  :root { --announce-height: 2.5rem; }

  .announce {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--announce-height);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: var(--lime);
    color: var(--black);
    font-size: var(--text-sm);
    line-height: 1.3;
  }

  .announce__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    padding-block: var(--space-2);
    color: inherit;
    text-decoration: none;
    margin: 0;
  }

  a.announce__link:hover .announce__text,
  a.announce__link:focus-visible .announce__text { text-decoration: underline; text-underline-offset: 3px; }

  a.announce__link:hover .announce__arrow { translate: 3px 0; }

  .announce__tag {
    flex: none;
    padding: 0.1em 0.55em;
    border: 1px solid var(--black);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .announce__text { font-weight: var(--font-medium); }

  .announce__arrow {
    --icon-size: 1rem;
    flex: none;
    transition: translate var(--duration-fast) var(--ease-standard);
  }

  .announce__close {
    position: absolute;
    inset-inline-end: var(--gutter);
    inset-block-start: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    --icon-size: 1.1rem;
  }

  .announce__close:hover { background: rgb(0 0 0 / 0.1); }
  .announce__close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

  html:not([data-js]) .announce__close { display: none; }
  html[data-announce="closed"] .announce { display: none; }

  /* Room for the close button on the right at phone width; the tag drops. */
  @media (max-width: 40em) {
    .announce { padding-inline-end: calc(var(--gutter) + 2.25rem); justify-content: flex-start; }
    .announce__tag { display: none; }
    .announce__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  /* Sticky sub-elements (story menus, plan stage, FAQ heads) clear the bar. */
  :root { --header-offset: calc(var(--header-height) + var(--space-4) + var(--space-2)); }
  :root:has(.announce):not([data-announce="closed"]) {
    --header-offset: calc(var(--header-height) + var(--space-4) + var(--space-2) + var(--announce-height));
  }

  /* Three-column grid so the nav is centred on the pill itself — with
     flex + space-between the brand/tools widths would pull the centre. */
  .site-header__pill {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    margin-inline: calc(-1 * var(--gutter));   /* full-bleed ground */
    min-block-size: var(--header-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    /* the content sits at the shell width + the old pill's inner inset, so the logo lines up with the hero panel */
    padding: var(--space-2) max(var(--gutter), calc((100% + 2 * var(--gutter) - var(--shell-max)) / 2 + var(--space-2)));
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text);
    transition: border-color var(--duration-normal) var(--ease-standard);
  }

  /* ---- Variant: the floating pill (review switch, <html data-header="pill">) */
  html[data-header="pill"] .site-header__pill {
    max-width: var(--shell-max);
    margin-inline: auto;
    margin-block-start: var(--space-3);   /* the header sticks at 0; this is the pill's breathing room */
    padding: var(--space-2);              /* symmetric — the centre column is centred on the pill */
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
  }

  html[data-header="pill"] .site-header[data-open] .site-header__pill {
    border-color: var(--color-border-strong);
  }

  /* ---- Look: soft (the default since 2026-10-06; <html data-look="crisp"> opts out) — the first
     draft's glass: translucent warm ground + blur; the pill adds the inner
     highlight and a soft drop shadow instead of a hard outline. */
  html:not([data-look="crisp"]) .site-header__pill {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  }

  html[data-header="pill"]:not([data-look="crisp"]):not([data-theme="dark"]) .site-header__pill {
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.9), var(--shadow-md);
  }
  html[data-header="pill"][data-theme="dark"]:not([data-look="crisp"]) .site-header__pill {
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), var(--shadow-md);
  }

  html[data-header="pill"] { --header-offset: calc(var(--header-height) + var(--space-4) * 2); }
  html[data-header="pill"]:has(.announce):not([data-announce="closed"]) {
    --header-offset: calc(var(--header-height) + var(--space-4) * 2 + var(--announce-height));
  }

  /* Page scrim while a panel is open — the header is a stacking context
     (sticky + z-index), so a fixed pseudo with z-index -1 paints between
     the page and the pill. Click-through stays off; nav.js closes on
     pointerdown outside anyway. */
  .site-header::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .site-header[data-open]::before { opacity: 1; }

  .site-header__brand {
    grid-column: 1;
    justify-self: start;
    margin-inline-start: calc(var(--space-5) - var(--space-2)); /* optical inset for the wordmark */
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
  }

  .logo {
    display: block;
    block-size: 1.25rem;
    inline-size: auto;
  }

  .logo--icon { block-size: 1.5rem; }

  .site-header__logo { block-size: 1.25rem; }

  /* ======================================================================
     2. NAV ITEMS — a link to the hub + a chevron button for the panel.
        Both sit in one pill-shaped item so hover reads as one control.
     ====================================================================== */

  .site-header__nav {
    grid-column: 2;
    display: none;
  }

  .site-header__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .site-header__item {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .site-header__item:hover,
  .site-header__item[data-open] {
    background: var(--color-bg-muted);
  }

  .site-header__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  /* Items without a toggle: the link is the whole pill. */
  .site-header__item:not([data-nav-item]) .site-header__link:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
  }

  /* The current section: full ink + the active dot (§ 7), no ground. */
  .site-header__link[aria-current="page"] { color: var(--color-text); }

  .site-header__item:hover .site-header__link,
  .site-header__item[data-open] .site-header__link {
    color: var(--color-text);
  }

  /* The link keeps its right padding small so the chevron sits close. */
  [data-nav-item] .site-header__link { padding-inline-end: var(--space-1); }

  .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 2rem;
    margin-inline-end: var(--space-1);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .site-header__toggle:hover { color: var(--color-text); }

  .site-header__chev {
    --icon-size: 0.9em;
    opacity: 0.7;
    transition: rotate var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__chev {
    rotate: 180deg;
    opacity: 1;
  }

  /* ======================================================================
     3. TOOLS
     ====================================================================== */

  .site-header__tools {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Scoped to .site-header so these beat the generic .btn / .icon-button
     display rules in components.css (same layer, later source order). */
  .site-header .site-header__cta  { display: none; }
  .site-header .site-header__menu { display: inline-flex; }

  @media (min-width: 40em) {
    .site-header .site-header__cta { display: inline-flex; }
  }

  /* Six items + tools + CTA need ~74em in German; below that the drawer
     serves tablets in landscape too. */
  @media (min-width: 74em) {
    .site-header__nav { display: block; }
    .site-header .site-header__menu { display: none; }
  }

  /* Language toggle — two-state segmented pill */
  .lang-toggle {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
  }

  .lang-toggle__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .lang-toggle__item:hover { color: var(--color-text); }

  /* Flags (from the first draft, 2026-10-06) — a hairline keeps the white
     of the Union Jack off the white ground. */
  .flag {
    display: block;
    flex: none;
    inline-size: 1.125rem;
    block-size: 0.75rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18);
  }

  .lang-toggle__item[aria-current="true"] {
    background: var(--color-accent);
    color: var(--color-accent-fg);
  }

  /* Icon button — round hairline control */
  .icon-button {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  /* Fill lime on hover — a lime border alone vanishes on white (same call
     as .btn--secondary). */
  .icon-button:hover {
    background: var(--lime);
    border-color: var(--hover-border);
    color: var(--black);
  }

  .icon-button .icon { --icon-size: 1.125rem; }

  /* Theme toggle — icon of the scheme you'd switch TO, keyed by
     data-theme-state (= current scheme). Stacked and crossfaded
     (opacity/scale, not display — utilities' .icon owns display). */
  .theme-toggle { position: relative; }

  .theme-toggle .theme-toggle__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    scale: 0.6;
    rotate: -30deg;
    transition: opacity var(--duration-normal) var(--ease-standard),
                scale var(--duration-normal) var(--ease-out-back),
                rotate var(--duration-normal) var(--ease-out-back);
  }

  .theme-toggle[data-theme-state="light"] [data-theme-icon="light"],
  .theme-toggle[data-theme-state="dark"]  [data-theme-icon="dark"],
  .theme-toggle:not([data-theme-state]) [data-theme-icon="light"] {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  /* ======================================================================
     4. MEGA PANEL — one wide surface hanging below the pill, the same
        width, the same hairline. Content swaps in place per item.
     ====================================================================== */

  .mega {
    position: absolute;
    inset-inline: var(--gutter);
    inset-block-start: calc(100% + var(--space-2));
    z-index: 1;
    pointer-events: auto;
    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-emphasized);
  }

  .mega.is-open {
    opacity: 1;
    translate: 0 0;
  }

  /* Invisible bridge over the gap between pill and panel so the pointer
     can travel down without leaving the header. */
  .mega::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(-1 * var(--space-2) - 2px);
    block-size: calc(var(--space-2) + 2px);
  }

  .mega__inner {
    max-width: var(--shell-max);
    margin-inline: auto;
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    max-block-size: calc(100dvh - var(--header-offset) - var(--space-4));
    overflow: auto;
  }

  .mega__panel {
    padding: var(--space-6) var(--space-7) var(--space-7);
  }

  .mega__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block-end: var(--space-5);
    margin-block-end: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .mega__lead {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    text-wrap: pretty;
  }

  .mega__all { flex-shrink: 0; font-size: var(--text-sm); }

  .mega__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--space-7);
    align-items: stretch;
  }

  /* ======================================================================
     5. MEGA CONTENT
     ====================================================================== */

  /* Category grid (Industries): four equal columns, each category a tile
     head in the Platform / Sensors vocabulary — neutral icon box, lime on
     hover — with its industries listed beneath. Every head is exactly one
     line (short labels from `menu_title`, Nav::title; an ellipsis is the
     safety net), so every list in a row starts on the same baseline
     (operator, 2026-09-16: wrapping labels left the columns ragged). */
  .mega-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  /* six categories + the "missing?" tile = seven cells: the tile takes the last two */
  .mega-cats > .mega-cat--more { grid-column: span 2; }

  /* "Umwelt & Landwirtschaft" (23 chars) is the longest head: tighter tracking keeps it on one line at 1280 */
  .mega-cat__name { letter-spacing: -0.015em; }

  .mega-cat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .mega-cat__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* the hover ground bleeds past the column box; the icon stays on the column edge */
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .mega-cat__title:hover { background: var(--color-bg-muted); }

  .mega-cat__name {
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mega-cat__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .mega-cat__icon .icon { --icon-size: 1.1rem; }

  .mega-cat__title:hover .mega-cat__icon {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .mega-cat__list,
  .mega-cat__text {
    padding-inline-start: calc(2.25rem + var(--space-3));   /* under the head's text, not its icon */
  }

  .mega-cat__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
  }

  .mega-cat__text {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .mega-link {
    display: block;
    padding-block: 0.2rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--duration-fast) var(--ease-standard), translate var(--duration-fast) var(--ease-standard);
  }

  .mega-link:hover {
    color: var(--color-text);
    translate: 2px 0;
  }

  .mega__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .mega__more-label {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
  }

  .mega__chips { --cluster-space: var(--space-2); }

  .mega__chips .chip {
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .mega__chips .chip:hover { background: var(--lime); border-color: var(--hover-border); color: var(--black); }

  /* Tiles (Sensors, Platform) — icon + title + one-line hint */
  .mega-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-1) var(--space-3);
  }

  .mega-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

  .mega-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .mega-tile:hover { background: var(--color-bg-muted); }

  .mega-tile__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .mega-tile__icon .icon { --icon-size: 1.1rem; }

  .mega-tile:hover .mega-tile__icon {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .mega-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
  }

  .mega-tile__title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
  }

  .mega-tile__text {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Featured aside — black panel in both schemes (panel scope) */
  .mega-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }

  /* The hero's triangle scatter, quiet, as the panel's texture. */
  .mega-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 50% at 100% 0%, color-mix(in oklab, var(--lime) 18%, transparent), transparent 70%),
      var(--mega-feature-img, none) center / cover no-repeat;
    opacity: 0.9;
  }
  /* A case photo needs a scrim, or the copy sits light-on-light (2026-10-08). */
  .mega-feature[style*="--mega-feature-img"]::before {
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.62) 45%, rgb(0 0 0 / 0.9) 100%),
      var(--mega-feature-img) center / cover no-repeat;
    opacity: 1;
  }

  .mega-feature__eyebrow {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .mega-feature__client,
  .mega-feature__link {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-decoration: none;
    text-wrap: balance;
  }

  .mega-feature__link:hover { color: var(--lime); }

  .mega-feature__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .mega-feature__numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  .mega-feature__number {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .mega-feature__number strong {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lime);
  }

  .mega-feature__number small {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .mega-feature__cta {
    margin-block-start: auto;
    font-size: var(--text-sm);
  }

  a.mega-feature:hover .mega-feature__cta { color: var(--lime); }
  a.mega-feature:hover .mega-feature__cta .icon { translate: 4px 0; }

  .mega-feature__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .mega-feature__list .mega-link { color: var(--color-text-muted); }
  .mega-feature__list .mega-link:hover { color: var(--lime); }

  .mega-feature__btn {
    margin-block-start: auto;
    align-self: flex-start;
  }

  /* Data path — four nodes joined by hairlines (Platform aside) */
  .mega-feature__art {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-block: var(--space-2);
  }

  .mega-feature__art-node {
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    font-size: var(--text-xs);
    color: var(--color-text);
    white-space: nowrap;
  }

  .mega-feature__art-node:last-child {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .mega-feature__art-line {
    flex: 0 0 0.75rem;
    block-size: 1px;
    background: var(--color-border-strong);
  }

  /* Narrower desktops: the aside drops under the columns and turns into
     a two-column card — copy left, the list / numbers / action right. */
  @media (max-width: 80em) {
    .mega__body { grid-template-columns: minmax(0, 1fr); }
    .mega-feature {
      display: grid;
      grid-template-columns: minmax(16rem, 1fr) auto;
      grid-auto-rows: auto;
      column-gap: var(--space-7);
      row-gap: var(--space-2);
      align-items: start;
      padding: var(--space-5) var(--space-6);
    }
    .mega-feature__eyebrow,
    .mega-feature__client,
    .mega-feature__link,
    .mega-feature__text { grid-column: 1; }
    .mega-feature__list,
    .mega-feature__numbers,
    .mega-feature__art,
    .mega-feature__btn,
    .mega-feature__cta { grid-column: 2; margin-block-start: 0; align-self: end; }
    .mega-feature__list { grid-row: 1 / 3; align-self: start; }
    .mega-feature__numbers { grid-row: 1 / 3; align-self: start; grid-template-columns: repeat(3, minmax(0, 11rem)); gap: var(--space-5); }
    .mega-feature__art { grid-row: 1 / 3; align-self: start; margin-block: 0; max-inline-size: 22rem; }
    .mega-feature__btn, .mega-feature__cta { grid-row: 3; justify-self: start; }
  }

  /* ======================================================================
     6. DRAWER — native <dialog>, full height, slides in from the right
     ====================================================================== */

  .drawer {
    position: fixed;
    inset: 0;
    inset-inline-start: auto;
    margin: 0;
    padding: 0;
    inline-size: min(100vw, 26rem);
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    border: 0;
    border-inline-start: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .drawer:not([open]) { display: none; }

  .drawer::backdrop {
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(2px);
  }

  .drawer[open] {
    animation: drawer-in var(--duration-slow) var(--ease-emphasized);
  }

  .drawer[open]::backdrop {
    animation: drawer-fade var(--duration-slow) var(--ease-standard);
  }

  @keyframes drawer-in {
    from { translate: 100% 0; }
    to   { translate: 0 0; }
  }

  @keyframes drawer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  html[data-drawer-open] { overflow: hidden; }

  .drawer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    min-block-size: calc(var(--header-height) + var(--space-3) * 2);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .drawer__brand { display: inline-flex; color: inherit; }
  .drawer__logo { block-size: 1.25rem; }

  .drawer__nav {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .drawer__link,
  .drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .drawer__summary::-webkit-details-marker { display: none; }

  .drawer__link:hover,
  .drawer__summary:hover { background: var(--color-bg-muted); }

  .drawer__chev {
    --icon-size: 1.1rem;
    color: var(--color-text-muted);
    transition: rotate var(--duration-normal) var(--ease-standard);
  }

  .drawer__group[open] > .drawer__summary .drawer__chev { rotate: 180deg; }

  .drawer__sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3) var(--space-5);
  }

  .drawer__all { font-size: var(--text-sm); }

  .drawer__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .drawer__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
  }

  .drawer__cat .icon { --icon-size: 1rem; color: var(--color-text-muted); }

  .drawer__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .drawer__sublink {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .drawer__block .drawer__sublink { padding-inline-start: calc(1rem + var(--space-2)); margin-inline-start: 0; }

  .drawer__sublink:hover { color: var(--color-text); background: var(--color-bg-muted); }
  .drawer__sublink .icon { --icon-size: 1rem; color: var(--color-text-subtle); }
  .drawer__sublink--accent { color: var(--color-text); }
  .drawer__sublink--accent .icon { color: var(--color-accent-ink); }

  .drawer__foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
  }

  .drawer__cta { inline-size: 100%; }

  .drawer__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  /* ======================================================================
     7. ACTIVE DOT — where am I (client 2026-10-05)
     The status dot from the baiond software: a ring around a lime core.
     The ring is lime (operator 2026-10-06: the black ring read too heavy
     on light) — a deliberate exception to "lime as ink": --lime-deep on
     light, where --lime vanishes, --lime on dark. The section's
     header item carries it on every page below its hub; mega + drawer
     rows carry it on the exact page only (aria-current from header.php).
     ====================================================================== */

  .site-header__link[aria-current="page"]::before,
  .drawer__link[aria-current="page"]::before,
  .drawer__summary[data-current] > span::before,
  .drawer__cat[aria-current="page"]::before,
  .drawer__sublink[aria-current="page"]::before,
  .mega-cat__title[aria-current="page"] .mega-cat__name::before,
  .mega-tile[aria-current="page"] .mega-tile__title::before,
  .mega-link[aria-current="page"]::before,
  .mega-feature__link[aria-current="page"]::before,
  .mega__chips .chip[aria-current="page"]::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    inline-size: 0.75em;
    block-size: 0.75em;
    margin-inline-end: var(--nav-dot-gap, 0.45em);
    padding: 0.14em;
    border: 1.5px solid var(--nav-dot-ring, var(--lime-deep));
    border-radius: 50%;
    background: var(--lime) content-box;
    vertical-align: -0.06em;
  }

  [data-theme="dark"] { --nav-dot-ring: var(--lime); }

  /* Flex rows already space their children. */
  .drawer__cat,
  .drawer__sublink,
  .mega__chips .chip { --nav-dot-gap: 0; }

  /* A top-level drawer link spreads its children (space-between, for the
     chevron rows) — with the dot as a flex child the label flew right.
     Pack it left and let the dot's own margin space it, like the summaries. */
  .drawer__link[aria-current="page"] { justify-content: flex-start; gap: 0; }

  /* Icon rows (platform, sensors): the dot takes the icon's 1rem slot, so
     the current label stays in line with its siblings. The icon collapses
     through its --icon-size hook (.icon is a utility and beats a display
     rule here); the dot's end margin swallows the now-empty gap. */
  .drawer__sublink[aria-current="page"]:has(> .icon) > .icon { --icon-size: 0; }
  .drawer__sublink[aria-current="page"]:has(> .icon)::before {
    margin-inline: calc((1rem - 0.75em) / 2) calc((1rem - 0.75em) / 2 - var(--space-2));
  }

  /* Text-only list rows hang the dot in the gutter, so the label stays in
     line with its siblings (the ellipsis clip is lifted for that row). */
  .mega-link[aria-current="page"] { overflow: visible; }
  .mega-link[aria-current="page"]::before { margin-inline-start: -1.2em; }
  .drawer__block .drawer__sublink[aria-current="page"]::before { margin-inline-start: calc(-0.75em - var(--space-2)); }

  /* The current row reads as current, not as a muted sibling. */
  .mega-link[aria-current="page"],
  .drawer__sublink[aria-current="page"] { color: var(--color-text); font-weight: var(--font-medium); }
  .mega-link[aria-current="page"]:hover { translate: 0 0; }

  /* ======================================================================
     8. REDUCED MOTION
     ====================================================================== */

  @media (prefers-reduced-motion: reduce) {
    .mega { transition: none; translate: 0 0; }
    .drawer[open], .drawer[open]::backdrop { animation: none; }
    .mega-link:hover { translate: 0 0; }
  }
}