@layer reset, base, layout, components, pages, utilities;

/* text-decoration-thickness does not transition in Chrome; a registered length does, and the thickness reads it. */
@property --ul-w { syntax: "<length>"; inherits: false; initial-value: 2px; }

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/B612-700-normal-latin.woff2) format("woff2");
  unicode-range: U+00B7;
}

/* ============ reset ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  :where(ul, ol)[class] { list-style: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
  button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  pre { font: inherit; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ============ base ============ */
@layer base {
  :root { --nudge: 4px; --nudge-lg: 8px; --hover-t: var(--dur-hover-out); }
  /* A transition takes its duration from the style it moves to: hovered controls (and everything inside them)
     run in with --dur-hover-in, and leave with the root --dur-hover-out. */
  :where(a, button, label, summary):hover { --hover-t: var(--dur-hover-in); }

  html {
    color-scheme: only light;
    scroll-padding-top: calc(var(--header-h) + var(--next-h) + var(--space-4));
    scrollbar-color: var(--sign-black) var(--panel-gray);
    -webkit-tap-highlight-color: rgb(255 204 0 / .35);
  }
  /* Smooth only for moves inside an already loaded page: site.js adds .nx-smooth after load, so a deep link lands at once. */
  @media (prefers-reduced-motion: no-preference) {
    html.nx-smooth { scroll-behavior: smooth; }
  }
  body {
    background: var(--reading-white);
    color: var(--sign-black);
    font: 400 var(--fs-body)/1.6 var(--font-sign);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
  }

  ::selection { background: var(--sign-yellow); color: var(--sign-black); }
  :where(.nx-sign, .nx-dirsign, .nx-selection--sign, .nx-onward, .nx-next, .nx-btn--primary) ::selection {
    background: var(--sign-black); color: var(--sign-yellow);
  }
  :where(.nx-sign, .nx-dirsign, .nx-selection--sign, .nx-onward, .nx-next) { -webkit-tap-highlight-color: rgb(20 22 25 / .2); }
  :where(input, textarea, select) { caret-color: var(--sign-black); accent-color: var(--sign-black); }
  ::placeholder { color: var(--text-gray); opacity: 1; }

  a {
    color: inherit;
    text-decoration-line: underline;
    --ul-w: 2px;
    text-decoration-thickness: var(--ul-w);
    text-underline-offset: .18em;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color var(--hover-t) var(--ease-hover), --ul-w var(--hover-t) var(--ease-hover);
  }
  a:hover { text-decoration-color: var(--sign-yellow); --ul-w: .28em; }
  :where(.nx-sign, .nx-dirsign, .nx-selection--sign, .nx-onward, .nx-next) a:hover {
    text-decoration-color: currentColor; --ul-w: 4px;
  }

  :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); }
  :focus:not(:focus-visible) { outline: none; }
  main:focus, h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }
  :where(.nx-header, .nx-factband, .nx-board, .nx-idband, .nx-section--black, .nx-panel--dark, .nx-index, .nx-services--dark, .nx-footer) {
    --focus-ring: var(--sign-yellow); --focus-gap: var(--sign-black);
  }
  .nx-next { --focus-ring: var(--sign-black); --focus-gap: var(--sign-yellow); }

  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--panel-gray); }
  ::-webkit-scrollbar-thumb { background: var(--sign-black); border: 3px solid var(--panel-gray); border-radius: 6px; }
  .nx-board ::-webkit-scrollbar-track { background: var(--board-black); }
  .nx-board ::-webkit-scrollbar-thumb { background: var(--sign-yellow); border-color: var(--board-black); }

  .nx-board, .nx-seats, .nx-factband, .nx-desk__contacts, .nx-footer__contacts { font-variant-numeric: tabular-nums lining-nums; }
  :where(h1, h2, h3) { text-wrap: balance; }
  :where(p, dd) { text-wrap: pretty; }
  p { hyphens: manual; }

}

/* ============ layout ============ */
@layer layout {
  .nx-wrap {
    width: 100%;
    max-width: calc(var(--page-max) + 2 * var(--page-pad));
    margin-inline: auto;
    padding-inline: var(--page-pad);
  }
  .nx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: var(--space-6);
  }
  .nx-grid > * { grid-column: 1 / -1; min-width: 0; }
  @media (min-width: 48em) {
    .nx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }

  .nx-section { padding-block: var(--section-y) calc(var(--section-y) * .75); background: var(--reading-white); }
  .nx-section--panel { background: var(--panel-gray); }
  .nx-section--black { background: var(--sign-black); color: #fff; }
  .nx-section--yellow { background: var(--sign-yellow); color: var(--sign-black); }
  .nx-section:not(.nx-section--panel, .nx-section--black, .nx-section--yellow) + .nx-section:not(.nx-section--panel, .nx-section--black, .nx-section--yellow),
  .nx-section--panel + .nx-section--panel,
  .nx-section--black + .nx-section--black,
  .nx-section--yellow + .nx-section--yellow { padding-top: var(--space-8); }

  .nx-prose > * + * { margin-top: var(--space-4); }
  .nx-prose :where(p, li) { max-width: var(--measure); }
  .nx-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: var(--measure-lead); }
}

/* ============ components ============ */
@layer components {

  /* ---- pictogram ---- */
  .nx-picto {
    display: inline-block;
    width: var(--picto-md); height: var(--picto-md);
    fill: currentColor;
    flex: none;
    vertical-align: middle;
  }
  .nx-picto--sm { width: var(--picto-sm); height: var(--picto-sm); }
  .nx-picto--md { width: var(--picto-md); height: var(--picto-md); }
  .nx-picto--lg { width: var(--picto-lg); height: var(--picto-lg); }
  .nx-picto--xl { width: var(--picto-xl); height: var(--picto-xl); }
  .nx-picto--down { rotate: 90deg; }
  .nx-picto--up { rotate: -90deg; }

  /* ---- skip link ---- */
  .nx-skip {
    position: absolute; left: var(--space-4); top: var(--space-4);
    z-index: var(--z-skip);
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: var(--space-4);
    background: var(--sign-yellow); color: var(--sign-black);
    border-radius: var(--radius);
    font-weight: 800; text-decoration: none;
    transform: translateY(calc(-100% - 3rem));
  }
  .nx-skip:focus { transform: none; --focus-ring: var(--sign-black); --focus-gap: var(--sign-yellow); }

  /* ---- buttons ---- */
  .nx-btn {
    --btn-h: var(--btn-md);
    position: relative;
    display: inline-flex; align-items: stretch;
    min-height: var(--btn-h);
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: transparent; color: var(--sign-black);
    font-family: var(--font-sign); font-weight: 800; font-size: 1rem; line-height: 1.15; letter-spacing: .01em;
    text-decoration: none; text-align: left;
    cursor: pointer;
    transition: background-color var(--hover-t) var(--ease-hover), color var(--hover-t) var(--ease-hover), border-color var(--hover-t) var(--ease-hover), transform var(--dur-fast) var(--ease-std);
  }
  .nx-btn--sm { --btn-h: var(--btn-sm); }
  .nx-btn--md { --btn-h: var(--btn-md); }
  .nx-btn--lg { --btn-h: var(--btn-lg); font-size: 1.125rem; }
  .nx-btn__label { flex: 1 1 auto; display: flex; align-items: center; padding: var(--space-2) var(--space-5); }
  .nx-btn--lg .nx-btn__label { padding-inline: var(--space-6); }
  .nx-btn__arrow {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: calc(var(--btn-h) - 4px);
  }
  .nx-btn__arrow::before { content: ""; position: absolute; inset-block: 0; left: 0; width: 2px; background: currentColor; }
  .nx-btn__arrow .nx-picto { width: 24px; height: 24px; transition: translate var(--dur-hover-out) var(--ease-hover); }
  .nx-btn--lg .nx-btn__arrow .nx-picto { width: 28px; height: 28px; }
  .nx-btn--block { display: flex; width: 100%; }

  .nx-btn--primary { background: var(--sign-yellow); color: var(--sign-black); }
  .nx-btn--primary:hover { background: var(--sign-yellow-hover); }
  .nx-btn--primary:active { background: var(--sign-yellow-press); }
  .nx-btn--secondary { border-color: var(--sign-black); color: var(--sign-black); }
  .nx-btn--secondary:hover { background: var(--sign-black); color: #fff; }
  .nx-btn--secondary.nx-btn--on-dark { border-color: #fff; color: #fff; }
  .nx-btn--secondary.nx-btn--on-dark:hover { background: #fff; color: var(--sign-black); }
  .nx-btn--ink { background: var(--sign-black); color: #fff; }
  .nx-btn--ink .nx-btn__arrow { color: var(--sign-yellow); }
  .nx-btn--ink .nx-btn__arrow::before { background: var(--rule-dark); }
  .nx-btn--ink:hover { background: var(--board-black); }

  .nx-btn:hover .nx-btn__arrow .nx-picto { translate: var(--nudge) 0; transition-duration: var(--dur-hover-in); }
  .nx-btn:active { transform: translateY(1px); transition-duration: var(--dur-fast); }
  .nx-btn:active .nx-btn__arrow .nx-picto { translate: 0 0; transition-duration: var(--dur-fast); }
  .nx-btn[aria-busy="true"] { cursor: progress; }
  .nx-btn[aria-busy="true"] .nx-btn__arrow { opacity: .4; }
  .nx-btn:disabled, .nx-btn[aria-disabled="true"] {
    background: var(--disabled-bg); color: var(--disabled-ink); border-color: transparent;
    cursor: not-allowed; transform: none;
  }
  .nx-btn:disabled .nx-btn__arrow, .nx-btn[aria-disabled="true"] .nx-btn__arrow { display: none; }

  /* ---- links ---- */
  .nx-link { color: inherit; font-weight: 700; }
  .nx-link--arrow { display: inline-flex; align-items: center; gap: .35em; }
  .nx-link--arrow .nx-picto { width: 1em; height: 1em; transition: translate var(--hover-t) var(--ease-hover); }
  .nx-link--arrow:hover .nx-picto { translate: var(--nudge) 0; }

  /* ---- header ---- */
  .nx-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--sign-black); color: #fff;
    transition: box-shadow var(--dur-base) var(--ease-std);
  }
  .nx-header.is-stuck { box-shadow: var(--shadow-stuck); }
  .nx-header__bar {
    height: var(--header-h);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo . apply menu";
    align-items: center;
    column-gap: var(--space-2);
  }
  .nx-header__logo { grid-area: logo; display: flex; align-items: center; min-height: 44px; border-radius: 2px; }
  .nx-header__logo img { height: 32px; width: auto; }
  .nx-header__apply { grid-area: apply; }
  .nx-header__apply .nx-btn__label { padding-inline: var(--space-4); }
  .nx-header__menu {
    grid-area: menu;
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 44px; padding-inline: var(--space-3);
    border: 2px solid #fff; border-radius: var(--radius);
    color: #fff; font-weight: 800; font-size: var(--fs-label); line-height: 1;
    transition: background-color var(--hover-t) var(--ease-hover), color var(--hover-t) var(--ease-hover);
  }
  .nx-header__menu:hover { background: #fff; color: var(--sign-black); }
  .nx-header__menu-label { padding-top: .12em; }
  .nx-nav { grid-column: 2; grid-row: 1; }
  .nx-nav__arrow { color: var(--sign-yellow); transition: translate var(--dur-hover-out) var(--ease-hover); }

  @media (max-width: 24.99em) {
    .nx-header__menu-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
  }

  @media (max-width: 63.99em) {
    .nx-nav__list { display: none; }
    .nx-nav__apply { display: none !important; }
    .nx-header.is-open .nx-nav__list {
      display: block;
      position: absolute; top: 100%; inset-inline: 0;
      z-index: var(--z-menu);
      max-height: calc(100dvh - var(--header-h));
      overflow-y: auto;
      padding: var(--space-2) var(--page-pad) var(--space-6);
      background: var(--sign-black);
      box-shadow: var(--shadow-menu);
      animation: nx-menu-open var(--dur-panel) var(--ease-std);
    }
    .nx-nav__list > li + li { border-top: 1px solid var(--rule-dark); }
    .nx-nav__link {
      display: flex; align-items: center; gap: var(--space-3);
      min-height: 56px;
      color: #fff; font-weight: 800; font-size: 1.25rem; line-height: 1.2; text-decoration: none;
    }
    .nx-nav__link .nx-nav__arrow { margin-left: auto; }
    .nx-nav__link:hover .nx-nav__arrow { translate: var(--nudge) 0; transition-duration: var(--dur-hover-in); }
    .nx-nav__link[aria-current="page"]::before {
      content: ""; flex: none; width: 12px; height: 12px; background: var(--sign-yellow);
    }
    .nx-nav__link:focus-visible { outline-offset: -3px; box-shadow: none; }

    html.no-js .nx-header__bar {
      height: auto; min-height: var(--header-h);
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "logo . apply" "nav nav nav";
      row-gap: var(--space-2);
      padding-block: var(--space-2);
    }
    html.no-js .nx-nav { grid-area: nav; }
    html.no-js .nx-header__menu { display: none; }
    html.no-js .nx-nav__list { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
    html.no-js .nx-nav__list > li + li { border-top: 0; }
    html.no-js .nx-nav__link { min-height: 44px; font-size: var(--fs-label); }
    html.no-js .nx-nav__arrow { display: none; }
  }
  @keyframes nx-menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

  @media (min-width: 64em) {
    .nx-header__bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo nav"; }
    .nx-header__logo img { height: 40px; }
    .nx-header__menu, .nx-header__apply { display: none; }
    .nx-nav { grid-area: nav; justify-self: end; align-self: stretch; }
    .nx-nav__list { display: flex; align-items: stretch; gap: var(--space-6); height: 100%; }
    .nx-nav__list > li { position: relative; display: flex; align-items: center; }
    /* The link clips its own box, so the hover bar can wait just below the header's bottom edge and rise into it.
       The bar keeps its full 4px at every frame; only its top edge moves. The link's own outline is not clipped. */
    .nx-nav__link {
      position: relative; display: flex; align-items: center; height: 100%;
      overflow: hidden; overflow: clip;
      color: #fff; font-weight: 700; font-size: var(--fs-label); line-height: 1.25; text-decoration: none;
    }
    .nx-nav__link::after, .nx-nav__apply:has([aria-current="page"])::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
      background: var(--sign-yellow);
    }
    .nx-nav__link::after {
      transform: translateY(100%);
      transition: transform var(--dur-hover-out) var(--ease-hover);
    }
    .nx-nav__link:hover::after { transform: translateY(0); transition-duration: var(--dur-hover-in); }
    .nx-nav__link:active::after { background: var(--sign-yellow-press); }
    .nx-nav__link[aria-current="page"]::after, .nx-nav__apply:has([aria-current="page"])::after { height: 6px; transform: none; transition: none; }
    .nx-nav__arrow { display: none; }
  }

  /* ---- next-destination strip ---- */
  .nx-next { position: absolute; top: 100%; inset-inline: 0; height: var(--next-h); perspective: 600px; }
  .nx-next:not([hidden]) { display: block; }
  .nx-header.is-open .nx-next { display: none; }
  .nx-next__face {
    height: 100%;
    background: var(--sign-yellow); color: var(--sign-black);
    box-shadow: var(--shadow-stuck);
    transform-origin: 50% 0;
    backface-visibility: hidden;
  }
  .nx-next__link {
    display: flex; align-items: center; gap: var(--space-3);
    height: 100%;
    color: inherit; font-weight: 800; font-size: var(--fs-zone); line-height: 1.2; text-decoration: none;
  }
  .nx-next__link:focus-visible { outline-offset: -4px; box-shadow: none; }
  .nx-next__label {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    padding-top: .12em;
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em;
    transition: text-decoration-color var(--hover-t) var(--ease-hover);
  }
  .nx-next__link:hover .nx-next__label { text-decoration-color: currentColor; }
  .nx-next__arrow { transition: rotate var(--dur-turn) var(--ease-flip), translate var(--dur-hover-out) var(--ease-hover); }
  .nx-next__arrow.is-turned { rotate: 90deg; }
  .nx-next__link:hover .nx-next__arrow:not(.is-turned) { translate: var(--nudge) 0; transition-duration: var(--dur-turn), var(--dur-hover-in); }
  .nx-next__link:hover .nx-next__arrow.is-turned { translate: 0 var(--nudge); transition-duration: var(--dur-turn), var(--dur-hover-in); }

  /* ---- overhead sign ---- */
  .nx-sign { background: var(--sign-yellow); color: var(--sign-black); }
  .nx-sign--home { padding-block: var(--space-7); }
  .nx-sign--page { padding-block: var(--space-7) var(--space-6); }
  .nx-sign__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    align-items: start;
  }
  .nx-sign__arrow { width: 40px; height: 40px; }
  .nx-sign__body { min-width: 0; }
  .nx-sign__title { font-weight: 900; font-size: var(--fs-sign); line-height: 1; letter-spacing: -.012em; }
  .nx-sign--home .nx-sign__title { font-size: var(--fs-display); line-height: .96; letter-spacing: -.015em; }
  .nx-sign__meta {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--rule-sign) solid var(--sign-black);
  }
  .nx-sign__line { font-weight: 800; font-size: var(--fs-sign-line); line-height: 1.25; letter-spacing: .04em; }
  .nx-sign__title + .nx-sign__line { margin-top: var(--space-3); }
  .nx-sign__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

  @media (min-width: 48em) {
    .nx-sign__inner { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); }
    .nx-sign__arrow { width: 56px; height: 56px; margin-top: calc((var(--fs-sign) - 56px) / 2); }
    .nx-sign--home .nx-sign__arrow { width: 64px; height: 64px; margin-top: calc((var(--fs-display) * .96 - 64px) / 2); }
  }
  @media (min-width: 64em) {
    .nx-sign--home { min-height: 360px; }
  }

  .nx-sign--exit { background: var(--reading-white); padding-block: var(--section-y); }
  .nx-sign--exit .nx-lead { margin-top: var(--space-5); }
  @media (min-width: 48em) {
    .nx-sign--exit .nx-sign__arrow { width: 64px; height: 64px; margin-top: calc((var(--fs-sign) - 64px) / 2); }
  }
  @media (max-width: 47.99em) {
    .nx-sign__actions .nx-btn { width: 100%; }
    .nx-sign__actions .nx-btn--lg .nx-btn__label { padding-inline: var(--space-4); }
  }

  .nx-sign__zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-sign__zones li { position: relative; min-width: 0; }
  .nx-sign__zone {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding-inline: var(--space-3);
    color: inherit; font-weight: 800; font-size: var(--fs-zone); line-height: 1.2; text-decoration: none;
  }
  .nx-sign__zone span { padding-top: .12em; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color var(--hover-t) var(--ease-hover); }
  .nx-sign__zone:hover span { text-decoration-color: currentColor; }
  .nx-sign__zone .nx-picto--down { transition: translate var(--hover-t) var(--ease-hover); }
  .nx-sign__zone:hover .nx-picto--down { translate: 0 var(--nudge); }
  .nx-sign__zone:focus-visible { outline-offset: -3px; box-shadow: none; }
  @media (max-width: 47.99em) {
    .nx-sign__zones li:nth-child(odd) .nx-sign__zone { padding-left: 0; }
    .nx-sign__zones li:nth-child(even)::before { content: ""; position: absolute; inset-block: 0; left: 0; width: 2px; background: var(--sign-black); }
    .nx-sign__zones li:nth-child(n+3)::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--sign-black); }
    .nx-sign__zones li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .nx-sign__zones--stack { grid-template-columns: minmax(0, 1fr); }
    .nx-sign__zones--stack li:nth-child(even)::before { content: none; }
    .nx-sign__zones--stack li .nx-sign__zone { padding-left: 0; }
    .nx-sign__zones--stack li + li::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--sign-black); }
  }
  @media (min-width: 48em) {
    .nx-sign__zones { display: flex; flex-wrap: wrap; }
    .nx-sign__zone { padding-inline: var(--space-4); }
    .nx-sign__zones li:first-child .nx-sign__zone { padding-left: 0; }
    .nx-sign__zones li + li::before { content: ""; position: absolute; inset-block: 0; left: 0; width: 2px; background: var(--sign-black); }
  }
  @media (max-width: 79.99em) {
    .nx-sign__zone { padding-block: var(--space-2); }
  }
  /* 48–79.99em: four zones sit 2 × 2, five sit 3 + 2; the first column loses its separator, later rows gain a top rule */
  @media (min-width: 48em) and (max-width: 79.99em) {
    .nx-sign__zones:not(.nx-sign__zones--stack) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-sign__zones:not(.nx-sign__zones--stack):has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .nx-sign__zones:not(.nx-sign__zones--stack):not(:has(> li:nth-child(5))) > li:nth-child(odd)::before,
    .nx-sign__zones:not(.nx-sign__zones--stack):has(> li:nth-child(5)) > li:nth-child(3n+1)::before { content: none; }
    .nx-sign__zones:not(.nx-sign__zones--stack):not(:has(> li:nth-child(5))) > li:nth-child(odd) .nx-sign__zone,
    .nx-sign__zones:not(.nx-sign__zones--stack):has(> li:nth-child(5)) > li:nth-child(3n+1) .nx-sign__zone { padding-left: 0; }
    .nx-sign__zones:not(.nx-sign__zones--stack):not(:has(> li:nth-child(5))) > li:nth-child(n+3)::after,
    .nx-sign__zones:not(.nx-sign__zones--stack):has(> li:nth-child(5)) > li:nth-child(n+4)::after {
      content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--sign-black);
    }
    /* 3 + 2: the third cell has nothing below it, so it carries the row rule itself (same 2px line as the top rules of 4 and 5) */
    .nx-sign__zones:not(.nx-sign__zones--stack):has(> li:nth-child(5)) > li:nth-child(3)::after {
      content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--sign-black);
    }
  }
  @media (min-width: 80em) {
    .nx-sign__zones li:last-child .nx-sign__zone { padding-right: 0; }
  }

  /* ---- identification band ---- */
  .nx-idband {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: var(--sign-black); color: #fff;
    border-radius: var(--radius);
  }
  .nx-idband:has(> .nx-picto) { grid-template-columns: auto minmax(0, 1fr); }
  .nx-idband > .nx-picto { grid-column: 1; grid-row: 1 / span 2; color: var(--sign-yellow); width: var(--picto-md); height: var(--picto-md); }
  .nx-idband:has(> .nx-picto) > :not(.nx-picto) { grid-column: 2; }
  .nx-idband__title { font-weight: 800; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.01em; }
  .nx-idband__line { margin-top: var(--space-2); max-width: var(--measure); color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.5; }
  .nx-idband--green { background: var(--safety-green); }
  .nx-idband--green > .nx-picto, .nx-idband--green .nx-idband__line { color: #fff; }
  @media (max-width: 47.99em) {
    .nx-idband { padding: var(--space-4) var(--space-5); column-gap: var(--space-4); }
  }
  @media (min-width: 48em) {
    .nx-idband > .nx-picto { width: var(--picto-lg); height: var(--picto-lg); }
  }

  /* ---- information panel ---- */
  .nx-panel {
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
    background: var(--panel-gray);
    border-radius: var(--radius);
  }
  .nx-panel__title { margin-bottom: var(--space-3); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
  .nx-panel > p { max-width: var(--measure); }
  .nx-panel > p + p { margin-top: var(--space-4); }
  .nx-panel:has(> .nx-panel__picto) { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-5); }
  .nx-panel:has(> .nx-panel__picto) > :not(.nx-panel__picto) { grid-column: 2; }
  .nx-panel__picto { grid-column: 1; grid-row: 1; align-self: center; width: 48px; height: 48px; }
  .nx-panel--white { background: var(--reading-white); border: var(--rule) solid var(--rule-gray); }
  .nx-panel--dark { background: var(--sign-black); color: #fff; }

  /* ---- fact band ---- */
  .nx-factband { background: var(--sign-black); color: #fff; }
  .nx-factband__list { display: flex; flex-direction: column; }
  .nx-factband__item { position: relative; }
  .nx-factband__item + .nx-factband__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-dark); }

  .nx-factband--hero .nx-factband__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-content: center; align-items: center;
    min-height: 56px; padding-block: var(--space-3);
  }
  .nx-factband--hero .nx-picto { grid-row: 1 / span 2; color: var(--sign-yellow); }
  .nx-factband--hero .nx-factband__key {
    font: 700 var(--fs-board-key)/1.2 var(--font-board);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--on-dark-2);
  }
  .nx-factband--hero .nx-factband__value { font-weight: 700; font-size: var(--fs-fact); line-height: 1.15; padding-top: .1em; text-wrap: balance; }
  @media (min-width: 64em) {
    .nx-factband--hero .nx-factband__list { flex-direction: row; }
    .nx-factband--hero .nx-factband__item + .nx-factband__item::before { bottom: 0; right: auto; width: 2px; height: auto; }
    .nx-factband--hero .nx-factband__item { flex: 1 1 auto; min-height: 96px; padding-inline: var(--space-6); }
    .nx-factband--hero .nx-factband__item:first-child { padding-left: 0; }
  }

  .nx-factband--detail { padding-block: var(--space-8); }
  .nx-factband--detail .nx-factband__item { padding-block: var(--space-5); }
  .nx-factband--detail .nx-factband__item:first-child { padding-top: 0; }
  .nx-factband--detail .nx-factband__item:last-child { padding-bottom: 0; }
  .nx-factband__term {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-4); align-items: center;
    font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; text-wrap: balance;
  }
  .nx-factband__term .nx-picto { color: var(--sign-yellow); width: 48px; height: 48px; }
  .nx-factband__desc {
    margin-top: var(--space-3);
    padding-left: calc(48px + var(--space-4));
    color: var(--sign-yellow); font-size: var(--fs-body); line-height: 1.5;
    max-width: calc(var(--measure) + 48px + var(--space-4));
  }
  @media (min-width: 64em) {
    .nx-factband--detail .nx-factband__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-factband--detail .nx-factband__item + .nx-factband__item::before { bottom: 0; right: auto; width: 2px; height: auto; }
    .nx-factband--detail .nx-factband__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-3); padding: var(--space-2) var(--space-6); }
    .nx-factband--detail .nx-factband__desc { margin-top: 0; }
    .nx-factband--detail .nx-factband__item:first-child { padding-left: 0; padding-top: var(--space-2); }
    .nx-factband--detail .nx-factband__item:last-child { padding-right: 0; padding-bottom: var(--space-2); }
  }

  .nx-factband--stack { border-radius: var(--radius); }
  .nx-factband--stack .nx-factband__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: start;
    padding: var(--space-5);
  }
  .nx-factband--stack .nx-picto { grid-row: 1 / span 2; color: var(--sign-yellow); }
  .nx-factband--stack .nx-factband__key {
    font-weight: 800; font-size: var(--fs-label); line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
    padding-top: .45em;
  }
  .nx-factband--stack .nx-factband__text { margin-top: var(--space-2); color: var(--on-dark-2); }

  /* ---- departure board ---- */
  .nx-board { background: var(--board-black); color: var(--board-text); overflow: hidden; }
  .nx-board:not(.nx-board--mini) { margin-block: var(--space-6) 0; }
  @media (min-width: 64em) {
    .nx-board:not(.nx-board--mini) {
      width: calc(100% - 2 * var(--page-pad));
      max-width: var(--page-max);
      margin-inline: auto;
      border-radius: var(--radius);
    }
  }
  .nx-board__head {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
  .nx-board__caption { max-width: var(--measure); font-size: var(--fs-zone); line-height: 1.45; color: var(--board-text); }
  .nx-board__all { flex: none; white-space: nowrap; }
  .nx-board__cols { display: none; }
  .nx-board__row { position: relative; }
  .nx-board:not(.nx-board--mini) .nx-board__row + .nx-board__row { border-top: 1px solid var(--rule-dark); }
  .nx-board__heading { font: inherit; }
  .nx-board__toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 2.5rem;
    grid-template-areas: "day date chev" "prog prog chev";
    column-gap: var(--space-3); row-gap: var(--space-1);
    align-items: center;
    width: 100%; min-height: 64px;
    padding: var(--space-3) var(--space-4);
    color: var(--board-text); text-align: left;
    transition: background-color var(--hover-t) var(--ease-hover);
  }
  .nx-board__toggle:hover { background: var(--board-row); }
  .nx-board__toggle:focus-visible { outline-offset: -4px; box-shadow: none; }
  .nx-board__day {
    grid-area: day;
    font: 700 var(--fs-board)/1.3 var(--font-board); letter-spacing: .02em;
    color: var(--sign-yellow); white-space: nowrap;
  }
  .nx-board__date { grid-area: date; font: 400 var(--fs-board)/1.3 var(--font-board); letter-spacing: .02em; color: var(--board-text); }
  .nx-board__wkday { color: var(--board-muted); text-transform: uppercase; }
  .nx-board__prog {
    grid-area: prog;
    display: flex; align-items: center; gap: var(--space-3);
    font: 800 var(--fs-board)/1.3 var(--font-sign); letter-spacing: .02em; text-transform: uppercase;
    color: var(--sign-yellow);
  }
  .nx-board__prog .nx-picto { width: 24px; height: 24px; }
  .nx-board__chevron {
    grid-area: chev; justify-self: center;
    color: var(--board-muted);
    transition: rotate var(--dur-base) var(--ease-hover);
  }
  .nx-board__toggle[aria-expanded="true"] .nx-board__chevron { rotate: -90deg; }
  html.js [data-nx-board]:not(.is-ready) .nx-board__toggle[aria-expanded="true"] .nx-board__chevron { rotate: 90deg; }
  html.no-js .nx-board__all, html.no-js .nx-board__chevron { display: none; }

  .nx-board__detail { gap: var(--space-4); padding: var(--space-5) var(--space-4); background: var(--board-open); }
  .nx-board__detail:not([hidden]) { display: grid; }
  .nx-board__detail[hidden] { padding: 0; }
  html.js [data-nx-board]:not(.is-ready) .nx-board__detail { display: none; }
  .nx-board__slot { display: grid; gap: var(--space-1); }
  .nx-board__slot dt {
    font: 700 var(--fs-board-key)/1.4 var(--font-board); letter-spacing: .06em; text-transform: uppercase;
    color: var(--sign-yellow);
  }
  .nx-board__slot dd { max-width: var(--measure); font-size: var(--fs-body); line-height: 1.6; color: var(--board-text); }

  @media (max-width: 47.99em) {
    .nx-board:not(.nx-board--mini) .nx-board__rows { border-top: 1px solid var(--rule-dark); }
  }
  @media (min-width: 48em) {
    .nx-board__head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-6); padding-inline: var(--space-5); }
    .nx-board__cols {
      display: grid;
      grid-template-columns: 7.5rem 16.5rem minmax(0, 1fr) 2.5rem;
      column-gap: var(--space-4);
      align-items: center;
      height: 36px; padding-inline: var(--space-5);
      border-top: 1px solid var(--rule-dark);
      border-bottom: 1px solid var(--rule-dark);
      font: 700 var(--fs-board-key)/1.2 var(--font-board); letter-spacing: .06em; text-transform: uppercase;
      color: var(--board-muted);
    }
    .nx-board__toggle {
      grid-template-columns: 7.5rem 16.5rem minmax(0, 1fr) 2.5rem;
      grid-template-areas: "day date prog chev";
      column-gap: var(--space-4);
      min-height: 56px; padding-inline: var(--space-5);
    }
    .nx-board__detail { padding: var(--space-5); }
    .nx-board__slot { grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-4); }
    .nx-board__slot dt { padding-top: .35em; }
  }

  /* A row is rewritten in place: it rolls up out of view and down again. The first keyframe is the drawn row,
     so a board already painted never jumps to blank, whenever the refresh starts. */
  @keyframes nx-row-refresh {
    0% { clip-path: inset(0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .2, 1); } /* = --ease-flip; var() is not read here */
    45% { clip-path: inset(0 0 100% 0); opacity: .25; animation-timing-function: cubic-bezier(.22, .61, .36, 1); } /* = --ease-std */
    100% { clip-path: inset(0); opacity: 1; }
  }
  .nx-board.is-refreshing .nx-board__line {
    animation: nx-row-refresh var(--dur-refresh) var(--ease-std) calc(var(--i, 0) * var(--stagger-row)) both;
  }

  .nx-board--mini { max-width: 60rem; border-radius: var(--radius); }
  .nx-board--mini .nx-board__rows { display: grid; gap: 1px; background: var(--rule-dark); }
  .nx-board--mini .nx-board__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: 56px; padding: var(--space-3) var(--space-4);
    background: var(--board-black);
  }
  .nx-board--mini .nx-board__prog {
    display: block;
    font: 800 var(--fs-board-key)/1.25 var(--font-sign); letter-spacing: .06em;
  }
  .nx-board__value { font: 700 1.25rem/1.2 var(--font-board); color: #fff; white-space: nowrap; }
  @media (min-width: 48em) {
    .nx-board--mini .nx-board__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-board--mini .nx-board__row {
      flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1);
      min-height: 64px; padding-inline: var(--space-5);
    }
  }

  /* ---- floor guide line (research path) ---- */
  .nx-path { position: relative; display: grid; row-gap: var(--space-6); }
  .nx-path__stop { position: relative; min-height: 64px; padding-left: calc(64px + var(--space-5)); }
  .nx-path__stop:not(:last-child)::after {
    content: ""; position: absolute; left: 24px; top: 32px;
    width: 16px; height: calc(100% + var(--space-6));
    background: var(--sign-yellow);
    border-inline: 2px solid var(--sign-black);
  }
  .nx-path__title { font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; padding-top: .9rem; }
  .nx-path__num {
    position: absolute; left: 0; top: 0; z-index: 1;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    background: var(--sign-yellow); color: var(--sign-black);
    border: 2px solid var(--sign-black); border-radius: var(--radius);
    font: 700 1.5rem/1 var(--font-board);
  }
  .nx-path__text { margin-top: var(--space-3); max-width: var(--measure); }
  @media (min-width: 64em) {
    .nx-path { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); }
    .nx-path::before {
      content: ""; position: absolute; top: 24px;
      left: 32px; right: calc((100% - 4 * var(--gutter)) / 5 - 32px);
      height: 16px;
      background: var(--sign-yellow);
      border-block: 2px solid var(--sign-black);
    }
    .nx-path__stop { padding-left: 0; }
    .nx-path__stop:not(:last-child)::after { content: none; }
    .nx-path__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding-top: 0; }
    .nx-path__num { position: relative; }
  }

  /* ---- safety signs ---- */
  .nx-safety { display: grid; row-gap: var(--space-6); }
  .nx-safety__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5); align-items: start;
    padding-top: var(--space-5);
    border-top: 2px solid var(--rule-gray);
  }
  .nx-safety__symbol {
    display: grid; place-items: center;
    width: 72px; height: 72px;
    background: var(--safety-green); color: #fff;
    border-radius: var(--radius);
    outline: 2px solid #fff; outline-offset: -6px;
  }
  .nx-safety__symbol .nx-picto { width: 48px; height: 48px; }
  .nx-safety__title { margin-bottom: var(--space-2); font-weight: 800; font-size: var(--fs-label); line-height: 1.25; letter-spacing: .04em; }
  .nx-safety__text p { max-width: var(--measure); }
  @media (min-width: 48em) {
    .nx-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
    .nx-safety__symbol { width: 88px; height: 88px; }
    .nx-safety__symbol .nx-picto { width: 64px; height: 64px; }
  }

  /* ---- seat markers ---- */
  .nx-seats-frame { container-type: inline-size; }
  .nx-seats {
    display: grid;
    grid-template-columns: repeat(5, var(--seat-w));
    gap: 8px var(--seat-gap);
    color: var(--sign-black);
  }
  .nx-seats--sm { --seat-w: var(--seat-sm-w); --seat-h: var(--seat-sm-h); --seat-gap: 6px; font-size: var(--fs-seat-sm); }
  .nx-seats--lg { --seat-w: 48px; --seat-h: 58px; --seat-gap: 10px; font-size: var(--fs-seat-lg); }
  @container (min-width: 36rem) { .nx-seats--sm { grid-template-columns: repeat(15, var(--seat-w)); } }
  @container (min-width: 62rem) { .nx-seats--lg { --seat-w: var(--seat-lg-w); --seat-h: var(--seat-lg-h); grid-template-columns: repeat(15, var(--seat-w)); } }
  .nx-seat {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: var(--seat-w); height: var(--seat-h);
    padding-top: calc((var(--seat-h) - 4px) * .58 + 2px);
    border: 2px solid currentColor;
    border-radius: var(--radius-seat);
    font-family: var(--font-board); font-weight: 700; line-height: 1;
  }
  .nx-seat::before { content: ""; position: absolute; left: 4px; right: 4px; top: calc((var(--seat-h) - 4px) * .58); height: 2px; background: currentColor; }

  /* ---- staff ---- */
  .nx-staff { display: grid; row-gap: var(--space-7); }
  .nx-staff__item { display: grid; gap: var(--space-5); align-items: start; }
  .nx-staff__photo {
    width: 100%; max-width: 17.5rem; height: auto;
    aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
    background: var(--panel-gray);
  }
  .nx-staff__name {
    display: inline-block;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) - .1em);
    background: var(--sign-black); color: #fff;
    border-radius: var(--radius);
    font-weight: 700; font-size: var(--fs-h3); line-height: 1.2;
    text-wrap: wrap;
  }
  .nx-staff__bio { max-width: var(--measure); }
  @media (min-width: 48em) {
    .nx-staff__item { grid-template-columns: 15rem minmax(0, 1fr); }
    .nx-staff__photo { max-width: none; }
  }
  @media (min-width: 64em) {
    .nx-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
    .nx-staff__item { grid-template-columns: 2fr 3fr; }
  }

  /* ---- information desk ---- */
  .nx-desk { display: grid; row-gap: var(--space-7); }
  .nx-desk__head:has(> .nx-desk__symbol) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5);
    align-items: center; align-content: start;
  }
  .nx-desk__symbol {
    grid-row: 1;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    background: var(--sign-black); color: #fff;
    border-radius: var(--radius);
  }
  .nx-desk__symbol .nx-picto { width: 48px; height: 48px; }
  .nx-desk__title { font-weight: 800; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.01em; }
  .nx-desk__head:has(> .nx-desk__symbol) > .nx-desk__title { grid-column: 2; }
  .nx-desk__lead { margin-top: var(--space-4); max-width: var(--measure); }
  .nx-desk__head:has(> .nx-desk__symbol) > .nx-desk__lead { grid-column: 1 / -1; margin-top: var(--space-5); }
  .nx-desk__list { display: grid; row-gap: var(--space-6); column-gap: var(--gutter); }
  .nx-desk__entry { padding-top: var(--space-4); border-top: 2px solid var(--sign-black); }
  .nx-desk__entry dt {
    margin-bottom: var(--space-2);
    font-weight: 800; font-size: var(--fs-label); line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
  }
  .nx-desk__entry dd { max-width: var(--measure); }
  @media (min-width: 64em) {
    .nx-desk:not(.nx-desk--compact) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
    .nx-desk__head { grid-column: 1 / 5; }
    .nx-desk__list { grid-column: 5 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  }
  .nx-desk--compact {
    display: block;
    padding: var(--space-6);
    background: var(--reading-white);
    border: 2px solid var(--rule-gray);
    border-radius: var(--radius);
  }
  .nx-desk--compact .nx-desk__title {
    margin-bottom: var(--space-3);
    font-weight: 800; font-size: var(--fs-label); line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
  }
  @media (min-width: 80em) {
    .nx-desk--compact { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  }
  .nx-desk__contacts li, .nx-footer__contacts li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
  .nx-desk__contacts .nx-picto, .nx-footer__contacts .nx-picto { width: 24px; height: 24px; }
  .nx-desk__contacts a, .nx-footer__contacts a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; overflow-wrap: anywhere; }

  /* ---- check-in form ---- */
  .nx-form { display: grid; row-gap: var(--space-5); max-width: 48rem; }
  .nx-form__note { font-size: var(--fs-small); line-height: 1.5; }
  .nx-form__summary {
    padding: var(--space-5);
    background: var(--reading-white);
    border: 2px solid var(--stop-red);
    border-radius: var(--radius);
  }
  .nx-form__summary:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); }
  .nx-form__summary-title { font-weight: 800; }
  .nx-form__summary-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
  .nx-form__summary-list a { color: var(--stop-red); font-weight: 700; }
  .nx-form__row { display: grid; gap: var(--space-5); }
  .nx-form__row--dob { grid-template-columns: minmax(0, 1fr) 4rem 5rem; gap: var(--space-2); }
  .nx-form__row--tel { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); }
  @media (min-width: 37.5em) {
    .nx-form__row--dob { grid-template-columns: 2fr 1fr 1.4fr; gap: var(--space-4); }
  }
  @media (min-width: 48em) {
    .nx-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .nx-form > .nx-field--group { margin-block: var(--space-2); }

  .nx-field { display: grid; gap: var(--space-2); min-width: 0; }
  .nx-field__label { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; }
  legend.nx-field__label { margin-bottom: var(--space-3); }
  .nx-field__req { margin-left: .1em; color: var(--sign-black); font-weight: 700; }
  .nx-field__sub { display: grid; gap: var(--space-1); min-width: 0; }
  .nx-field__sublabel { font-weight: 700; font-size: var(--fs-small); line-height: 1.3; }
  .nx-field__input {
    width: 100%; min-height: 56px;
    padding: 0 var(--space-4);
    background: var(--reading-white); color: var(--sign-black);
    border: var(--rule) solid var(--sign-black);
    border-radius: var(--radius);
    font: 400 1.125rem/1.4 var(--font-sign);
    appearance: none;
    transition: background-color var(--dur-hover-in) var(--ease-hover);
  }
  .nx-field__input:hover { border-width: 3px; padding-inline: calc(var(--space-4) - 1px); }
  .nx-field__input:focus { background: var(--sign-yellow-tint); }
  .nx-field__input[aria-invalid="true"] { border-color: var(--stop-red); }
  .nx-field__input:disabled { background: var(--disabled-bg); border-color: var(--rule-gray); color: var(--disabled-ink); cursor: not-allowed; }
  .nx-field__input--area { min-height: 160px; padding-block: var(--space-3); line-height: 1.5; resize: vertical; }
  .nx-field__select { position: relative; }
  .nx-field__select select { padding-right: 3rem; cursor: pointer; }
  .nx-field__select select:hover { padding-right: calc(3rem - 1px); }
  .nx-field__select > .nx-picto {
    position: absolute; right: var(--space-4); top: 50%;
    width: 24px; height: 24px; margin-top: -12px;
    pointer-events: none;
  }
  @media (max-width: 37.49em) {
    .nx-form__row--dob .nx-field__input { padding-inline: var(--space-3); }
    .nx-form__row--dob .nx-field__input:hover { padding-inline: calc(var(--space-3) - 1px); }
    .nx-form__row--dob .nx-field__select select { padding-right: 2.5rem; }
    .nx-form__row--dob .nx-field__select > .nx-picto { right: var(--space-2); }
  }
  .nx-field__error {
    align-items: flex-start; gap: var(--space-2);
    color: var(--stop-red); font-weight: 700; font-size: var(--fs-small); line-height: 1.4;
  }
  .nx-field__error:not([hidden]) { display: flex; }
  .nx-field__error .nx-picto { width: 20px; height: 20px; margin-top: .05em; }

  .nx-checks {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4);
    margin-inline: calc(-1 * var(--space-3));
  }
  .nx-check { position: relative; min-width: 0; }
  .nx-check__input {
    position: absolute; left: var(--space-3); top: 50%;
    width: 24px; height: 24px; margin: -12px 0 0;
    opacity: 0; cursor: pointer;
  }
  .nx-check__label {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 44px; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    line-height: 1.3; cursor: pointer;
    transition: background-color var(--dur-hover-in) var(--ease-hover);
  }
  .nx-check__box {
    display: grid; place-items: center; flex: none;
    width: 24px; height: 24px;
    background: var(--reading-white);
    border: 2px solid var(--sign-black);
    border-radius: var(--radius-check);
  }
  .nx-check__box .nx-picto { width: 18px; height: 18px; color: var(--sign-yellow); opacity: 0; }
  .nx-check__label:hover .nx-check__box { border-width: 3px; }
  .nx-check__input:checked + .nx-check__label { background: var(--sign-yellow-tint); }
  .nx-check__input:checked + .nx-check__label .nx-check__box { background: var(--sign-black); }
  .nx-check__input:checked + .nx-check__label .nx-picto { opacity: 1; }
  .nx-check__input:focus-visible + .nx-check__label .nx-check__box { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); }
  .nx-check__input:disabled + .nx-check__label { color: var(--disabled-ink); cursor: not-allowed; }
  .nx-check__input:disabled + .nx-check__label .nx-check__box { background: var(--disabled-bg); border-color: var(--rule-gray); }

  .nx-form__status { margin: 0; font-weight: 700; }
  .nx-form__status:empty { position: absolute; }
  .nx-form__status:not(:empty) {
    padding: var(--space-5) var(--space-5) 0;
    background: var(--reading-white);
    border: 2px solid var(--sign-black); border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .nx-form__result {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--reading-white);
    border: 2px solid var(--sign-black); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .nx-form__result:not([hidden]) { display: grid; }
  .nx-form__status:not(:empty) + .nx-form__result { margin-top: calc(-1 * var(--space-5)); }
  .nx-form__result summary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px;
    font-weight: 700; cursor: pointer; list-style: none;
  }
  .nx-form__result summary::-webkit-details-marker { display: none; }
  .nx-form__result summary .nx-picto { width: 24px; height: 24px; transition: rotate var(--dur-base) var(--ease-hover); }
  .nx-form__result details[open] > summary .nx-picto--down { rotate: -90deg; }
  .nx-form__text {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--panel-gray);
    border-radius: var(--radius);
    white-space: pre-wrap; overflow-wrap: anywhere;
    font: 400 var(--fs-small)/1.5 var(--font-sign);
  }

  /* ---- directory footer ---- */
  .nx-footer { padding-block: var(--space-9) var(--space-6); background: var(--sign-black); color: #fff; }
  .nx-footer__inner { display: grid; row-gap: var(--space-7); }
  .nx-footer__logo { display: inline-block; border-radius: 2px; }
  .nx-footer__logo img { height: 44px; width: auto; }
  .nx-footer__tagline { margin-top: var(--space-5); max-width: 32ch; color: var(--on-dark-2); }
  .nx-footer__list { border-top: 1px solid var(--rule-dark); }
  .nx-footer__list li { border-bottom: 1px solid var(--rule-dark); }
  .nx-footer__link {
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 48px;
    color: #fff; font-weight: 700; line-height: 1.25; text-decoration: none;
  }
  .nx-footer__label { display: inline-flex; align-items: center; gap: var(--space-3); padding-top: .1em; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color var(--hover-t) var(--ease-hover); }
  .nx-footer__link .nx-picto { margin-left: auto; color: var(--sign-yellow); transition: translate var(--hover-t) var(--ease-hover); }
  .nx-footer__link:hover .nx-footer__label { text-decoration-color: currentColor; }
  .nx-footer__link:hover .nx-picto { translate: var(--nudge) 0; }
  .nx-footer__link:focus-visible { outline-offset: -3px; box-shadow: none; }
  .nx-footer__link[aria-current="page"] .nx-picto { display: none; }
  .nx-footer__link[aria-current="page"] .nx-footer__label::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: -.1em; background: var(--sign-yellow); }
  .nx-footer__heading {
    margin-bottom: var(--space-3);
    font-weight: 800; font-size: var(--fs-label); line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
    color: var(--on-dark-2);
  }
  .nx-footer__contacts .nx-picto { color: var(--sign-yellow); }
  .nx-footer__contacts a { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
  .nx-footer__contacts a:hover { text-decoration-color: var(--sign-yellow); }
  .nx-footer__base {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: var(--space-8); padding-top: var(--space-5);
    color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.5;
  }
  .nx-footer__base::before { content: ""; position: absolute; top: 0; left: var(--page-pad); right: var(--page-pad); height: 1px; background: var(--rule-dark); }
  @media (min-width: 64em) {
    .nx-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
    .nx-footer__logo img { height: 56px; }
    .nx-footer__base { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-6); }
  }

  /* ---- direction sign ---- */
  .nx-dirsign { background: var(--sign-yellow); color: var(--sign-black); }
  .nx-dirsign__row + .nx-dirsign__row { border-top: var(--rule-sign) solid var(--sign-black); }
  .nx-dirsign__link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-areas: "picto name arrow" "text text text";
    column-gap: var(--space-4); row-gap: var(--space-3);
    align-items: center;
    min-height: 112px; padding-block: var(--space-5);
    color: inherit; text-decoration: none;
  }
  .nx-dirsign__link:focus-visible { outline-offset: -4px; box-shadow: none; }
  .nx-dirsign__picto { grid-area: picto; width: 48px; height: 48px; }
  .nx-dirsign__name {
    grid-area: name;
    font-weight: 900; font-size: var(--fs-dir); line-height: 1.05; letter-spacing: -.01em;
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: .12em;
    transition: text-decoration-color var(--hover-t) var(--ease-hover);
  }
  .nx-dirsign__text { grid-area: text; max-width: var(--measure); }
  .nx-dirsign__arrow { grid-area: arrow; justify-self: end; width: 40px; height: 40px; transition: translate var(--hover-t) var(--ease-hover); }
  .nx-dirsign__link:hover .nx-dirsign__name { text-decoration-color: currentColor; }
  .nx-dirsign__link:hover .nx-dirsign__arrow { translate: var(--nudge-lg) 0; }
  .nx-dirsign__link:active .nx-dirsign__arrow { translate: 0 0; }
  @media (min-width: 64em) {
    .nx-dirsign__link {
      grid-template-columns: 64px 4fr 6fr 48px;
      grid-template-areas: "picto name text arrow";
      column-gap: var(--space-6);
    }
    .nx-dirsign__picto { width: 64px; height: 64px; }
    .nx-dirsign__arrow { width: 48px; height: 48px; }
  }

  /* ---- services directory ---- */
  .nx-services { border-bottom: 2px solid var(--sign-black); }
  .nx-services__item { display: grid; gap: var(--space-2); padding-block: var(--space-5); border-top: 2px solid var(--sign-black); }
  .nx-services__name { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
  .nx-services__text { max-width: var(--measure); }
  @media (min-width: 64em) {
    .nx-services--plain .nx-services__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
    .nx-services--plain .nx-services__name { grid-column: 1 / 5; }
    .nx-services--plain .nx-services__text { grid-column: 5 / -1; }
  }
  .nx-services--dark { border-bottom-width: 1px; border-color: var(--rule-dark); }
  .nx-services--dark .nx-services__item {
    grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2);
    border-top: 1px solid var(--rule-dark);
  }
  .nx-services--dark .nx-services__picto { grid-row: 1 / span 2; color: var(--sign-yellow); }
  .nx-services--dark .nx-services__name { grid-column: 2; color: #fff; }
  .nx-services--dark .nx-services__text { grid-column: 2; color: var(--on-dark-2); }
  @media (min-width: 64em) {
    .nx-section--black .nx-grid > .nx-heading { grid-column: 1 / 5; }
    .nx-section--black .nx-grid > .nx-services--dark { grid-column: 5 / -1; }
  }

  /* ---- index list ---- */
  .nx-index {
    padding: var(--space-5) var(--space-6);
    background: var(--sign-black); color: #fff;
    border-radius: var(--radius);
  }
  .nx-index__item {
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 56px; padding-block: var(--space-2);
    font-weight: 700; font-size: var(--fs-h3); line-height: 1.2;
  }
  .nx-index__item + .nx-index__item { border-top: 1px solid var(--rule-dark); }
  .nx-index__item::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--sign-yellow); }

  /* ---- selection sign / panel ---- */
  .nx-selection--panel {
    display: flex; flex-direction: column;
    padding: var(--space-6);
    background: var(--panel-gray);
    border-radius: var(--radius);
  }
  .nx-selection__count { margin-top: var(--space-3); font-weight: 800; font-size: var(--fs-body); line-height: 1.3; }
  .nx-selection--panel .nx-selection__text { margin-top: var(--space-2); font-weight: 700; line-height: 1.4; }
  .nx-selection__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
  .nx-selection__deadline { margin-top: var(--space-4); font: 700 var(--fs-body)/1.3 var(--font-board); }
  @media (max-width: 47.99em) {
    .nx-selection--panel .nx-selection__actions { order: 1; flex-direction: column; margin-top: 0; }
    .nx-selection--panel .nx-selection__deadline { order: 2; }
    .nx-selection--panel .nx-seats-frame { order: 3; margin-top: var(--space-6); }
    .nx-selection--panel .nx-selection__count { order: 4; }
    .nx-selection--panel .nx-selection__text { order: 5; }
    .nx-selection__actions .nx-btn { width: 100%; }
    .nx-selection__actions .nx-btn--lg .nx-btn__label { padding-inline: var(--space-4); }
  }

  .nx-selection--sign { padding-block: var(--section-y); background: var(--sign-yellow); color: var(--sign-black); }
  .nx-selection__title { max-width: 18ch; font-weight: 900; font-size: var(--fs-sign); line-height: 1; letter-spacing: -.012em; }
  .nx-selection--sign .nx-seats-frame { margin-top: var(--space-4); }
  .nx-selection--sign .nx-selection__text { margin-top: var(--space-6); max-width: var(--measure); }
  .nx-selection--sign .nx-selection__actions { margin-top: var(--space-6); }
  .nx-selection--sign .nx-board--mini { margin-top: var(--space-6); }
  .nx-selection--sign .nx-selection__deadline {
    margin-top: var(--space-6);
    font: 800 var(--fs-label)/1.3 var(--font-sign); letter-spacing: .04em; text-transform: uppercase;
  }

  /* ---- onward sign ---- */
  .nx-onward { background: var(--sign-yellow); color: var(--sign-black); }
  .nx-onward__link {
    display: flex; align-items: center; gap: var(--space-5);
    min-height: 140px;
    color: inherit; text-decoration: none;
  }
  .nx-onward__link:focus-visible { outline-offset: -4px; box-shadow: none; }
  .nx-onward__arrow { width: 48px; height: 48px; transition: translate var(--hover-t) var(--ease-hover); }
  .nx-onward__label {
    padding-top: .08em;
    font-weight: 900; font-size: var(--fs-onward); line-height: 1; letter-spacing: -.01em;
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 4px; text-underline-offset: .12em;
    transition: text-decoration-color var(--hover-t) var(--ease-hover);
  }
  .nx-onward__link:hover .nx-onward__label { text-decoration-color: currentColor; }
  .nx-onward__link:hover .nx-onward__arrow { translate: var(--nudge-lg) 0; }
  @media (min-width: 48em) {
    .nx-onward__link { min-height: 200px; }
    .nx-onward__arrow { width: 64px; height: 64px; }
  }

  /* ---- photo ---- */
  .nx-photo img { width: 100%; height: auto; object-fit: cover; background: var(--panel-gray); }
  .nx-photo--3x2 img { aspect-ratio: 3 / 2; }
  .nx-photo--4x3 img { aspect-ratio: 4 / 3; }
  .nx-photo--21x9 img { aspect-ratio: 21 / 9; }

  /* ---- zones (Ivy League) ---- */
  .nx-zones__item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-5);
    padding-block: var(--space-5);
  }
  .nx-zones__item + .nx-zones__item { border-top: 2px solid var(--sign-black); }
  .nx-zones__num {
    grid-row: 1 / span 2;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    background: var(--sign-black); color: var(--sign-yellow);
    border-radius: var(--radius);
    font: 700 1.5rem/1 var(--font-board);
  }
  .nx-zones__title { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
  .nx-zones__text { margin-top: var(--space-2); max-width: var(--measure); }

  /* ---- photo + panel pair ---- */
  .nx-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  @media (min-width: 64em) {
    /* Photo and panel are one module: the panel runs the photo's full height (text at the top), and when the panel
       is the taller one the photo fills the row instead of leaving a white strip under it. */
    .nx-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: stretch; }
    .nx-pair > .nx-photo img { height: 100%; object-fit: cover; }
    .nx-pair > :first-child { grid-column: 1 / 8; grid-row: 1; }
    .nx-pair > :last-child { grid-column: 8 / -1; grid-row: 1; }
    .nx-pair--reverse > :first-child { grid-column: 6 / -1; }
    .nx-pair--reverse > :last-child { grid-column: 1 / 6; }
  }

  /* ---- section heading (no band) ---- */
  .nx-heading { margin-bottom: var(--space-5); }
  .nx-heading__title { font-weight: 800; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.01em; }
  .nx-heading--sign .nx-heading__title { font-weight: 900; font-size: var(--fs-sign); line-height: 1; letter-spacing: -.012em; }
  .nx-heading__sub { margin-top: var(--space-3); }
  .nx-heading__sub--line { font-weight: 800; font-size: var(--fs-sign-line); line-height: 1.25; letter-spacing: .04em; }
  .nx-heading__sub--h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
  .nx-heading__sub--accent { color: var(--sign-yellow); font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; }
  :where(.nx-section--black) .nx-heading { color: #fff; }
  :where(.nx-section--black) .nx-prose { color: var(--on-dark-2); }

  /* inside a grid the row-gap is the only space under a band or heading */
  .nx-grid > :is(.nx-idband, .nx-heading) { margin-bottom: 0; }
}

/* ============ utilities ============ */
@layer utilities {
  .nx-u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .nx-u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    :root { --nudge: 0px; --nudge-lg: 0px; }
  }

  /* Forced colors: drawn rules and bars are pseudo-element backgrounds, which the UA would repaint as Canvas.
     This block sits in the last layer so it wins over the component colours. */
  @media (forced-colors: active) {
    .nx-sign__zones li::before, .nx-sign__zones li::after,
    .nx-path::before, .nx-path__stop::after, .nx-index__item::before, .nx-seat::before, .nx-factband__item::before {
      background: CanvasText; forced-color-adjust: none;
    }
    .nx-nav__link::after, .nx-nav__link:active::after { background: Highlight; forced-color-adjust: none; }
    .nx-nav__link[aria-current="page"]::after, .nx-nav__apply:has([aria-current="page"])::after { background: CanvasText; forced-color-adjust: none; }
    .nx-seat, .nx-check__box { border-color: CanvasText; }
  }
}