/* QDE 2026 components
 * Reusable patterns shared across pages.
 * All scoped under .qde-2026.
 */

/* ─────────────────────────────────────────────────
 * SITE CHROME — header + footer
 * Light-touch chrome. At Squarespace migration, the
 * Squarespace template's nav can replace this; for staging
 * we ship our own so Satya sees the full page experience.
 * ───────────────────────────────────────────────── */

.qde-2026 .qde-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.qde-2026 .qde-site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
}

.qde-2026 .qde-site-header.is-scrolled {
	border-bottom-color: var(--qde-rule);
}

.qde-2026 .qde-site-header__inner {
	width: 100%;
	max-width: var(--qde-content-bleed);
	margin: 0 auto;
	padding: var(--qde-space-3) var(--qde-page-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qde-space-4);
	position: relative;
}

.qde-2026 .qde-logo {
	color: var(--qde-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	flex-shrink: 0;
}

.qde-2026 .qde-logo__img {
	height: 56px;
	width: auto;
	display: block;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.qde-2026 .qde-logo__img {
		height: 40px;
	}
}

/* Mobile nav toggle — injected by site-header.js, hidden on desktop */
.qde-2026 .qde-nav-toggle {
	display: none;
	position: relative;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--qde-ink);
	cursor: pointer;
	flex-shrink: 0;
}

.qde-2026 .qde-nav-toggle__bar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--qde-dur-medium) var(--qde-ease-standard);
}

.qde-2026 .qde-nav-toggle__bar--h {
	transform: translate(-50%, -50%);
}

.qde-2026 .qde-nav-toggle__bar--v {
	transform: translate(-50%, -50%) rotate(90deg);
}

.qde-2026 .qde-site-header.is-open .qde-nav-toggle__bar--h {
	transform: translate(-50%, -50%) rotate(45deg);
}

.qde-2026 .qde-site-header.is-open .qde-nav-toggle__bar--v {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.qde-2026 .qde-nav {
	display: flex;
	align-items: center;
	gap: var(--qde-space-4);
}

.qde-2026 .qde-nav__link {
	font-size: 13px;
	font-weight: var(--qde-weight-medium);
	letter-spacing: var(--qde-tracking-mono);
	text-transform: uppercase;
	color: var(--qde-ink);
	text-decoration: none;
	position: relative;
	padding: 0.25em 0;
}

.qde-2026 .qde-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--qde-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-nav__link:hover::after {
	transform: scaleX(1);
}

.qde-2026 .qde-nav__cta {
	font-size: 13px;
	font-weight: var(--qde-weight-medium);
	letter-spacing: var(--qde-tracking-mono);
	text-transform: uppercase;
	color: var(--qde-red);
	text-decoration: none;
	position: relative;
	padding: 0.25em 0;
	transition: color var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-nav__cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--qde-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-nav__cta:hover::after {
	transform: scaleX(1);
}

/* Active page indicator — applied via .is-active class on the matching link */
.qde-2026 .qde-nav__link.is-active,
.qde-2026 .qde-nav__cta.is-active {
	color: var(--qde-red);
}

.qde-2026 .qde-nav__link.is-active::after,
.qde-2026 .qde-nav__cta.is-active::after {
	background: var(--qde-red);
	transform: scaleX(1);
}

@media (max-width: 720px) {
	.qde-2026 .qde-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.qde-2026 .qde-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--qde-space-2) var(--qde-page-gutter) var(--qde-space-3);
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		display: none;
	}
	.qde-2026 .qde-site-header.is-open .qde-nav {
		display: flex;
	}
	.qde-2026 .qde-nav__link,
	.qde-2026 .qde-nav__cta {
		font-size: 14px;
		padding: var(--qde-space-2) 0;
	}
	/* The hover underline animates from a -2px baseline; in the dropdown
	   layout the link sits in a vertical stack, so anchor the underline
	   to the link's own bottom edge instead. */
	.qde-2026 .qde-nav__link::after,
	.qde-2026 .qde-nav__cta::after {
		bottom: 0;
	}
}

/* ─────────────────────────────────────────────────
 * SITE FOOTER
 * ───────────────────────────────────────────────── */

/* Footer migrated to paper. Handoff rule: no dark sections on marketing. */
.qde-2026 .qde-site-footer {
	background: var(--paper);
	color: var(--qde-ink);
	margin-top: var(--qde-space-16);
	position: relative;
	border-top: 1px solid var(--rule);
}

/* Particle layer retained as a no-op for backward compatibility; rendered to
 * nothing now that the footer is paper-only. */
.qde-2026 .qde-site-footer__particles { display: none; }

.qde-2026 .qde-site-footer__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--qde-content-bleed);
	margin: 0 auto;
	padding: var(--qde-space-8) var(--qde-page-gutter) var(--qde-space-5);
	display: grid;
	gap: var(--qde-space-6);
}

/* Six wider columns laid left-to-right at equal width: brand, products, about,
 * people, resources, connect. Each column ~16% of the inner content rail. */
.qde-2026 .qde-site-footer__cols {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin: 0;
}

.qde-2026 .qde-site-footer__brand {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--qde-space-2);
}

.qde-2026 .qde-site-footer__brand-tag {
	font-family: var(--qde-font-headline);
	font-size: var(--qde-text-md);
	font-weight: var(--qde-weight-light);
	line-height: 1.25;
	letter-spacing: var(--qde-tracking-snug);
	color: var(--qde-ink);
	margin: 0;
	max-width: 18ch;
}

.qde-2026 .qde-site-footer__brand-tag .red {
	color: var(--qde-red);
}

/* Locations line — sits inside the brand footer column under the
 * "Building algorithms of trust." tag. Wraps within the column width. */
.qde-2026 .qde-site-footer__locations {
	font-size: clamp(9px, 0.78vw, 11px);
	font-weight: var(--qde-weight-medium);
	letter-spacing: var(--qde-tracking-wider);
	color: var(--ink-soft);
	margin: var(--qde-space-3) 0 0;
	padding: 0;
	border: 0;
	text-align: left;
	max-width: 18ch;
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────
 * BUTTONS — primary CTA (filled brand red)
 * Brand book chapter 04 reserves brand red for primary CTAs.
 * ───────────────────────────────────────────────── */

.qde-2026 .qde-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.4em;
	font-family: var(--qde-font-headline);
	font-size: 14px;
	font-weight: var(--qde-weight-medium);
	letter-spacing: 0.01em;
	color: var(--paper);
	background: var(--qde-red);
	border: 0;
	text-decoration: none;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
	transition: background var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-btn:hover {
	background: var(--qde-ink);
}

.qde-2026 .qde-btn--ghost {
	background: transparent;
	color: var(--qde-red);
	border: 1px solid var(--qde-red);
}

.qde-2026 .qde-btn--ghost:hover {
	background: var(--qde-red);
	color: var(--paper);
}

.qde-2026 .qde-site-footer__col h4 {
	font-size: var(--qde-text-xs);
	font-weight: var(--qde-weight-bold);
	letter-spacing: var(--qde-tracking-wider);
	text-transform: lowercase;
	color: var(--qde-red);
	margin: 0 0 var(--qde-space-3);
}

/* Brand column stays left-aligned (uses .qde-site-footer__brand, not __col).
 * The five nav columns — products, about, people, resources, connect — sit
 * right-aligned to the right edge of their grid cells per David's spec. */
.qde-2026 .qde-site-footer__cols > .qde-site-footer__col {
	text-align: right;
}

.qde-2026 .qde-site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qde-2026 .qde-site-footer__col li { margin-bottom: 6px; }

.qde-2026 .qde-site-footer__col a {
	color: var(--qde-ink);
	text-decoration: none;
	font-size: var(--qde-text-sm);
	font-weight: var(--qde-weight-regular);
	letter-spacing: -0.005em;
	transition: color var(--qde-dur-quick) var(--qde-ease-standard);
	position: relative;
}

.qde-2026 .qde-site-footer__col a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--qde-red);
	transition: right var(--qde-dur-medium) var(--qde-ease-standard);
}

.qde-2026 .qde-site-footer__col a:hover {
	color: var(--qde-red);
}

.qde-2026 .qde-site-footer__col a:hover::after { right: 0; }

.qde-2026 .qde-site-footer__base {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--qde-space-4);
	padding-top: var(--qde-space-4);
	border-top: 1px solid var(--rule);
	font-size: var(--qde-text-xs);
	font-weight: var(--qde-weight-regular);
	color: var(--ink-soft);
	letter-spacing: var(--qde-tracking-wider);
}

.qde-2026 .qde-site-footer__tagline {
	letter-spacing: var(--qde-tracking-wider);
}

@media (max-width: 1023px) {
	.qde-2026 .qde-site-footer__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--qde-space-4);
	}
	.qde-2026 .qde-site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.qde-2026 .qde-site-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
	.qde-2026 .qde-site-footer__brand {
		grid-column: 1 / -1;
	}
	.qde-2026 .qde-site-footer__base {
		flex-direction: column;
		gap: var(--qde-space-2);
	}
}

/* ─────────────────────────────────────────────────
 * PARTICLE FIELD — visual ambient (Option A)
 * Drop into any container with data-qde-particles="theme".
 * Container must establish its own positioning context.
 * ───────────────────────────────────────────────── */

.qde-2026 .qde-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.qde-2026 .qde-particles svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─────────────────────────────────────────────────
 * REUSABLE PATTERNS
 * ───────────────────────────────────────────────── */

/* Eyebrow — small caps-tracked label */
.qde-2026 .qde-eyebrow {
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-eyebrow);
	text-transform: lowercase;
	color: var(--qde-ink-soft);
	margin: 0 0 var(--qde-space-3);
	display: block;
}

/* Chapter rule — single short red line, flush-left */
.qde-2026 .qde-chapter-rule {
	border: 0;
	width: 120px;
	height: 1px;
	background: var(--qde-red);
	margin: var(--qde-space-8) 0;
}

/* ─────────────────────────────────────────────────
 * GEOMETRIC LINE MOTIF (hexagon.com register)
 * Thin precise lines, small numeric markers, corner brackets.
 * Add as decorative overlay on Direction C surfaces.
 * ───────────────────────────────────────────────── */

/* Full-width thin section divider, optional left and right markers */
.qde-2026 .qde-geo-divider {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	align-items: center;
	gap: var(--qde-space-3);
	width: 100%;
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-eyebrow);
	text-transform: lowercase;
	color: var(--qde-ink-soft);
	font-feature-settings: 'tnum';
	padding: var(--qde-space-3) 0;
}

.qde-2026 .qde-geo-divider::before,
.qde-2026 .qde-geo-divider::after {
	content: '';
	display: block;
	height: var(--qde-geo-stroke);
	background: var(--qde-geo-line);
}

.qde-2026 .qde-geo-divider__left {
	grid-column: 1;
	white-space: nowrap;
}

.qde-2026 .qde-geo-divider__right {
	grid-column: 3;
	white-space: nowrap;
}

.qde-2026 .qde-geo-divider::before { grid-column: 2; }
.qde-2026 .qde-geo-divider::after  { display: none; }

.qde-2026 .qde-geo-divider--double::after {
	display: block;
	grid-column: 2;
}

/* Section marker: small "01" numeric with thin line connector. Drop into a
 * spread rail for hexagon-style structural numbering. */
.qde-2026 .qde-geo-marker {
	display: inline-flex;
	align-items: center;
	gap: var(--qde-space-2);
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-eyebrow);
	text-transform: lowercase;
	color: var(--qde-ink-soft);
	font-feature-settings: 'tnum';
}

.qde-2026 .qde-geo-marker::after {
	content: '';
	display: block;
	width: 28px;
	height: var(--qde-geo-stroke);
	background: var(--qde-geo-line-strong);
}

.qde-2026 .qde-geo-marker__num {
	color: var(--qde-ink);
	letter-spacing: 0.04em;
}

/* Corner bracket — L-shape that anchors a card or section */
.qde-2026 .qde-geo-bracket {
	position: relative;
}

.qde-2026 .qde-geo-bracket::before,
.qde-2026 .qde-geo-bracket::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: var(--qde-geo-line-strong);
	border-style: solid;
	border-width: 0;
	pointer-events: none;
}

.qde-2026 .qde-geo-bracket::before {
	top: 0;
	left: 0;
	border-top-width: var(--qde-geo-stroke);
	border-left-width: var(--qde-geo-stroke);
}

.qde-2026 .qde-geo-bracket::after {
	bottom: 0;
	right: 0;
	border-bottom-width: var(--qde-geo-stroke);
	border-right-width: var(--qde-geo-stroke);
}

/* Subtle 1px line grid background. Add to large hero/section surfaces for
 * the technical-precision feel. Renders behind content via pseudo. */
.qde-2026 .qde-geo-grid {
	position: relative;
	isolation: isolate;
}

.qde-2026 .qde-geo-grid::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--qde-geo-line) var(--qde-geo-stroke), transparent var(--qde-geo-stroke)),
		linear-gradient(to bottom, var(--qde-geo-line) var(--qde-geo-stroke), transparent var(--qde-geo-stroke));
	background-size: 64px 64px;
	background-position: 0 0;
	opacity: 0.45;
	pointer-events: none;
}

/* Hexagonal accent — small inline mark, decorative section anchor */
.qde-2026 .qde-geo-hex {
	display: inline-block;
	width: 14px;
	height: 16px;
	color: var(--qde-geo-line-strong);
	flex-shrink: 0;
}

.qde-2026 .qde-geo-hex svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

/* Reveal-on-scroll base — JS adds .has-js to <html> on load. Without JS,
 * content stays visible. With JS, .qde-reveal is hidden until intersected. */
.has-js .qde-2026 .qde-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--qde-dur-medium) var(--qde-ease-standard),
		transform var(--qde-dur-medium) var(--qde-ease-standard);
}

.has-js .qde-2026 .qde-reveal.qde-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.has-js .qde-2026 .qde-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Attribution mark (replaces em-dash) */
.qde-2026 .qde-attrib {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	font-size: var(--qde-text-sm);
	color: var(--qde-ink-soft);
	letter-spacing: 0.01em;
	margin-top: var(--qde-space-3);
}

.qde-2026 .qde-attrib::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--qde-red);
	transform: translateY(-2px);
}

/* Inline link with red underline that animates to ink */
.qde-2026 .qde-link {
	color: var(--qde-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--qde-red);
	padding-bottom: 1px;
	transition: border-color var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-link:hover {
	border-bottom-color: var(--qde-ink);
}

.qde-2026 .qde-link__arrow {
	display: inline-block;
	margin-left: 0.4em;
	transition: transform var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .qde-link:hover .qde-link__arrow {
	transform: translateX(3px);
}

/* ─────────────────────────────────────────────────
 * SUB-BRAND MARK SIZING
 * The Compass / Conquer / Context source PNGs share height (172px) but
 * differ in width. Width- or max-width-based sizing renders the
 * letterforms at different visual sizes. ALWAYS lock on height.
 * Use the .sub-brand-mark class plus a size modifier; never hand-size.
 * ───────────────────────────────────────────────── */

.qde-2026 .sub-brand-mark {
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.qde-2026 .sub-brand-mark--sm { height: var(--mark-h-sm); }
.qde-2026 .sub-brand-mark--md { height: var(--mark-h-md); }
.qde-2026 .sub-brand-mark--lg { height: var(--mark-h-lg); }

/* Skip link for accessibility */
.qde-2026 .qde-skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qde-2026 .qde-skip:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5em 1em;
	background: var(--qde-ink);
	color: var(--qde-bg);
}

/* ─────────────────────────────────────────────────
 * EDITORIAL PRIMITIVES (handoff May 2026)
 * Full-bleed eyebrow rows, 2-col hero, 1px-rule grids,
 * stat-tags, num-tags, closer pattern. Reused by every route.
 * ───────────────────────────────────────────────── */

.qde-2026 .ed-page { background: var(--paper); }

/* Full-bleed eyebrow row that sits above every section.
 * Top + bottom both 1px soft rule so all hairlines on the page read at the
 * same weight (David called out the heavy ink rule under the hero looking
 * disproportionate next to the soft rules elsewhere). */
.qde-2026 .ed-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--qde-space-3) var(--qde-section-pad);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-wider);
	text-transform: lowercase;
	color: var(--ink-soft);
}

.qde-2026 .ed-row .ed-row__label {
	color: var(--qde-red);
	font-weight: var(--qde-weight-bold);
}

.qde-2026 .ed-row .ed-row__meta {
	color: var(--ink-mute);
}

/* Two-column hero. Left = display + lede. Right = stat-tag + paragraph + dl.
 * Positioned so the optional .qde-particles backdrop can sit absolutely
 * underneath the text without disturbing the grid flow. */
.qde-2026 .ed-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--qde-space-16) var(--qde-section-pad) var(--qde-space-12);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--qde-space-16);
}

/* Particle visualisation behind the hero — restored from the pre-editorial
 * build at David's request. Pulled out of the grid via absolute positioning
 * so it bleeds across the full hero, with the text grid sitting on top. */
.qde-2026 .ed-hero > .qde-particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.32;
	pointer-events: none;
}

.qde-2026 .ed-hero > div,
.qde-2026 .ed-hero > aside {
	position: relative;
	z-index: 1;
}

/* Solo modifier — hero with no aside. Used on home where David removed the
 * meta block but kept the page-opener. Drops to a single column so the text
 * doesn't strand in a half-width column. */
.qde-2026 .ed-hero--solo {
	grid-template-columns: 1fr;
}

/* Sub-brand mark slot inside the hero — used on Compass / Conquer / Context
 * pages so the wordmark sits above the headline. Lock on height; never width. */
.qde-2026 .ed-hero__mark {
	margin-bottom: var(--qde-space-4);
}

/* Hero status row — sits below the lede with consistent spacing. Carries the
 * development-stage stat-tag on pages that have one (Context). */
.qde-2026 .ed-hero__status {
	margin-top: var(--qde-space-6);
}

/* ─────────────────────────────────────────────────
 * METRICS — large num + small label, 1px-rule grid
 * Used on home, Compass, Clients, anywhere a metrics grid appears.
 * Lives here (not in a per-page CSS) so every page renders identically.
 * ───────────────────────────────────────────────── */
.qde-2026 .ed-metric { padding: var(--qde-space-6) var(--qde-space-6); }

.qde-2026 .ed-metric__num {
	font-family: var(--qde-font-headline);
	font-size: clamp(26px, 3vw, 44px);
	font-weight: var(--qde-weight-bold);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--qde-ink);
	font-feature-settings: 'tnum';
}

.qde-2026 .ed-metric__label {
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-wider);
	text-transform: lowercase;
	color: var(--ink-soft);
	margin-top: var(--qde-space-3);
}

/* ─────────────────────────────────────────────────
 * Four pillars grid — shared by home (Trust, engineered) and
 * Compass (Data science. Not rocket science.).
 * ───────────────────────────────────────────────── */
.qde-2026 .ed-pillars-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--qde-space-6);
	padding-top: var(--qde-space-3);
	border-top: 1px solid var(--rule);
}

.qde-2026 .ed-pillar__num {
	font-size: var(--qde-text-xs);
	color: var(--qde-red);
	letter-spacing: var(--qde-tracking-wider);
	font-weight: var(--qde-weight-bold);
}

.qde-2026 .ed-pillar__name {
	font-family: var(--qde-font-headline);
	font-size: var(--qde-text-lg);
	font-weight: var(--qde-weight-bold);
	color: var(--qde-ink);
	margin: var(--qde-space-1) 0 var(--qde-space-2);
}

.qde-2026 .ed-pillar__line {
	font-size: var(--qde-text-sm);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

@media (max-width: 1023px) {
	.qde-2026 .ed-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.qde-2026 .ed-pillars-grid { grid-template-columns: 1fr; }
}

.qde-2026 .ed-hero__title {
	font-family: var(--qde-font-headline);
	font-size: var(--qde-text-display);
	font-weight: var(--qde-weight-bold);
	/* Leading opened up so multi-line headlines never overlap (ascenders/descenders clear). */
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--qde-ink);
}

.qde-2026 .ed-hero__title .red { color: var(--qde-red); }

.qde-2026 .ed-hero__lede {
	font-size: var(--qde-text-md);
	line-height: 1.5;
	max-width: 38ch;
	margin: var(--qde-space-4) 0 0;
	color: var(--qde-ink);
}

.qde-2026 .ed-hero__aside {
	padding-top: var(--qde-space-24);
}

.qde-2026 .ed-hero__aside p {
	font-size: var(--qde-text-base);
	line-height: 1.55;
	max-width: 36ch;
	margin: 0 0 var(--qde-space-3);
	color: var(--ink-soft);
}

.qde-2026 .ed-hero__aside p + p { margin-top: var(--qde-space-3); }

.qde-2026 .ed-hero__aside dl {
	margin: var(--qde-space-6) 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px var(--qde-space-6);
	font-size: var(--qde-text-xs);
	letter-spacing: var(--qde-tracking-wider);
	text-transform: lowercase;
}

.qde-2026 .ed-hero__aside dt { color: var(--ink-soft); }
.qde-2026 .ed-hero__aside dd { color: var(--qde-ink); margin: 0; }

/* Stat-tag pill. Three styles: default (ink border), filled (early access),
 * red (in development / design partners). */
.qde-2026 .ed-stat-tag {
	display: inline-block;
	font-size: 10px;
	letter-spacing: var(--qde-tracking-wider);
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid var(--qde-ink);
	color: var(--qde-ink);
	background: transparent;
	margin-bottom: var(--qde-space-4);
}

.qde-2026 .ed-stat-tag--filled {
	background: var(--qde-ink);
	color: var(--paper);
}

.qde-2026 .ed-stat-tag--red {
	border-color: var(--qde-red);
	color: var(--qde-red);
}

/* Section frame. Default paper, modifier .ed-section--bone for the alternating
 * soft-grey panel. Padding matches hero's horizontal gutter for column align. */
.qde-2026 .ed-section {
	padding-top: var(--qde-space-12);
	padding-bottom: var(--qde-space-12);
	padding-left: var(--qde-section-pad);
	padding-right: var(--qde-section-pad);
	background: var(--paper);
}

.qde-2026 .ed-section--bone { background: var(--bone); }

/* Compact modifier — half the vertical breathing room. Used on dense
 * informational sections (e.g. enquire / direct-inbox list) where the
 * default --qde-space-12 padding feels over-generous. */
.qde-2026 .ed-section--compact {
	padding-top: var(--qde-space-6);
	padding-bottom: var(--qde-space-6);
}

.qde-2026 .ed-section__title {
	font-family: var(--qde-font-headline);
	font-size: var(--qde-text-xl);
	font-weight: var(--qde-weight-regular);
	margin: 0 0 var(--qde-space-6);
	max-width: 30ch;
	letter-spacing: -0.005em;
}

/* 1px-rule grid pattern. Children get a 1px hairline separator simply by
 * sitting in a grid with `gap: 1px` and the parent painted with --rule.
 * Both top and bottom borders use --rule so all hairlines on the page sit
 * at the same weight. */
.qde-2026 .ed-grid {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.qde-2026 .ed-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qde-2026 .ed-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qde-2026 .ed-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Six powerful actions: fully fluid, wraps cleanly at every width, never side-scrolls. */
.qde-2026 .ed-grid--6 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

@media (max-width: 1023px) {
	.qde-2026 .ed-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qde-2026 .ed-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.qde-2026 .ed-grid--3,
	.qde-2026 .ed-grid--4,
	.qde-2026 .ed-grid--5 { grid-template-columns: 1fr; }
	.qde-2026 .ed-grid--6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.qde-2026 .ed-cell {
	background: var(--paper);
	padding: var(--qde-space-5) var(--qde-space-6);
	min-width: 0;
}

.qde-2026 .ed-section--bone .ed-cell { background: var(--bone); }

.qde-2026 .ed-cell__num {
	font-size: var(--qde-text-xs);
	color: var(--qde-red);
	letter-spacing: var(--qde-tracking-wider);
	font-weight: var(--qde-weight-bold);
}

.qde-2026 .ed-cell__name {
	font-size: var(--qde-text-md);
	font-weight: var(--qde-weight-bold);
	line-height: 1.15;
	margin: var(--qde-space-1) 0 var(--qde-space-1);
	letter-spacing: -0.01em;
}

.qde-2026 .ed-cell__line {
	font-size: var(--qde-text-sm);
	color: var(--ink-soft);
	line-height: 1.5;
}

/* Closer pattern. 2-col hang. Left = single H2 promise. Right = stack of
 * right-aligned actions (one primary red CTA + secondary text links). */
.qde-2026 .ed-closer {
	padding: var(--qde-space-16) var(--qde-section-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--qde-space-16);
	align-items: end;
	border-top: 1px solid var(--rule);
}

.qde-2026 .ed-closer__title {
	font-family: var(--qde-font-headline);
	font-size: var(--qde-text-2xl);
	font-weight: var(--qde-weight-regular);
	line-height: 1.05;
	max-width: 18ch;
	letter-spacing: -0.015em;
	margin: 0;
}

.qde-2026 .ed-closer__title--sm { font-size: var(--qde-text-lg); max-width: none; margin-bottom: var(--qde-space-4); }
.qde-2026 .ed-closer--solo { grid-template-columns: 1fr; }

.qde-2026 .ed-closer__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--qde-space-2);
}

.qde-2026 .ed-closer__actions a {
	font-size: var(--qde-text-md);
	color: var(--qde-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--qde-ink);
	padding-bottom: 4px;
	transition: color var(--qde-dur-quick) var(--qde-ease-standard),
		border-bottom-color var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .ed-closer__actions a:hover {
	color: var(--qde-red);
	border-bottom-color: var(--qde-red);
}

.qde-2026 .ed-closer__actions a.ed-cta {
	background: var(--qde-red);
	color: var(--paper);
	padding: 14px 28px;
	border: 0;
	font-weight: var(--qde-weight-bold);
	letter-spacing: var(--qde-tracking-wide);
	text-transform: lowercase;
	transition: background var(--qde-dur-quick) var(--qde-ease-standard);
}

.qde-2026 .ed-closer__actions a.ed-cta:hover {
	background: var(--qde-ink);
}

@media (max-width: 720px) {
	.qde-2026 .ed-hero,
	.qde-2026 .ed-closer { grid-template-columns: 1fr; gap: var(--qde-space-6); }
	.qde-2026 .ed-hero__aside { padding-top: 0; }
	.qde-2026 .ed-closer__actions { align-items: flex-start; }
}