/* Furrsati v7 · the LIVE site nav (components/site/chrome/SiteNav, SiteSearch, LanguageSwitch, DoorSwitch),
   ported rule for rule to plain CSS. Markup: build-v7/partials/nav.html. Behaviour: nav.js.
   - Fixed, transparent over the top of the page; past 12px of scroll (or while open) it becomes the glass pill.
   - Pressing a group unfolds the pill into ONE slab (a 0fr → 1fr grid row) carrying the whole map;
     a single tinted slab (.snav__lit) slides to the lit column.
   - Every offset is logical (inset-inline / padding-inline), never translateX, so ar.html mirrors for free.
   - backdrop-filter is NEVER transitioned: blurring the page while the fold animates its height made the
     live menu stutter (nav-open-animation-smoothness). The blur snaps on; only colours and the row animate.
   Tokens are the live site's client-world tokens (tokens.css), scoped to the nav so pages cannot drift them. */

.snav {
  /* live tokens.css · client world */
  --n-surface: #ffffff;
  --n-surface-2: #f3efe6;
  --n-ink: #031514;
  --n-ink-2: #42514f;
  --n-ink-3: #5f6b68;
  --n-line: rgba(4, 34, 35, .11);
  --n-line-soft: rgba(4, 34, 35, .07);
  --n-accent: #faa21b;
  --n-accent-text: #6e460e;
  --n-press: rgba(127, 127, 127, .12);
  --n-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --n-display: var(--display);
  --n-fill: 13%;
  --n-edge: 42%;
  --n-fast: 150ms;
  --n-normal: 250ms;
  --n-slow: 350ms;
  --n-ease: cubic-bezier(.16, 1, .3, 1);
  --n-ease-out: cubic-bezier(.22, .61, .36, 1);
  --n-gutter: 16px;
  --n-measure: 1200px;
  --hue: var(--n-accent);
  --hue-text: var(--n-accent-text);
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  padding-block: 10px;
  padding-inline: max(var(--n-gutter), env(safe-area-inset-left)) max(var(--n-gutter), env(safe-area-inset-right));
  font-family: var(--n-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--n-ink);
}
[dir="rtl"] .snav { --flip: -1; --n-ui: "Tajawal", system-ui, sans-serif; }
.snav [data-hue="orange"] { --hue: #faa21b; --hue-text: #8a5a12; }
.snav [data-hue="teal"] { --hue: #00aea9; --hue-text: #05696b; }
.snav [data-hue="indigo"] { --hue: #6b6ecb; --hue-text: #423f94; }
.snav [data-hue="pink"] { --hue: #d4658f; --hue-text: #96305c; }
.snav h2, .snav ul, .snav p { margin: 0; }
.snav ul { padding: 0; list-style: none; }
.snav svg { display: block; flex: none; }
.snav :focus-visible { outline: 2px solid var(--n-accent-text); outline-offset: 2px; border-radius: 4px; }

/* the scroll hairline: compositor-only where scroll timelines exist, absent elsewhere */
.snav__progress { display: none; position: absolute; top: 0; inset-inline: 0; block-size: 2px; background: var(--n-accent); transform-origin: calc(50% - 50% * var(--flip, 1)) 50%; scale: 0 1; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .snav__progress { display: block; animation: snav-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes snav-progress { from { scale: 0 1; } to { scale: 1 1; } }

.snav__bar {
  pointer-events: auto;
  position: relative;
  max-inline-size: calc(var(--n-measure) - var(--n-gutter) * 2 + 32px);
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color var(--n-normal) var(--n-ease-out), border-color var(--n-normal) var(--n-ease-out), border-radius var(--n-normal) var(--n-ease);
}
.snav__row { display: flex; align-items: center; gap: 12px; padding: 8px; padding-inline: 16px 8px; min-block-size: 60px; }
.snav[data-scrolled="true"] .snav__bar {
  border-color: color-mix(in srgb, var(--n-ink) 10%, transparent);
  background: color-mix(in srgb, var(--n-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}
.snav[data-open] .snav__bar { border-radius: 24px; background: color-mix(in srgb, var(--n-surface) 95%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .snav[data-scrolled="true"] .snav__bar { background: var(--n-surface); }
}

.snav__brand { display: inline-flex; align-items: center; padding-block: 9px; min-block-size: 44px; border-radius: 11px; flex-shrink: 0; }
.snav__logo { block-size: 26px; inline-size: auto; display: block; }

/* ── the four groups (desktop) ── */
.snav__groups { display: none; align-items: center; gap: 2px; margin-inline-end: auto; }
.snav__group {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 13px;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  font-family: var(--n-ui); font-weight: 500; font-size: .875rem; line-height: 1; color: var(--n-ink-2); white-space: nowrap; cursor: pointer;
  transition: color var(--n-normal) var(--n-ease-out), background-color var(--n-normal) var(--n-ease-out), border-color var(--n-normal) var(--n-ease-out);
}
.snav__group[data-lit] { font-weight: 600; color: var(--hue-text); background: color-mix(in srgb, var(--hue) var(--n-fill), transparent); border-color: color-mix(in srgb, var(--hue) 30%, transparent); }
.snav__dot { inline-size: 7px; block-size: 7px; border-radius: 999px; background: var(--hue); opacity: 0; scale: .4; transition: opacity var(--n-normal) var(--n-ease-out), scale var(--n-normal) var(--n-ease); }
.snav__group[data-lit] .snav__dot { opacity: 1; scale: 1; }
.snav__chev { inline-size: 15px; block-size: 15px; transition: rotate var(--n-fast) var(--n-ease-out); }
.snav__group[data-lit] .snav__chev { rotate: 180deg; }

.snav__right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.snav__kbd { direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border: 1px solid var(--n-line); border-radius: 6px; color: var(--n-ink-3); font-family: var(--n-ui); font-size: .71875rem; font-weight: 500; line-height: 1; }

/* the CTA: a 13% wash on a 42% hairline, never a solid fill. It opens the get-the-app sheet. */
.snav__cta {
  display: none; align-items: center; min-block-size: 44px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--n-accent) var(--n-edge), transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--n-accent) var(--n-fill), transparent); color: var(--n-accent-text);
  font-family: var(--n-ui); font-weight: 600; font-size: .875rem; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--n-fast) var(--n-ease-out);
}
.snav__menu { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--n-line); border-radius: 999px; background: var(--n-surface); color: var(--n-ink); cursor: pointer; flex: none; }
.snav__bars { position: relative; display: block; inline-size: 17px; block-size: 11px; }
.snav__bars > span { position: absolute; inset-inline: 0; block-size: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--n-fast) var(--n-ease-out); }
.snav__bars > span:first-child { top: 0; }
.snav__bars > span:last-child { bottom: 0; }
.snav[data-open] .snav__bars > span:first-child { transform: translateY(4.75px) rotate(45deg); }
.snav[data-open] .snav__bars > span:last-child { transform: translateY(-4.75px) rotate(-45deg); }

/* ── the slab: one grid row, 0fr → 1fr ── */
.snav__fold { display: grid; grid-template-rows: 0fr; will-change: grid-template-rows; transition: grid-template-rows 320ms var(--n-ease); }
.snav[data-open] .snav__fold { grid-template-rows: 1fr; }
.snav__foldin { min-block-size: 0; overflow: hidden; }
/* closed, nothing inside is focusable or announced; the links stay in the HTML */
.snav:not([data-open]) .snav__foldin { visibility: hidden; transition: visibility 0s 320ms; }
.snav__slab { padding: 2px 8px 8px; }

.snav__field {
  display: flex; align-items: center; gap: 12px; min-block-size: 52px; margin-block-end: 10px; margin-inline: 4px; inline-size: calc(100% - 8px);
  padding-inline: 16px 8px; border: 1px solid var(--n-line); border-radius: 999px; background: var(--n-surface-2); color: var(--n-ink-3);
  font-family: var(--n-ui); font-size: .96875rem; font-weight: 500; text-align: start; cursor: text;
  opacity: 0; translate: 0 -8px;
  transition: opacity var(--n-normal) var(--n-ease-out) 40ms, translate var(--n-normal) var(--n-ease) 40ms, border-color var(--n-fast) var(--n-ease-out);
}
.snav__field svg { inline-size: 19px; block-size: 19px; }
.snav[data-open] .snav__field { opacity: 1; translate: 0 0; }
.snav__field:hover { border-color: color-mix(in srgb, var(--n-ink) 20%, transparent); }
.snav__field.snav__field:focus, .snav__field.snav__field:focus-visible { outline: none; box-shadow: none; border-radius: 999px; border-color: color-mix(in srgb, var(--n-accent) var(--n-edge), transparent); background: color-mix(in srgb, var(--n-accent) 6%, transparent); }
.snav__fieldtext { flex: 1; min-inline-size: 0; }

/* ── the four-way switch (phone) ── */
.snav__seg {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 4px; margin-block-end: 10px;
  border: 1px solid var(--n-line); border-radius: 999px; background: var(--n-surface-2); isolation: isolate;
  opacity: 0; translate: 0 8px; transition: opacity var(--n-normal) var(--n-ease-out) 70ms, translate var(--n-normal) var(--n-ease) 70ms;
}
.snav[data-open] .snav__seg { opacity: 1; translate: 0 0; }
.snav__thumb {
  position: absolute; z-index: 0; inset-block: 4px; inline-size: calc(25% - 2px); inset-inline-start: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--hue) 15%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 32%, transparent);
  transition: inset-inline-start var(--n-normal) var(--n-ease), background-color var(--n-normal) var(--n-ease-out), border-color var(--n-normal) var(--n-ease-out);
}
.snav__thumb[data-seg="1"] { inset-inline-start: calc(25% + 2px); }
.snav__thumb[data-seg="2"] { inset-inline-start: 50%; }
.snav__thumb[data-seg="3"] { inset-inline-start: calc(75% - 2px); }
.snav__segb { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 4px; border: 0; border-radius: 999px; background: transparent; font-family: var(--n-ui); font-weight: 600; font-size: .78125rem; line-height: 1.2; color: var(--n-ink-3); white-space: nowrap; cursor: pointer; transition: color var(--n-normal) var(--n-ease-out); }
.snav__segb[aria-selected="true"] { color: var(--hue-text); }

/* ── the map ── */
.snav__map { position: relative; }
.snav__lit {
  display: none; position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0; inline-size: calc(25% - 6px); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 13%, transparent) 0%, color-mix(in srgb, var(--hue) 9%, transparent) 42%, color-mix(in srgb, var(--hue) 2%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent); opacity: 0;
  transition: inset-inline-start var(--n-slow) var(--n-ease), background var(--n-normal) var(--n-ease-out), border-color var(--n-normal) var(--n-ease-out), opacity var(--n-normal) var(--n-ease-out);
}
.snav__lit[data-col="1"] { inset-inline-start: calc(25% + 2px); }
.snav__lit[data-col="2"] { inset-inline-start: calc(50% + 4px); }
.snav__lit[data-col="3"] { inset-inline-start: calc(75% + 6px); }
.snav[data-open] .snav__lit { opacity: 1; }
.snav__col { position: relative; z-index: 1; padding: 12px 10px 10px; }
.snav__colhead {
  position: relative; margin: 0 0 8px; padding: 0 4px 11px; font-family: var(--n-display); font-weight: 700; font-size: 1.4375rem; line-height: 1; letter-spacing: -.025em; color: var(--hue-text);
  opacity: 0; translate: -8px 0; transition: opacity var(--n-normal) var(--n-ease-out), translate var(--n-normal) var(--n-ease);
}
.snav[data-open] .snav__colhead { opacity: 1; translate: 0 0; }
.snav__rule { position: absolute; inset-inline: 4px; bottom: 0; block-size: 1px; background: color-mix(in srgb, var(--hue) 38%, transparent); transform-origin: calc(50% - 50% * var(--flip, 1)) 50%; scale: 0 1; transition: scale 620ms var(--n-ease); }
.snav[data-open] .snav__rule { scale: 1 1; }
.snav__link { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 13px; text-decoration: none; opacity: 0; translate: 0 14px; transition: opacity var(--n-normal) var(--n-ease-out), translate var(--n-normal) var(--n-ease), background-color var(--n-fast) var(--n-ease-out); }
.snav[data-open] .snav__link { opacity: 1; translate: 0 0; }
.snav__lt { font-family: var(--n-ui); font-weight: 600; font-size: .9375rem; line-height: 1.33; color: var(--n-ink); }
.snav__ln { font-family: var(--n-ui); font-weight: 400; font-size: .8125rem; line-height: 1.36; color: var(--n-ink-3); }

/* Guides: two documents, drawn as tiles */
.snav__col--tiles { display: flex; flex-direction: column; }
.snav__tile {
  display: flex; flex: 1 1 auto; max-block-size: 196px; flex-direction: column; gap: 5px; padding: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--hue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 26%, transparent); text-decoration: none;
  opacity: 0; translate: 0 16px; transition: opacity var(--n-normal) var(--n-ease-out), translate var(--n-normal) var(--n-ease), background-color var(--n-fast) var(--n-ease-out);
}
.snav[data-open] .snav__tile { opacity: 1; translate: 0 0; }
.snav__tile + .snav__tile { margin-block-start: 10px; }
.snav__tt { font-family: var(--n-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.05; letter-spacing: -.02em; color: var(--hue-text); }
.snav__tn { font-family: var(--n-ui); font-size: .78125rem; line-height: 1.4; color: var(--n-ink-2); }
.snav__tg { margin-block-start: auto; font-family: var(--n-ui); font-weight: 600; font-size: .78125rem; color: var(--hue-text); }

/* ── the rail ── */
.snav__rail {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 8px 4px 0; padding-block-start: 10px; border-block-start: 1px solid var(--n-line-soft);
  opacity: 0; translate: 0 10px; transition: opacity var(--n-normal) var(--n-ease-out) 250ms, translate var(--n-normal) var(--n-ease) 250ms;
}
.snav[data-open] .snav__rail { opacity: 1; translate: 0 0; }
.snav__railq { font-family: var(--n-ui); font-size: .8125rem; color: var(--n-ink-3); text-align: center; white-space: nowrap; }
.snav__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.snav__legallink { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px; font-family: var(--n-ui); font-size: .8125rem; color: var(--n-ink-3); text-decoration: none; }

/* the door switch (DoorSwitch, size "bar"): the door you stand in is lit by nav.js from <body data-accent> */
.snav-door { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 4px; border: 1px solid var(--n-line); border-radius: 999px; background: var(--n-surface-2); isolation: isolate; }
.snav-door__thumb { position: absolute; z-index: 0; inset-block: 4px; inline-size: calc(50% - 4px); inset-inline-start: 4px; border-radius: 999px; background: color-mix(in srgb, var(--n-accent) var(--n-fill), transparent); border: 1px solid color-mix(in srgb, var(--n-accent) var(--n-edge), transparent); transition: inset-inline-start var(--n-normal) var(--n-ease); }
.snav-door[data-door-side="talent"] .snav-door__thumb { inset-inline-start: 50%; }
.snav-door__seg { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; font-family: var(--n-ui); font-weight: 600; font-size: .8125rem; line-height: 1.2; color: var(--n-ink-3); text-decoration: none; white-space: nowrap; transition: color var(--n-fast) var(--n-ease-out); }
.snav-door__seg:hover { color: var(--n-ink-2); }
.snav-door__seg[aria-current] { color: var(--n-accent-text); }

.snav__scrim { pointer-events: auto; position: fixed; inset: 0; z-index: -1; border: 0; padding: 0; background: color-mix(in srgb, var(--n-ink) 26%, transparent); cursor: default; }

/* ── language switch: a hairline pill; its panel hangs off the trailing edge ── */
.snav-lang { position: relative; display: inline-flex; flex: none; z-index: 2; }
.snav-lang__trigger {
  display: inline-flex; align-items: center; gap: 5px; min-block-size: 44px; padding: 0 10px; border: 1px solid var(--n-line); border-radius: 999px; background: transparent;
  color: var(--n-ink-2); font-family: var(--n-ui); font-weight: 600; font-size: .8125rem; line-height: 1; cursor: pointer;
  transition: color var(--n-fast) var(--n-ease-out), background-color var(--n-fast) var(--n-ease-out), border-color var(--n-fast) var(--n-ease-out);
}
.snav-lang__trigger > svg:first-child { inline-size: 16px; block-size: 16px; }
.snav-lang__caret { inline-size: 13px; block-size: 13px; transition: rotate var(--n-fast) var(--n-ease-out); }
.snav-lang__trigger[aria-expanded="true"] { color: var(--n-accent-text); background: color-mix(in srgb, var(--n-accent) var(--n-fill), transparent); border-color: color-mix(in srgb, var(--n-accent) var(--n-edge), transparent); }
.snav-lang__trigger[aria-expanded="true"] .snav-lang__caret { rotate: 180deg; }
.snav-lang__trigger.snav-lang__trigger:focus-visible { border-radius: 999px; }
.snav-lang__code:lang(ar) { font-family: "Tajawal", "Geeza Pro", var(--n-ui); font-size: 1.0625em; }
@media (hover: hover) {
  .snav-lang__trigger:hover { color: var(--n-ink); border-color: color-mix(in srgb, var(--n-ink) 20%, transparent); }
  .snav-lang__trigger[aria-expanded="true"]:hover { color: var(--n-accent-text); }
}
.snav-lang__panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; min-inline-size: 176px; padding: 6px; border: 1px solid var(--n-line); border-radius: 16px; background: var(--n-surface);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity var(--n-fast) var(--n-ease-out), translate var(--n-fast) var(--n-ease), visibility 0s linear var(--n-fast);
}
.snav-lang__panel[data-open] { opacity: 1; visibility: visible; translate: 0 0; transition: opacity var(--n-fast) var(--n-ease-out), translate var(--n-fast) var(--n-ease), visibility 0s; }
.snav-lang__list { display: flex; flex-direction: column; gap: 2px; }
.snav-lang__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 44px; padding-inline: 12px; border-radius: 11px; font-family: var(--n-ui); font-weight: 500; font-size: .875rem; line-height: 1.2; color: var(--n-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--n-fast) var(--n-ease-out), background-color var(--n-fast) var(--n-ease-out); }
.snav-lang__name { unicode-bidi: isolate; }
.snav-lang__name[lang="ar"] { font-family: "Tajawal", "Geeza Pro", var(--n-ui); font-size: 1.0625em; }
.snav-lang__check { inline-size: 15px; block-size: 15px; visibility: hidden; }
.snav-lang__opt[aria-current] { font-weight: 600; color: var(--n-accent-text); background: color-mix(in srgb, var(--n-accent) var(--n-fill), transparent); }
.snav-lang__opt[aria-current] .snav-lang__check { visibility: visible; }
.snav-lang__opt--soon { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-block-size: 52px; color: var(--n-ink-3); cursor: default; }
.snav-lang__opt--soon small { font-size: .71875rem; font-weight: 500; color: var(--n-ink-3); white-space: normal; }
@media (hover: hover) {
  a.snav-lang__opt:hover { color: var(--n-ink); background: var(--n-press); }
  a.snav-lang__opt[aria-current]:hover { color: var(--n-accent-text); background: color-mix(in srgb, var(--n-accent) var(--n-fill), transparent); }
}
.snav-lang__opt.snav-lang__opt:focus-visible { border-radius: 11px; }

/* ── search overlay (SiteSearch) ── */
.snav-search { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding-block-start: 90px; padding-inline: var(--n-gutter); pointer-events: none; }
.snav-search[hidden] { display: none; }
.snav-search__scrim { pointer-events: auto; position: fixed; inset: 0; border: 0; padding: 0; background: color-mix(in srgb, var(--n-ink) 26%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: default; animation: snav-scrim var(--n-normal) var(--n-ease-out) both; }
.snav-search__panel { pointer-events: auto; position: relative; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 1040px; max-block-size: calc(100dvh - 120px); border: 1px solid var(--n-line); border-radius: 24px; background: var(--n-surface); overflow: hidden; animation: snav-panel var(--n-slow) var(--n-ease) both; }
.snav-search__field { display: flex; align-items: center; gap: 12px; padding-inline: 18px; min-block-size: 66px; border-block-end: 1px solid var(--n-line-soft); color: var(--n-ink-3); flex: none; }
.snav-search__field:focus-within { border-color: color-mix(in srgb, var(--n-accent) var(--n-edge), transparent); background: color-mix(in srgb, var(--n-accent) 5%, transparent); }
.snav-search__icon { inline-size: 20px; block-size: 20px; }
.snav-search__input { flex: 1; min-inline-size: 0; block-size: 64px; border: 0; outline: 0; background: transparent; padding: 0; font-family: var(--n-ui); font-size: 1.1875rem; font-weight: 500; color: var(--n-ink); }
.snav-search__input::placeholder { color: var(--n-ink-3); }
.snav-search__input.snav-search__input:focus, .snav-search__input.snav-search__input:focus-visible { outline: none; box-shadow: none; }
.snav-search__esc { flex: none; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 34px; block-size: 26px; padding-inline: 8px; border: 1px solid var(--n-line); border-radius: 7px; background: transparent; color: var(--n-ink-3); font-family: var(--n-ui); font-size: .71875rem; font-weight: 500; cursor: pointer; }
.snav-search__esc:hover { color: var(--n-ink-2); }
.snav-search__chips { display: flex; gap: 6px; padding: 12px 14px 0; flex: none; overflow-x: auto; scrollbar-width: none; }
.snav-search__chips::-webkit-scrollbar { display: none; }
.snav-search__chip { flex: none; display: inline-flex; align-items: center; block-size: 32px; padding-inline: 13px; border: 1px solid var(--n-line); border-radius: 17px; background: transparent; color: var(--n-ink-2); font-family: var(--n-ui); font-weight: 600; font-size: .78125rem; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--n-fast) var(--n-ease-out), color var(--n-fast) var(--n-ease-out), border-color var(--n-fast) var(--n-ease-out); }
.snav-search__chip:hover { background: var(--n-press); color: var(--n-ink); }
.snav-search__chip.is-on { background: color-mix(in srgb, var(--hue) 18%, transparent); border-color: color-mix(in srgb, var(--hue) 32%, transparent); color: var(--hue-text); }
.snav-search__nearest { padding: 10px 20px 0; flex: none; font-family: var(--n-ui); font-size: .78125rem; color: var(--n-ink-3); }
.snav-search__body { display: flex; gap: 16px; padding: 10px 12px 0; min-block-size: 0; flex: 1; }
.snav-search__list { flex: 1; min-inline-size: 0; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: 2px; padding-block-end: 8px; }
.snav-search__row { display: flex; align-items: center; gap: 12px; block-size: 56px; padding-inline: 12px; border-radius: 14px; text-decoration: none; border: 1px solid transparent; transition: background-color var(--n-fast) var(--n-ease-out), border-color var(--n-fast) var(--n-ease-out); }
.snav-search__row.is-on { background: color-mix(in srgb, var(--hue) var(--n-fill), transparent); border-color: color-mix(in srgb, var(--hue) 26%, transparent); }
.snav-search__ric { display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--hue) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent); color: var(--hue-text); }
.snav-search__ric svg { inline-size: 16px; block-size: 16px; }
.snav-search__rt { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.snav-search__rtitle { font-family: var(--n-ui); font-weight: 600; font-size: .90625rem; line-height: 1.3; color: var(--n-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-search__rcrumb { font-family: var(--n-ui); font-size: .75rem; line-height: 1.3; color: var(--n-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-search__rkind { margin-inline-start: auto; flex: none; font-family: var(--n-ui); font-size: .71875rem; font-weight: 600; color: var(--hue-text); opacity: .85; }
.snav-search__state { padding: 26px 12px; font-family: var(--n-ui); font-size: .84375rem; line-height: 1.5; color: var(--n-ink-3); }
.snav-search__preview { display: none; position: relative; inline-size: 352px; flex: none; border-inline-start: 1px solid var(--n-line-soft); padding-inline-start: 16px; }
.snav-search__pv { display: flex; flex-direction: column; gap: 8px; block-size: 100%; padding-block-end: 16px; }
.snav-search__pcrumb { display: inline-flex; align-items: center; gap: 6px; font-family: var(--n-ui); font-size: .71875rem; font-weight: 600; color: var(--hue-text); }
.snav-search__pcrumb i { inline-size: 5px; block-size: 5px; border-radius: 999px; background: var(--hue); }
.snav-search__ptitle { font-family: var(--n-display); font-weight: 700; font-size: 1.5rem; line-height: 1.08; letter-spacing: -.02em; color: var(--n-ink); }
.snav-search__pbody { font-family: var(--n-ui); font-size: .84375rem; line-height: 1.5; color: var(--n-ink-2); }
.snav-search__ppath { font-family: var(--n-ui); font-size: .75rem; font-weight: 500; color: var(--n-ink-3); word-break: break-all; }
.snav-search__pgo { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-block-start: auto; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hue) var(--n-edge), transparent); background: color-mix(in srgb, var(--hue) var(--n-fill), transparent); color: var(--hue-text); font-family: var(--n-ui); font-weight: 600; font-size: .84375rem; }
.snav-search__pgo svg { inline-size: 15px; block-size: 15px; }
[dir="rtl"] .snav-search__pgo svg { transform: scaleX(-1); }
.snav-search__hint { display: flex; align-items: center; gap: 16px; flex: none; padding: 10px 20px 14px; border-block-start: 1px solid var(--n-line-soft); font-family: var(--n-ui); font-size: .75rem; color: var(--n-ink-3); }
.snav-search__hint > span { display: inline-flex; align-items: center; gap: 6px; }
.snav-search__count { margin-inline-start: auto; font-weight: 600; color: var(--n-ink-2); }
@keyframes snav-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes snav-panel { from { opacity: 0; translate: 0 -18px; scale: .975; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ── breakpoints: the phone gives way to the desk ── */
@media (min-width: 768px) {
  .snav { --n-gutter: 32px; }
  .snav__cta { display: inline-flex; }
  .snav__cta:hover { background: color-mix(in srgb, var(--n-accent) 20%, transparent); }
}
@media (min-width: 1280px) { .snav { --n-gutter: 40px; } }
@media (min-width: 1440px) { .snav { --n-measure: 1320px; } }
@media (max-width: 1023.98px) {
  .snav__field .snav__kbd { display: none; }
  /* the sheet must end on screen on every phone: only the list scrolls */
  .snav__map { block-size: min(378px, calc(100svh - 360px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); }
  .snav__map::-webkit-scrollbar { display: none; }
  .snav__rail { margin-block-start: 6px; }
  .snav__col { display: none; padding-inline: 2px; }
  .snav__col[data-shown] { display: block; }
  .snav__colhead { display: none; }
  .snav__link { padding-inline: 2px; padding-block: 9px; border-radius: 0; min-block-size: 54px; justify-content: center; }
  .snav__link + .snav__link { border-block-start: 1px solid var(--n-line-soft); }
  .snav__link:active { background: var(--n-press); }
  .snav__col--tiles { padding-block-start: 4px; }
  .snav__tile { flex: none; }
  .snav-search { padding-block-start: 80px; }
  .snav-search__panel { max-block-size: calc(100dvh - 104px); }
  .snav-search__field { min-block-size: 58px; padding-inline: 14px; }
  .snav-search__input { block-size: 56px; font-size: 1.03125rem; }
  .snav-search__rkind { display: none; }
  .snav-search__hint > span:nth-child(1), .snav-search__hint > span:nth-child(2) { display: none; }
}
@media (min-width: 1024px) {
  .snav__groups { display: flex; }
  .snav__menu { display: none; }
  .snav__seg { display: none; }
  .snav__lit { display: block; }
  .snav__map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .snav__lt { font-size: 1rem; }
  .snav__ln { font-size: .875rem; }
  .snav__group:hover { color: var(--n-ink); background: var(--n-press); }
  .snav__group[data-lit]:hover { color: var(--hue-text); background: color-mix(in srgb, var(--hue) var(--n-fill), transparent); }
  .snav__link:hover { background: var(--n-press); }
  .snav__link:hover .snav__lt { color: var(--hue-text); }
  .snav__tile:hover { background: color-mix(in srgb, var(--hue) 19%, transparent); }
  .snav__rail { flex-direction: row; align-items: center; gap: 16px; padding-block-start: 4px; }
  .snav__railq { text-align: start; }
  .snav__legal { margin-inline-start: auto; }
  .snav__legallink:hover { color: var(--n-ink-2); }
  .snav-search__preview { display: block; }
  /* short desks (Dani's 1250×740 pane): the open slab scrolls inside itself rather than running off the screen */
  .snav[data-open] .snav__foldin { max-block-size: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* a column arrives as a column: stagger by link */
.snav__col .snav__link:nth-of-type(1) { transition-delay: 80ms, 80ms, 0ms; }
.snav__col .snav__link:nth-of-type(2) { transition-delay: 108ms, 108ms, 0ms; }
.snav__col .snav__link:nth-of-type(3) { transition-delay: 136ms, 136ms, 0ms; }
.snav__col .snav__link:nth-of-type(4) { transition-delay: 164ms, 164ms, 0ms; }
.snav__col .snav__link:nth-of-type(5) { transition-delay: 192ms, 192ms, 0ms; }
.snav__col .snav__link:nth-of-type(6) { transition-delay: 220ms, 220ms, 0ms; }
.snav__col .snav__link:nth-of-type(7) { transition-delay: 248ms, 248ms, 0ms; }
.snav__col--tiles .snav__tile:nth-of-type(1) { transition-delay: 108ms, 108ms, 0ms; }
.snav__col--tiles .snav__tile:nth-of-type(2) { transition-delay: 150ms, 150ms, 0ms; }
.snav__map .snav__col:nth-of-type(1) .snav__colhead { transition-delay: 40ms; }
.snav__map .snav__col:nth-of-type(2) .snav__colhead { transition-delay: 74ms; }
.snav__map .snav__col:nth-of-type(3) .snav__colhead { transition-delay: 108ms; }
.snav__map .snav__col:nth-of-type(4) .snav__colhead { transition-delay: 142ms; }
.snav__map .snav__col:nth-of-type(1) .snav__rule { transition-delay: 110ms; }
.snav__map .snav__col:nth-of-type(2) .snav__rule { transition-delay: 144ms; }
.snav__map .snav__col:nth-of-type(3) .snav__rule { transition-delay: 178ms; }
.snav__map .snav__col:nth-of-type(4) .snav__rule { transition-delay: 212ms; }

/* nothing here is load-bearing: without transitions the menu is correct and instant */
/* ── the open bar takes the lit group's colour (Dani, 11-04: "the whole navbar shifts its colors … the
   search bar above it, the 2 buttons in the bottom"). nav.js sets data-sel on .snav while the slab is open;
   --n-accent follows it, so the CTA, door thumb and focus rings move too. Colour fades, nothing moves. ── */
.snav[data-sel="orange"] { --sel: #faa21b; --sel-text: #8a5a12; }
.snav[data-sel="teal"] { --sel: #00aea9; --sel-text: #05696b; }
.snav[data-sel="indigo"] { --sel: #6b6ecb; --sel-text: #423f94; }
.snav[data-sel="pink"] { --sel: #d4658f; --sel-text: #96305c; }
.snav[data-sel] { --n-accent: var(--sel); --n-accent-text: var(--sel-text); }
.snav[data-open][data-sel] .snav__bar { background: color-mix(in srgb, var(--sel) 7%, color-mix(in srgb, var(--n-surface) 95%, transparent)); border-color: color-mix(in srgb, var(--sel) 24%, transparent); }
.snav[data-sel] .snav__field { background: color-mix(in srgb, var(--sel) 10%, var(--n-surface-2)); border-color: color-mix(in srgb, var(--sel) 30%, transparent); color: var(--sel-text); }
.snav[data-sel] .snav-door { background: color-mix(in srgb, var(--sel) 9%, var(--n-surface-2)); border-color: color-mix(in srgb, var(--sel) 26%, transparent); }
.snav[data-sel] .snav-lang__trigger { background: color-mix(in srgb, var(--sel) 8%, transparent); border-color: color-mix(in srgb, var(--sel) 32%, transparent); color: var(--sel-text); }
.snav[data-sel] .snav__menu { border-color: color-mix(in srgb, var(--sel) 32%, transparent); color: var(--sel-text); }
.snav__field { transition: opacity var(--n-normal) var(--n-ease-out) 40ms, translate var(--n-normal) var(--n-ease) 40ms, border-color var(--n-slow) var(--n-ease-out), background-color var(--n-slow) var(--n-ease-out), color var(--n-slow) var(--n-ease-out); }
.snav__cta, .snav-door, .snav__menu { transition: background-color var(--n-slow) var(--n-ease-out), border-color var(--n-slow) var(--n-ease-out), color var(--n-slow) var(--n-ease-out); }
.snav-door__thumb { transition: inset-inline-start var(--n-normal) var(--n-ease), background-color var(--n-slow) var(--n-ease-out), border-color var(--n-slow) var(--n-ease-out); }
.snav-lang__trigger { transition: color var(--n-slow) var(--n-ease-out), background-color var(--n-slow) var(--n-ease-out), border-color var(--n-slow) var(--n-ease-out); }

/* orange is Hire's, teal Work's, indigo Guides', pink Learn's. While a group is lit, only its column wears a colour;
   the other column titles, rules and guide tiles rest in ink until the pointer reaches them, so picking Work leaves
   no orange anywhere (Dani, 11-04: "strip the orange color keep it only for hire"). */
.snav[data-sel] .snav__col:not([data-shown]) .snav__colhead { color: var(--n-ink-2); }
.snav[data-sel] .snav__col:not([data-shown]) .snav__rule { background: var(--n-line); }
.snav[data-sel] .snav__col:not([data-shown]) .snav__tile { background: color-mix(in srgb, var(--n-ink) 3%, transparent); border-color: var(--n-line); }
.snav[data-sel] .snav__col:not([data-shown]) .snav__tt, .snav[data-sel] .snav__col:not([data-shown]) .snav__tg { color: var(--n-ink); }
.snav__colhead { transition: opacity var(--n-normal) var(--n-ease-out), translate var(--n-normal) var(--n-ease), color var(--n-slow) var(--n-ease-out); }
.snav__rule { transition: scale 620ms var(--n-ease), background-color var(--n-slow) var(--n-ease-out); }
.snav__tile { transition: opacity var(--n-normal) var(--n-ease-out), translate var(--n-normal) var(--n-ease), background-color var(--n-slow) var(--n-ease-out), border-color var(--n-slow) var(--n-ease-out); }
.snav__tt, .snav__tg { transition: color var(--n-slow) var(--n-ease-out); }

.snav[data-sel] .snav__seg { background: color-mix(in srgb, var(--sel) 9%, var(--n-surface-2)); border-color: color-mix(in srgb, var(--sel) 26%, transparent); }
.snav__seg { transition: opacity var(--n-normal) var(--n-ease-out) 70ms, translate var(--n-normal) var(--n-ease) 70ms, background-color var(--n-slow) var(--n-ease-out), border-color var(--n-slow) var(--n-ease-out); }

@media (prefers-reduced-motion: reduce) {
  .snav__bar, .snav__fold, .snav__field, .snav__seg, .snav__thumb, .snav__lit, .snav__colhead, .snav__rule, .snav__link, .snav__tile, .snav__rail,
  .snav__dot, .snav__chev, .snav__bars > span, .snav-door__thumb, .snav-lang__trigger, .snav-lang__caret, .snav-lang__panel, .snav-lang__panel[data-open], .snav-lang__opt,
  .snav-search__row, .snav-search__chip { transition: none !important; }
  .snav:not([data-open]) .snav__foldin { transition: none; }
  .snav__progress, .snav-search__scrim, .snav-search__panel { animation: none !important; }
}

/* phone pass: the sheet's list may use the phone's height, so a full group fits on a 390×844 phone (still scrolls on short ones) */
@media (max-width: 767px) {
  .snav__map { block-size: min(452px, calc(100svh - 360px)); }
}