/* Hallmark · genre: modern-minimal · macrostructure: bento-grid · theme: cobalt · enrichment: tier-a · nav: n13 · footer: ft5 */
/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V5 */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-style: normal;
	color: var(--color-ink);
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
	min-width: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
kbd { font-family: var(--font-mono); }

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	transition: none;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	padding: var(--space-2xs) var(--space-sm);
	border-radius: 0 0 var(--radius-sm) 0;
	z-index: var(--z-toast);
	font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

.reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

.mono-label {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	color: var(--color-accent);
	margin: 0 0 var(--space-sm);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9rem;
	padding: 0.7rem 1.15rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background-color var(--dur-short) var(--ease-out),
		border-color var(--dur-short) var(--ease-out),
		color var(--dur-short) var(--ease-out);
}
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--outline { border-color: var(--color-rule-2); color: var(--color-ink); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Nav (N13) ---------- */
.nav {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--color-nav-bg);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-rule);
}

/* WordPress admin toolbar (#wpadminbar) is fixed at top:0 with a z-index
   above any theme content - offset the sticky nav below it for logged-in
   users so the two don't fight for the same top edge. Toolbar is 32px on
   desktop, 46px under the 782px breakpoint (WP core values). */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .nav { top: 46px; }
}
.nav__inner {
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: var(--space-md);
	height: 64px;
	display: flex;
	align-items: center;
	gap: var(--space-md);
}
.nav__brand {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--color-ink);
	white-space: nowrap;
}
.nav__brand-mono { font-family: var(--font-mono); color: var(--color-accent); font-weight: 500; }

.searchpill {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 40px;
	padding: 0 0.55rem 0 0.85rem;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	color: var(--color-muted);
	margin-inline-start: auto;
	transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.searchpill:hover, .searchpill:focus-visible { border-color: var(--color-rule-2); }
.searchpill__ico {
	width: 13px; height: 13px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	position: relative;
	flex-shrink: 0;
}
.searchpill__ico::after {
	content: "";
	position: absolute;
	width: 6px; height: 1.5px;
	background: currentColor;
	transform: rotate(45deg);
	top: 10px; left: 8px;
}
.searchpill__text { font-size: 0.85rem; white-space: nowrap; }
.searchpill__kbd { display: flex; gap: 2px; }
.searchpill__kbd kbd {
	font-size: 0.68rem;
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--color-muted);
}

.nav__right { display: flex; align-items: center; gap: var(--space-md); position: relative; }
.nav__links { display: flex; align-items: center; gap: var(--space-md); }
.nav__link {
	font-size: 0.9rem;
	color: var(--color-ink-2);
	position: relative;
	white-space: nowrap;
	padding-bottom: 2px;
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-short) var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }

/* Hamburger toggle — hidden until the mobile breakpoint collapses .nav__links */
.nav__toggle {
	display: none;
	width: 36px; height: 36px;
	align-items: center; justify-content: center;
	border-radius: var(--radius-sm);
	transition: background-color var(--dur-short) var(--ease-out);
}
.nav__toggle:hover { background: var(--color-paper-2); }
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
	display: block;
	width: 18px; height: 1.5px;
	background: var(--color-ink);
	border-radius: 1px;
	transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* Command palette */
.cmdk {
	position: fixed; inset: 0;
	z-index: var(--z-modal);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk__backdrop { position: absolute; inset: 0; background: var(--color-scrim); }
.cmdk__panel {
	position: absolute;
	top: 14vh; left: 50%;
	transform: translateX(-50%) translateY(-8px);
	width: min(560px, calc(100vw - 2rem));
	background: var(--color-paper);
	border: 1px solid var(--color-rule-2);
	border-radius: var(--radius-md);
	box-shadow: 0 12px 40px -12px var(--color-shadow-modal);
	transition: transform var(--dur-short) var(--ease-out);
	overflow: hidden;
}
.cmdk.is-open .cmdk__panel { transform: translateX(-50%) translateY(0); }
.cmdk__field { display: flex; align-items: center; gap: 0.6rem; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.cmdk__field-ico { width: 14px; height: 14px; border: 1.5px solid var(--color-muted); border-radius: 50%; position: relative; flex-shrink: 0; }
.cmdk__field-ico::after { content: ""; position: absolute; width: 6px; height: 1.5px; background: var(--color-muted); transform: rotate(45deg); top: 11px; left: 9px; }
.cmdk__field input { flex: 1; border: none; background: none; font: 1rem var(--font-body); color: var(--color-ink); outline: none; }
.cmdk__field kbd { font-size: 0.7rem; color: var(--color-muted); border: 1px solid var(--color-rule); border-radius: 4px; padding: 1px 6px; }
.cmdk__results { max-height: 320px; overflow-y: auto; padding: var(--space-xs); }
.cmdk__group { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); padding: var(--space-xs) var(--space-xs) var(--space-3xs); }
.cmdk__item {
	display: block; width: 100%; text-align: left;
	padding: 0.55rem var(--space-xs);
	border-radius: var(--radius-sm);
	font-size: 0.92rem; color: var(--color-ink-2);
}
.cmdk__item.is-active, .cmdk__item:hover { background: var(--color-accent-soft); color: var(--color-ink); }
.cmdk__foot { display: flex; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--color-rule); font-size: 0.75rem; color: var(--color-muted); }
.cmdk__foot kbd { border: 1px solid var(--color-rule); border-radius: 4px; padding: 1px 5px; margin-inline-end: 2px; }

/* ---------- Lead-capture modal ("Book a call") ---------- */
/* frontend-design · component: modal-form · system: Hallmark/Cobalt tokens (unchanged)
 * signature: real HTTP-style status chip + split context/form panel — see header.php comment
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.leadform {
	position: fixed; inset: 0;
	z-index: var(--z-modal);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}
.leadform.is-open { opacity: 1; visibility: visible; }
.leadform__backdrop { position: absolute; inset: 0; background: var(--color-scrim); }
.leadform__panel {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) translateY(8px);
	width: min(720px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	background: var(--color-paper);
	border: 1px solid var(--color-rule-2);
	border-radius: var(--radius-md);
	box-shadow: 0 20px 60px -16px var(--color-shadow-modal);
	overflow: hidden;
	transition: transform var(--dur-short) var(--ease-out);
	scrollbar-width: none; /* Firefox — panel becomes the scroll container on mobile */
	-ms-overflow-style: none;
}
.leadform__panel::-webkit-scrollbar { display: none; }
.leadform.is-open .leadform__panel { transform: translate(-50%, -50%); }
.leadform__close {
	position: absolute; top: var(--space-sm); right: var(--space-sm);
	z-index: 2;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; line-height: 1;
	color: var(--color-muted);
	border-radius: var(--radius-sm);
	transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.leadform__close:hover { background: var(--color-paper-2); color: var(--color-ink); }

/* Context pane — reuses the homepage's one-dark-band move instead of inventing a new device */
.leadform__context {
	background: var(--color-graphite);
	color: var(--color-graphite-ink);
	padding: var(--space-xl) var(--space-lg);
	display: flex;
	flex-direction: column;
}
.leadform__context-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--color-graphite-ink); }
.leadform__context-steps { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.leadform__context-steps li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: 0.82rem; line-height: 1.5; color: var(--color-graphite-muted); }
.leadform__context-no { font-family: var(--font-mono); color: var(--color-accent); font-size: 0.78rem; flex-shrink: 0; padding-top: 0.15em; }
.leadform__context-compact { display: none; margin: 0; font-size: 0.82rem; color: var(--color-graphite-ink); }

.leadform__form-pane {
	overflow-y: auto;
	max-height: calc(100vh - 4rem);
	padding: var(--space-lg) var(--space-xl) var(--space-xl);
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}
.leadform__form-pane::-webkit-scrollbar { display: none; } /* Chrome/Safari — overflow-y:auto keeps scroll working */
.leadform__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.leadform__title { font-size: 1.4rem; margin: 0; }
.leadform__lede { color: var(--color-muted); font-size: 0.92rem; margin-top: var(--space-2xs); }
.leadform__body[hidden] { display: none; }

/* Status chip — the signature: shows the real HTTP-style status the request returned,
   not a decorative label. Same visual family as the homepage code-card's "200 OK" chip. */
.status--chip {
	font: 500 0.7rem/1 var(--font-mono);
	letter-spacing: 0.06em;
	color: var(--color-muted);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.status--chip[data-state="sending"] { color: var(--color-ink-2); border-color: var(--color-rule-2); }
.status--chip[data-state="ok"] { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.status--chip[data-state="err"] { color: var(--color-error); background: var(--color-error-soft); border-color: var(--color-error); }

#leadform-form { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field label { font-size: 0.82rem; font-weight: 500; color: var(--color-ink-2); }
.field:focus-within label::before {
	content: "▍";
	display: inline-block;
	color: var(--color-accent);
	margin-right: 0.3em;
	animation: leadform-cursor 1s steps(1) infinite;
}
.field__optional { color: var(--color-muted); font-weight: 400; }

/* Interaction-and-states.md § Input field states — border-width is constant
   across every state (default/hover/focus/error); state changes go to
   background, outline, or border-COLOR only, never border-width. The
   outline starts transparent at rest so the focus ring causes zero
   layout shift when it appears. */
.field__control { position: relative; }
.field input, .field select, .field textarea {
	width: 100%;
	font: 0.92rem var(--font-body);
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1px solid var(--color-rule-2);
	border-radius: var(--radius-sm);
	padding: 0.6rem 1.9rem 0.6rem 0.75rem; /* right-edge slot reserved for the glyph */
	outline: 2px solid transparent;
	outline-offset: 1px;
	transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.field select { padding-right: 0.75rem; } /* select has its own native disclosure arrow, no glyph slot needed */
@media (hover: hover) {
	.field input:hover, .field select:hover, .field textarea:hover { background: var(--color-paper-2); }
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline-color: var(--color-focus);
	border-color: var(--color-ink-2);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Error — border-colour flip is allowed here because aria-invalid + the
   glyph + the message all signal it too; never colour alone. */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-error); }
.field__glyph {
	position: absolute;
	top: 50%; right: 0.6rem;
	transform: translateY(-50%);
	width: 14px; height: 14px;
	pointer-events: none;
}
.field__glyph--textarea { top: 0.75rem; transform: none; }
.field input[aria-invalid="true"] ~ .field__glyph::before,
.field textarea[aria-invalid="true"] ~ .field__glyph::before {
	content: "!";
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	border-radius: 50%;
	background: var(--color-error);
	color: var(--color-error-soft);
	font: 700 0.65rem/1 var(--font-mono);
}

/* Helper/error text — reserves a stable 1-line height even when empty, so
   an error appearing doesn't push the rest of the form down. */
.field__error {
	min-height: 1lh;
	font-size: 0.78rem;
	color: var(--color-error);
}
.leadform__error {
	font-size: 0.85rem;
	color: var(--color-error);
	background: var(--color-error-soft);
	border-radius: var(--radius-sm);
	padding: var(--space-2xs) var(--space-sm);
}
.leadform__error[hidden] { display: none; }
.leadform__submit { width: 100%; position: relative; }
.leadform__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.leadform__submit[data-state="loading"] .leadform__submit-label { visibility: hidden; }
.leadform__submit[data-state="loading"]::after {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--color-accent-ink);
	border-top-color: transparent;
	border-radius: 50%;
	animation: leadform-spin 700ms linear infinite;
}
@keyframes leadform-spin { to { transform: rotate(360deg); } }
@keyframes leadform-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.leadform__submit[data-state="loading"]::after { animation-duration: 1400ms; }
	.field:focus-within label::before { animation: none; }
}

@media (max-width: 700px) {
	.leadform__panel {
		grid-template-columns: 1fr;
		width: min(460px, calc(100vw - 2rem));
		max-height: calc(100dvh - 2rem);
		overflow-y: auto;
	}
	.leadform__context {
		flex-direction: row;
		align-items: center;
		padding: var(--space-sm) var(--space-lg);
	}
	.leadform__context-title, .leadform__context-steps, .leadform__context > .mono-label { display: none; }
	.leadform__context-compact { display: block; }
	.leadform__form-pane { overflow-y: visible; max-height: none; padding: var(--space-lg); }
}

/* ---------- Mobile nav drawer ---------- */
/* Hallmark · component: nav-drawer · genre: modern-minimal · theme: cobalt
 * states: default · hover · focus · active (drawer links, close button, CTA)
 * contrast: pass
 */
.drawer {
	position: fixed; inset: 0;
	z-index: var(--z-modal);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: var(--color-scrim); }
.drawer__panel {
	position: absolute;
	top: 0; right: 0;
	height: 100dvh;
	width: min(340px, 86vw);
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	border-left: 1px solid var(--color-rule-2);
	box-shadow: -24px 0 60px -20px var(--color-shadow-modal);
	transform: translateX(100%);
	transition: transform var(--dur-long) var(--ease-out);
	overflow-y: auto;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-rule);
}
.drawer__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); }
.drawer__close {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; line-height: 1;
	color: var(--color-muted);
	border-radius: var(--radius-sm);
	transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.drawer__close:hover { background: var(--color-paper-2); color: var(--color-ink); }

.drawer__section { display: flex; flex-direction: column; padding: 0 var(--space-md); }
.drawer__link {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 44px;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--color-rule);
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-ink);
}
.drawer__link-arrow {
	color: var(--color-accent);
	transition: transform var(--dur-short) var(--ease-out);
}
.drawer__link:hover .drawer__link-arrow,
.drawer__link:focus-visible .drawer__link-arrow { transform: translateX(4px); }

.drawer__label {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	color: var(--color-muted);
	padding: var(--space-lg) var(--space-md) var(--space-2xs);
}
.drawer__section--compact .drawer__sublink {
	display: flex; align-items: center;
	min-height: 44px;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--color-rule);
	font-size: 0.95rem;
	color: var(--color-ink-2);
	transition: color var(--dur-short) var(--ease-out);
}
.drawer__section--compact .drawer__sublink:hover,
.drawer__section--compact .drawer__sublink:focus-visible { color: var(--color-accent); }

.drawer__foot {
	margin-top: auto;
	padding: var(--space-md);
	border-top: 1px solid var(--color-rule);
	display: flex; flex-direction: column; gap: var(--space-md);
}
.drawer__cta { width: 100%; }
.drawer__legal { display: flex; justify-content: center; gap: var(--space-md); font-size: 0.8rem; color: var(--color-muted); }
.drawer__legal a:hover { color: var(--color-accent); }

/* One orchestrated stagger on open, not a scroll-linked loop */
.drawer__link, .drawer__sublink {
	opacity: 0;
	transform: translateX(14px);
	transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.drawer.is-open .drawer__link, .drawer.is-open .drawer__sublink { opacity: 1; transform: none; }
.drawer__section .drawer__link:nth-child(1) { transition-delay: 80ms; }
.drawer__section .drawer__link:nth-child(2) { transition-delay: 130ms; }
.drawer__section--compact .drawer__sublink:nth-child(1) { transition-delay: 180ms; }
.drawer__section--compact .drawer__sublink:nth-child(2) { transition-delay: 220ms; }
.drawer__section--compact .drawer__sublink:nth-child(3) { transition-delay: 260ms; }
.drawer__section--compact .drawer__sublink:nth-child(4) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.drawer__panel { transition: none; }
	.drawer__link, .drawer__sublink { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-3xl) var(--space-md) var(--space-2xl); }
.hero__inner {
	max-width: var(--container-w);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-2xl);
	align-items: center;
}
.hero--lite { padding-top: var(--space-2xl); }
.hero__title { font-size: clamp(2rem, 4.2vw + 0.5rem, 3.4rem); font-weight: 600; }
.hero__lede { margin-top: var(--space-md); font-size: 1.08rem; color: var(--color-muted); max-width: 42ch; }
.hero__actions { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Code card — the code-as-hero signature */
.code-card {
	background: var(--color-graphite);
	border: 1px solid var(--color-graphite-rule);
	border-radius: var(--radius-md);
	box-shadow: 0 1px 2px var(--color-shadow-soft);
	font-family: var(--font-mono);
	overflow: hidden;
}
.code-card__bar {
	display: flex; align-items: center; gap: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	border-bottom: 1px solid var(--color-graphite-rule);
}
.code-card__file {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	color: var(--color-graphite-muted);
}
.status { margin-inline-start: auto; }
.status--ok { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--color-accent); }
.code-card__body { margin: 0; padding: var(--space-md); font-size: 0.85rem; line-height: 1.7; overflow-x: auto; }
.code-line { display: block; white-space: pre; opacity: 0; }
.code-line.is-typed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.code-line { opacity: 1; }
}
.tok-cmd { color: var(--color-graphite-ink); }
.tok-key { color: var(--color-accent); }
.tok-muted { color: var(--color-graphite-muted); }

/* ---------- Bento grid ---------- */
.bento {
	max-width: var(--container-w);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-md) var(--space-3xl);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(160px, auto);
	grid-auto-flow: dense;
	gap: var(--space-md);
}
.bento--detail { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; padding-top: var(--space-xl); }
.cell {
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	background: var(--color-paper);
	transition: border-color var(--dur-short) var(--ease-out);
}
.cell:hover { border-color: var(--color-rule-2); }
.cell--accent { background: var(--color-accent-soft); border-color: transparent; }
.cell__label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin: 0; }
.cell__title { font-size: 1.2rem; font-weight: 600; margin-top: var(--space-2xs); }
.cell__body { color: var(--color-muted); font-size: 0.95rem; margin-top: var(--space-2xs); }
.cell__tags { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cell__tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-ink-2);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	padding: 0.25rem 0.6rem;
}
/* margin-top:auto (not flex:1 on the body) so the link always pins to the
   cell's bottom edge with exactly one gap above it, however tall the
   row-spanning grid track ends up being - never a dead gap mid-card. */
.cell__link { margin-top: auto; padding-top: var(--space-sm); font-size: 0.9rem; font-weight: 500; color: var(--color-ink); position: relative; align-self: flex-start; white-space: nowrap; }
.cell__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.cell__link:hover::after, .cell__link:focus-visible::after { transform: scaleX(1); }

.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-2x1 { grid-column: span 2; grid-row: span 1; }
.span-1x2 { grid-column: span 1; grid-row: span 2; }
.span-1x1 { grid-column: span 1; grid-row: span 1; }

/* ---------- Dark graphite band ---------- */
.band { background: var(--color-graphite); padding: var(--space-3xl) var(--space-md); }
.band__inner { max-width: var(--container-w); margin-inline: auto; }
.band__title { color: var(--color-graphite-ink); font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.2rem); }
.band__steps { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.band__step { display: flex; flex-direction: column; gap: var(--space-2xs); }
.band__step-no { font-family: var(--font-mono); color: var(--color-accent); font-size: 0.85rem; letter-spacing: 0.06em; }
.band__step-title { color: var(--color-graphite-ink); font-size: 1.15rem; margin-top: var(--space-2xs); }
.band__step-body { color: var(--color-graphite-muted); font-size: 0.95rem; margin-top: var(--space-2xs); }

/* ---------- CTA ---------- */
.cta { padding: var(--space-3xl) var(--space-md); text-align: left; }
.cta__inner { max-width: var(--container-w); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--color-rule); padding-top: var(--space-2xl); }
.cta__title { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.1rem); max-width: 24ch; }
.cta__actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.cta__email { font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-muted); border-bottom: 1px solid var(--color-rule-2); padding-bottom: 2px; }

/* ---------- Prose pages (legal / fallback) ---------- */
.prose-page { padding: var(--space-2xl) var(--space-md) var(--space-3xl); }
.prose-page__inner { max-width: 68ch; margin-inline: auto; }
.prose-page__inner h1 { font-size: clamp(1.8rem, 3vw + 0.5rem, 2.6rem); margin-bottom: var(--space-lg); }
.prose-page__body h2 { font-family: var(--font-display); font-size: 1.25rem; margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose-page__body p { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
.prose-page__body a { color: var(--color-accent); border-bottom: 1px solid currentColor; }

/* ---------- Footer (Ft5 statement) ---------- */
.site-footer { border-top: 1px solid var(--color-rule); padding: var(--space-2xl) var(--space-md) var(--space-xl); }
.site-footer__inner { max-width: var(--container-w); margin-inline: auto; }
.site-footer__statement { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw + 0.5rem, 1.8rem); color: var(--color-ink); max-width: 32ch; }
.site-footer__meta { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); font-size: 0.85rem; color: var(--color-muted); }
.site-footer__brand { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer__links a:hover { color: var(--color-accent); }
.site-footer__copyright { margin-inline-start: auto; }

/* ---------- Responsive — 768 / 414 / 375 / 320 ---------- */
@media (max-width: 900px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.searchpill__text, .searchpill__kbd { display: none; }
	.searchpill { padding-inline: 0.6rem; }
	.nav__toggle { display: flex; }
	.nav__links, .nav__cta-desktop { display: none; }

	.bento, .bento--detail { grid-template-columns: minmax(0, 1fr); }
	.span-2x2, .span-2x1, .span-1x2, .span-1x1 { grid-column: span 1; grid-row: span 1; }
	.band__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
	.cta__inner { flex-direction: column; align-items: flex-start; }
	.site-footer__copyright { margin-inline-start: 0; }
}
@media (max-width: 480px) {
	.nav__inner { padding-inline: var(--space-sm); gap: var(--space-sm); }
	.hero { padding: var(--space-2xl) var(--space-sm) var(--space-xl); }
	.bento, .bento--detail { padding: var(--space-xl) var(--space-sm) var(--space-2xl); }
	.cta, .band, .site-footer { padding-inline: var(--space-sm); }
}