/* =========================================================================
   netex · layout.css (Foundation) · grid, header, nav + AI panel, mobile menu,
   footer (two bands), page transitions (S13), reading-progress hairline.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer layout {

/* ---- grid (bible §4.1) ---------------------------------------------------- */
.nx-wrap { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }
.nx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (min-width: 768px)  { .nx-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.nx-grid > * { grid-column: 1 / -1; min-width: 0; }

/* Section head: display on 7–8 columns, lead offset into 8–12 (asymmetry by default). */
.nx-sechead { row-gap: var(--s-5); margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }
@media (min-width: 1024px) {
	.nx-sechead__title { grid-column: 1 / span 8; }
	.nx-sechead__lead { grid-column: 8 / -1; align-self: end; }
	.nx-sechead--stack .nx-sechead__lead { grid-column: 2 / span 6; }
	.nx-col-7 { grid-column: 1 / span 7; }
	.nx-col-5-end { grid-column: 8 / -1; }
	.nx-col-5 { grid-column: 1 / span 5; }
	.nx-col-7-end { grid-column: 6 / -1; }
}

/* The main column: the first section slides under the transparent header. */
.nx-main { display: block; outline: none; }
/* :nth-child(1 of …) skips data islands (<script type="application/json">) printed before the hero. */
.nx-main > :where(:first-child) { padding-top: calc(var(--header-h) + var(--hero-pad, var(--sec-y-tight))); }
.nx-main > :where(:nth-child(1 of :not(script, style, template, link, meta, noscript))) { padding-top: calc(var(--header-h) + var(--hero-pad, var(--sec-y-tight))); }

/* =========================================================================
   HEADER (§4.2) · sticky, never hidden, transparent over the hero,
   takes the field under it after 8px of scroll.
   ========================================================================= */
.nx-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--z-header);
	height: var(--header-h);
	margin-bottom: calc(-1 * var(--header-h));
	color: var(--fg);
	--mark-stroke: var(--silver);
	--brand-word: var(--paper);
	/* No colour transition: text and ground swap in the same frame when the field under the header changes,
	   so the bar is never caught half-way (dark text on a half-faded dark ground). */
}
.nx-header:is([data-field="paper"], [data-field="paper-2"]) { --mark-stroke: var(--steel-dark); --brand-word: var(--indigo); }
.nx-header.is-solid { background: var(--bg); box-shadow: inset 0 -1px 0 var(--rule); }
/* Without JS nothing re-reads the field under the bar: it keeps the page's first field as a solid ground,
   so the nav stays readable over every section below the hero (Paper included). */
html:not(.js) .nx-header { background: var(--bg); box-shadow: inset 0 -1px 0 var(--rule); }
.nx-header.is-panel-open { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-2: var(--steel-dark); --bg: var(--paper); --bg-2: var(--paper-2); --rule: var(--rule-light); --focus: var(--indigo); --link: var(--cyan-deep); --mark-stroke: var(--steel-dark); --brand-word: var(--indigo); box-shadow: inset 0 -1px 0 var(--rule-light); }
.nx-header__bar { display: flex; align-items: center; gap: var(--s-4); height: 100%; }

.nx-brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; color: var(--fg); text-decoration: none; }
.nx-menu { --mark-stroke: var(--silver); --brand-word: var(--paper); }
.nx-mark__bar { transform-origin: 90px 91px; transition: transform var(--dur-cut) var(--ease-snap); }
/* The original 2024 logo artwork (netex_logo_lockup). The header prints both colourways; the field under the
   bar picks one in the same frame as the ground swap (white wordmark on Ink/Indigo, indigo + cyan on Paper). */
.nx-logo { display: inline-block; line-height: 0; }
.nx-logo__img { display: block; width: auto; height: 100%; }
.nx-brand__logo { height: 50px; }
@media (max-width: 767px) { .nx-brand__logo { height: 44px; } }
.nx-header .nx-logo__img--on-light { display: none; }
.nx-header:is([data-field="paper"], [data-field="paper-2"], .is-panel-open) .nx-logo__img--on-dark { display: none; }
.nx-header:is([data-field="paper"], [data-field="paper-2"], .is-panel-open) .nx-logo__img--on-light { display: block; }
.nx-base__brand { display: inline-block; margin-bottom: var(--s-7); }
.nx-base__brand .nx-logo { height: 68px; }
@media (max-width: 767px) { .nx-base__brand .nx-logo { height: 56px; } }

/* Primary navigation (lg and up) */
.nx-nav { display: none; margin-left: auto; }
.nx-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.45vw, 28px); margin: 0; padding: 0; list-style: none; }
.nx-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	color: var(--fg);
	font: var(--w-ui) .9375rem/1 var(--f-sans);
	letter-spacing: -.003em;
	text-decoration: none;
	white-space: nowrap;
}
.nx-nav__link::before {
	/* the 47° slash that grows in front on hover */
	content: "";
	position: absolute;
	left: -9px;
	top: 50%;
	width: 1px;
	height: 15px;
	margin-top: -7.5px;
	background: currentColor;
	transform: rotate(43deg) scaleY(0);
	transition: transform 160ms var(--ease-mech);
}
.nx-nav__link[aria-current="page"]::after, .nx-nav__link.is-current::after {
	/* current page: 1.5px underline whose right end is cut at 47° */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1.5px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, calc(100% - 1.4px) 100%, 0 100%);
}
@media (hover: hover) { .nx-nav__link:hover::before { transform: rotate(43deg) scaleY(1); } }
.nx-nav__link:focus-visible::before { transform: rotate(43deg) scaleY(1); }
.nx-nav__caret { width: 8px; height: 8px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease-mech); }
.nx-nav__link[aria-expanded="true"] .nx-nav__caret { transform: translateY(3px) rotate(225deg); }

.nx-header__tools { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; flex: none; }

/* Language switch: mono 12px, current underlined. */
.nx-lang { display: none; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; font: 500 .75rem/1 var(--f-mono); letter-spacing: .06em; }
.nx-lang li { display: inline-flex; align-items: center; }
.nx-lang li + li::before { content: "/"; margin: 0 4px; color: var(--fg-3); }
.nx-lang a, .nx-lang span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; min-width: 24px; justify-content: center; color: var(--fg-2); text-decoration: none; }
.nx-lang span[aria-current] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .45em; }
@media (hover: hover) { .nx-lang a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .45em; } }

.nx-header__cta { white-space: nowrap; }
/* Phones: one Molten action per view (bible R2: Molten ≤ 5 % of any viewport). While a primary action of the
   page itself is on screen, the header CTA steps back to the secondary outline (same label, same link, still
   always visible) and lights up again when that action leaves. First paint: a hero that carries a primary
   action starts quiet (:has); after boot app.js follows what is actually on screen (.is-live on the CTA
   itself, never a class on <html>, which would restyle the whole page).
   No transition: the swap is a cut, never a half-faded state. */
@media (max-width: 767px) {
	.nx-header__cta, .nx-header__cta::before { transition: none; }
	body:has(.nx-main > :nth-child(1 of :not(script, style, template, link, meta, noscript)) .nx-btn--primary) .nx-header__cta:not(.is-live),
	.nx-header__cta.is-quiet { --btn-fill: transparent; --btn-fg: var(--fg); }
	body:has(.nx-main > :nth-child(1 of :not(script, style, template, link, meta, noscript)) .nx-btn--primary) .nx-header__cta:not(.is-live)::before,
	.nx-header__cta.is-quiet::before { background: var(--fg); clip-path: var(--clip-ui-ring); }
	body:has(.nx-main > :nth-child(1 of :not(script, style, template, link, meta, noscript)) .nx-btn--primary) .nx-header__cta:not(.is-live)::after,
	.nx-header__cta.is-quiet::after { display: none; }
}
.nx-header__cta .nx-cta-full { display: none; }
@media (min-width: 768px) {
	.nx-header__cta .nx-cta-full { display: inline; }
	.nx-header__cta .nx-cta-short { display: none; }
}

.nx-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	min-width: 44px;
	padding: 0 2px 0 6px;
	color: var(--fg);
	font: 500 .75rem/1 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.nx-menu-btn__icon { display: grid; gap: 5px; width: 22px; }
.nx-menu-btn__icon i { display: block; height: 1.5px; background: currentColor; }
.nx-menu-btn__icon i:last-child { width: 64%; justify-self: end; }
@media (max-width: 380px) { .nx-menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

@media (min-width: 1024px) {
	.nx-nav { display: block; }
	.nx-lang { display: flex; }
	.nx-menu-btn { display: none; }
	.nx-header__tools { margin-left: clamp(var(--s-4), 1.6vw, var(--s-6)); }
}
@media (min-width: 1024px) and (max-width: 1239px) {
	.nx-brand__logo { height: 42px; }
	.nx-nav__list { gap: 16px; }
	.nx-nav__link { font-size: .875rem; }
	.nx-header__cta { padding-inline: 14px; }
}

/* Reading progress: a 2px N-gradient hairline under the header, leading end cut at 47°. */
.nx-progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity var(--dur-ui) var(--ease-mech); }
.nx-progress > i {
	display: block;
	height: 100%;
	background: var(--n-grad);
	clip-path: polygon(0 0, 100% 0, calc(100% - 1.86px) 100%, 0 100%);
	transform: translateX(calc((var(--p, 0) - 1) * 100%));
	will-change: transform;
}
.nx-progress.is-hidden, html:not(.js) .nx-progress { opacity: 0; }

/* =========================================================================
   AI & AUTOMATION PANEL (desktop, copy g3): Paper sheet with a top-left 47° chamfer,
   opened by a clip-path wipe; three columns.
   ========================================================================= */
.nx-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--z-panel);
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-6) 0 var(--s-7);
	color: var(--fg);
	box-shadow: inset 0 1px 0 var(--rule-light);
	border-bottom: var(--bw) solid var(--ink);
	--run: calc(var(--panel-h, 560px) * var(--nx-cot));
	clip-path: polygon(0 0, 0 0, calc(-1 * var(--run)) 100%, calc(-1 * var(--run)) 100%, calc(-1 * var(--run)) 100%);
	transition: clip-path var(--dur-cut) var(--ease-cut), visibility 0s linear var(--dur-cut);
	visibility: hidden;
}
.nx-panel.is-open {
	clip-path: polygon(calc(var(--s-6)) 0, calc(100% + var(--run)) 0, 100% 100%, 0 100%, 0 calc(var(--s-6) * var(--nx-tan)));
	visibility: visible;
	transition: clip-path var(--dur-cut) var(--ease-cut), visibility 0s;
}
html:not(.js) .nx-panel { display: none; }
.nx-panel__head { margin-bottom: var(--s-6); }
.nx-panel__title { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.1; letter-spacing: var(--tr-h3); }
.nx-panel__intro { font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.45; color: var(--fg); max-width: 52ch; margin-top: var(--s-3); }
.nx-panel__hub { display: inline-flex; margin-top: var(--s-4); }
.nx-panel__cols { row-gap: var(--s-6); }
.nx-panel__col-title { margin-bottom: var(--s-3); }
.nx-panel__svc { grid-column: 1 / span 5; }
.nx-panel__sec { grid-column: 6 / span 3; }
.nx-panel__xray { grid-column: 9 / -1; }
.nx-panel .nx-index__row { min-height: 0; padding-block: var(--s-3); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title arrow" "meta arrow"; }
.nx-panel .nx-index__title { font-size: 1.0625rem; }
.nx-panel__sectors { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.nx-panel__sectors a { display: flex; align-items: center; min-height: 40px; padding: var(--s-1) 0; border-bottom: var(--bw) solid var(--rule); color: var(--fg); text-decoration: none; font: 400 .9375rem/1.3 var(--f-sans); }
.nx-panel__sectors a:hover { text-decoration: underline; text-underline-offset: .2em; }
.nx-panel__sectors .is-all { font-weight: var(--w-strong); }
.nx-panel__xray .nx-sheet { height: 100%; }
.nx-panel__xray .nx-sheet__title { margin-bottom: var(--s-3); font-size: var(--t-h4); }
.nx-panel__xray p { font-size: var(--t-small); line-height: 1.5; }
.nx-panel__price { margin-top: var(--s-3); font: 500 .75rem/1.4 var(--f-mono); color: var(--fg); }

/* =========================================================================
   MOBILE MENU (copy g5): full-screen sheet split along the 47° seam.
   ========================================================================= */
.nx-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: var(--ink);
	color: var(--paper);
	clip-path: polygon(100% 0, calc(100% + 93.25vh) 0, 100% 100%, 100% 100%);
	transition: clip-path var(--dur-cut) var(--ease-cut), visibility 0s linear var(--dur-cut);
	visibility: hidden;
}
.nx-menu.is-open {
	clip-path: polygon(-93.25vh 0, calc(100% + 93.25vh) 0, 100% 100%, -93.25vh 100%);
	visibility: visible;
	transition: clip-path var(--dur-cut) var(--ease-cut), visibility 0s;
}
.nx-menu[hidden] { display: none; }
.nx-menu__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--margin); border-bottom: var(--bw) solid var(--rule-dark); }
.nx-menu__close { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--paper); font: 500 .75rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.nx-menu__close-x { position: relative; width: 20px; height: 20px; }
.nx-menu__close-x::before, .nx-menu__close-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transform: rotate(-47deg); }
.nx-menu__close-x::after { transform: rotate(47deg); }
.nx-menu__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nx-menu__block { padding: var(--s-6) var(--margin) var(--s-5); }
.nx-menu__title { font: var(--w-h3) var(--t-h3)/1.05 var(--f-sans); letter-spacing: var(--tr-h3); }
.nx-menu__sub { margin-top: var(--s-2); font: italic 400 1rem/1.4 var(--f-serif); color: var(--fg-2); max-width: 36ch; }
.nx-menu__list { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.nx-menu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 52px;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	font: var(--w-h3) 1.375rem/1.15 var(--f-sans);
	letter-spacing: -.01em;
	text-decoration: none;
}
.nx-menu__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.nx-menu__list .nx-icon { width: 18px; height: 18px; flex: none; opacity: .7; }

/* The seam: a 47° N-gradient bar across the screen; Ink above-left, Indigo below-right. */
.nx-menu__seam {
	--seam-h: 248px;
	--seam-run: calc(var(--seam-h) * .9325);
	position: relative;
	height: var(--seam-h);
	background: var(--indigo);
	overflow: hidden;
}
.nx-menu__seam::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	clip-path: polygon(0 0, calc(50% + var(--seam-run) / 2) 0, calc(50% - var(--seam-run) / 2) 100%, 0 100%);
}
.nx-menu__seam::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--seam-h) * 1.3673 + 80px);
	height: 6px;
	margin: -3px 0 0 calc((var(--seam-h) * 1.3673 + 80px) / -2);
	background: var(--n-grad);
	transform: rotate(-47deg);
}
.nx-menu__seam-in { position: relative; z-index: 1; height: 100%; }
.nx-menu__seam-title, .nx-menu__seam a {
	position: absolute;
	left: calc(50% - var(--seam-run) / 2 + var(--seam-run) * var(--f));
	top: calc(100% - var(--seam-h) * var(--f));
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 .75em;
	background: var(--paper);
	color: var(--ink);
	white-space: nowrap;
	transform: translate(-50%, -50%);
}
.nx-menu__seam-title { --f: .84; font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--rule-dark); }
@media (max-width: 419px) {
	.nx-menu__seam-title { left: var(--margin); top: var(--s-3); transform: none; }
}
.nx-menu__seam a { font: var(--w-ui) .9375rem/1.2 var(--f-sans); text-decoration: none; }
.nx-menu__seam li:nth-child(1) a { --f: .6; }
.nx-menu__seam li:nth-child(2) a { --f: .38; }
.nx-menu__seam li:nth-child(3) a { --f: .15; }
.nx-menu__seam ul { margin: 0; padding: 0; list-style: none; }
.nx-menu__seam a:focus-visible { outline-color: var(--cyan); }
@media (min-width: 420px) {
	/* Rotated along the bar. Positions are px along U (--s, from the seam's centre) and N (--o), so
	   nothing depends on the viewport width: the three chips ride the bar, the title rides a parallel
	   track on the Ink side. Fits the longest EL strings from 420 px up (no clipping at either end). */
	.nx-menu__seam { --seam-h: 460px; }
	.nx-menu__seam-title, .nx-menu__seam a {
		left: calc(50% + var(--s, 0) * .682px + var(--o, 0) * .731px);
		top: calc(50% - var(--s, 0) * .731px + var(--o, 0) * .682px);
		transform: translate(-50%, -50%) rotate(-47deg);
	}
	.nx-menu__seam-title { --s: 150; --o: -40; min-height: 28px; }
	.nx-menu__seam li:nth-child(1) a { --s: 45; }
	.nx-menu__seam li:nth-child(2) a { --s: -55; }
	.nx-menu__seam li:nth-child(3) a { --s: -190; }
}

.nx-menu__mk { padding-top: var(--s-5); }
.nx-menu__util { padding: var(--s-5) var(--margin) var(--s-6); background: var(--ink-2); --bg-2: var(--ink-3); }
.nx-menu__util-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); margin: 0; padding: 0; list-style: none; }
.nx-menu__util-list a { display: flex; align-items: center; min-height: 44px; border-bottom: var(--bw) solid var(--rule-dark); color: var(--paper); font: 500 .8125rem/1.2 var(--f-mono); text-decoration: none; }
.nx-menu__toggles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); }
.nx-menu__toggles .nx-lang { display: flex; }
.nx-menu__cta { padding: var(--s-3) var(--margin) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--ink); border-top: var(--bw) solid var(--rule-dark); }
.nx-menu__cta .nx-btn { width: 100%; }
html.is-menu-open { overflow: hidden; }
@media (min-width: 1024px) { .nx-menu { display: none !important; } }

/* =========================================================================
   LANGUAGE NOTICE (copy g6): a dismissible line, never a redirect.
   A 40px strip in the document flow ABOVE the header (pushes, never covers). It takes the page's first
   field (data-field) one step raised (--bg-2), so it reads as part of the page's top edge on Ink, Paper
   and Indigo alike. html.nx-ln is set before first paint by the head bootstrap → no layout shift.
   ========================================================================= */
.nx-langnote { display: none; }
/* --nx-top: how far the strip pushes the page down (0 without it); scroll-driven page effects that start
   "at the top of the document" offset their ranges by it (front-page.css hero scroll-out). */
html.nx-ln { --nx-top: 40px; }
html.nx-ln .nx-langnote {
	display: block;
	position: relative;
	z-index: calc(var(--z-header) + 1);
	background: var(--bg-2);
	color: var(--fg);
	box-shadow: inset 0 -1px 0 var(--rule);
	font: 400 .8125rem/1.3 var(--f-sans);
}
.nx-langnote__in { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; }
.nx-langnote__tag {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 6px;
	border: var(--bw) solid var(--fg-3);
	color: var(--fg-2);
	font: 500 .625rem/1 var(--f-mono);
	letter-spacing: .08em;
}
.nx-langnote__text { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--fg-2); }
.nx-langnote__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	color: var(--link);
	font-weight: var(--w-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	white-space: nowrap;
}
.nx-langnote__arrow { width: 14px; height: 14px; }
@media (hover: hover) { .nx-langnote__link:hover { text-decoration-thickness: 2px; } }
.nx-langnote__close { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; color: var(--fg); }
.nx-langnote__close .nx-icon { width: 16px; height: 16px; }
@media (hover: hover) { .nx-langnote__close:hover { background: var(--bg); } }
/* Phones: one line, the link alone (the sentence stays for screen readers). */
@media (max-width: 599px) {
	.nx-langnote__msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media print { .nx-langnote { display: none !important; } }

/* =========================================================================
   FOOTER · band 1 «Κλείστε τη διαγώνιο» (Paper) · band 2 base (Ink)
   ========================================================================= */
.nx-footer { position: relative; }

.nx-close { padding-block: var(--sec-y); }
.nx-close.ch-tl { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.nx-close__grid { row-gap: var(--s-7); align-items: start; }
.nx-close__copy { display: grid; gap: var(--s-5); align-content: start; }
.nx-close__title { --flar: 50; --volm: 40; font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 12ch; color: var(--fg); }
.nx-close__sub { max-width: 46ch; }
.nx-close__state { font: 500 .75rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); min-height: 1.4em; }
.nx-close__state:empty { display: none; }
.nx-close__plain { justify-self: start; }
.nx-close__formwrap { margin-top: var(--s-3); }
.js .nx-close:not(.is-open) .nx-close__formwrap { display: none; }
.nx-close.is-open .nx-close__formwrap { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
.nx-close.is-open .nx-close__plain { display: none; }

.nx-close__stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.02; margin-inline: auto; color: var(--ink); } /* touch-action: none only on the bar, so the stage never traps page scroll on phones */
.nx-close__drawing { position: absolute; left: 6%; top: 4%; width: 58%; height: auto; overflow: visible; }
.nx-close__drawing .nx-dim { stroke: var(--steel-dark); }
.nx-close__drawing text { fill: var(--steel-dark); font: 500 9px var(--f-mono); letter-spacing: .04em; }
.nx-close__drawing .nx-close__outline-a { stroke: var(--ink); }
.nx-close__drawing .nx-close__outline-b { stroke: var(--paper); }
.nx-close__drawing .nx-close__slot { stroke: var(--indigo); stroke-dasharray: 4 5; }
.nx-close__drawing .nx-close__solid { display: none; }
html:not(.js) .nx-close__drawing .nx-close__solid, .nx-close.is-closed .nx-close__drawing .nx-close__solid { display: inline; }
.nx-close__bar {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 30%;
	height: 4.6%;
	border-radius: var(--r-pill);
	background: var(--n-grad);
	cursor: grab;
	touch-action: none;
	transform-origin: 50% 50%;
	box-shadow: 0 0 0 1px rgb(8 9 14 / .12);
}
.nx-close__bar:active, .nx-close__bar.is-drag { cursor: grabbing; }
.nx-close__bar:focus-visible { outline: var(--bw-focus) solid var(--indigo); outline-offset: 4px; }
.nx-close.is-closed .nx-close__bar { cursor: default; }
.nx-close__hint { position: absolute; left: 0; top: 0; font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); }
.nx-close.is-closed .nx-close__hint { visibility: hidden; }
.nx-close__brain { position: absolute; right: 2%; bottom: 8%; width: 34%; color: var(--ink); }
.nx-close__brain svg { width: 100%; height: auto; overflow: visible; }
.nx-close__brain .bm-l, .nx-close__brain .bm-r { transition: transform var(--dur-mech) var(--ease-mech); }
.nx-close__brain .bm-l { transform: translate(-48px, 51px); }   /* −U × 70 */
.nx-close__brain .bm-r { transform: translate(48px, -51px); }   /* +U × 70 */
.nx-close.is-closed .nx-close__brain .bm-l, .nx-close.is-closed .nx-close__brain .bm-r { transform: none; }
.nx-close__brain .bm-const { transition: color var(--dur-cut) var(--ease-mech); }
.nx-close.is-closed .nx-close__brain .bm-const { color: var(--sig); }
.nx-close__tagline { position: absolute; right: 2%; top: 6%; width: 38%; }
.nx-close__tagline img { width: 100%; height: auto; }
.nx-close__snapped { position: absolute; left: 44%; top: 46%; font: 700 1rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.nx-close__snapped:empty { display: none; }

@media (min-width: 1024px) {
	.nx-close__copy { grid-column: 1 / span 6; }
	.nx-close__art { grid-column: 7 / -1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.nx-close__copy .nx-close__title { max-width: 10ch; }
}

/* Band 2: base footer on Ink */
.nx-base { padding: var(--sec-y-tight) 0 var(--s-6); }
.nx-base__offices { row-gap: var(--s-7); padding-bottom: var(--s-8); border-bottom: var(--bw) solid var(--rule); }
.nx-office { display: grid; gap: var(--s-3); align-content: start; container-type: inline-size; }
.nx-office__name {
	font-size: clamp(2.5rem, 14.6cqi, 9rem);
	font-weight: 880;
	line-height: var(--lh-mega);
	letter-spacing: var(--tr-mega);
	text-transform: uppercase;
	max-width: none;
	color: var(--fg);
}
.nx-office__meta { display: grid; gap: var(--s-1); font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); }
.nx-office__mono { font: 500 .75rem/1.5 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); }
.nx-office__mono b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-office__link { justify-self: start; }
@media (min-width: 1024px) {
	.nx-office:first-child { grid-column: 1 / span 6; }
	.nx-office:last-child { grid-column: 7 / -1; }
}

.nx-base__nav { row-gap: var(--s-6); padding-block: var(--s-7); border-bottom: var(--bw) solid var(--rule); }
.nx-base__col { grid-column: span 2; }
.nx-base__col h2 { max-width: none; margin-bottom: var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-base__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.nx-base__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--fg); font: 400 .9375rem/1.3 var(--f-sans); text-decoration: none; }
.nx-base__col a:hover { text-decoration: underline; text-underline-offset: .2em; }
.nx-base__col a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
@media (min-width: 768px) { .nx-base__col { grid-column: span 4; } }
@media (min-width: 1024px) {
	.nx-base__col { grid-column: span 2; }
	.nx-base__col--wide { grid-column: span 3; }
}

.nx-base__settings { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); padding-block: var(--s-5); border-bottom: var(--bw) solid var(--rule); }
.nx-base__settings .nx-lang { display: flex; }
.nx-base__settings-title { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-base__entity { padding-block: var(--s-5); border-bottom: var(--bw) solid var(--rule); font: 400 .75rem/1.6 var(--f-mono); color: var(--fg-2); }
.nx-base__entity dl { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0; }
.nx-base__entity dt { display: inline; color: var(--fg-3); }
.nx-base__entity dd { display: inline; margin: 0 0 0 .4em; color: var(--fg); }
.nx-base__bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-top: var(--s-5); font: 400 .75rem/1.6 var(--f-mono); color: var(--fg-2); }
.nx-base__bottom a { color: var(--fg); }
.nx-base__line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; }
.nx-base__colophon { max-width: 64ch; }
.nx-base__top { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--fg); text-decoration: none; }
.nx-base__top .nx-icon { transform: rotate(-90deg); }

/* =========================================================================
   PAGE TRANSITIONS (S13): "the Cut" — cross-document View Transitions.
   93.25vh = 100vh × cot 47°: the horizontal run of a true 47° edge across the
   full viewport height. Literal values on purpose (no var() in the VT tree).
   ========================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: nx-cut 900ms cubic-bezier(.77, 0, .18, 1) both; }
@keyframes nx-cut {
	from { clip-path: polygon(-93.25vh 0, 0 0, -93.25vh 100%, -93.25vh 100%); }
	to   { clip-path: polygon(-93.25vh 0, calc(100vw + 93.25vh) 0, 100vw 100%, -93.25vh 100%); }
}
html.vt-back::view-transition-new(root) { animation-name: nx-cut-back; } /* mirrored, −47° */
@keyframes nx-cut-back {
	from { clip-path: polygon(100vw 0, calc(100vw + 93.25vh) 0, calc(100vw + 93.25vh) 100%, calc(100vw + 93.25vh) 100%); }
	to   { clip-path: polygon(-93.25vh 0, calc(100vw + 93.25vh) 0, calc(100vw + 93.25vh) 100%, 0 100%); }
}
html.rm::view-transition-group(*), html.rm::view-transition-old(*), html.rm::view-transition-new(*) { animation: none !important; }

/* The leading edge: a 6px N-gradient bar riding the 47° edge, inside the live new view. */
.nx-cut-edge {
	position: fixed;
	left: 0;
	top: 50vh;
	z-index: var(--z-cut-edge);
	display: none;
	width: 136.73vh;
	height: 6px;
	margin: -3px 0 0 -68.37vh;
	background: linear-gradient(90deg, #2A2C7A 0%, #1572BD 50%, #02A8E9 100%);
	pointer-events: none;
}
html.vt-in .nx-cut-edge { display: block; animation: nx-edge 900ms cubic-bezier(.77, 0, .18, 1) both; }
html.vt-in.vt-back .nx-cut-edge { animation-name: nx-edge-back; }
html.vt-develop .nx-cut-edge { background: #02A8E9; }
@keyframes nx-edge {
	from { transform: translateX(calc(-46.63vh - 4px)) rotate(-47deg); }
	to   { transform: translateX(calc(100vw + 46.63vh - 4px)) rotate(-47deg); }
}
@keyframes nx-edge-back {
	from { transform: translateX(calc(100vw + 46.63vh + 4px)) rotate(47deg); }
	to   { transform: translateX(calc(-46.63vh + 4px)) rotate(47deg); }
}

} /* end @layer layout */