/* ═══════════════════════════════════════════════════════════════════════════
   NAV-2027  —  "N27"  ·  morphing mega-menu layer
   ---------------------------------------------------------------------------
   Replaces the 2026 full-bleed `.mega-menu` sheets. Problems it fixes:
     · the Product panel was a vertical tab rail whose "Platform" tab held ONE
       link — roughly half the panel was dead white space.
     · every panel spanned the full viewport edge-to-edge, so a 3-column menu
       floated inside a 1900px white band. Reads as 2020 SaaS, not 2027.
     · Product used tabs while Solutions/Resources/Company used columns — four
       menus, two unrelated mental models.
     · each menu was its own sheet, so switching menus was a hard cut.

   What this layer does instead (the current real-world state of the art —
   Stripe / Linear / Vercel / Framer):
     · ONE floating rounded card that MORPHS (width + height + x-position)
       between menus, with a direction-aware crossfade of the contents.
     · a caret that tracks the active trigger, and a rail underline that
       slides between nav items.
     · every menu shares one skeleton: grouped columns + one editorial ink
       card + an in-card utility footer. Product adds a full-width spotlight
       row so "Platform Overview" leads instead of stranding a tab.
     · content-fit sizing — the card is exactly as wide as its columns.

   BRAND: palette locked (navy #0D1B3E · persimmon #E8593A · sky #3B86BC ·
   sage #7A9E8E). Eyebrows keep the Round-6 corner-bracket standard. Ink cards
   carry the H27 dark-act language so the nav matches the homepage.

   LOADING: linked from base_public.html AFTER brand-2026.css / ux-2027.css so
   every rule wins on cascade order without !important. Scoped under `.n27`.

   The old `.mega-*` rules in styles.css / ux-2027.css / brand-2026.css are now
   dead — no markup uses those classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ §0 · TOKENS ═════════════════════════════════════════════════════════ */

.n27 {
  --n27-ink:      #0A1330;
  --n27-navy:     #0D1B3E;
  --n27-navy-up:  #14244F;

  --n27-coral:    #E8593A;
  --n27-coral-lt: #FFAB96;
  --n27-sky:      #3B86BC;
  --n27-sage:     #7A9E8E;

  --n27-paper: #FFFFFF;
  --n27-ice:   #F7FAFD;
  --n27-ice-2: #EDF4FB;
  --n27-hair:  #E3EAF2;

  --n27-body: #2D2D3E;
  --n27-mute: #5F718C;

  /* geometry — column width drives the card width, so the card is always
     exactly as wide as its content (no dead space, ever). Card width works
     out to `3 x col + col-gaps(16) + body-gap(22) + aside + 2 x pad`; the
     §10 tiers keep that under the viewport at every width. */
  --n27-col:   268px;
  --n27-aside: 284px;
  --n27-pad:   26px;
  --n27-r:     22px;

  --n27-ease:   cubic-bezier(.22, .61, .36, 1);
  --n27-spring: cubic-bezier(.16, 1, .3, 1);

  --n27-e1: 0 1px 2px rgba(13,27,62,.06);
  --n27-e3: 0 18px 44px rgba(13,27,62,.13), 0 4px 12px rgba(13,27,62,.06);
  --n27-e4: 0 32px 80px rgba(10,19,48,.18), 0 10px 28px rgba(10,19,48,.09),
            0 0 0 1px rgba(13,27,62,.055);
}

/* ══ §1 · TRIGGER ROW ════════════════════════════════════════════════════ */

.n27 .n27-nav {
  position: relative;
  display: flex;
  align-items: center;
}

.n27 .n27-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.n27 .n27-item { position: relative; display: flex; }

.n27 .n27-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 9px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--n27-navy);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: color 220ms var(--n27-ease), background-color 220ms var(--n27-ease);
}

.n27 .n27-trigger:hover,
.n27 .n27-trigger[aria-expanded="true"] { color: var(--n27-sky); }

.n27 .n27-trigger:focus-visible {
  outline: 2px solid var(--n27-coral);
  outline-offset: 2px;
}

.n27 .n27-trigger__caret {
  width: 12px;
  height: 12px;
  flex: none;
  color: #98A8BE;
  transition: transform 320ms var(--n27-spring), color 220ms var(--n27-ease);
}
.n27 .n27-trigger:hover .n27-trigger__caret { color: var(--n27-sky); }
.n27 .n27-trigger[aria-expanded="true"] .n27-trigger__caret {
  transform: rotate(180deg);
  color: var(--n27-sky);
}

/* Sliding underline — one shared element that travels between triggers
   instead of four independent ::after underlines fading in and out. */
.n27 .n27-rail {
  position: absolute;
  bottom: 4px;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--n27-coral);
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  transition:
    transform 420ms var(--n27-spring),
    width     420ms var(--n27-spring),
    opacity   200ms var(--n27-ease);
}
.n27 .n27-rail.is-on { opacity: 1; }

/* The 2026 layer draws a persimmon underline on any header nav button.
   Neutralised here so it can't fight the shared rail. */
.n27 .header__nav .n27-trigger::after { content: none; }

/* ══ §2 · SCRIM ══════════════════════════════════════════════════════════ */

.n27 .n27-scrim {
  position: fixed;
  inset: 0;
  top: var(--header-height, 72px);
  background: rgba(10, 19, 48, .22);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  z-index: 996;
  transition: opacity 340ms var(--n27-ease);
}
.n27 .n27-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ══ §3 · THE MORPHING CARD ══════════════════════════════════════════════ */

.n27 .n27-flyout {
  position: fixed;
  top: calc(var(--header-height, 72px) - 4px);
  left: 0;
  z-index: 999;
  /* --n27-x / --n27-w / --n27-h are written by nav-2027.js */
  transform: translate3d(var(--n27-x, 0px), 0, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform  460ms var(--n27-spring),
    opacity    220ms var(--n27-ease),
    visibility 220ms linear;
}
.n27 .n27-flyout.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* first open drops in; menu-to-menu switches only slide sideways */
.n27 .n27-flyout.is-entering .n27-flyout__card { animation: n27Drop 380ms var(--n27-spring) both; }
@keyframes n27Drop {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.n27 .n27-flyout__card {
  position: relative;
  width: var(--n27-w, 900px);
  height: var(--n27-h, 380px);
  overflow: hidden;
  background: var(--n27-paper);
  border-radius: var(--n27-r);
  box-shadow: var(--n27-e4);
  transition:
    width  460ms var(--n27-spring),
    height 460ms var(--n27-spring);
}

/* top-edge light catch — sells the card as a physical plane */
.n27 .n27-flyout__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255,255,255,.9);
  z-index: 3;
  pointer-events: none;
}

/* caret that tracks the active trigger */
.n27 .n27-flyout__arrow {
  position: absolute;
  top: -5px;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--n27-paper);
  border-radius: 3px;
  transform: translate3d(var(--n27-arrow, 120px), 0, 0) rotate(45deg);
  box-shadow: -1px -1px 0 rgba(13,27,62,.05);
  transition: transform 460ms var(--n27-spring);
  z-index: 2;
}

/* ══ §4 · SHEETS (one per menu, crossfaded) ══════════════════════════════ */

.n27 .n27-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--n27-slide, 22px), 0, 0);
  transition:
    opacity    240ms var(--n27-ease),
    transform  380ms var(--n27-spring),
    visibility 240ms linear;
}
.n27 .n27-sheet.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 60ms, 60ms, 0s;
}

.n27 .n27-sheet__body {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: var(--n27-pad) var(--n27-pad) 22px;
}

/* ── column block ── */
.n27 .n27-groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--n27-col);
  gap: 0 8px;
}
/* Product carries a spotlight row above its three groups */
.n27 .n27-groups--stacked {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(3, var(--n27-col));
  gap: 16px 8px;
}
.n27 .n27-groups--stacked > .n27-spotlight { grid-column: 1 / -1; }

.n27 .n27-group { display: flex; flex-direction: column; }
.n27 .n27-group + .n27-group { position: relative; }
.n27 .n27-groups:not(.n27-groups--stacked) .n27-group + .n27-group::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--n27-hair);
}

.n27 .n27-group__label {
  margin: 0 0 8px;
  padding: 0 10px 9px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7A8AA3;
  border-bottom: 1px solid var(--n27-hair);
}

/* ── link tile ── */
.n27 .n27-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  isolation: isolate;
  transition: background-color 200ms var(--n27-ease), transform 260ms var(--n27-ease);
}
.n27 .n27-tile::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--n27-coral);
  transform: translateY(-50%);
  transition: height 280ms var(--n27-spring);
}
.n27 .n27-tile:hover,
.n27 .n27-tile:focus-visible {
  background: var(--n27-ice);
  transform: translateX(2px);
}
.n27 .n27-tile:hover::before,
.n27 .n27-tile:focus-visible::before { height: 22px; }
.n27 .n27-tile:focus-visible {
  outline: 2px solid var(--n27-coral);
  outline-offset: 1px;
}

.n27 .n27-tile__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E6ECF5;
  color: var(--n27-navy);
  transition: transform 340ms var(--n27-spring), box-shadow 240ms var(--n27-ease);
}
.n27 .n27-tile__icon svg { width: 17px; height: 17px; }
.n27 .n27-tile:hover .n27-tile__icon { transform: scale(1.07) rotate(-3deg); }

.n27 .n27-tile__icon[data-tone="sky"]   { background: #DCF0FA; color: #1F5F8B; }
.n27 .n27-tile__icon[data-tone="sage"]  { background: #E6EFEA; color: #43705E; }
.n27 .n27-tile__icon[data-tone="coral"] { background: #FDEEE9; color: #C94A2D; }
.n27 .n27-tile__icon[data-tone="navy"]  { background: #E6ECF5; color: #0D1B3E; }

.n27 .n27-tile__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n27 .n27-tile__txt strong {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--n27-navy);
  letter-spacing: -.006em;
}
.n27 .n27-tile__txt span {
  font-size: 12.2px;
  line-height: 1.4;
  color: var(--n27-mute);
}
.n27 .n27-tile:hover .n27-tile__txt strong { color: var(--n27-sky); }

.n27 .n27-tile__go {
  flex: none;
  align-self: center;
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--n27-sky);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms var(--n27-ease), transform 280ms var(--n27-spring);
}
.n27 .n27-tile:hover .n27-tile__go,
.n27 .n27-tile:focus-visible .n27-tile__go { opacity: 1; transform: none; }

/* ── spotlight row (Product) ── */
.n27 .n27-spotlight {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--n27-ice-2);
  border: 1px solid var(--n27-hair);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 240ms var(--n27-ease), box-shadow 280ms var(--n27-ease), transform 280ms var(--n27-ease);
}
.n27 .n27-spotlight::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
.n27 .n27-spotlight:hover {
  border-color: #C9DCEE;
  box-shadow: var(--n27-e3);
  transform: translateY(-1px);
}
.n27 .n27-spotlight:focus-visible { outline: 2px solid var(--n27-coral); outline-offset: 2px; }

.n27 .n27-spotlight__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--n27-navy);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,27,62,.22);
  transition: transform 340ms var(--n27-spring);
}
.n27 .n27-spotlight__icon svg { width: 19px; height: 19px; }
.n27 .n27-spotlight:hover .n27-spotlight__icon { transform: scale(1.06) rotate(-3deg); }

.n27 .n27-spotlight__txt { display: flex; flex-direction: column; gap: 2px; }
.n27 .n27-spotlight__txt strong {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--n27-navy);
  letter-spacing: -.01em;
}
.n27 .n27-spotlight__txt span { font-size: 12.6px; color: var(--n27-mute); }

.n27 .n27-spotlight__go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--n27-sky);
  white-space: nowrap;
  z-index: 1;
}
.n27 .n27-spotlight__go svg { width: 14px; height: 14px; transition: transform 300ms var(--n27-spring); }
.n27 .n27-spotlight:hover .n27-spotlight__go svg { transform: translateX(4px); }

/* ══ §5 · EDITORIAL INK CARD (right rail) ════════════════════════════════ */

.n27 .n27-aside {
  position: relative;
  flex: none;
  width: var(--n27-aside);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 20px 20px 18px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--n27-ink);
  color: rgba(255,255,255,.78);
  isolation: isolate;
}
/* H27 dark-act atmosphere: engineered grid + slow brand aurora */
.n27 .n27-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 72%);
}
.n27 .n27-aside::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: none;
  filter: blur(6px);
}

.n27 .n27-aside__badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-bottom: 12px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--n27-coral);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Round-6 eyebrow standard — corner-bracket ticks, free-coral on dark */
.n27 .n27-aside__label {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--n27-coral-lt);
}
.n27 .n27-aside__label::before,
.n27 .n27-aside__label::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-style: solid;
  border-color: var(--n27-coral-lt);
}
.n27 .n27-aside__label::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.n27 .n27-aside__label::after  { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.n27 .n27-aside__title {
  margin: 0 0 8px;
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: 23px;
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
  letter-spacing: -.01em;
}
.n27 .n27-aside__quote {
  margin: 0 0 12px;
  font-family: var(--font-display, 'DM Serif Display', Georgia, serif);
  font-size: 16.5px;
  line-height: 1.42;
  font-style: italic;
  color: #fff;
}
.n27 .n27-aside__text {
  margin: 0 0 14px;
  font-size: 12.6px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}
.n27 .n27-aside__cite {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 14px;
  font-style: normal;
  font-size: 11.8px;
  color: rgba(255,255,255,.55);
}
.n27 .n27-aside__cite strong { font-size: 12.6px; font-weight: 600; color: #fff; }

.n27 .n27-aside__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  font-size: 12.6px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 220ms var(--n27-ease), border-color 220ms var(--n27-ease);
}
.n27 .n27-aside__cta svg { width: 13px; height: 13px; transition: transform 300ms var(--n27-spring); }
.n27 .n27-aside__cta:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.38); }
.n27 .n27-aside__cta:hover svg { transform: translateX(4px); }
.n27 .n27-aside__cta:focus-visible { outline: 2px solid var(--n27-coral-lt); outline-offset: 2px; }

/* ══ §6 · IN-CARD UTILITY FOOTER ═════════════════════════════════════════ */

.n27 .n27-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: auto;
  padding: 13px var(--n27-pad);
  background: var(--n27-ice);
  border-top: 1px solid var(--n27-hair);
}
.n27 .n27-foot__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--n27-mute);
}
.n27 .n27-foot__actions { display: flex; align-items: center; gap: 14px; }
.n27 .n27-foot__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--n27-sky);
  text-decoration: none;
  white-space: nowrap;
}
.n27 .n27-foot__link svg { width: 14px; height: 14px; transition: transform 300ms var(--n27-spring); }
.n27 .n27-foot__link:hover svg { transform: translateX(4px); }
.n27 .n27-foot__btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border-radius: 10px;
  background: var(--n27-coral);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--n27-e1);
  transition: transform 220ms var(--n27-ease), box-shadow 220ms var(--n27-ease), background-color 220ms var(--n27-ease);
}
.n27 .n27-foot__btn:hover {
  background: #D24C2F;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(232,89,58,.28);
}
.n27 .n27-foot__btn:active { transform: none; }
.n27 .n27-foot__link:focus-visible,
.n27 .n27-foot__btn:focus-visible { outline: 2px solid var(--n27-coral); outline-offset: 2px; }

/* ══ §7 · CONTENT STAGGER (first open only) ══════════════════════════════ */

.n27 .n27-sheet.is-active.is-fresh .n27-group,
.n27 .n27-sheet.is-active.is-fresh .n27-spotlight,
.n27 .n27-sheet.is-active.is-fresh .n27-aside {
  animation: n27Rise 420ms var(--n27-spring) both;
}
.n27 .n27-sheet.is-active.is-fresh .n27-spotlight { animation-delay: 40ms; }
.n27 .n27-sheet.is-active.is-fresh .n27-group:nth-of-type(1) { animation-delay: 70ms; }
.n27 .n27-sheet.is-active.is-fresh .n27-group:nth-of-type(2) { animation-delay: 105ms; }
.n27 .n27-sheet.is-active.is-fresh .n27-group:nth-of-type(3) { animation-delay: 140ms; }
.n27 .n27-sheet.is-active.is-fresh .n27-aside { animation-delay: 175ms; }

@keyframes n27Rise {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ══ §8 · PAGE-EXIT COORDINATION ═════════════════════════════════════════
   main.js fades the body + page-transition overlay when an internal link is
   clicked. Dissolve the card on the same curve so nothing "shakes". */
.n27.is-nav-exiting .n27-flyout,
.n27.is-nav-exiting .n27-scrim {
  transition: opacity 280ms cubic-bezier(.4, 0, .6, 1), visibility 280ms linear;
  opacity: 0;
  pointer-events: none;
}
.n27.is-nav-exiting .n27-sheet,
.n27.is-nav-exiting .n27-group,
.n27.is-nav-exiting .n27-spotlight,
.n27.is-nav-exiting .n27-aside { animation: none; }

/* ══ §9 · MOTION / INPUT PREFERENCES ═════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .n27 .n27-flyout,
  .n27 .n27-flyout__card,
  .n27 .n27-flyout__arrow,
  .n27 .n27-sheet,
  .n27 .n27-rail { transition-duration: 1ms; }
  .n27 .n27-flyout.is-entering .n27-flyout__card,
  .n27 .n27-sheet.is-active.is-fresh .n27-group,
  .n27 .n27-sheet.is-active.is-fresh .n27-spotlight,
  .n27 .n27-sheet.is-active.is-fresh .n27-aside { animation: none; }
  .n27 .n27-tile:hover,
  .n27 .n27-spotlight:hover,
  .n27 .n27-foot__btn:hover { transform: none; }
}

/* ══ §10 · RESPONSIVE ════════════════════════════════════════════════════
   The card is content-sized, so each tier must keep
     3 x col + col-gaps(16) + body-gap(22) + aside + 2 x pad
   inside the header rail (viewport minus the 2 x 48px header gutter) —
   otherwise the card's overflow:hidden silently crops a column. Each tier is
   sized against the LOW end of its range:

     >= 1300 : 268/284 -> 1178px card, needs >= 1274px viewport
     1138-1299 : 236/252 -> 1042px card, needs >= 1138px
     1025-1137 : 204/216 ->  906px card, needs >= 1002px
     <= 1024 : nav hidden, hamburger takes over
*/
@media (max-width: 1299px) {
  .n27 { --n27-col: 236px; --n27-aside: 252px; --n27-pad: 22px; }
}

@media (max-width: 1137px) {
  .n27 { --n27-col: 204px; --n27-aside: 216px; --n27-pad: 20px; }
  .n27 .n27-trigger { padding: 9px 11px; font-size: 14px; }
  .n27 .n27-tile__txt span { font-size: 11.8px; }
}

/* styles.css hides .header__nav at <= 1024px but only reveals .header__toggle
   at <= 768px, which left 769-1024px with NO navigation at all — neither the
   desktop nav nor the hamburger. Reveal the hamburger at the same breakpoint
   that retires the nav so the range is navigable, and keep the flyout out of
   reach there since its triggers are gone. */
@media (max-width: 1024px) {
  .n27 .header__toggle { display: flex; }
  .n27 .n27-flyout,
  .n27 .n27-scrim { display: none; }
}