/* =========================================================
   Header 2026 — Standalone
   Prefix: h26-  (isolated from lp26- landing page styles)

   Variants:
     .h26-header            Full header (nav + dropdowns + mobile)
     .h26-header--clean     Logo-only (no nav, no CTA)

   Architecture:
   1.  Design Tokens
   2.  Base header structure
   3.  Desktop nav items
   4.  Dropdown panels
   5.  Nav cards (3 variants: title-only / title+desc / icon)
   6.  Buttons
   7.  Mobile hamburger
   8.  Mobile drawer + accordion sections
   9.  Clean variant
   10. Responsive — tablet  (max-width: 1024px)
   11. Responsive — mobile  (max-width: 767px)
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   1. Design Tokens
   ───────────────────────────────────────────────────────── */
.h26-header,
.h26-header__mobile-menu {
  /* Accent (RG Green) — sourced from landing-2026-v5.css */
  --h26-accent-2:  var(--rg-accent-2);   /* #f4fbf8 — icon hover bg */
  --h26-accent-9:  var(--rg-accent-9);   /* #1b6a50 — CTA bg, icon colour */
  --h26-accent-10: var(--rg-accent-10);  /* #005b42 — CTA hover */
  --h26-accent-12: var(--rg-accent-12);  /* #00160e */

  /* Neutral */
  --h26-neutral-3:  var(--rg-neutral-3);   /* #f0f0f3 — dividers */
  --h26-neutral-10: var(--rg-neutral-10);  /* #82828f */
  --h26-neutral-11: var(--rg-neutral-11);  /* #60646c — muted text */
  --h26-neutral-12: var(--rg-neutral-12);  /* #1c2024 — primary text */

  /* Olive */
  --h26-olive-1: var(--rg-olive-1);  /* #fcfdfc — card hover bg */
  --h26-olive-2: var(--rg-olive-2);  /* #f8faf8 — icon container bg */
  --h26-olive-3: var(--rg-olive-3);  /* #eff1ef — nav border, icon container border */

  /* Surface */
  --h26-white:           var(--rg-white);
  --h26-accent-contrast: var(--rg-accent-contrast);
  --h26-surface: var(--h26-white);
  --h26-surface-blur: blur(24px);

  /* Nav item hover/active bg — Radix neutral-alpha/4 */
  --h26-nav-hover-bg: var(--rg-neutral-alpha-4);  /* rgba(0,0,45,0.09) */

  /* Typography */
  --h26-font-body:      var(--rg-font-body);   /* DM Sans */
  --h26-fs-nav:         var(--rg-fs-b2);       /* 14px — Body/B2 */
  --h26-fs-card:        var(--rg-fs-b2);       /* 14px — Body/B2 */
  --h26-fs-b1:          var(--rg-fs-b1);       /* 16px — Body/B1, col headers, card titles */
  --h26-fs-label:       11px;                  /* no rg equivalent */
  --h26-fs-mobile-nav:  var(--h26-fs-b1);
  --h26-lh-nav:         var(--rg-lh-b2);       /* 20px */
  --h26-ls-body:        var(--rg-ls-body);     /* -0.5px */
  --h26-ls-ui:          var(--rg-ls-ui);       /* -0.1px */
  --h26-ls-btn:         var(--h26-ls-body);
  --h26-icon-size:      20px;                  /* Material symbol — no rg equivalent */
  --h26-chevron-size:   16px;                  /* Nav chevron — no rg equivalent */

  /* Spacing */
  --h26-space-px: 2px;              /* no rg equivalent — nav button padding-block */
  --h26-space-1: var(--rg-space-1); /* 4px  */
  --h26-space-2: var(--rg-space-2); /* 8px  */
  --h26-space-3: var(--rg-space-3); /* 12px */
  --h26-space-4: var(--rg-space-4); /* 16px */
  --h26-space-5: var(--rg-space-5); /* 24px */

  /* Radii */
  --h26-radius-1: 3px;              /* no rg equivalent (rg-radius-1 = 2px, rg-radius-2 = 4px) */
  --h26-radius-2: var(--rg-radius-2); /* 4px */
  --h26-radius-3: var(--rg-radius-3); /* 6px */

  /* Header heights */
  --h26-height-desktop: 56px;
  --h26-height-mobile:  56px;

  /* Dropdown */
  --h26-dropdown-shadow: none;
  --h26-dropdown-border: var(--h26-olive-3);
}

/* ─────────────────────────────────────────────────────────
   2. Base header structure
   ───────────────────────────────────────────────────────── */
.h26-header,
.h26-header *,
.h26-header *::before,
.h26-header *::after,
.h26-header__mobile-menu,
.h26-header__mobile-menu *,
.h26-header__mobile-menu *::before,
.h26-header__mobile-menu *::after {
  box-sizing: border-box;
}

.h26-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--h26-surface);
  backdrop-filter: var(--h26-surface-blur);
  -webkit-backdrop-filter: var(--h26-surface-blur);
  border-bottom: 1px solid var(--h26-dropdown-border);
  box-shadow: none;
  font-family: var(--h26-font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.h26-header a,
.h26-header__mobile-menu a {
  text-decoration: none;
  color: inherit;
}

.h26-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--h26-space-3) var(--h26-space-2);
}

/* ── Logo ── */
.h26-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  outline-offset: 2px;
}

.h26-header__logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* ─────────────────────────────────────────────────────────
   3. Desktop nav items
   ───────────────────────────────────────────────────────── */
.h26-header__nav {
  display: flex;
  align-items: center;
  gap: var(--h26-space-2);
}

.h26-header__nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--h26-space-2);
  padding: var(--h26-space-px) var(--h26-space-3);
  height: 32px;
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-nav);
  font-weight: 500;
  line-height: var(--h26-lh-nav);
  letter-spacing: var(--h26-ls-body);
  color: var(--h26-neutral-12);
  border-radius: var(--h26-radius-1);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-variation-settings: 'opsz' 14;
  transition: background-color 0.12s ease;
}

.h26-header__nav-item:hover,
.h26-header__nav-item:focus-visible {
  background-color: var(--h26-nav-hover-bg);
  outline: none;
}

.h26-header__nav-item--dropdown[aria-expanded="true"] {
  background-color: var(--h26-nav-hover-bg);
  opacity: 0.92;
}

/* Chevron */
.h26-header__nav-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--h26-neutral-11);
  transition: transform 0.2s ease;
}

.h26-header__nav-item--dropdown[aria-expanded="true"] .h26-header__nav-chevron {
  transform: rotate(180deg);
}

.h26-chevron-icon {
  display: block;
  flex-shrink: 0;
  font-size: var(--h26-chevron-size);
}

/* ── Desktop utility (Login + CTA) ── */
.h26-header__utility {
  display: flex;
  align-items: center;
  gap: var(--h26-space-2);
  flex-shrink: 0;
}

.h26-header__login {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: var(--h26-space-px) var(--h26-space-3);
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-nav);
  font-weight: 500;
  letter-spacing: var(--h26-ls-body);
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);
  border-radius: var(--h26-radius-1);
  transition: background-color 0.12s ease;
}

.h26-header__login:hover,
.h26-header__login:focus-visible {
  background-color: var(--h26-nav-hover-bg);
  outline: none;
}

/* ── Mobile controls (hidden on desktop) ── */
.h26-header__mobile-controls {
  display: none;
  align-items: center;
  gap: var(--h26-space-2);
  flex-shrink: 0;
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────
   4. Dropdown panels
   ───────────────────────────────────────────────────────── */
/* Overlay — covers page content when desktop dropdown is open */
.h26-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.h26-header__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1199px) {
  .h26-header__overlay {
    display: none;
  }
}

.h26-header__dropdown {
  position: absolute;
  top: var(--h26-height-desktop);
  left: 0;
  right: 0;
  z-index: 999;
  padding: var(--h26-space-3) 0;
  background: var(--h26-surface);
  border-bottom: 1px solid var(--h26-dropdown-border);
  box-shadow: none;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

@media (min-width: 1200px) {
  .h26-header__dropdown {
    /* add 48px bottom breathing room in desktop dropdowns. */
    padding-bottom: 48px;
  }
}

.h26-header__dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.h26-header__dropdown-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--h26-space-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Auto-columns: for dropdowns with fewer than 4 columns (Platform, Customers etc.) */
.h26-header__dropdown-inner--auto {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Explicit column counts — 2-col (Platform) and 3-col (Customers, Resources, Company) */
.h26-header__dropdown-inner--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.h26-header__dropdown-inner--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.h26-header__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: var(--h26-space-3);
}

.h26-header__dropdown-col-header {
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);
  font-weight: 400;
  line-height: var(--h26-lh-nav);
  letter-spacing: var(--h26-ls-body);
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-10);
  border-bottom: 1px solid var(--h26-olive-2);
  padding: var(--h26-space-2);
}

/* ─────────────────────────────────────────────────────────
   5. Nav cards — 3 variants
   ───────────────────────────────────────────────────────── */

/* Base card */
.h26-nav-card {
  display: flex;
  align-items: flex-start;
  gap: var(--h26-space-3);
  padding: var(--h26-space-3) var(--h26-space-2);
  border-radius: var(--h26-radius-1);
  transition: background-color 0.12s ease;
  text-decoration: none;
  color: var(--h26-neutral-12);
}

.h26-nav-card:hover,
.h26-nav-card:focus-visible {
  background-color: var(--h26-olive-1);
  outline: none;
}

.h26-nav-card:hover .h26-nav-card__icon,
.h26-nav-card:focus-visible .h26-nav-card__icon {
  background-color: var(--h26-accent-2);
  border-color: transparent;
}

.h26-nav-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--h26-space-1);
}

/* Title */
.h26-nav-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--h26-space-2);
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);
  font-weight: 500;
  line-height: var(--h26-lh-nav);
  letter-spacing: var(--h26-ls-ui);
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);
}

/* Description */
.h26-nav-card__desc {
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-card);
  font-weight: 400;
  line-height: var(--h26-lh-nav);
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-11);
}

/* Icon variant — icon sits left of the body */
.h26-nav-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--h26-radius-2);
  border: 1px solid var(--h26-olive-3);
  background-color: var(--h26-olive-2);
  color: var(--h26-accent-9);
  flex-shrink: 0;
}

.h26-nav-card__icon .material-symbols-outlined {
  font-size: var(--h26-icon-size);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Badge: "New" pill */
.h26-nav-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.2px;
  font-variation-settings: 'opsz' 14;
  color: rgba(0, 91, 60, 0.84);          /* accent-alpha/11 — no rg token */
  background-color: var(--rg-green-alpha-3); /* rgba(0,196,111,0.12) */
  border-radius: 9999px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────
   6. Buttons
   ───────────────────────────────────────────────────────── */
.h26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h26-font-body);
  font-weight: 500;
  font-size: var(--h26-fs-nav);
  line-height: var(--h26-lh-nav);
  letter-spacing: var(--h26-ls-btn);
  font-variation-settings: 'opsz' 14;
  border: none;
  border-radius: var(--h26-radius-1);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.h26-btn--primary {
  background-color: var(--h26-accent-9);
  color: var(--h26-accent-contrast);
  padding: var(--h26-space-2) var(--h26-space-3);
  height: 32px;
}

.h26-btn--primary:hover,
.h26-btn--primary:focus-visible {
  background-color: var(--h26-accent-10);
  color: var(--h26-accent-contrast);
  outline: none;
}

/* Specificity fix: .h26-header a { color: inherit } (0,1,1) would otherwise
   override .h26-btn--primary { color: #fff } (0,1,0). Use a 2-class selector. */
.h26-header .h26-btn--primary,
.h26-header .h26-btn--primary:visited,
.h26-header .h26-btn--primary:hover,
.h26-header .h26-btn--primary:focus-visible {
  color: var(--h26-accent-contrast);
}

/* Small variant for mobile header strip */
.h26-btn--sm {
  height: 32px;
  padding: var(--h26-space-1) var(--h26-space-3);
  font-size: var(--h26-fs-nav); /* 14px — matches Figma mobile CTA */
}

/* ─────────────────────────────────────────────────────────
   7. Mobile hamburger
   ───────────────────────────────────────────────────────── */
.h26-header__hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--h26-radius-2); /* 4px — matches Figma icon button radius */
  flex-shrink: 0;
  transition: background-color 0.12s ease;
}

.h26-header__hamburger:hover,
.h26-header__hamburger:active {
  background-color: var(--h26-olive-1);
}

.h26-header__hamburger-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: var(--h26-neutral-12);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ── Hamburger → ✕ when open ── */
.h26-header__hamburger[aria-expanded="true"] .h26-header__hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.h26-header__hamburger[aria-expanded="true"] .h26-header__hamburger-bar:nth-child(2) {
  opacity: 0;
}
.h26-header__hamburger[aria-expanded="true"] .h26-header__hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────
   8. Mobile drawer — two-panel push navigation
   ───────────────────────────────────────────────────────── */

/* ── Drawer wrapper ── */
.h26-header__mobile-menu {
  position: fixed;
  top: var(--h26-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  overflow: hidden;                    /* clips the sliding viewport */
  display: none;                       /* hidden by default; .is-open overrides */
  background: var(--h26-white);        /* solid white — covers page content */
  font-family: var(--h26-font-body);   /* DM Sans — tokens scoped to this element */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* suppress browser default cyan tap overlay */
}

.h26-header__mobile-menu[hidden] {
  display: none;
}

.h26-header__mobile-menu.is-open {
  display: flex;         /* flex so viewport child stretches to fill */
  flex-direction: column;
}

/* ── Inner sliding rail — 200% wide, holds L1 (left) and L2 slot (right) ── */
.h26-mobile-viewport {
  display: flex;
  flex: 1;               /* fills the drawer height */
  min-height: 0;         /* allow flex child to shrink — enables scroll in children */
  width: 200%;           /* doubles width so each child = 100vw */
  overflow: hidden;      /* clip overflowing content */
  transition: transform 0.22s ease;
  will-change: transform;
}

/* Slide the rail left when an L2 panel is active */
.h26-header__mobile-menu.h26-has-l2 .h26-mobile-viewport {
  transform: translateX(-50%);
}

/* Level 1 — left 50% of rail = full viewport width */
.h26-mobile-panel--l1 {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background: var(--h26-surface);
  padding: var(--h26-space-2);  /* 8px — Figma outer p: var(--spacing/2, 8px) */
  gap: var(--h26-space-4);      /* 16px — Figma gap: var(--spacing/4, 16px) */
}

/* L2 slot — right 50% of rail = full viewport width */
.h26-mobile-l2-slot {
  width: 50%;
  height: 100%;
  position: relative;    /* containing block for absolute L2 panels */
  background: var(--h26-surface);
}

/* Level 2 panels — absolute within slot, hidden until active */
.h26-mobile-panel--l2 {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--h26-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.h26-mobile-panel--l2.is-active {
  display: flex;
}

/* ── Level 1: nav button rows ── */

.h26-mobile-l1-list {
  display: flex;
  flex-direction: column;
  gap: var(--h26-space-3); /* 12px — Figma gap: var(--spacing/3, 12px) */
  width: 100%;
}

/* Shared style for both <button> and <a> L1 rows */
.h26-mobile-l1-btn {
  display: flex;
  align-items: center;
  gap: var(--h26-space-3);            /* 12px — Figma gap: var(--spacing/3, 12px) */
  width: 100%;
  height: 40px;                       /* Figma h: 40px */
  padding: 2px var(--h26-space-4);    /* Figma py: 2px, px: var(--spacing/4, 16px) */
  border-radius: var(--h26-radius-2); /* 4px — Figma radius: var(--radius/2, 4px) */
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);        /* 16px — Figma Body/B1/Medium */
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);       /* #1c2024 — Figma neutral/12 */
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background-color 0.12s ease;
}

.h26-mobile-l1-btn span {
  flex: 1 0 0;
  min-width: 0;
}

.h26-mobile-l1-btn:hover,
.h26-mobile-l1-btn:focus-visible,
.h26-mobile-l1-btn:active {
  background-color: var(--h26-olive-1);
  outline: none;
}

/* Right-arrow on items that have a sub-panel */
.h26-mobile-l1-arrow {
  display: block;
  flex-shrink: 0;
  width: 18px;                  /* Figma: 18px */
  height: 18px;                 /* Figma: 18px */
  color: var(--h26-neutral-11); /* #60646c */
}

/* ── Level 1: olive divider ── */

.h26-mobile-l1-divider {
  flex-shrink: 0;
  height: 1px;
  background-color: var(--h26-olive-3); /* #eff1ef — Figma rg-olive/3 */
}

/* ── Level 1: Login link (centered, no arrow) ── */

.h26-mobile-l1-login {
  display: flex;
  align-items: center;
  justify-content: center;           /* Figma: centered */
  width: 100%;
  height: 40px;                       /* Figma h: 40px */
  padding: 2px var(--h26-space-4);    /* Figma py: 2px, px: var(--spacing/4, 16px) */
  border-radius: var(--h26-radius-2); /* 4px — Figma radius: var(--radius/2, 4px) */
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);        /* 16px — Figma Body/B1/Medium */
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.h26-mobile-l1-login:hover,
.h26-mobile-l1-login:focus-visible,
.h26-mobile-l1-login:active {
  background-color: var(--h26-olive-1);
  outline: none;
}

/* ── Level 2: back button wrapper ── */

.h26-mobile-back-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px;                         /* Figma p: var(--spacing/1, 4px) */
  border-bottom: 1px solid var(--h26-olive-2); /* Figma border-bottom: var(--colors/secondary/rg-olive/2, #f8faf8) */
  width: 100%;
}

/* ── Level 2: back button ── */

.h26-mobile-back-btn {
  display: flex;
  align-items: center;
  gap: var(--h26-space-2);              /* 8px — Figma gap: var(--Spacing-2, 8px) */
  width: 100%;
  height: 32px;                         /* Figma height: var(--Tokens-Space-button-height-2, 32px) */
  padding: 2px var(--h26-space-3);      /* Figma py:2px px: var(--Spacing-3, 12px) */
  border-radius: var(--h26-radius-1);   /* 3px — Figma border-radius: var(--Radius-1, 3px) */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--h26-font-body);
  font-size: 14px;                      /* Figma Body/B2/Medium: size 14 */
  font-weight: 500;                     /* Figma weight 500 */
  line-height: 20px;                    /* Figma lineHeight 20 */
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);         /* #1c2024 — Figma neutral/12 */
  transition: background-color 0.12s ease;
}

.h26-mobile-back-btn .material-symbols-outlined {
  font-size: 16px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--h26-neutral-11);         /* #60646c — Figma neutral/11 */
}

.h26-mobile-back-btn:hover,
.h26-mobile-back-btn:focus-visible,
.h26-mobile-back-btn:active {
  background-color: var(--h26-olive-1);
  outline: none;
}

/* ── Level 2: scrollable content area ── */

.h26-mobile-l2-content {
  padding: var(--h26-space-2);  /* 8px — Figma outer p: var(--spacing/2, 8px) */
  display: flex;
  flex-direction: column;
  gap: var(--h26-space-4);      /* 16px — gap between sections */
}

/* ── Level 2: group section ── */

.h26-mobile-group {
  display: flex;
  flex-direction: column;
  gap: var(--h26-space-2); /* 8px — gap between cards inside a section */
  overflow: hidden;
}

/* Group label — DM Sans Regular 16px, neutral/10, olive/2 border */
.h26-mobile-group__header {
  padding: var(--h26-space-2);         /* 8px — Figma p: var(--spacing/2, 8px) */
  border-bottom: 1px solid var(--h26-olive-2); /* #f8faf8 — Figma rg-olive/2 */
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);         /* 16px — Figma Body/B1/Regular */
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-10);        /* #80838d — Figma neutral/10 */
}

/* Group nav item links — DM Sans Medium 16px, neutral/12 */
.h26-mobile-group__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--h26-space-3) var(--h26-space-2); /* py:12px px:8px — Figma py: var(--spacing/3), px: var(--spacing/2) */
  border-radius: var(--h26-radius-1); /* 3px — Figma radius: var(--radius/1) */
  font-family: var(--h26-font-body);
  font-size: var(--h26-fs-b1);        /* 16px — Figma H6/Medium size */
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.1px;             /* Figma ls: -0.10px */
  font-variation-settings: 'opsz' 14;
  color: var(--h26-neutral-12);       /* #1c2024 */
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.h26-mobile-group__item:hover,
.h26-mobile-group__item:focus-visible,
.h26-mobile-group__item:active {
  background-color: var(--h26-olive-1);
  outline: none;
}

/* ─────────────────────────────────────────────────────────
   9. Clean variant (logo-only)
   ───────────────────────────────────────────────────────── */
.h26-header--clean .h26-header__inner {
  justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────
   10. Responsive — Tablet (max-width: 1024px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .h26-header__inner {
    padding: 0 var(--h26-space-4);
  }

  /* Collapse some nav items to save space — hide Company on tablet */
  .h26-header__nav {
    gap: 0;
  }

  .h26-header__dropdown-inner {
    padding: var(--h26-space-4);
  }
}

/* ─────────────────────────────────────────────────────────
  11. Responsive — Mobile/Tablet (max-width: 1199px)
  ───────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .h26-header__inner {
    height: var(--h26-height-mobile);
    padding: 0 var(--h26-space-4);
  }

  /* Hide desktop nav + utility on mobile */
  .h26-header__nav,
  .h26-header__utility {
    display: none;
  }

  /* Show mobile controls */
  .h26-header__mobile-controls {
    display: flex;
  }

  /* Full-width dropdown not needed on mobile (drawer replaces it) */
  .h26-header__dropdown {
    display: none;
  }

  .h26-header__mobile-menu {
    top: var(--h26-height-mobile);
  }
}

/* ── WordPress admin-bar offsets ───────────────────────────────────────── */
body.admin-bar .h26-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .h26-header__mobile-menu {
  top: calc(var(--h26-height-mobile) + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {
  body.admin-bar .h26-header {
    top: var(--wp-admin--admin-bar--height, 46px);
  }

  body.admin-bar .h26-header__mobile-menu {
    top: calc(var(--h26-height-mobile) + var(--wp-admin--admin-bar--height, 46px));
  }
}