/* =========================================================================
   netex · pages/about.css (company group) · /about/ · bible §7.19
   s1 hero (Ink, brain stage) · s2 the brain + «σκέψη» Flare morph (Paper-2) · s3 beliefs (Paper)
   s4 two offices, 47° diptych (Ink) · s5 how (Paper) · s8 letters (Paper-2) · s10 CTA (Indigo)
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 · hero ----------------------------------------------------------- */
.ab-hero { --hero-pad: var(--s-7); overflow: hidden; }
.ab-hero__grid { row-gap: var(--s-7); align-items: center; }
.ab-hero__h1 { max-width: none; }
.ab-hero__kicker {
	display: block;
	max-width: 28ch;
	font-size: var(--t-h1-sub);
	font-weight: 560;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--fg-2);
}
.ab-hero__display {
	--flar: 50; --volm: 40;
	display: block;
	margin-top: var(--s-4);
	max-width: 12ch;
	font-size: var(--t-display);
	font-weight: var(--w-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
	color: var(--fg);
}
.ab-hero__sub { margin-top: var(--s-6); }
.ab-hero__stage { position: relative; max-width: 620px; justify-self: center; width: 100%; }
.ab-hero__stage .brain-stage__fig { color: var(--fg-2); }
/* Narrow stages: the AI-motion label (bottom-left) and the pause control (bottom-right) no longer fit
   side by side, and the label is never covered (bible §9). The control moves to the top-right corner. */
@media (max-width: 599px) {
	.ab-hero__stage .brain-stage__pause { top: 0; bottom: auto; }
}
@media (min-width: 1024px) {
	.ab-hero__copy { grid-column: 1 / span 6; }
	.ab-hero__stage { grid-column: 7 / -1; max-width: none; margin-right: calc(-1 * var(--margin)); }
}

/* ---- s2 · the brain (signature) -------------------------------------------- */
.ab-brain { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.ab-brain__grid { row-gap: var(--s-8); align-items: start; }
.ab-brain__body { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: var(--measure); }
.ab-brain__body p + p { margin-top: 0; }
.ab-brain__aside { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg); }
.ab-brain__punch { padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); font-weight: var(--w-strong); }
@media (min-width: 1024px) {
	.ab-brain__copy { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.ab-brain__fig { grid-column: 6 / -1; }
}

.ab-brain__fig { margin: 0; container-type: inline-size; }
.ab-brain__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "draw draw" "l r";
	gap: var(--s-6) var(--s-4);
	align-items: center;
	padding: var(--s-6) 0;
	color: var(--ink);
}
.ab-brain__draw { grid-area: draw; position: relative; width: min(100%, 540px); margin-inline: auto; container-type: inline-size; }
.ab-brain__svg { display: block; width: 100%; height: auto; overflow: hidden; color: var(--ink); }
.ab-brain__svg #ab-splash, .ab-brain__svg #ab-droplets { color: var(--indigo); }
.ab-brain__svg #ab-midline { stroke-dasharray: 4 6; color: var(--steel-dark); }
.ab-brain__svg #ab-constellation-nodes .vertex { display: none; }
.ab-brain__svg #ab-callout-anchors circle { fill: none; stroke: none; }

.ab-brain__half { display: grid; gap: var(--s-2); align-content: start; }
.ab-brain__half--l { grid-area: l; }
.ab-brain__half--r { grid-area: r; }
.ab-brain__htitle { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.ab-brain__tags { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); margin: 0; padding: 0; }
.ab-brain__tags li { padding: 2px 8px; border: var(--bw) solid var(--rule); background: var(--paper-2); font: 400 .9375rem/1.4 var(--f-sans); }
.ab-brain__half--r .ab-brain__tags li { font-family: var(--f-serif); font-style: italic; }
@container (min-width: 640px) {
	.ab-brain__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); grid-template-areas: "l draw r"; }
	.ab-brain__half--l { text-align: right; justify-items: end; }
	.ab-brain__half--l .ab-brain__tags { align-items: flex-end; }
}

/* The kinetic word: crosses the brain's midline on scroll (x = 413 of the drawing = 37.5% of this
   crop) and turns from engineered (FLAR 0) to brushed (FLAR 100 / VOLM 100): the hemisphere idea in
   type (copy 11 s2; CSS scroll-driven, no JS). Without scroll timelines, and under reduced motion,
   it rests in its final, flared state. */
.ab-brain__word {
	position: absolute;
	left: 37.5%;
	top: 43%;
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
	transform: translateX(-50%);
}
.ab-brain__word > span {
	display: inline-block;
	font-size: clamp(2.75rem, 1rem + 15cqi, 6.5rem);
	font-weight: 880;
	line-height: .9;
	letter-spacing: var(--tr-mega);
	text-transform: uppercase;
	color: var(--indigo);
	font-variation-settings: "FLAR" 100, "VOLM" 100;
	transform: translateX(14cqi);
	paint-order: stroke fill;
	-webkit-text-stroke: .12em var(--paper-2);
}
@supports (animation-timeline: view()) {
	html:not(.rm) .ab-brain__word > span {
		animation: ab-think linear both;
		animation-timeline: view();
		animation-range: entry 30% cover 60%;
	}
}
@keyframes ab-think {
	from { transform: translateX(-24cqi); font-variation-settings: "FLAR" 0, "VOLM" 0; }
	to   { transform: translateX(14cqi); font-variation-settings: "FLAR" 100, "VOLM" 100; }
}
/* Phones: the drawing fills the screen, so the word is smaller and travels less (it must stay
   inside the drawing: centre 37.5% ± 14cqi, half-width ≤ 21cqi for «ΣΚΕΨΗ» and "THOUGHT"). */
@keyframes ab-think-s {
	from { transform: translateX(-14cqi); font-variation-settings: "FLAR" 0, "VOLM" 0; }
	to   { transform: translateX(14cqi); font-variation-settings: "FLAR" 100, "VOLM" 100; }
}
@container (max-width: 479px) {
	.ab-brain__word > span { font-size: 12cqi; transform: translateX(14cqi); }
	@supports (animation-timeline: view()) {
		html:not(.rm) .ab-brain__word > span { animation-name: ab-think-s; }
	}
}
.ab-brain__fig .nx-plate { margin-top: var(--s-3); }
.ab-brain__pillars { margin: var(--s-6) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.ab-brain__pillars .nx-index__title { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-lead); }
.ab-brain__pillars li:nth-child(3) .nx-index__title { font-style: italic; }

/* ---- s3 · beliefs: logic left (FLAR 0), imagination right (FLAR 100) ---------- */
.ab-beliefs__eyebrow { max-width: none; margin-bottom: var(--s-7); }
.ab-beliefs__list { margin: 0; padding: 0; border-bottom: var(--bw) solid var(--rule); }
.ab-belief {
	position: relative;
	display: grid;
	gap: var(--s-3);
	padding: var(--s-6) 0 var(--s-6);
	border-top: var(--bw) solid var(--rule);
}
.ab-belief::before {
	/* a 47° tick at the start of every rule */
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 22px;
	height: 1.5px;
	background: var(--fg);
	transform-origin: 0 50%;
	transform: rotate(-47deg);
}
.ab-belief__line {
	max-width: 20ch;
	font-size: clamp(1.75rem, 1rem + 3.1vw, 3.75rem);
	font-weight: 760;
	line-height: 1;
	letter-spacing: var(--tr-h2);
	text-wrap: balance;
	color: var(--fg);
	font-variation-settings: "FLAR" var(--flar, 0), "VOLM" var(--volm, 0);
}
.ab-belief__why { max-width: 46ch; font-family: var(--f-serif); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg-2); }
.ab-belief--r { --flar: 100; --volm: 100; }
.ab-belief--r .ab-belief__line { color: var(--indigo); }
.ab-belief--r .ab-belief__why { font-style: italic; }
@media (min-width: 1024px) {
	.ab-belief { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
	.ab-belief--l .ab-belief__line { grid-column: 1 / span 7; }
	.ab-belief--l .ab-belief__why { grid-column: 8 / span 4; }
	.ab-belief--r .ab-belief__line { grid-column: 5 / span 8; grid-row: 1; }
	.ab-belief--r .ab-belief__why { grid-column: 1 / span 4; grid-row: 1; text-align: right; }
	.ab-belief--r::before { left: calc((100% + var(--gutter)) * 4 / 12); }
}

/* ---- s4 · two offices: one frame, two photos, the 47° seam ------------------- */
.ab-offices { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.ab-offices__fig { margin-top: var(--s-2); }
.co-dip {
	/* h/w of the frame; the seam runs through the centre at 47°: half-run = (h/w)·cot47/2 of the width */
	--hw: .42;
	--half: calc(var(--hw) * 46.625%);
	position: relative;
	aspect-ratio: 1 / var(--hw);
	overflow: hidden;
	background: var(--ink-2);
}
.co-dip__pic, .co-dip__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-dip__pic--a img { object-position: 30% 62%; }
.co-dip__pic--b img { object-position: 64% 70%; }
.co-dip__pic--a { clip-path: polygon(0 0, calc(50% + var(--half)) 0, calc(50% - var(--half)) 100%, 0 100%); }
.co-dip__pic--b { clip-path: polygon(calc(50% + var(--half)) 0, 100% 0, 100% 100%, calc(50% - var(--half)) 100%); }
.co-dip__seam {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--hw) * 100% / .7314 + 12px); /* full 47° length across the frame height */
	height: 6px;
	margin-left: calc(var(--hw) * -50% / .7314 - 6px);
	margin-top: -3px;
	background: var(--n-grad);
	transform: rotate(-47deg);
	z-index: 1;
}
.co-dip__label--a { left: 8px; bottom: 8px; }
.co-dip__label--b { left: auto; right: 8px; bottom: 8px; }
.co-dip__tag {
	position: absolute;
	z-index: 1;
	padding: 3px 8px;
	background: var(--ink);
	color: var(--paper);
	font: 500 .6875rem/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.co-dip__tag--a { left: 8px; top: 8px; }
.co-dip__tag--b { right: 8px; top: 8px; }
@media (max-width: 767px) {
	/* Tall frame: the 47° line through the centre exits through the side edges. */
	.co-dip { --hw: 1.15; }
	.co-dip__pic--a img { object-position: 30% 60%; }
	.co-dip__pic--a { clip-path: polygon(0 0, 100% 0, 100% calc(50% - 53.62% / var(--hw)), 0 calc(50% + 53.62% / var(--hw))); }
	.co-dip__pic--b { clip-path: polygon(100% calc(50% - 53.62% / var(--hw)), 100% 100%, 0 100%, 0 calc(50% + 53.62% / var(--hw))); }
	.co-dip__seam { width: calc(100% / .682 + 12px); margin-left: calc(-50% / .682 - 6px); }
	.co-dip__tag--b { top: auto; bottom: 40px; }
}

.ab-offices__pts { row-gap: var(--s-7); margin-top: var(--s-7); }
.ab-pt { display: grid; gap: var(--s-3); align-content: start; }
.ab-pt__name { font-size: var(--t-h3); font-weight: 760; text-transform: uppercase; letter-spacing: var(--tr-caps); }
.ab-pt__addr { font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--fg); }
.ab-pt__body { max-width: 44ch; color: var(--fg-2); }
.ab-pt__survey { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); margin: 0; font: 500 .75rem/1.5 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); }
.ab-pt__survey dt { display: inline; text-transform: uppercase; letter-spacing: var(--tr-label); }
.ab-pt__survey dd { display: inline; margin: 0 0 0 .5em; }
.ab-pt__survey b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-pt__cta { justify-self: start; }
@media (min-width: 768px) {
	.ab-pt:first-child { grid-column: 1 / span 4; }
	.ab-pt:last-child { grid-column: 5 / -1; }
}
@media (min-width: 1024px) {
	.ab-pt:first-child { grid-column: 1 / span 5; }
	.ab-pt:last-child { grid-column: 7 / span 6; }
}

/* ---- s5 · how we work ------------------------------------------------------ */
.ab-how__grid { row-gap: var(--s-6); }
.ab-how__body { display: grid; gap: var(--s-4); justify-items: start; max-width: var(--measure); }
.ab-how__body p + p { margin-top: 0; }
@media (min-width: 1024px) {
	.ab-how__head { grid-column: 1 / span 6; }
	.ab-how__body { grid-column: 7 / -1; padding-top: var(--s-6); }
}

/* ---- s7 · company facts (only with data) -------------------------------------- */
.ab-company .nx-eyebrow { max-width: none; }
.ab-company__rows { display: grid; gap: 0; margin: 0; border-top: var(--bw) solid var(--rule); }
.ab-company__rows > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.ab-company__rows dt { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.ab-company__rows dd { margin: 0; }

/* ---- s8 · the letters ------------------------------------------------------- */
.ab-type__grid { row-gap: var(--s-6); align-items: center; }
.ab-type__specimen { display: grid; gap: var(--s-3); justify-items: start; }
.ab-type__glyphs {
	font-size: clamp(7rem, 4rem + 14vw, 15rem);
	font-weight: 820;
	line-height: .82;
	letter-spacing: -.03em;
	color: var(--fg);
}
.ab-type__axis { display: flex; gap: var(--s-6); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); color: var(--fg-2); }
.ab-type__copy { display: grid; gap: var(--s-4); }
.ab-type__copy .nx-eyebrow { max-width: none; margin-bottom: 0; }
@media (min-width: 1024px) {
	.ab-type__specimen { grid-column: 1 / span 5; }
	.ab-type__copy { grid-column: 7 / -1; }
}

/* Phones: the Molten action keeps a 44 px target but takes less of a 390 px screen, so the header
   CTA plus one primary action stay within the 5 % Molten quota (bible R2). */
@media (max-width: 479px) {
	.nx-main .nx-btn--primary { min-height: 44px; padding: .6em 16px; font-size: .875rem; }
}

} /* end @layer pages */