/* =========================================================================
   netex · pages/front-page.css (Home group) · bible §7.1, S1, S2, S3
   s1 hero: «Η ζωγραφιά και το σχέδιό της» (strategy/hero-decision.md): the whole painting + its legend,
   final at first paint; the engine (brain-stage) only adds motion.
   Two layouts for the stage (hero → split → doors):
     · motion  (html.js:not(.rm), engine not failed): the hero scrolls over a sticky pin;
                the brain never leaves the screen, it becomes the drawing, splits, draws the N
                and opens into the two doors. Text is final from the first frame.
     · static  (no JS, reduced motion, engine error): a hero, a labelled figure, a diptych.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* =========================================================================
   STAGE · shared
   ========================================================================= */
.home-stage {
	position: relative;
	isolation: isolate;
	padding-top: 0;
	background: var(--ink);
	color: var(--paper);
	--hs-dist: 330svh;
	/* The hero plate «Η ζωγραφιά και το σχέδιό της» (strategy/hero-decision.md). Every position on the brain
	   is in POSTER units (P, 0…1080, the space of brain-poster-1080; brain.json: P = .9647·SVG + (142.554,
	   20.691)); one length, --k = CSS px per P, scales poster, loop, drawing, bar and labels together. */
	--bh-wrap: min(100vw - 2 * var(--margin), var(--max));
	--bh-tx: calc((100vw - var(--bh-wrap)) / 2 + min(var(--bh-wrap) * .57, 52rem)); /* text column's right edge */
	--bh-cx: min(100vw - var(--margin), 50vw + var(--max) / 2);                      /* content's right edge */
}

/* ---- s1 hero: the text column ------------------------------------------------ */
.hs-hero { position: relative; z-index: 3; padding: 0; background: transparent; pointer-events: none; }
.hs-hero__win { display: none; }
.hs-hero__body { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + clamp(24px, 5svh, 64px)) clamp(36px, 7svh, 88px); }
.hs-hero__body > .nx-wrap { position: relative; }
.hs-hero__text { display: flex; flex-direction: column; max-width: min(57%, 52rem); pointer-events: auto; }
.hs-hero__eyebrow { order: 0; }
.hs-h1 { order: 1; margin: 0; }
.hs-promise { order: 2; }
.hs-sub { order: 3; }
.hs-router { order: 4; }
.hs-sectors { order: 5; }
.hs-micro { order: 6; }

/* Measures in em, not ch: the live 13ch/14ch/30ch/34ch/52ch/56ch with the webfonts loaded. With ch the
   fallback face measured 12–17 % differently, so the promise re-wrapped on the font swap and moved the
   router (CLS 0.0114). Same look, no reflow. */
.hs-h1 { font-size: var(--t-display); max-width: none; text-wrap: balance; }
.hs-h1__l1 { display: block; max-width: 8.75em; }
html[lang="el"] .hs-h1__l1 { max-width: 9.42em; }
.hs-h1__l2 { max-width: 19.7em; margin-top: var(--s-4); }
.hs-promise { margin-top: var(--s-5); max-width: 19.52em; color: var(--fg); }
/* EN: one line in Literata and in its fallback alike (at 19.52em only the webfont fits it on one line) */
html[lang="en"] .hs-promise { max-width: 22em; }
.hs-sub { margin-top: var(--s-4); max-width: 33.96em; font-size: var(--t-body); color: var(--fg-2); }
.hs-router { margin-top: clamp(var(--s-5), 3.4svh, var(--s-7)); gap: var(--s-2); }
.hs-router .nx-router__q { margin-bottom: 0; }
.hs-router__hint { font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 599px) { .hs-router__hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.hs-chips { margin: var(--s-2) 0 0; padding: 0; list-style: none; gap: var(--s-2); }
.hs-chips > li { display: flex; }
.hs-chips .nx-tip { left: 0; }
.hs-router__note { font: 400 var(--t-micro)/1.45 var(--f-mono); letter-spacing: .02em; color: var(--fg-3); max-width: 33.6em; }
.hs-sectors { margin-top: var(--s-5); align-items: baseline; }
.hs-sectors__label { color: var(--fg-2); }
.hs-sectors__all { font-weight: var(--w-strong); }
.hs-micro { margin-top: var(--s-5); font: 500 var(--t-small)/1.4 var(--f-mono); letter-spacing: .01em; color: var(--fg-3); }
.hs-micro::before { content: ""; display: inline-block; width: 26px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; transform: rotate(-47deg); }

/* Short desktop viewports: the router and the sector line stay above the fold (bible S1). */
@media (min-width: 1024px) and (max-height: 959px) {
	.hs-router { order: 3; }
	.hs-sectors { order: 4; }
	.hs-sub { order: 5; margin-top: var(--s-5); }
	.hs-promise { margin-top: var(--s-4); }
}
/* Laptops at 768 / 720 px high (1366×768, 1280×720): the display scales with the height too, and the
   router hint is read out but not shown, so the sector line still clears the fold. */
@media (min-width: 1024px) and (max-height: 820px) {
	.hs-h1 { font-size: min(var(--t-display), 9.4svh); }
	.hs-h1__l2 { margin-top: var(--s-2); }
	.hs-promise { margin-top: var(--s-3); }
	.hs-router { margin-top: var(--s-4); }
	.hs-router__hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- s1 hero: the brain plate ---------------------------------------------------
   The stage lives in the Split's pin (split.js registers its .brain-stage__frame = the 1080 P poster
   box). Layers inside the frame: the poster (LCP) + the calm loop + the painted-gear canvas, screen-
   blended on Ink; the drawing twin (engine); the join (the logo's N-bar, masked by the hemispheres)
   and the seam's dashed line; the legend (real text, final at first paint). */
.brain-stage--home { position: absolute; z-index: 1; }
/* in the pinned scene the stage sits over the Split's canvas (z 2, same pin), so the engine can crossfade the
   hand-over; the hero text (z 3, outside the pin) stays above it. Static layouts keep it under the hero. */
html.js:not(.rm) .home-stage:not([data-engine-state="error"]) .brain-stage--home { z-index: 3; }
.brain-stage--home .brain-stage__view { position: relative; margin: 0; }
.brain-stage--home .brain-stage__win { position: relative; }
.brain-stage--home .brain-stage__frame { background: var(--ink); } /* the screen blend sees Ink, not the pin's transparency */
.brain-stage--home .brain-stage__media { -webkit-mask-image: none; mask-image: none; }
/* The calm loop: clipped 2.5 % inside the poster box (that band is motionless glow), so the <video> is
   always smaller than the poster and never becomes the LCP element. Its liquid ripple is strong on the
   right hemisphere: there it sits at 22 % over the still (one decode; the step lies in the seam's dark gap). */
.brain-stage--home .brain-stage__vwrap { position: absolute; inset: 2.5%; overflow: hidden; }
.brain-stage--home .brain-stage__vwrap .brain-stage__video {
	inset: auto;
	left: -2.6316%;
	top: -2.6316%;
	width: 105.2632%;
	height: 105.2632%;
	max-width: none;
	opacity: 0;
	transition: none;
	/* its outer columns feather out (P 120 → 215 on the left, 994 → 1053 on the right): the loop throws a paint
	   drop out of the brain every cycle, which now fades away instead of being sliced by the clip edge (the still
	   under it is the same painting, so nothing else changes); the step to 22 % ramps across the seam's gap
	   (P 535 → 548) instead of cutting it with a hard vertical line */
	-webkit-mask-image: linear-gradient(90deg, transparent 11.1%, #000 19.9%, #000 49.5%, rgb(0 0 0 / .22) 50.7%, rgb(0 0 0 / .22) 92%, transparent 97.5%);
	mask-image: linear-gradient(90deg, transparent 11.1%, #000 19.9%, #000 49.5%, rgb(0 0 0 / .22) 50.7%, rgb(0 0 0 / .22) 92%, transparent 97.5%);
}
/* the painted gear train (engine): the poster's own gears 1–4 turning, on a small canvas over P 258…432 × 162…638 */
.bh-cogs { position: absolute; display: block; left: calc(var(--k) * 258); top: calc(var(--k) * 162); width: calc(var(--k) * 174); height: calc(var(--k) * 476); opacity: 0; pointer-events: none; }

/* the drawing register: the SVG twin in cyan hairlines over the painting (filled by the engine) */
.bh-draw, .bh-over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the paint contours end above the legend: the drawing fades out between --bh-draw-a and --bh-draw-b */
.bh-draw { color: var(--cyan); --bh-draw-a: calc(var(--k) * 736); --bh-draw-b: calc(var(--k) * 786); -webkit-mask-image: linear-gradient(to bottom, #000 var(--bh-draw-a), transparent var(--bh-draw-b)); mask-image: linear-gradient(to bottom, #000 var(--bh-draw-a), transparent var(--bh-draw-b)); }
.bh-draw * { vector-effect: non-scaling-stroke; }
.bh-draw .bh-side { opacity: 0; }
.bh-draw [id$="facets"] path { stroke-opacity: .5; }
.bh-draw [id$="constellation-nodes"] .vertex { display: none; }
.bh-draw [id$="constellation-nodes"] .star { fill: currentColor; stroke: none; }
.bh-draw [id$="callout-anchors"] { display: none; }
.bh-draw [id$="droplets"] path { fill: none; }
.bh-draw .bh-ink { color: var(--paper); }

/* the join: the logo's N-bar on the 47° line through the seam; the mask (the two hemispheres, printed in
   the markup) keeps it behind the painting: it leaves logic, glints in the seam gap, enters imagination */
.bh-bar__line, .bh-bar__pulse { stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; fill: none; }
.bh-bar__line--m { display: none; }
.bh-seamline { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: .7; }
/* the bar and the seam line belong to the painting: while the engine runs (.bh-live) they wait for the poster
   to paint (.is-plate on its load), so they never frame an empty plate or a poster that failed; if the engine
   fails to load they show at once, if it never runs at all after 6 s. Reduced motion: shown as printed. */
html.js:not(.rm) .brain-stage--home:not(.is-plate):not([data-engine-state="error"]) :is(.bh-bar, .bh-seamline) { visibility: hidden; animation: bh-plate-late 1ms 6s both; }
html.js:not(.rm) .brain-stage--home.bh-live:not(.is-plate):not([data-engine-state="error"]) :is(.bh-bar, .bh-seamline) { animation: none; }
@keyframes bh-plate-late { to { visibility: visible; } }

/* ---- the legend: three labels on the join. Type carries the idea (bible R6): logic = Commissioner
   FLAR 0 + JetBrains Mono · imagination = FLAR 100 / VOLM 100 + Literata Italic · the seam = FLAR 50. */
.bh-legend { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.bh-call { position: absolute; display: grid; gap: 4px; width: max-content; pointer-events: auto; transition: color var(--dur-ui) var(--ease-mech); }
.bh-call__kicker { margin: 0; font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.bh-call__kicker::before { content: ""; display: inline-block; width: 14px; height: 1.5px; margin-right: 8px; vertical-align: .3em; background: currentColor; transform: rotate(-47deg); }
.bh-call__title {
	display: inline-flex;
	align-items: baseline;
	gap: .3em;
	width: max-content;
	font: 680 clamp(1.0625rem, .9rem + .45vw, 1.375rem)/1.12 var(--f-sans);
	letter-spacing: -.01em;
	color: var(--paper);
	text-decoration: none;
	text-underline-offset: .2em;
	font-variation-settings: "FLAR" var(--flar, 0), "VOLM" var(--volm, 0);
	transition: color var(--dur-ui) var(--ease-mech);
}
.bh-call__arrow { width: .78em; height: .78em; align-self: center; flex: none; transition: transform var(--dur-ui) var(--ease-mech); }
.bh-call__title:focus-visible, .bh-call__seam:focus-visible { outline: var(--bw-focus) solid var(--cyan); outline-offset: 4px; }
@media (hover: hover) {
	.bh-call__title:hover, .bh-call__seam:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
	.bh-call__title:hover .bh-call__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
}
.bh-call__items { display: block; margin: 2px 0 0; padding: 0; list-style: none; text-wrap: balance; }
.bh-call__items li { display: inline; color: var(--fg-2); transition: color var(--dur-stamp) var(--ease-stamp); }
/* the lists wrap after a separator, never before one */
.bh-call__items li:not(:last-child)::after { content: "\00a0·\0020"; padding-right: .15em; color: var(--fg-3); }

.bh-call--l { --flar: 0; --volm: 0; }
.bh-call--l .bh-call__kicker { color: var(--cyan); }
.bh-call--l .bh-call__items { font: 500 .75rem/1.35 var(--f-mono); letter-spacing: .02em; }
.bh-call--r { --flar: 100; --volm: 100; justify-items: end; text-align: right; }
.bh-call--r .bh-call__kicker::before { display: none; }
.bh-call--r .bh-call__kicker::after { content: ""; display: inline-block; width: 14px; height: 1.5px; margin-left: 8px; vertical-align: .3em; background: currentColor; transform: rotate(-47deg); }
.bh-call--r .bh-call__items { font: italic 400 .9375rem/1.3 var(--f-serif); }
.bh-call--s { --flar: 50; --volm: 40; }
.bh-call__seam { display: grid; gap: 2px; justify-items: start; color: var(--paper); text-decoration: none; text-underline-offset: .2em; }
.bh-call__seam-t { font: 500 .75rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--cyan); }
.bh-call__seam-s { font: italic 400 .875rem/1.25 var(--f-serif); color: var(--fg-2); }

/* lit words (the intro and the wake light each word while its part of the painting acts) */
.bh-call__items li.is-hot { color: var(--cyan); }
.bh-call--r .bh-call__items li.is-hot { color: var(--paper); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: .22em; }
.bh-call.is-lit .bh-call__kicker { color: var(--paper); }
.bh-call.is-lit .bh-call__title { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 1.5px; }
.bh-call--s.is-lit .bh-call__seam-s { color: var(--paper); }
/* the side that is awake (pointer, focus, router chip, tap): the other label steps back by colour, never
   by opacity (paper-72 9:1, steel 6.3:1 on Ink) */
.brain-stage--home[data-wake="l"] .bh-call--l .bh-call__title,
.brain-stage--home[data-wake="r"] .bh-call--r .bh-call__title { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 1.5px; }
.brain-stage--home[data-wake="l"] :is(.bh-call--r, .bh-call--s) .bh-call__title,
.brain-stage--home[data-wake="r"] :is(.bh-call--l, .bh-call--s) .bh-call__title { color: var(--paper-72); }
.brain-stage--home[data-wake="l"] :is(.bh-call--r, .bh-call--s) :is(.bh-call__kicker, .bh-call__items li, .bh-call__seam-t, .bh-call__seam-s),
.brain-stage--home[data-wake="r"] :is(.bh-call--l, .bh-call--s) :is(.bh-call__kicker, .bh-call__items li, .bh-call__seam-t, .bh-call__seam-s) { color: var(--steel); }
/* the intro's spotlight (engine: data-phase while one side explains itself, then the join), the same
   step-back by colour */
.brain-stage--home[data-phase="l"] :is(.bh-call--r, .bh-call--s) .bh-call__title,
.brain-stage--home[data-phase="r"] :is(.bh-call--l, .bh-call--s) .bh-call__title,
.brain-stage--home[data-phase="s"] :is(.bh-call--l, .bh-call--r) .bh-call__title { color: var(--paper-72); }
.brain-stage--home[data-phase="l"] :is(.bh-call--r, .bh-call--s) :is(.bh-call__kicker, .bh-call__items li, .bh-call__seam-t, .bh-call__seam-s),
.brain-stage--home[data-phase="r"] :is(.bh-call--l, .bh-call--s) :is(.bh-call__kicker, .bh-call__items li, .bh-call__seam-t, .bh-call__seam-s),
.brain-stage--home[data-phase="s"] :is(.bh-call--l, .bh-call--r) :is(.bh-call__kicker, .bh-call__items li) { color: var(--steel); }

/* the plate caption block: «Εικ. 1 — …» + the discreet AI-motion disclosure; «Παύση κίνησης» */
.brain-stage--home .brain-stage__fig { position: absolute; display: block; margin: 0; color: var(--fg-3); }
.brain-stage--home .brain-stage__figtext { display: block; }
.brain-stage--home .nx-ailabel { position: absolute; left: 0; top: 0; bottom: auto; z-index: 3; }
.brain-stage--home .nx-ailabel .nx-label { min-height: 0; padding: 0; background: none; color: var(--fg-3); font-size: .625rem; line-height: 1.45; letter-spacing: .06em; white-space: normal; text-align: left; }
.bh-ai__short { display: none; }
@media (hover: hover) { .brain-stage--home .nx-ailabel .nx-label:hover { color: var(--fg-2); } }
.brain-stage--home .brain-stage__pause { right: auto; bottom: auto; }
html:not(.js) .brain-stage--home .brain-stage__pause { display: none; }

/* Hand-over to the Split: the hero view (legend included) fades out as the Split's X-ray completes
   (--bh-hand, set by the engine from the pin's progress; 0 when it is not driven). */
.brain-stage--home.is-split { pointer-events: none; }
.brain-stage--home.is-split .brain-stage__view { opacity: var(--bh-hand, 0); pointer-events: none; transition: none; }
.brain-stage--home.is-split .brain-stage__fig { opacity: 1; }
/* Without CSS masks (old engines; untested devices, Risk 3): the loop would show its rippling right half at full
   strength and the drawing would run into the legend. Keep the still painting, and cut the drawing above the
   legend instead. Nothing else in the hero depends on a CSS mask (the bar's mask is SVG). */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	.brain-stage--home .brain-stage__vwrap { display: none; }
	.bh-draw { clip-path: inset(0 0 calc(100% - var(--bh-draw-b)) 0); }
}
/* The Split's canvas only paints once the Split owns the stage (split.js sets .hs-split-on exactly when it
   sets data-split="on"): until then the hero is the only brain (an invisible canvas still counts as an LCP
   candidate). A class, not :has(), so browsers without :has() behave the same. */
html.js:not(.rm) .home-stage:not(.hs-split-on) .hs-canvas { visibility: hidden; }

/* ---- desktop (≥ 1024): the plate in the right half, bleeding off the edge; the composition (logic
   label at the bar's foot … imagination label at its crown, P x 250…872, P y 0…880) sits right of the
   text column; the brain core is ≈ 460–480 px tall at 1440×900. ---- */
@media (min-width: 1024px) {
	.home-stage {
		--k: min(calc((100svh - var(--header-h) - 44px) / 880), calc((var(--bh-cx) - var(--bh-tx) - 28px) / 622), 1px);
		--bh-top: calc(var(--header-h) + 18px);
	}
	.brain-stage--home {
		width: calc(var(--k) * 1080);
		left: calc(min(100% - var(--margin), 50% + var(--max) / 2) - var(--k) * 872);
		top: var(--bh-top);
	}
	/* the glow under the composition fades out, so the plate never shows an edge where the hero ends */
	.brain-stage--home .brain-stage__media { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 860), transparent calc(var(--k) * 1010)); mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 860), transparent calc(var(--k) * 1010)); }
	.bh-call__title { font-size: clamp(15px, calc(var(--k) * 25), 22px); }
	.bh-call__kicker { font-size: clamp(10px, calc(var(--k) * 14), 12px); }
	.bh-call--l .bh-call__items { font-size: clamp(10.5px, calc(var(--k) * 15), 12.5px); }
	.bh-call--r .bh-call__items { font-size: clamp(12px, calc(var(--k) * 19), 16px); }
	.bh-call__seam-t { font-size: clamp(10px, calc(var(--k) * 14), 12px); }
	.bh-call__seam-s { font-size: clamp(11.5px, calc(var(--k) * 17.5), 15px); }
	/* labels, in P units */
	.bh-call--r { right: calc(var(--k) * (1080 - 872)); bottom: calc(var(--k) * (1080 - 76)); }
	.bh-call--l { left: calc(var(--k) * 250); top: calc(var(--k) * 790); max-width: calc(var(--k) * 296); }
	.bh-call--s { left: calc(var(--k) * 553); top: calc(var(--k) * 794); }
	/* the caption block sits top-left, over the dark above the gears: «Εικ. 1 — …», then the AI line */
	.brain-stage--home .brain-stage__fig { left: calc(var(--k) * 250); top: calc(var(--k) * 12); width: calc(var(--k) * 268); font-size: clamp(10px, calc(var(--k) * 13), 11px); }
	/* the AI line sits under the caption at a fixed place (4 caption lines fit above it) */
	.brain-stage--home .nx-ailabel { top: max(76px, calc(var(--k) * 92)); width: 100%; }
	.brain-stage--home .nx-ailabel .nx-tip { left: 0; right: auto; }
	/* the router: at most three chips per row at every width, so a late webfont never re-wraps them */
	.hs-chips { max-width: 46rem; }
	/* «Παύση κίνησης» bottom-right, inside the page margin, under the composition; it keeps the width of
	   its longer label, so the cluster never shifts when the label changes */
	.brain-stage--home .brain-stage__pause { right: calc(var(--k) * 208); top: calc(100svh - var(--bh-top) - 58px); min-width: 15.6em; }
}
@media (min-width: 1024px) and (max-height: 820px) {
	/* short laptops: the caption text is the figure's accessible name only; the AI line takes its place */
	.brain-stage--home .brain-stage__figtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.brain-stage--home .nx-ailabel { top: 0; }
	.brain-stage--home .brain-stage__pause { min-width: 0; }
	.brain-stage--home .brain-stage__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- phones and tablets (< 1024): the whole brain on top, in a full-bleed window under the header
   (pinned; the hero's transparent .hs-hero__win reserves its height from CSS only), the labels on the
   join's ends inside it; then the text. The window frames P x 117…965, P y 6…830. ---- */
@media (max-width: 1023px) {
	.home-stage {
		--k: min(100vw / 848, 600px / 848, (100svh - var(--header-h)) * .6 / 824);
		--bh-wh: calc(var(--k) * 824);
	}
	.hs-hero__win { display: block; height: calc(var(--header-h) + var(--bh-wh)); }
	.hs-hero__body { min-height: 0; display: block; padding: clamp(16px, 2.6svh, 28px) 0 clamp(48px, 9svh, 88px); background: var(--ink); }
	.hs-hero__text { max-width: 40rem; }
	.hs-h1__l1, html[lang="el"] .hs-h1__l1 { max-width: none; }
	.hs-router { order: 3; margin-top: var(--s-5); }
	.hs-sectors { order: 4; }
	.hs-promise { order: 5; margin-top: var(--s-6); }
	.hs-sub { order: 6; }
	.hs-micro { order: 7; }
	.hs-h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3rem); }
	.hs-h1__l2 { margin-top: var(--s-2); font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); }
	.hs-router { gap: var(--s-2); }
	.hs-router .nx-router__q { font-size: 1.125rem; }
	.hs-chips { gap: 6px; margin-top: var(--s-1); }
	.hs-chips .nx-chip { min-height: 40px; padding: .35em .85em; font-size: .875rem; }
	.hs-sectors { margin-top: var(--s-4); font-size: .875rem; }

	.brain-stage--home { left: 0; right: 0; top: var(--header-h); height: var(--bh-wh); }
	.brain-stage--home .brain-stage__view { position: absolute; inset: 0; }
	.brain-stage--home .brain-stage__win { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
	.brain-stage--home .brain-stage__frame { position: absolute; width: calc(var(--k) * 1080); left: calc(50% - var(--k) * 541); top: calc(var(--k) * -6); }
	/* the glow under the brain fades out ABOVE the window's lower edge (P 830), so the window never shows a hard
	   horizontal edge (it read as a box around the painting) and the text starts on clean Ink */
	.brain-stage--home .brain-stage__media { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 706), transparent calc(var(--k) * 826)); mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 706), transparent calc(var(--k) * 826)); }
	.bh-bar__line--d { display: none; }
	.bh-bar__line--m { display: inline; }
	/* the drawing (intro, wake) ends above the legend, whose type does not scale with the plate: its top sits
	   ≈ 60 px above the window's lower edge (P 830), so the paint contours never run through the labels */
	.bh-draw { --bh-draw-a: calc(var(--k) * 830 - 80px); --bh-draw-b: calc(var(--k) * 830 - 62px); }
	.bh-call__title { font-size: 1rem; }
	.bh-call__kicker { font-size: .625rem; }
	.bh-call--l .bh-call__items { font-size: .6875rem; }
	.bh-call--r .bh-call__items { font-size: .8125rem; }
	.bh-call__seam-t { font-size: .625rem; }
	.bh-call__seam-s { font-size: .8125rem; }
	.bh-call { gap: 2px; }
	/* imagination top-right at the bar's crown; logic bottom-left at its foot, its words on one line
	   across the window; the seam right-aligned beside the logic title (the seam's dashed line between them) */
	/* (anchored to P 150 / 930 of the plate in px: the type does not scale with the plate) */
	.bh-call--r { right: calc(var(--k) * (1080 - 930)); top: calc(var(--k) * 6 + 8px); }
	.bh-call--l { left: calc(var(--k) * 150); top: auto; bottom: calc(var(--k) * (1080 - 830) + 8px); max-width: calc(100vw - 2 * var(--margin)); }
	.bh-call--l .bh-call__items { white-space: nowrap; }
	.bh-call--s { right: calc(var(--k) * (1080 - 930)); top: auto; bottom: calc(var(--k) * (1080 - 830) + 8px + 1.35 * .6875rem + 2px); text-align: right; }
	.bh-call--s .bh-call__seam { justify-items: end; }
	/* the caption text is the figure's accessible name; the pause and the AI line sit in the window's top-left */
	.brain-stage--home .brain-stage__figtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.brain-stage--home .brain-stage__fig { left: calc(var(--margin) + 46px); top: 12px; right: 52%; }
	.brain-stage--home .nx-ailabel { width: 100%; }
	.brain-stage--home .brain-stage__pause { left: var(--margin); top: 8px; min-height: 36px; min-width: 36px; padding: 0 7px; }
	.brain-stage--home .brain-stage__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	/* discreet, but never below 10 px (it was 9 px: hard to read on a phone) */
	.brain-stage--home .nx-ailabel .nx-label { font-size: .625rem; letter-spacing: .04em; }
	.bh-ai__long { display: none; }
	.bh-ai__short { display: inline; }
}
/* Phones: when the height limits the plate (375×667, 360×640…) it is narrower than the screen, and the labels,
   whose type does not shrink with it, would close up on each other; there they move out to the page margins.
   On the narrowest phones the logic title and the seam line also step down a size, so the seam never reads as
   the title's continuation (the seam's dashed line runs between them). */
@media (max-width: 479px) {
	.bh-call--r, .bh-call--s { right: min(var(--k) * 150, var(--k) * 539 + var(--margin) - 50vw); }
	.bh-call--l { left: min(var(--k) * 150, var(--k) * 541 + var(--margin) - 50vw); }
}
@media (max-width: 374px) {
	.bh-call--l .bh-call__title { font-size: .9375rem; }
	.bh-call__seam-s { font-size: .75rem; }
}
@media (max-width: 1023px) and (max-height: 700px) {
	.home-stage { --k: min(100vw / 848, 600px / 848, (100svh - var(--header-h)) * .52 / 824); }
	.hs-hero__body { padding-top: var(--s-3); }
	.hs-router { margin-top: var(--s-4); }
	.hs-chips { row-gap: 5px; }
	.hs-chips .nx-chip { min-height: 36px; }
}
/* landscape phones: the whole brain fills the first screen (decisions #11), the text follows on scroll */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
	.home-stage { --k: min(100vw / 848, 600px / 848, (100svh - var(--header-h)) * .86 / 824); }
	/* the window is wider than the plate: the labels move out to the sides */
	.bh-call--l { left: calc(var(--k) * 150 - 120px); }
	.bh-call--r, .bh-call--s { right: calc(var(--k) * 150 - 120px); }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.bh-call__title { font-size: 1.125rem; }
	.bh-call__kicker, .bh-call__seam-t { font-size: .6875rem; }
	.bh-call--l .bh-call__items { font-size: .75rem; }
	.bh-call--r .bh-call__items, .bh-call__seam-s { font-size: .875rem; }
	.brain-stage--home .brain-stage__pause { left: max(var(--margin), calc(50% - var(--k) * 424)); }
	.brain-stage--home .brain-stage__fig { left: calc(max(var(--margin), 50% - var(--k) * 424) + 46px); }
}

/* Phones and tablets, pinned scene: the hero's brain leaves WITH the page (it scrolls up whole, like the
   text under it) instead of staying in its pinned window while the text slides over it and erases it from
   the bottom up. Scroll-driven, so it runs in step with the scroll on the compositor (no JS, no lag). Where
   scroll timelines are missing (Firefox, iOS < 26) the window stays pinned and the text covers it. */
@keyframes bh-scrollout { to { transform: translateY(calc(-1 * (var(--header-h) + var(--bh-wh)))); } }
@supports (animation-timeline: scroll()) {
	@media (max-width: 1023px) {
		html.js:not(.rm) .home-stage:not([data-engine-state="error"]) .brain-stage--home {
			animation: bh-scrollout linear both;
			animation-timeline: scroll(root block);
			/* --nx-top (foundation): the language strip's height when it shows above the header, else 0 */
			animation-range: var(--nx-top, 0px) calc(var(--nx-top, 0px) + var(--header-h) + var(--bh-wh));
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-call, .bh-call__title, .bh-call__items li { transition: none; }
}

/* ---- s2 beats + s3 doors: static layout (no JS / reduced motion / engine error) ---- */
.hs-track, .hs-pin { position: static; }
.hs-canvas { display: none; }
.hs-beats { position: relative; padding-block: var(--sec-y-tight) var(--sec-y); }
.hs-beats__wrap { display: grid; gap: var(--s-6) var(--gutter); }
.hs-figure { margin: 0; }
.hs-figure__art { position: relative; aspect-ratio: 1000 / 1012; max-width: 640px; }
.hs-figure__art > picture, .hs-figure__art img { display: block; width: 100%; height: auto; }
.hs-figure__art.is-drawn > picture { display: none; }
.hs-figure__art.is-drawn { aspect-ratio: 4 / 3; max-width: none; }
@media (max-width: 599px) { .hs-figure__art.is-drawn { aspect-ratio: 3 / 4; } }
.hs-figure__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hs-beats__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-5); align-content: center; }
.hs-beat p { font: 400 var(--t-lead)/var(--lh-lead) var(--f-serif); max-width: 34ch; color: var(--fg); }
.hs-beat--voice > p:first-child { font-style: italic; }
.hs-beat p.hs-beat--out { margin-top: var(--s-4); font-family: var(--f-sans); font-style: normal; font-weight: var(--w-h3); font-size: var(--t-h4); }
@media (min-width: 1024px) {
	.hs-beats__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
	.hs-figure { grid-column: 6 / -1; grid-row: 1; }
	.hs-beats__list { grid-column: 1 / span 5; grid-row: 1; }
}

.hs-doors { position: relative; background: var(--ink); color: var(--paper); outline: none; }
.hs-doors__field, .hs-doors__seam { display: none; }
.hs-doors__wrap { display: grid; gap: var(--s-7) var(--gutter); padding-block: var(--sec-y-tight) 0; }
.hs-doors__head .nx-eyebrow { color: var(--fg-2); }
.hs-doors__title { font-size: var(--t-h2); max-width: 16ch; }
html[lang="el"] .hs-doors__title { max-width: 18ch; }
.hs-doors__sub { margin-top: var(--s-4); max-width: 40ch; }
.hs-door { background: transparent; }
.hs-door__title { font-size: var(--t-h3); font-weight: var(--w-h2); letter-spacing: var(--tr-h3); }
.hs-door--ai .hs-door__title { --flar: 0; --volm: 0; }
.hs-door--mk .hs-door__title { --flar: 100; --volm: 100; }
/* inline, so the arrow follows the last word when a long title wraps (EN on phones) */
.hs-door__title a { display: inline; color: inherit; text-decoration: none; }
.hs-door__arrow { display: inline-block; width: .8em; height: .8em; margin-left: .3em; vertical-align: -.02em; transition: transform var(--dur-ui) var(--ease-mech); }
@media (hover: hover) {
	.hs-door__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
	.hs-door__title a:hover .hs-door__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
}
.hs-door__line { margin-top: var(--s-3); max-width: 34ch; font: italic 400 var(--t-lead)/1.4 var(--f-serif); color: var(--fg-2); }
.hs-door__links { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.hs-door__links a { color: var(--fg); font-weight: var(--w-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.hs-door__links a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.hs-badge { margin-left: .4em; padding: 1px 6px; border: 1px solid var(--sig); color: var(--sig); font: 500 .625rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; white-space: nowrap; vertical-align: .15em; }
.hs-seamtext { font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.hs-seamtext__title a { color: var(--fg); text-decoration: none; }
.hs-seamtext__title a:hover { text-decoration: underline; }
.hs-seamtext__links { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.hs-seamtext__links a { color: var(--cyan); }
.hs-door--mk { position: relative; margin-inline: calc(50% - 50vw); padding: calc(var(--sec-y-tight) + var(--ch-v)) calc(50vw - 50%) var(--sec-y); background: var(--indigo); clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch-v)); }
.hs-door--mk .hs-door__links a { color: var(--paper); }
@media (min-width: 1024px) {
	.hs-doors__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.hs-doors__head { grid-column: 1 / span 7; }
	.hs-door--ai { grid-column: 1 / span 6; }
	.hs-seamtext { grid-column: 7 / -1; align-self: end; }
	.hs-door--mk { grid-column: 1 / -1; padding-left: calc(50vw - 50% + (100% + var(--gutter)) / 12 * 6); }
}

/* =========================================================================
   STAGE · motion layout (the pinned scene)
   ========================================================================= */
html.js:not(.rm) .home-stage:not([data-engine-state="error"]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);

	& > .hs-hero, & > .hs-track { grid-area: 1 / 1; }
	& > .hs-hero { align-self: start; }
	& .hs-track { position: relative; height: calc(100svh + var(--hs-dist)); }
	& .hs-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
	& .hs-canvas { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

	/* beats: captions in the left gutter (desktop) / under the brain (mobile) */
	& .hs-beats { position: absolute; inset: 0; z-index: 3; padding: 0; background: transparent; pointer-events: none; }
	& .hs-beats__wrap { display: block; height: 100%; position: relative; }
	& .hs-figure { display: none; }
	& .hs-beats__list { position: absolute; left: 0; bottom: clamp(48px, 13svh, 140px); width: min(31%, 25rem); display: block; }
	& .hs-beat { position: absolute; left: 0; bottom: 0; width: 100%; opacity: var(--o, 0); transform: translate(calc(var(--k, 0) * 18px * .682), calc(var(--k, 0) * -18px * .731)); }
	/* 4b stacks under 4a in flow (the beat-4 block grows upwards from the caption line) */
	& .hs-beat--voice > .hs-beat--out { position: relative; left: auto; bottom: auto; width: auto; margin-top: var(--s-3); }
	& .hs-beat p { font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem); }
	& .hs-beat p.hs-beat--out { font-size: clamp(1.0625rem, .92rem + .4vw, 1.3125rem); }

	/* doors: one frame over the fields; focusable at all times (focus pulls the frame in) */
	/* no stacking context: the Indigo field goes under the drawing (z 1), the content over it (z 4) */
	& .hs-doors { position: absolute; inset: 0; z-index: auto; background: transparent; }
	& .hs-doors__field { display: block; position: absolute; inset: 0; z-index: 1; background: var(--indigo); clip-path: polygon(0 0, 0 0, 0 0); }
	& .hs-doors__seam {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: var(--seam-w, 22px);
		width: var(--seam-l, 2000px);
		margin-top: calc(var(--seam-w, 22px) / -2);
		/* the N-gradient runs along the bar (the element is rotated −47°) */
		background: linear-gradient(90deg, var(--indigo), color-mix(in srgb, var(--indigo) 45%, var(--cyan)) 50%, var(--cyan));
		z-index: 3;
		transform-origin: 50% 50%;
		opacity: 0;
	}
	& .hs-doors__wrap { position: absolute; inset: 0; z-index: 4; width: auto; margin: 0; padding: calc(var(--header-h) + clamp(16px, 3svh, 40px)) var(--margin) clamp(24px, 5svh, 56px); display: block; pointer-events: none; }
	& .hs-doors.is-open .hs-doors__wrap > * { pointer-events: auto; }
	& .hs-doors__head, & .hs-door, & .hs-seamtext { position: absolute; opacity: var(--door-o, 0); }
	& .hs-doors:not(.is-open) :is(.hs-doors__head, .hs-door, .hs-seamtext) { pointer-events: none; }
	& .hs-doors__head { left: var(--margin); top: calc(var(--header-h) + clamp(12px, 3svh, 40px)); width: min(54%, 46rem); }
	& .hs-door--ai { left: var(--margin); top: var(--ai-top, 52%); width: min(44%, 36rem); }
	& .hs-door--mk { right: var(--margin); bottom: calc(var(--ch-v) + clamp(20px, 4svh, 48px)); width: min(40%, 32rem); margin: 0; padding: 0; background: transparent; clip-path: none; text-align: right; }
	& .hs-door--mk .hs-door__links { justify-content: flex-end; }
	& .hs-door--mk .hs-door__line { margin-left: auto; }
	& .hs-seamtext { left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; }
	& .hs-seamtext__links { flex-wrap: nowrap; }
}

@media (max-width: 1023px) {
	html.js:not(.rm) .home-stage:not([data-engine-state="error"]) {
		--hs-dist: 340svh;
		& .hs-beats__list { left: 0; right: 0; width: auto; bottom: clamp(24px, 6svh, 56px); }
		& .hs-beat p { font-size: 1.0625rem; max-width: none; }
		& .hs-beat p.hs-beat--out { font-size: .9375rem; margin-top: var(--s-2); }
		& .hs-doors__head { width: auto; right: var(--margin); }
		& .hs-doors__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); }
		& .hs-doors__sub { font-size: 1rem; margin-top: var(--s-3); }
		& .hs-door__title { font-size: 1.375rem; }
		& .hs-door__line { font-size: 1rem; margin-top: var(--s-2); }
		& .hs-door__links { gap: var(--s-1) var(--s-4); margin-top: var(--s-3); font-size: .9375rem; }
		& .hs-door--ai { width: 60%; }
		& .hs-door--mk { width: 64%; bottom: 20px; }
		& .hs-seamtext { white-space: normal; max-width: 72%; }
		& .hs-seamtext__links { flex-wrap: wrap; }
		& .hs-badge { display: none; }
		& .hs-seamtext { font-size: .6875rem; }
	}
}
@media (max-width: 1023px) and (max-height: 700px) {
	html.js:not(.rm) .home-stage:not([data-engine-state="error"]) .hs-doors__sub { display: none; }
}

/* =========================================================================
   s4 · PLAY (Paper; develops over the doors along a 47° edge)
   ========================================================================= */
.home-play { position: relative; }
/* Motion: s4 starts 60 svh before the pin releases, so its Paper develops over the doors. */
html.js:not(.rm) .home-stage:not([data-engine-state="error"]) + .home-play { margin-top: -60svh; }
.home-play.is-developing { will-change: clip-path; }
.home-play__edge { position: absolute; left: 0; top: 0; height: 2px; background: var(--cyan); transform-origin: 0 50%; pointer-events: none; z-index: 2; }
.home-play__grid { row-gap: var(--s-8); align-items: start; }
.home-game { display: grid; gap: var(--s-3); align-content: start; }
.home-game__tag { margin-bottom: 0; color: var(--sig); }
.home-game__title { font-size: var(--t-h3); max-width: 22ch; }
.home-game__body { max-width: 52ch; color: var(--fg-2); }
.home-game__demo { margin-top: var(--s-3); }
.home-game__demo .nx-demo__stage { clip-path: var(--clip-sheet); }
.home-game__demo .nx-demo__poster .nx-media { height: 100%; aspect-ratio: auto !important; }
.home-game__demo .nx-demo__poster img { width: 100%; height: 100%; object-fit: cover; }
.home-game__demo .nx-demo__start { z-index: calc(var(--z-stage-ui) + 1); }
.home-game__keys { color: var(--fg-2); }
.home-game__keys b { font-weight: 600; color: var(--fg); }
.home-game__labels { margin-top: var(--s-1); }
.home-game__note { font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); max-width: 60ch; }
.home-game__honest { font-size: var(--t-body); max-width: 56ch; }
.home-game__story { font: italic 400 var(--t-lead)/1.4 var(--f-serif); max-width: 30ch; }
.home-game__links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.home-game__demo--reel { max-width: 380px; }

/* Vision mini (provider engine deep-zoom), Home only:
   · its report is a strip along the top, so the model's boxes (and its three false alarms) stay in view;
   · a tap on one of the 3 real defects outside the round (front-page.js) is marked with a dashed box, not a miss cross. */
.home-game .dz--mini .dz-report { top: 0; bottom: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 0; border-bottom: 2px solid var(--cyan); }
.home-game .dz--mini .dz-report__score { grid-column: 1 / -1; }
.home-game .dz--mini .dz-result { max-width: none; font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); line-height: 1.35; }
.home-game .dz--mini .dz-full { justify-self: start; }
.home-game .dz--mini .dz-again { justify-self: end; }
/* the two "label missing" false alarms sit side by side: the first one's chip goes above its box
   (box height 0.2889 of a 16:9 image = 16.25 % of its width), so the chips never print over each other */
.home-game .dz--mini .dz-chip[data-id="d9"] { margin-top: -16.25%; translate: 0 calc(-100% - 3px); }
.home-game .dz-pin.home-dz-extra::before { left: -9px; top: -9px; width: 18px; height: 18px; background: transparent; border: 1.5px dashed var(--paper); box-shadow: 0 0 0 1px var(--ink); transform: none; }
.home-game .dz-pin.home-dz-extra::after { display: none; }
@media (max-width: 599px) {
	.home-game .dz--mini .dz-report { padding: var(--s-2) var(--s-3); gap: var(--s-1) var(--s-3); }
	.home-game .dz--mini .dz-result { font-size: .8125rem; }
	/* a phone-width image has no room for eight chips: the hits keep their cyan boxes, the three false
	   alarms keep their chips (the honest part: «σε άνθρωπο»); pinch-zoom shows every box at size */
	.home-game .dz--mini .dz-chip:not(.dz-chip--fp) { display: none; }
}
.home-game__bar--reel { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.home-more__in { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.home-game--vision { grid-column: 1 / span 7; grid-row: 1; }
	/* the reel runs long (9:16 + its HUD): it spans both rows, the scenario links fill the space beside it */
	.home-game--reel { grid-column: 9 / -1; grid-row: 1 / span 2; }
	.home-more__in { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.home-game--vision { grid-column: 1 / -1; }
	.home-game--reel { grid-column: 1 / span 6; }
}

.home-more { margin-top: var(--s-9); row-gap: var(--s-7); align-items: end; }
.home-more__label { margin-bottom: var(--s-3); }
.home-more__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); border-top: var(--bw) solid var(--rule); }
.home-more__list li { border-bottom: var(--bw) solid var(--rule); }
.home-more__list a { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-3) var(--s-2) 0; color: var(--fg); text-decoration: none; font-weight: var(--w-ui); }
.home-more__list .home-glyph { width: 24px; height: 24px; flex: none; color: var(--fg-2); stroke-width: 1.5; transition: color var(--dur-ui) var(--ease-ink), transform var(--dur-ink) var(--ease-ink); }
@media (hover: hover) {
	.home-more__list a:hover { text-decoration: underline; text-underline-offset: .22em; }
	.home-more__list a:hover .home-glyph { color: var(--fg); transform: rotate(-8deg) scale(1.08); }
}
.home-more__all { margin-top: var(--s-3); }
.home-decode { grid-column: 1 / -1; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); max-width: 26ch; }
@media (min-width: 1024px) {
	.home-decode { grid-column: 3 / span 8; }
}

/* =========================================================================
   s5 · INVISIBLE (Ink-2 board, paper notes, stats sheet)
   ========================================================================= */

.home-invisible__title { grid-column: 1 / -1; max-width: 62rem; }
.home-invisible__scene { margin-top: var(--s-5); max-width: 44ch; color: var(--fg-2); }
.home-invisible__grid { row-gap: var(--s-8); align-items: start; }
.home-notes, .home-stats { grid-column: 1 / -1; }
.home-notes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-7) var(--s-6); }
.home-note { max-width: none; justify-self: start; box-shadow: 6px 8px 0 rgb(0 0 0 / .28); }
.home-note p { margin: 0; }
.home-note--1 { --tilt: -2.4deg; }
.home-note--2 { --tilt: 1.8deg; margin-top: var(--s-7); }
.home-note--3 { --tilt: -1.2deg; }
.home-note--4 { --tilt: 2.6deg; }
.home-note--5 { --tilt: -2.8deg; margin-top: var(--s-6); }
.home-note--6 { --tilt: 1.4deg; }
.home-note:nth-child(even) { --tilt: initial; }
.home-note--2, .home-note--4, .home-note--6 { transform: rotate(var(--tilt)); }
@media (max-width: 767px) {
	.home-note--4, .home-note--5, .home-note--6 { display: none; }
	.home-note--2, .home-note--5 { margin-top: 0; }
	.home-note:nth-child(2) { justify-self: end; }
}
.home-stats { align-self: start; }
.home-stats .nx-sheet__head { margin-bottom: var(--s-4); }
.home-stats__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.home-stats__list li { font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans); padding-bottom: var(--s-4); border-bottom: var(--bw) solid var(--rule); }
.home-num { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.home-stat__fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; margin-bottom: var(--s-1); }
.home-stat__pre { font: var(--w-h3) var(--t-h4)/1 var(--f-sans); }
.home-stats__list .home-num { font-size: var(--t-readout); line-height: .95; }
.home-stats__src { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-small); }
.home-stats__close { margin-top: var(--s-4); font: italic 400 var(--t-lead)/1.35 var(--f-serif); }
.home-stats__eu { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.home-stats__subject { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-stats__line { margin-top: var(--s-2); font: var(--w-h3) var(--t-h4)/1.35 var(--f-sans); }
/* figures inside a sentence keep the sentence's face (a mono comma would gape: «19 ,95%») */
.home-stats__line .home-num { color: var(--molten-deep); font-family: inherit; font-weight: var(--w-display); letter-spacing: 0; }
.home-stats__cta { margin-top: var(--s-6); }
.home-src { font: 500 .6875rem/1.4 var(--f-mono); color: var(--fg-2); }
@media (min-width: 1024px) {
	.home-invisible__title { grid-column: 1 / span 8; grid-row: 1; }
	.home-notes { grid-column: 1 / span 8; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: var(--s-6); }
	/* the sheet is pinned beside the title and the notes, so the board has no dead half */
	.home-stats { grid-column: 9 / -1; grid-row: 1 / span 2; }
}

/* =========================================================================
   Sections pulled under a .ch-br neighbour (its bottom-right cut shows this field)
   ========================================================================= */
.home-under { margin-top: calc(-1 * var(--ch-v)); padding-top: calc(var(--sec-y) + var(--ch-v)); }
/* A slab cut at both reachable corners (top-left in, bottom-right out): the next section sits under it. */
.home-ch2 {
	clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch-v)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch-v));
	margin-top: calc(-1 * var(--ch-v));
	padding-top: calc(var(--sec-y) + var(--ch-v));
	padding-bottom: calc(var(--sec-y) + var(--ch-v) * .5);
}
/* stacking: each cut section paints over the one pulled under it (the footer band, later in the
   DOM and unstacked, still paints over s9 for its own top-left cut) */
.home-play { z-index: 3; }
.home-invisible { z-index: 2; }
.home-services { z-index: 1; }
.home-path { z-index: 3; }
.home-proof { z-index: 2; }
.home-atlas { z-index: 1; }
/* Below-the-fold sections skip layout and paint until they near the viewport (the first layout of
   the whole page is the biggest main-thread task on load). Sizes are remembered once rendered. */
.home-invisible, .home-services, .home-path {
	content-visibility: auto;
	contain-intrinsic-size: auto 1700px;
}

/* =========================================================================
   s6 · SERVICES control panel (index rows + the page's one dot-matrix readout)
   ========================================================================= */
.home-services__legend { text-align: right; margin-bottom: var(--s-3); }
.home-svc { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.home-svc__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "main arrow" "readout readout";
	gap: var(--s-2) var(--s-5);
	padding: var(--s-5) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-decoration: none;
}
.home-svc__main { grid-area: main; display: grid; gap: var(--s-1); }
.home-svc__title { font: var(--w-h3) var(--t-h3)/1.1 var(--f-sans); letter-spacing: var(--tr-h3); text-wrap: balance; }
.home-svc__line { font-size: var(--t-small); color: var(--fg-2); max-width: 58ch; }
.home-svc__readout {
	grid-area: readout;
	font-family: var(--f-dot);
	font-weight: 500;
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem);
	line-height: .95;
	font-variation-settings: "ELSH" 2;
	letter-spacing: .02em;
	color: var(--cyan-deep);
	transition: font-variation-settings var(--dur-ui) var(--ease-mech);
}
.home-svc__arrow { grid-area: arrow; width: 22px; height: 22px; align-self: start; margin-top: .2em; transition: transform var(--dur-ui) var(--ease-mech); }
.home-svc__pane { display: none; }
@container (min-width: 900px) {
	.home-svc__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) auto; grid-template-areas: "main readout arrow"; align-items: center; min-height: 104px; padding: var(--s-4) 0; }
	.home-svc__readout { justify-self: end; text-align: right; }
	.home-svc__pane {
		display: block;
		position: absolute;
		z-index: 3;
		left: 47%;
		top: 50%;
		width: 300px;
		pointer-events: none;
		transform: translateY(-50%);
		clip-path: polygon(0 0, 0 0, -110% 100%, -110% 100%);
		transition: clip-path 420ms var(--ease-cut);
	}
	.home-svc__img { clip-path: var(--clip-sheet); }
	.home-svc__gone { display: block; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--ink); color: var(--paper); font: italic 400 .9375rem/1.4 var(--f-serif); }
	.home-svc__gone b { display: block; font: 500 .625rem/1.3 var(--f-mono); font-style: normal; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--molten); margin-bottom: 2px; }
	.home-svc__row:is(:hover, :focus-visible) .home-svc__pane { clip-path: polygon(0 0, 210% 0, 100% 100%, -110% 100%); }
}
@media (hover: hover) {
	.home-svc__row:hover { background: var(--bg-2); }
	.home-svc__row:hover .home-svc__readout { font-variation-settings: "ELSH" 8; }
	.home-svc__row:hover .home-svc__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
}
.home-svc__row:focus-visible { outline-offset: -2px; }
.home-svc__row:focus-visible .home-svc__readout { font-variation-settings: "ELSH" 8; }
html.rm .home-svc__pane { transition: none; }

/* =========================================================================
   s7 · PATH (Indigo)
   ========================================================================= */
.home-path__title { max-width: 16ch; }
.home-path__zero { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-7); font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-path__zero-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--fg-2); font-weight: 600; color: var(--fg); }
.home-path__steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8) var(--gutter); counter-reset: none; }
.home-step { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.home-step__letter {
	position: relative;
	display: block;
	font: 880 var(--t-mega)/var(--lh-mega) var(--f-sans);
	letter-spacing: var(--tr-mega);
	font-size: clamp(5rem, 3rem + 7vw, 10.5rem);
	color: var(--fg);
	height: 1em;
	margin-bottom: var(--s-3);
}
.home-step__a, .home-step__b { position: absolute; left: 0; top: 0; line-height: 1; }
.home-step__a { font-variation-settings: "FLAR" 0, "VOLM" 0; clip-path: var(--cut-a, polygon(0 0, 100% 0, 0 100%)); }
.home-step__b { font-variation-settings: "FLAR" 100, "VOLM" 100; color: var(--cyan); clip-path: var(--cut-b, polygon(100% 0, 100% 100%, 0 100%)); transform: translate(2.7px, -2.9px); }
.home-step__name { font-size: var(--t-h3); font-weight: var(--w-h2); }
.home-step__meta { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-step__meta span[lang] { color: var(--fg); }
.home-step__line { color: var(--fg-2); max-width: 34ch; }
.home-step__deliv { margin-top: var(--s-2); font-weight: var(--w-ui); }
.home-step__dl { display: block; font: 500 .625rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); }
.home-path__foot { margin-top: var(--s-9); row-gap: var(--s-6); align-items: end; }
.home-path__proof { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); max-width: 30ch; }
.home-path__price { display: grid; gap: var(--s-4); justify-items: start; }
.home-path__pricel { font: 500 var(--t-small)/1.6 var(--f-mono); color: var(--fg-2); max-width: 52ch; }
@media (min-width: 768px) { .home-path__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.home-path__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-step:nth-child(2) { margin-top: var(--s-7); }
	.home-step:nth-child(3) { margin-top: calc(2 * var(--s-7)); }
	.home-step:nth-child(4) { margin-top: calc(3 * var(--s-7)); }
	.home-path__proof { grid-column: 1 / span 6; }
	.home-path__price { grid-column: 8 / -1; }
}

/* =========================================================================
   s8 · PROOF (drafting table of black boxes)
   ========================================================================= */

.home-proof__grid { row-gap: var(--s-9); align-items: start; }
.home-bb { display: grid; gap: var(--s-3); align-content: start; }
.home-bb .nx-eyebrow { margin: var(--s-3) 0 0; }
.home-bb__title { font-size: var(--t-h3); max-width: 22ch; }
.home-bb__body { color: var(--fg-2); max-width: 54ch; }
.home-bb__cta { justify-self: start; }
.home-bb__fig { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; clip-path: var(--clip-sheet); background: var(--paper-2); --c: 104%; --b: 5%; }
.home-bb__fig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 47° band on a 4:3 box: a horizontal run of 69.94 % over the full height. */
.home-bb__after { clip-path: polygon(calc(var(--c) + 34.97% - var(--b)) 0, calc(var(--c) + 34.97% + var(--b)) 0, calc(var(--c) - 34.97% + var(--b)) 100%, calc(var(--c) - 34.97% - var(--b)) 100%); transition: clip-path var(--dur-wipe) var(--ease-cut); }
.home-bb__edge { position: absolute; inset: 0; pointer-events: none; }
.home-bb:is(:hover, :focus-within) .home-bb__after { clip-path: polygon(-80% 0, 180% 0, 180% 100%, -80% 100%); }
.home-vitals { padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); display: grid; gap: var(--s-1); justify-self: start; }
.home-vitals__label { font: 500 .625rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-vitals__values { display: flex; gap: var(--s-5); font: 600 1.375rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.home-sheet { position: relative; aspect-ratio: 4 / 3; clip-path: var(--clip-sheet); background: var(--ink); }
.home-sheet__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
.home-sheet__cell { position: relative; overflow: hidden; background: var(--ink-2); }
.home-sheet__cell picture, .home-sheet__cell img { width: 100%; height: 100%; object-fit: cover; }
.home-sheet__cell--wind { display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
.home-sheet__cell--wind svg { width: 92%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.home-sheet__cell--wind .home-wind__flow { stroke: var(--cyan-deep); }
.home-sheet .nx-ailabel { left: 12px; bottom: 12px; }
/* the next Black Box: an unfilled file, its six fields ruled and empty */
.home-slot { position: relative; aspect-ratio: 4 / 3; display: grid; grid-template-rows: auto 1fr; border: 1.5px dashed var(--fg-3); }
.home-slot__head { padding: var(--s-2) var(--s-3); border-bottom: 1px dashed var(--fg-3); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); color: var(--fg-2); }
.home-slot__rows { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); padding: var(--s-2) var(--s-4) var(--s-4); }
.home-slot__row { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); align-items: end; column-gap: var(--s-3); padding-bottom: 6px; }
.home-slot__k { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-slot__v { height: 0; border-bottom: 1px dashed var(--fg-3); transform: translateY(-3px); }
@media (min-width: 1024px) {
	.home-bb--feature { grid-column: 1 / span 7; }
	.home-bb--site { grid-column: 9 / -1; margin-top: var(--s-9); }
	.home-bb--demos { grid-column: 1 / span 5; }
	.home-bb--next { grid-column: 7 / -1; margin-top: var(--s-8); }
	.home-bb--next .home-slot { max-width: 520px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.home-bb--feature, .home-bb--site { grid-column: span 8; }
	.home-bb--demos, .home-bb--next { grid-column: span 4; }
}

/* =========================================================================
   s8b · ATLAS (index + viewer; accordion without JS / on phones)
   ========================================================================= */
.home-atlas__honesty { margin-top: var(--s-4); font-size: var(--t-small); color: var(--fg-2); max-width: 60ch; }
.home-atlas__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); }
.home-atlas__count { margin: 0 0 0 var(--s-3); }
.home-atlas__list { border-bottom: var(--bw) solid var(--rule); }
.home-atlas__item[hidden] { display: none; }
.home-atlas__head { margin: 0; font-size: inherit; }
.home-atlas__btn {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "sector sign" "voice sign";
	gap: var(--s-1) var(--s-5);
	width: 100%;
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-align: left;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.home-atlas__sector { grid-area: sector; font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--cyan); }
.home-atlas__voice { grid-area: voice; font: italic 400 clamp(1.125rem, 1rem + .45vw, 1.375rem)/1.35 var(--f-serif); text-wrap: pretty; }
.home-atlas__btn .nx-faq__sign { grid-area: sign; align-self: center; }
.home-atlas__btn[aria-expanded="true"] .nx-faq__sign::after { display: none; }
.home-atlas__btn[aria-expanded="true"] { background: var(--bg-2); padding-left: var(--s-3); }
@media (hover: hover) { .home-atlas__btn:hover { background: var(--bg-2); padding-left: var(--s-3); } }
.home-atlas__btn:focus-visible { outline-offset: -2px; }
.home-atlas__body { padding: var(--s-4) 0 var(--s-6); display: grid; gap: var(--s-5); }
.js .home-atlas__body[hidden] { display: none; }
.home-atlas__media { clip-path: var(--clip-sheet); }
.home-atlas__dl { margin: 0; display: grid; gap: var(--s-4); }
.home-atlas__dl > div { display: grid; gap: var(--s-1); }
.home-atlas__dl dt { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.home-atlas__dl dd { margin: 0; max-width: 62ch; }
.home-atlas__measure { font: 500 var(--t-small)/1.5 var(--f-mono); color: var(--cyan); }
.home-atlas__src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: .2em; vertical-align: baseline; }
.home-atlas__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.home-atlas__end { margin-top: var(--s-9); row-gap: var(--s-5); align-items: end; }
.home-atlas__endtext h3 { font-size: var(--t-h3); }
.home-atlas__endtext p { margin-top: var(--s-2); color: var(--fg-2); max-width: 46ch; }
@media (min-width: 1024px) {
	.js .home-atlas__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-auto-flow: row dense; border-bottom: 0; }
	.js .home-atlas__item { display: contents; }
	.js .home-atlas__item[hidden] { display: none; }
	.js .home-atlas__head { grid-column: 1 / span 6; }
	.js .home-atlas__item:last-of-type .home-atlas__head, .js .home-atlas__head.is-last { border-bottom: var(--bw) solid var(--rule); }
	.js .home-atlas__body { grid-column: 8 / -1; grid-row: 1 / span 12; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: 0; }
	.js .home-atlas__body .home-atlas__media { animation: home-wipe 480ms var(--ease-cut) both; }
	.home-atlas__endtext { grid-column: 1 / span 6; }
	.home-atlas__ctas { grid-column: 8 / -1; }
}
@keyframes home-wipe { from { clip-path: polygon(0 0, 0 0, -100% 100%, -100% 100%); } to { clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); } }
html.rm .home-atlas__body .home-atlas__media { animation: none; }

/* =========================================================================
   s9 · GROUND (Indigo, the closing CTA)
   ========================================================================= */
.home-ground__title { max-width: 18ch; --flar: 50; --volm: 40; }
.home-ground__grid { row-gap: var(--s-8); align-items: start; }
.home-office { display: grid; gap: var(--s-2); }
/* 47° cuts on the two reachable corners only (R1): Heraklion out at the bottom right, Almyros in at
   the top left, so the two cuts face each other across the gutter. The AI label (bottom left) stays clear.
   On a 3:2 box, 18 % of the width runs 18 % × 1.5 × tan 47° of the height. */
.home-office__media { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18% * 1.5 * var(--nx-tan)), calc(100% - 18%) 100%, 0 100%); margin-bottom: var(--s-3); }
.home-office--almyros .home-office__media { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 calc(18% * 1.5 * var(--nx-tan))); }
.home-office__name { font-size: var(--t-h3); font-weight: var(--w-h2); letter-spacing: var(--tr-h3); --flar: 0; }
.home-office__name a { color: inherit; text-decoration: none; }
.home-office__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.home-office__addr { color: var(--fg); font-size: var(--t-small); letter-spacing: .02em; }
.home-office__sectors { color: var(--fg-2); max-width: 40ch; }
.home-ground__ctas { margin-top: var(--s-8); }
@media (min-width: 1024px) {
	.home-office--heraklion { grid-column: 1 / span 6; }
	.home-office--almyros { grid-column: 7 / -1; margin-top: var(--s-9); }
}

/* =========================================================================
   s10 · INSIGHTS
   ========================================================================= */
.home-insights__latest { display: block; margin-bottom: 2px; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--cyan); }
/* bible §7.1 s10: title, Literata dek, mono meta */
.home-insights .nx-index__meta { font: 400 .9375rem/1.5 var(--f-serif); }
.home-insights .nx-index__value { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.home-insights__all { margin-top: var(--s-5); }

} /* end @layer pages */