/* navbar.css — the ONE global editorial navbar. Tokens only.
 * Loaded on every page (header.html), independent of use_vN_styles.
 * Body/nav font uses var(--im-font-body, "Hanken Grotesk", ...) because --im-font-body
 * is editorial-scoped and undefined on legacy pages; ink uses --im-ink (global).
 */

/* ---- Bare "veil" bar --------------------------------------------------- */
/* No pill. The bar is transparent at the top of the page, so the nav reads as
 * bare marks on the page (Harvey / Legora register). A full-width frosted veil
 * + hairline fades in once scrolled (`im-nav-scrolled`, toggled by
 * parts/navbar-scroll.js), or while an audience mega-panel is open, so the
 * dropdown always has a surface to hang from. Degrades with JS off: the bar
 * stays transparent, which is a valid resting state — unlike the old pill,
 * which needed JS to frost. The veil lives on the full-width .navbar; the
 * inner .container is layout only, capping the CONTENT so the lockup stays
 * centred while the veil runs edge to edge. */
.navbar.fixed-top {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--im-dur) var(--im-ease),
              box-shadow var(--im-dur) var(--im-ease),
              border-color var(--im-dur) var(--im-ease);
}
.navbar.fixed-top > .container.im-navbar-wide {
  /* Near-full-width at all sizes (constant 1rem side gutters) so the row scales
     consistently instead of locking into a centred island on large screens; a
     high cap only tames ultrawide. */
  max-width: min(2200px, calc(100% - 2rem));
  margin-top: var(--im-space-3);
  position: relative;
  z-index: 1021;
  transition: margin-top var(--im-dur) var(--im-ease);
}

/* Veil in: on scroll, or whenever an audience mega-panel is open. Keeps the
   frosted paper tone the pill used once scrolled — only the enclosing shape
   (fill, border, radius, island inset) is gone. */
.navbar.fixed-top.im-nav-scrolled,
.navbar.fixed-top:has(.im-mega-nav-item--audience:hover),
.navbar.fixed-top:has(.im-mega-nav-item--audience:focus-within),
.navbar.fixed-top:has(.im-mega-trigger[aria-expanded="true"]) {
  background: color-mix(in srgb, var(--im-paper) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom-color: var(--im-hairline);
  box-shadow: var(--im-shadow-1);
}
/* The top breathing-room collapses on scroll so the veil sits flush to the
   top edge (the Harvey compaction). */
.navbar.fixed-top.im-nav-scrolled > .container.im-navbar-wide {
  margin-top: var(--im-space-1);
}
/* No backdrop-filter support: fall back to a near-opaque veil. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .navbar.fixed-top.im-nav-scrolled,
  .navbar.fixed-top:has(.im-mega-nav-item--audience:hover),
  .navbar.fixed-top:has(.im-mega-nav-item--audience:focus-within),
  .navbar.fixed-top:has(.im-mega-trigger[aria-expanded="true"]) {
    background: color-mix(in srgb, var(--im-paper) 92%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .navbar.fixed-top,
  .navbar.fixed-top > .container.im-navbar-wide { transition: none; }
}

/* Brand lockup — OPTICAL, not geometric, centring.
 *
 * The image BOX is already centred perfectly (box mid and nav-link mid measure
 * identically), but the logo reads low, because the artwork's ink is not evenly
 * distributed: the walking figure's head is a small, light shape at the top
 * while the wordmark is a solid mass at the bottom.
 *
 * The shift is the artwork's alpha-weighted CENTRE OF MASS, not its bounding
 * box and not its wordmark. Re-measured 2026-07-29 on i-migratorlogospectral.svg
 * (viewBox 857x182, rasterised): ink centroid y=209.6 vs box centre y=182.0 =
 * +7.59% of height, so the mass sits ~3.0px low at a 40px render and we lift it
 * back by the same proportion. The retracked lockup barely moved the centroid
 * (the old spectrallogo.png measured +7.73%, a 0.06px difference at 40px), so
 * the shipped -7.73% is kept rather than churned for a sub-pixel gain.
 *
 * Do NOT set this from the wordmark's bbox (that would be 13.7%) — it centres
 * the lettering but drags the whole lockup up, leaving a visible gap under the
 * logo. Centroid is the value that balances both.
 *
 * A percentage of the image's OWN height, so it holds at any rendered size
 * (verified 20/28/40/64px). It is a property of the artwork: re-export the
 * lockup with its ink centroid on the canvas centre and this rule can go. The
 * footer logo (newsreaderlogo.png, centroid +6.5%) is deliberately left alone —
 * nothing sits beside it to align against.
 */
.navbar-brand img {
  height: 40px;
  width: auto;
  transform: translateY(-7.73%);
}

/* ---- Top-level links / triggers --------------------------------------- */
.navbar .nav-link,
.navbar .im-mega-trigger {
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--im-ink);
  opacity: .74;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--im-space-1);
  white-space: nowrap;   /* keep "For Individuals" / "For Businesses" on one line */
  transition: opacity var(--im-dur) var(--im-ease);
}
.navbar .nav-link:hover,
.navbar .im-mega-trigger:hover,
.navbar .im-mega-trigger[aria-expanded="true"] { opacity: 1; }
.navbar .nav-link[aria-current="page"] {
  opacity: 1;
  border-bottom: 2px solid var(--im-ink);
}
.navbar .im-chevron { font-size: 10px; opacity: .55; }
.navbar .im-mega-trigger:focus-visible,
.navbar .nav-link:focus-visible {
  outline: 2px solid var(--im-accent-200);
  outline-offset: 3px;
  border-radius: var(--im-radius-control);
}

/* ---- Mega-panels ------------------------------------------------------- */
.im-mega-nav-item { position: relative; }
.im-mega-panel {
  background: var(--im-paper);
  border: 1px solid var(--im-hairline);
  border-top: 2px solid var(--im-ink);
  border-radius: 0 0 var(--im-radius-card) var(--im-radius-card);
  box-shadow: var(--im-shadow-2);
  padding: var(--im-space-6) var(--im-space-8);
}
/* Desktop: panel opens on hover/focus-within OR when JS sets aria-expanded. */
@media (min-width: 992px) {
  .im-mega-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050;
    min-width: 560px; opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--im-dur) var(--im-ease),
                transform var(--im-dur) var(--im-ease),
                visibility var(--im-dur);
  }
  .im-mega-nav-item:hover > .im-mega-panel,
  .im-mega-nav-item:focus-within > .im-mega-panel,
  .im-mega-trigger[aria-expanded="true"] + .im-mega-panel {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .im-mega-panel--tools, .im-mega-panel--resources { min-width: 320px; }
}

/* ---- Section furniture (mono eyebrows, hairlines) --------------------- */
.im-mega-category-header,
.im-biz-section-header {
  font-family: var(--im-font-display);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--im-text-muted);
  margin-bottom: var(--im-space-3);
  display: flex; align-items: center; gap: var(--im-space-2);
}
.im-biz-divider { border: 0; border-top: 1px solid var(--im-hairline); margin: var(--im-space-4) 0; }

/* ---- Link rows (resources / tools) ----------------------------------- */
.im-resource-link, .im-tool-link {
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 14px; color: var(--im-ink); text-decoration: none;
  display: flex; align-items: center; gap: var(--im-space-2);
  padding: var(--im-space-2) 0;
  border-bottom: 1px solid var(--im-hairline);
  transition: color var(--im-dur) var(--im-ease);
}
.im-resource-link:hover, .im-tool-link:hover { color: var(--im-accent-200); }
.im-tool-link .badge { margin-left: auto; }
/* Market tag — only rendered on the destination-neutral home, where a tool has
   to say which country it is for. */
.im-tool-market {
  margin-left: auto;
  font-family: var(--im-font-display);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--im-text-muted);
}
/* A section header that follows a link list needs its own top breathing room now
   the <hr> is gone (the preceding link's border-bottom is the only rule).
   Three things can precede one: a loose resource link, a grouped link list
   (.im-nav-links, the Resources panel), or a guided path list (.im-nav-paths,
   which is what sits above "Routes you can hire on" in the employer panel — that
   header had NO top margin because the old selector named only the first). The
   :where() keeps the whole list at zero specificity, so a panel-scoped override
   still wins without an !important. */
:where(.im-resource-link, .im-nav-links, .im-nav-paths) + .im-biz-section-header {
  margin-top: var(--im-space-5);
}
.im-resource-link:focus-visible, .im-tool-link:focus-visible,
.im-destination-chip:focus-visible, .im-mega-footer-bypass:focus-visible {
  outline: 2px solid var(--im-accent-200); outline-offset: 2px;
}

/* ---- Destination chips (current column vocabulary) ------------------- */
.im-destination-chip {
  display: flex; align-items: center; gap: var(--im-space-2);
  padding: var(--im-space-2) 0; text-decoration: none; color: var(--im-ink);
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif); font-size: 14px;
  border-bottom: 1px solid var(--im-hairline);
}
.im-destination-chip__flag { font-size: 16px; }
.im-destination-chip[aria-current="page"] { font-weight: 600; }

/* ---- Footer bypass --------------------------------------------------- */
.im-mega-footer-bypass {
  font-family: var(--im-font-display); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--im-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--im-space-2);
  border-bottom: 1px solid var(--im-accent-200);
  /* Was padding-bottom:2px alone, giving a 20px-tall target — under the WCAG 2.2
     AA floor (2.5.8, 24px). The extra room is added on TOP so the underline stays
     tight to the text. */
  padding: 8px 0 3px;
}
.im-mega-footer { margin-top: var(--im-space-5); }

/* ---- Desktop right cluster (country chip + auth buttons) -------------
   The auth buttons are .im-btn / .im-btn--ghost from primitives.css, which
   loads globally. This block used to re-skin Bootstrap's .btn-primary and
   .btn-outline-secondary to look like them — a second copy that drifted:
   its :hover set the same background as its rest state, and the outline
   variant had no :hover at all. Deleted rather than fixed, so hover and
   press behaviour has one definition. */
.navbar .im-btn { flex: 0 0 auto; }

/* ---- Country chip ----------------------------------------------------- */
.im-country-chip { position: relative; }
/* The picker is a scope READOUT that happens to be interactive, so it carries no
   chrome of its own — it used to be a filled --im-band pill, which made the least
   important control in the cluster the heaviest-looking one, and the only element
   in the navbar using that colour as a fill. Now it is flag + name + chevron, and
   the accent underline on hover is the only affordance. Weight ramp across the
   right-hand cluster reads: picker (none) -> Sign out (.im-btn--ghost) -> My
   account (.im-btn). */
.im-country-chip__btn {
  display: inline-flex; align-items: center; gap: var(--im-space-2);
  font-family: var(--im-font-display); font-size: 13px; font-weight: 600;
  background: transparent; border: 0; border-radius: var(--im-radius-control);
  padding: 8px 6px; color: var(--im-ink); cursor: pointer;
  /* 44px stays for the touch target (WCAG 2.5.8). With no fill or border it is
     invisible, so the control reads as text while staying easy to hit. */
  min-height: 44px;
  /* "United Kingdom" broke onto two lines once the nav packed left and left the
     chip less room; a control that changes height per country name is worse than
     a slightly wider one. */
  white-space: nowrap;
}
.im-country-chip__name {
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--im-dur) var(--im-ease);
}
.im-country-chip__btn:hover .im-country-chip__name,
.im-country-chip.is-open .im-country-chip__name { border-bottom-color: var(--im-accent-200); }
.im-country-chip__flag { font-size: 15px; }
.im-country-chip__chevron {
  font-size: 9px; opacity: .55;
  transition: opacity var(--im-dur) var(--im-ease), transform var(--im-dur) var(--im-ease);
}
.im-country-chip__btn:hover .im-country-chip__chevron { opacity: 1; }
.im-country-chip.is-open .im-country-chip__chevron { opacity: 1; transform: rotate(180deg); }
.im-country-chip__btn:focus-visible {
  outline: 2px solid var(--im-accent-200); outline-offset: 2px;
}
.im-country-menu {
  list-style: none; margin: 0; padding: var(--im-space-2);
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050;
  min-width: 220px; background: var(--im-paper);
  border: 1px solid var(--im-hairline); border-top: 2px solid var(--im-ink);
  border-radius: 0 0 var(--im-radius-card) var(--im-radius-card);
  box-shadow: var(--im-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--im-dur) var(--im-ease),
              transform var(--im-dur) var(--im-ease), visibility var(--im-dur);
}
.im-country-chip:hover .im-country-menu,
.im-country-chip:focus-within .im-country-menu,
.im-country-chip.is-open .im-country-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* The enhancement contract navbar-country.js documents but the CSS never
   honoured: once JS sets data-country-enhanced it OWNS the open state via
   .is-open, and the no-JS :focus-within fallback must switch off. Without this
   rule Escape could not close the menu — close() returns focus to the trigger,
   which immediately re-opened it through :focus-within. Hover still opens on
   pointer devices; only the focus fallback is withdrawn. */
.im-country-chip[data-country-enhanced]:not(.is-open):not(:hover) .im-country-menu {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
}
.im-country-menu__item {
  display: flex; align-items: center; gap: var(--im-space-2);
  padding: var(--im-space-2) var(--im-space-3); text-decoration: none;
  color: var(--im-ink); border-radius: var(--im-radius-control);
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif); font-size: 14px;
}
.im-country-menu__item:hover { background: var(--im-band); }
.im-country-menu__item[aria-current="page"] { font-weight: 600; }

/* ---- Mobile (< 992px): collapse drawer ------------------------------- */
@media (max-width: 991.98px) {
  .navbar.fixed-top > .container.im-navbar-wide { margin-top: var(--im-space-2); }
  .navbar-toggler { border: 0; }
  .navbar-toggler:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }
  .navbar-collapse {
    background: var(--im-paper); margin-top: var(--im-space-3);
    border-top: 1px solid var(--im-hairline); padding: var(--im-space-4) 0;
    /* The open drawer can exceed the viewport (all mega-panels are static/
       expanded on mobile) — cap it to the space below the pill and let it
       scroll internally, otherwise the lower items are unreachable. */
    max-height: calc(100dvh - 7rem); overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Panels are ACCORDIONS on mobile, not permanently-open blocks.
   *
   * They used to be `opacity:1; visibility:visible` here, so every panel was
   * expanded the moment the drawer opened: 1743px of panel content, a 2345px
   * scrollHeight inside a 730px drawer, 31 links at once — and the triggers were
   * visually inert, flipping aria-expanded while the panel never moved (which
   * also told screen readers "collapsed" about visible content).
   */
  .im-mega-panel {
    display: none;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-top: 1px solid var(--im-hairline);
    padding: var(--im-space-4) 0; min-width: 0;
  }
  /* No JS: the trigger lives inside the item, so focusing it reveals its panel
     and moving focus away closes it. The menu stays usable with JS off. */
  .im-mega-nav-item:focus-within > .im-mega-panel { display: block; }
  /* JS present (navbar-mega.js stamps data-mega-enhanced): aria-expanded is the
     SINGLE source of truth. Without this, a second tap could never close a panel
     — the trigger still holds focus, so :focus-within would hold it open.
     Same specificity as the rule above, so source order decides: this wins. */
  [data-mega-enhanced] .im-mega-nav-item:focus-within > .im-mega-panel { display: none; }
  [data-mega-enhanced] .im-mega-trigger[aria-expanded="true"] + .im-mega-panel { display: block; }

  /* Full-width row with a comfortable target — was 39px tall. */
  .navbar .im-mega-trigger {
    width: 100%; justify-content: space-between; min-height: 44px;
  }

}

/* Chevron reflects open state wherever aria-expanded is managed. */
.navbar .im-mega-trigger[aria-expanded="true"] .im-chevron { transform: rotate(180deg); }
.navbar .im-chevron { transition: transform var(--im-dur) var(--im-ease); }
@media (prefers-reduced-motion: reduce) {
  .navbar .im-chevron { transition: none; }
}

/* ---- Forward classes for Task 2 (guided IA) -------------------------- */
/* Country-context header (services region). */
.im-nav-ctx { display: flex; align-items: baseline; gap: var(--im-space-2);
  margin-bottom: var(--im-space-1); }
.im-nav-ctx__name { font-family: var(--im-font-display); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--im-ink); }
.im-nav-ctx__sub { display: block; font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 12.5px; color: var(--im-text-muted); margin: 0 0 var(--im-space-4); }
/* Two-region guided grid: services (left) + switcher (right). */
.im-mega-guided { display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--im-space-8); }
@media (max-width: 991.98px) { .im-mega-guided { grid-template-columns: 1fr; gap: var(--im-space-5); } }
/* Guided path rows. */
.im-nav-paths { display: flex; flex-direction: column; }
.im-nav-paths--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--im-space-6); }
/* The two-up category grid is a desktop-panel idiom. At 390px it leaves ~121px
   columns, so "Family and Settlement Visas" wraps to three lines. One column on
   mobile. MUST sit after the rule above: same specificity, so source order
   decides and a media query adds none. */
@media (max-width: 991.98px) { .im-nav-paths--cols { grid-template-columns: 1fr; } }
.im-nav-path { display: flex; gap: var(--im-space-3); text-decoration: none;
  color: var(--im-ink); padding: var(--im-space-3) 0;
  border-top: 1px solid var(--im-hairline); }
.im-nav-path:last-child { border-bottom: 1px solid var(--im-hairline); }
.im-nav-path__no { font-family: var(--im-font-display); font-size: 12px;
  color: var(--im-accent-200); padding-top: 3px; }
.im-nav-path__title { font-family: var(--im-font-display); font-weight: 600;
  font-size: 18px; line-height: 1.15; }
.im-nav-path__desc { display: block; font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 12.5px; color: var(--im-text-muted); line-height: 1.4; margin-top: 2px; }
.im-nav-path:hover .im-nav-path__title { color: var(--im-accent-200); }
.im-nav-path:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }

/* ---- Employer panel: a ledger above, a directory below ---------------- */
/* The offerings are a ledger — numbered, each with a descriptor, one hairline
 * per row. The routes under them are a directory — bare names. Giving both the
 * same ruled-row treatment meant one device (a 1px hairline) separated rows AND
 * sections, so the section break read as just another row line among nine. The
 * routes therefore drop their rules, and the break becomes a 2px ink rule: the
 * weight .im-mega-panel already uses on its own top edge for a boundary of a
 * different order. Two kinds of thing, two treatments, one real break. */
.im-biz-section-header--break {
  border-top: 2px solid var(--im-ink);
  margin-top: var(--im-space-8);
  padding-top: var(--im-space-6);
}
/* The ledger's closing hairline would land a few pixels above that 2px rule and
 * read as a doubled line. The break closes the ledger instead. Scoped by :has
 * so the individuals panel, which has no section under it, keeps its own. */
.im-nav-paths:has(+ .im-biz-section-header--break) .im-nav-path:last-child {
  border-bottom: 0;
}
/* A two-column grid gets NO closing rule, because :last-child is DOM order, not
 * position: at an even count (6 employer routes) it lands under the right
 * column, at an odd one (7 UK categories) under the left, so the same rule drew
 * a different, arbitrary-looking asymmetry in each panel — and would flip again
 * the first time a market had an odd number of routes. Without it the grid ends
 * where its items end, symmetrically, at any count. The stacked list keeps its
 * closing rule: with one column there is no parity to get wrong. */
.im-nav-paths--cols .im-nav-path:last-child { border-bottom: 0; }
/* The row hairlines STAY. An earlier cut removed them from the directory and
 * the names floated: the rules are what give a bare list its rhythm and its
 * scan lines. The problem was never that rows were ruled, it was that the
 * section break was ruled the SAME WAY — so the break carries the weight now
 * and the row rules read as subordinate to it, which is the hierarchy that
 * was missing. Rows keep .im-nav-path's own border-top/last-child rule. */

/* Destination switcher aside. */
.im-nav-switcher { background: var(--im-band); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-5); }
.im-nav-switcher__prompt { font-family: var(--im-font-display); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--im-text-muted);
  margin-bottom: var(--im-space-1); }
.im-nav-switcher__sub { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 12px; color: var(--im-text-muted); line-height: 1.45; margin-bottom: var(--im-space-3); }
.im-nav-switcher__browse { display: inline-block; margin-top: var(--im-space-3);
  font-family: var(--im-font-display); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--im-ink); text-decoration: none;
  border-bottom: 1px solid var(--im-accent-200); padding-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .im-mega-panel, .im-country-menu { transition: none; }
}

/* ---- Audience mega-panels: header-width curtains + depth (Task 2) ----- */
/* Audience items anchor their panel to the PILL (header-width), not the trigger.
 * Tools/Resources keep .im-mega-nav-item's position:relative (narrow, anchored). */
.im-mega-nav-item--audience { position: static; }

@media (min-width: 992px) {
  .im-mega-panel--individuals,
  .im-mega-panel--businesses {
    left: 0; right: 0; min-width: 0;
    padding: var(--im-space-8) var(--im-space-8) var(--im-space-10);
  }
  .im-mega-panel--individuals .im-mega-guided,
  .im-mega-panel--businesses .im-mega-guided {
    grid-template-columns: 1.55fr 1fr; gap: var(--im-space-12);
  }
  /* Depth: stacked paths get larger titles + roomier rows in the wide panel. */
  .im-mega-panel--individuals .im-nav-path,
  .im-mega-panel--businesses .im-nav-path { padding: var(--im-space-5) 0; }
  .im-mega-panel--individuals .im-nav-path__title,
  .im-mega-panel--businesses .im-nav-path__title { font-size: 23px; }
  /* The directory below the break is secondary to the ledger above it, and a
   * bare name needs less room than a described entry. Smaller and tighter is
   * what makes the two read as different kinds of thing rather than one long
   * list that changed its mind. */
  .im-mega-panel--businesses .im-nav-paths--compact .im-nav-path { padding: var(--im-space-3) 0; }
  .im-mega-panel--businesses .im-nav-paths--compact .im-nav-path__title { font-size: 19px; }
}

/* Right-column aside: switcher stacked over the featured card. */
.im-mega-aside { display: flex; flex-direction: column; gap: var(--im-space-4); }

/* Featured card — dark ink card; the whole card is one link, the CTA is a span. */
.im-nav-feature { display: flex; flex-direction: column; background: var(--im-ink);
  border-radius: var(--im-radius-card); padding: var(--im-space-5); text-decoration: none; }
.im-nav-feature__kicker { font-family: var(--im-font-display); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: color-mix(in srgb, var(--im-paper) 55%, transparent); }
.im-nav-feature__title { font-family: var(--im-font-display); font-weight: 600; font-size: 20px;
  line-height: 1.12; color: var(--im-paper); margin: var(--im-space-2) 0 var(--im-space-1); }
.im-nav-feature__body { font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--im-paper) 78%, transparent); }
.im-nav-feature__cta { margin-top: var(--im-space-4); align-self: flex-start; display: inline-flex;
  align-items: center; min-height: 44px; padding: 10px 15px; border-radius: var(--im-radius-control);
  background: var(--im-paper); color: var(--im-ink);
  font-family: var(--im-font-body, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  font-weight: 600; font-size: 13px; }
.im-nav-feature:hover .im-nav-feature__title { color: var(--im-paper); }
.im-nav-feature:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; }

/* Backdrop dim — pure CSS, revealed only while an audience panel is open (desktop).
 * Anchored to the navbar's BOTTOM edge (top:100%), not the viewport, so it dims
 * only the page below the bar. If it covered the bar (the old inset:0), its ink
 * tint painted over the translucent veil and greyed it on hover — and bled back
 * through as both faded on un-hover. Absolute inside the fixed navbar keeps the
 * nav strip clean and light while the page behind the open menu recedes. */
.im-nav-scrim { position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
  z-index: 1020; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--im-ink) 28%, transparent);
  transition: opacity var(--im-dur) var(--im-ease); }
@media (min-width: 992px) {
  .navbar:has(.im-mega-nav-item--audience:hover) .im-nav-scrim,
  .navbar:has(.im-mega-nav-item--audience:focus-within) .im-nav-scrim { opacity: 1; }
}
@supports not selector(:has(*)) { .im-nav-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .im-nav-scrim { transition: none; } }

/* ======================================================================
   Mobile menu — full-screen sheet (Harvey / Legora register)
   Replaces the boxed drawer: the toggler opens an opaque paper sheet over
   the whole viewport with large, airy links and the actions pinned to the
   bottom. The brand + toggler ride above the sheet; the toggler becomes a
   close (X). Mega-panel accordion behaviour (above) is unchanged.
   ====================================================================== */
@media (max-width: 991.98px) {
  /* The head of the open sheet: the room the brand and close button need above
     the list. It is a named value rather than a literal because the sheet's
     padding and the list's scrollport both depend on it being the SAME room —
     see .navbar-nav below, where making the list the scroller is what stops
     this reservation scrolling away with its content. */
  .navbar.fixed-top { --im-sheet-head: calc(env(safe-area-inset-top, 0px) + 4.75rem); }

  /* Brand + toggler stay above the sheet so the logo and close are visible. */
  .navbar.fixed-top .navbar-brand,
  .navbar.fixed-top .navbar-toggler { position: relative; z-index: 2; }


  /* The sheet. Bootstrap toggles .show / .collapsing; height:auto neutralises
     its height animation so the sheet is full-height from the first frame (we
     run our own fade instead). Every sheet rule below matches BOTH classes:
     Bootstrap holds .collapsing for the whole transition wait before granting
     .show, and any rule scoped to .show alone renders the sheet with desktop
     link styling for that window, then visibly re-renders. */
  .navbar-collapse:is(.show, .collapsing) {
    position: fixed;
    inset: 0;
    z-index: 1;
    height: auto !important;
    max-height: none;
    margin: 0;
    border: 0;
    background: var(--im-paper);
    padding: var(--im-sheet-head)
             var(--im-space-6)
             calc(env(safe-area-inset-bottom, 0px) + var(--im-space-6));
    display: flex;
    flex-direction: column;
    /* the SHEET does not scroll — the list inside it does. See .navbar-nav. */
    overflow: hidden;
  }
  /* Same animation-name on both classes, so the .collapsing -> .show swap does
     not restart the fade. */
  .navbar-collapse:is(.show, .collapsing) { animation: im-menu-in var(--im-dur) var(--im-ease); }

  /* Bootstrap's .collapsing carries `transition: height .35s` and Collapse
     waits that long before swapping to .show — timing a height animation the
     `height:auto !important` above has already neutralised. Zero it so .show
     (and the body scroll-lock / cookie-overlay rules keyed to it) lands on the
     next tick instead of 350ms late. */
  .navbar-collapse.collapsing { transition: none; }

  /* While the sheet is up, drop the veil's FILTER but keep an OPAQUE fill. The
     filter has to go: backdrop-filter makes the navbar the CONTAINING BLOCK for
     fixed descendants (Filter Effects 2), so with it on — page scrolled
     (.im-nav-scrolled) or any accordion trigger at aria-expanded="true" — the
     sheet's inset:0 resolves against the navbar's ~100px box instead of the
     viewport and the menu collapses to a broken strip.

     The fill must STAY, and making it transparent was the bug behind "the logo
     goes over the nav items when you scroll". The brand rides above the sheet at
     z-index 2 while the sheet scrolls underneath it; with nothing behind the
     brand, the first links scrolled straight through the logo.

     The fill cannot be the fix, and trying it first is instructive: the sheet is
     a DESCENDANT of the navbar, so any background on the navbar paints beneath
     the sheet, not between the sheet and the brand. Masking it from above was
     the second dead end. What actually fixes it is structural and carries no
     mask at all: the sheet stops scrolling and the list inside it scrolls, so
     nothing can reach the reserved head in the first place (see .navbar-nav).
     Specificity ties the :has(aria-expanded) veil rule at (0,4,0); this sits
     later in the file, so source order decides in its favour — keep it below
     the veil rules. */
  .navbar.fixed-top:has(.navbar-collapse.show),
  .navbar.fixed-top:has(.navbar-collapse.collapsing) {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  /* Lock the page behind the open sheet. */
  body:has(.navbar-collapse.show) { overflow: hidden; }

  /* The Silktide cookie-consent overlay is position:fixed at z-index 99999, so
     it otherwise sits ON TOP of the open menu sheet, covering the middle links
     and intercepting every tap ("the burger bugs out"). Hide it while the sheet
     is open — it reappears when the sheet closes, and consent is still solicited
     on load and after close, so the consent gate is unaffected. */
  body:has(.navbar-collapse.show) #silktide-wrapper,
  body:has(.navbar-collapse.show) #silktide-backdrop { display: none !important; }

  /* Same treatment for the back-to-top FAB (fixed, z-index 1030): it rides
     above the sheet and overlaps the bottom CTA once the page is scrolled. */
  body:has(.navbar-collapse.show) .btn-scroll-top { display: none !important; }

  /* Toggler → X while open is handled by theme.css (the .navbar-toggler-icon
     bars rotate into an X on [aria-expanded="true"]). Do NOT draw a second X
     here — a pseudo-element X on top of the theme's produced a double cross. */

  /* The list fills the sheet so the actions can sit at the bottom, AND it is the
     thing that scrolls. min-height:0 is the load-bearing declaration: a flex
     child will not shrink below its content height without it, so the list would
     push past the sheet instead of scrolling inside it.

     Scrolling the list rather than the sheet is what makes the reserved head
     structural instead of decorative — padding on a scroll container scrolls
     away with its content, which is how the first links ended up travelling
     through the logo. It also keeps the bottom actions reachable: with the whole
     sheet scrolling, Login and Book a consultation sat below the fold on any
     short viewport and you had to scroll the menu to find them. */
  .navbar-collapse:is(.show, .collapsing) .navbar-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Large, airy top-level links with full-width hairline dividers, all left
     aligned. Triggers keep their inline-flex layout (label left, chevron right)
     from the rule above; plain <a> links need display:block + width:100% to
     stretch to a full-width divider the way the width:100% buttons already do. */
  .navbar-collapse:is(.show, .collapsing) .nav-link,
  .navbar-collapse:is(.show, .collapsing) .im-mega-trigger {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: 1;
    text-align: left;
    padding: var(--im-space-4) 0;
    border-bottom: 1px solid var(--im-hairline);
  }
  .navbar-collapse:is(.show, .collapsing) a.nav-link { display: block; width: 100%; }
  .navbar-collapse:is(.show, .collapsing) .im-mega-trigger .im-chevron { font-size: 15px; opacity: .6; }

  /* Actions (country chip + login + CTA) pinned to the bottom of the sheet.
     Target the country-chip row via :has so it is robust to markup order, and
     !important to beat Bootstrap's mt-2 utility (which is itself !important). */
  .navbar-collapse:is(.show, .collapsing) .navbar-nav > li:has(.im-country-chip) {
    margin-top: auto !important;
    padding-top: var(--im-space-6);
  }
  .navbar-collapse:is(.show, .collapsing) .nav-item.d-lg-none .btn { min-height: 52px; font-size: 1rem; }

  @keyframes im-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .navbar-collapse:is(.show, .collapsing) { animation: none; }
}