/* ===================================================================
ACT In Systems — "Engineering Blueprint"
Single hand-authored stylesheet. No build step.
Cascade layers keep specificity predictable.
=================================================================== */
@layer reset, tokens, base, layout, components, utilities, responsive, motion;
/* ===================================================================
FONTS
-------------------------------------------------------------------
The "Engineering Blueprint" type identity (Space Grotesk display,
IBM Plex Sans body, IBM Plex Mono technical) is loaded via a
Google Fonts in with display=swap, so the brand
typography is ALWAYS present in production rather than depending on
self-hosted /fonts/*.woff2 that may not exist. The font-family
stacks below name both the loose Google family names ("IBM Plex …",
"Space Grotesk") and a tuned system fallback for zero blank text.
To migrate to self-hosting later: add @font-face rules here whose
src begins with a real url(/fonts/…woff2) — no other change needed.
=================================================================== */
/* ===================================================================
TOKENS
=================================================================== */
@layer tokens {
:root {
/* ACTION / BRAND SIGNAL — #0050ED is ACTION ONLY */
--color-action: #0050ED;
--color-action-hover: #0044C9;
--color-action-active: #0038A6;
--color-action-tint-50: #F2F6FE;
--color-action-tint-100: #E1ECFD;
--on-dark-blue: #99B9F8;
/* WARM ACCENT — ink-text-only, <=10% of any screen */
--color-accent: #FFA63D;
--color-accent-vivid: #F97316;
/* SURFACES (light) */
--surface-canvas: #F7F6F3;
--surface-card: #FFFFFF;
--surface-tint: #F2F6FE;
/* TEXT (on light) */
--text-strong: #0F172A;
--text-body: #1E293B;
--text-secondary: #475569;
/* darkened from #64748B → #5B6776 to clear WCAG 1.4.3 (4.5:1) on both
the canvas (#F7F6F3) and tint (#F2F6FE) surfaces for mono eyebrows. */
--text-muted: #5B6776;
/* HAIRLINES */
--hairline: #E2E8F0;
--hairline-strong: #CBD5E1;
/* BLUEPRINT GRID */
--grid-line-light: rgba(15,23,42,0.05);
--grid-dot-light: rgba(15,23,42,0.06);
/* DARK / AUTHORITY */
--dark-bg: #0B1F3A;
--dark-bg-2: #0F172A;
--dark-bg-3: #08142B;
--on-dark: #F8FAFC;
--on-dark-secondary: #CBD5E1;
--grid-line-dark: rgba(153,185,248,0.10);
--grain-opacity: 0.04;
/* STATUS */
--status-success: #15803D;
--status-error: #B91C1C;
--status-warn: #B45309;
/* FOCUS */
--focus-ring: #0050ED;
/* RADIUS — sharp/technical */
--radius-sm: 2px;
--radius-md: 2px;
--radius-pill: 999px;
/* SPACING (8px base) */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
--sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
/* LAYOUT */
--container: 1200px;
--header-h: 64px;
/* TYPE */
--font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
/* MOTION */
--t-fast: 150ms;
--t-base: 240ms;
--t-slow: 600ms;
--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
--ease-micro: ease;
--ease-move: ease-in-out;
/* tinted elevation shadow stack (applied via pseudo opacity) */
--shadow-card:
0 1px 1px rgba(11,31,58,0.04),
0 2px 4px rgba(11,31,58,0.05),
0 8px 16px rgba(11,31,58,0.06),
0 16px 32px rgba(11,31,58,0.06);
}
}
/* ===================================================================
RESET
=================================================================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* the hidden attribute must win over any later display rule */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
/* Guard against horizontal overflow / rubber-band scroll from the
off-canvas mobile nav drawer (translateX(100%) parks it past the
right edge). clip is preferred; hidden is the broad fallback. */
html, body { overflow-x: hidden; overflow-x: clip; }
body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, picture { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 1px; }
/* on the navy authority bands the #0050ED ring is too low-contrast;
use a light ring so keyboard focus stays visible (WCAG 2.4.7). */
.section--dark :focus-visible, .title-block :focus-visible { outline-color: var(--on-dark-blue); }
::selection { background: var(--color-action); color: #fff; }
}
/* ===================================================================
BASE
=================================================================== */
@layer base {
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
color: var(--text-body);
background-color: var(--surface-canvas);
/* Barely-there blueprint grid — 24px lines, radial edge-fade mask. */
background-image:
linear-gradient(var(--grid-line-light) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: none;
font-synthesis: none;
}
/* background-attachment:fixed is janky/ignored on mobile and forces a
full-viewport repaint every scroll frame. Limit it to fine-pointer
devices; touch devices scroll the grid with content (visually identical). */
@media (hover: hover) and (pointer: fine) {
body { background-attachment: fixed; }
}
/* fade the global grid toward the edges so the center reads clean */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: var(--surface-canvas);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 30%, #000 85%);
mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 30%, #000 85%);
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.1rem); letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
h4 { font-size: 1.125rem; line-height: 1.4; font-family: var(--font-body); font-weight: 600; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--text-strong); }
address { font-style: normal; }
a:not([class]) {
color: var(--color-action);
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
transition: color var(--t-fast) var(--ease-micro);
}
a:not([class]):hover { color: var(--color-action-hover); }
}
/* ===================================================================
LAYOUT
=================================================================== */
@layer layout {
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(16px, 5vw, 40px);
}
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tint { background: var(--surface-tint); border-block: 1px solid var(--hairline); }
/* Dark authority bands */
.section--dark {
background-color: var(--dark-bg);
color: var(--on-dark);
position: relative;
overflow: clip;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark .section__lead { color: var(--on-dark-secondary); }
/* faint blueprint grid + grain on dark bands */
.section--dark::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 20%, transparent 78%);
mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 20%, transparent 78%);
}
/* grain (feTurbulence data-URI) over dark bands to kill banding.
Live SVG-filter noise is CPU-rasterized and costly on mobile, so it is
only painted on fine-pointer (desktop) devices for its 4%-opacity payoff. */
@media (hover: hover) and (pointer: fine) {
.section--dark::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
}
.section--dark > .container { position: relative; z-index: 1; }
.section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-top: var(--sp-3); }
.section__lead {
margin-top: var(--sp-4);
font-size: 1.15rem; line-height: 1.55;
color: var(--text-secondary);
max-width: 62ch;
}
.section__head--center .section__lead { margin-inline: auto; }
/* shared auto-fit card grid */
.grid-cards {
display: grid;
gap: var(--sp-5);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* ===================================================================
UTILITIES
=================================================================== */
@layer utilities {
.u-visually-hidden {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.u-skip {
position: fixed; top: 8px; left: 8px; z-index: 200;
transform: translateY(-150%);
background: var(--color-action); color: #fff;
padding: 10px 18px; border-radius: var(--radius-md);
font-weight: 600; box-shadow: var(--shadow-card);
transition: transform var(--t-base) var(--ease-entrance);
}
.u-skip:focus-visible { transform: translateY(0); outline-offset: 3px; }
.u-no-wrap { white-space: nowrap; }
.u-tabular { font-variant-numeric: tabular-nums; }
/* mono chip */
.chip {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-secondary);
background: var(--surface-card);
border: 1px solid var(--hairline);
padding: 5px 11px; border-radius: var(--radius-pill);
white-space: nowrap;
}
/* signature mono eyebrow */
.eyebrow {
font-family: var(--font-mono); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted);
text-wrap: balance;
}
.section--dark .eyebrow { color: var(--on-dark-blue); }
/* the hero pillar kicker wraps as a balanced block on narrow viewports
with tighter tracking, so the dot-separated pillars don't break raggedly. */
@media (max-width: 560px) {
.eyebrow--pillars { letter-spacing: 0.04em; }
}
}
/* ===================================================================
COMPONENTS
=================================================================== */
@layer components {
/* ---- Icons -------------------------------------------------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2; }
.icon--accent { color: var(--color-action); }
/* the single orange accent stroke per icon draws in once on reveal */
/* ---- Buttons ------------------------------------------------ */
.btn {
--btn-bg: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
line-height: 1; text-align: center;
padding: 13px 22px; min-height: 44px;
border: 1px solid transparent; border-radius: var(--radius-md);
cursor: pointer; white-space: nowrap;
transition: background var(--t-fast) var(--ease-micro),
color var(--t-fast) var(--ease-micro),
border-color var(--t-fast) var(--ease-micro),
transform var(--t-fast) var(--ease-micro);
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--color-action); color: #fff; }
.btn--primary:hover { background: var(--color-action-hover); }
.btn--primary:active { background: var(--color-action-active); transform: translateY(1px); }
.btn--secondary {
background: transparent; color: var(--text-strong);
border-color: var(--color-accent);
}
.btn--secondary:hover { background: #FFF6EC; border-color: var(--color-accent-vivid); }
.btn--secondary:active { transform: translateY(1px); }
.btn--ghost {
background: transparent; color: var(--color-action);
border-color: var(--hairline-strong);
}
.btn--ghost:hover { border-color: var(--color-action); background: var(--color-action-tint-50); }
.btn--ghost:active { transform: translateY(1px); }
.btn--on-dark { background: var(--color-action); color: #fff; }
.btn--on-dark:hover { background: var(--color-action-hover); }
.btn--ghost-dark { color: var(--on-dark); border-color: rgba(153,185,248,0.4); }
.btn--ghost-dark:hover { color: var(--on-dark-blue); border-color: var(--on-dark-blue); background: rgba(153,185,248,0.08); }
/* ---- Header / Nav ------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(247,246,243,0.85);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--hairline);
transition: border-color var(--t-base) var(--ease-micro), background var(--t-base);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline-strong); background: rgba(247,246,243,0.94); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-action); }
.brand__logo { display: inline-flex; }
.brand__logo svg { height: 24px; width: auto; color: var(--color-action); }
/* tuned to sit as one logotype with the SVG mark's cap-height */
.brand__text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-strong); letter-spacing: -0.02em; }
.primary-nav { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.primary-nav__list a {
position: relative;
font-weight: 500; font-size: 0.94rem; color: var(--text-secondary);
padding: 6px 0;
transition: color var(--t-fast) var(--ease-micro);
}
.primary-nav__list a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--color-action); transform: scaleX(0); transform-origin: left;
transition: transform var(--t-fast) var(--ease-entrance);
}
.primary-nav__list a:hover { color: var(--text-strong); }
.primary-nav__list a:hover::after,
.primary-nav__list a:focus-visible::after { transform: scaleX(1); }
.primary-nav__list a.is-current { color: var(--color-action); }
.primary-nav__list a.is-current::after { transform: scaleX(1); }
.primary-nav__list a.is-current::before {
content: attr(data-num); position: absolute; left: 50%; top: -15px; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--color-action); letter-spacing: 0.04em;
}
.primary-nav__cta { display: flex; align-items: center; gap: var(--sp-4); }
.nav-call {
display: inline-flex; align-items: center; gap: 7px;
font-weight: 500; font-size: 0.9rem; color: var(--text-secondary);
padding: 10px 4px; /* >=40px hit area for hybrid touch laptops */
transition: color var(--t-fast);
}
.nav-call .icon { color: var(--color-action); }
.nav-call:hover { color: var(--text-strong); }
/* hamburger */
.nav-toggle {
display: none; width: 44px; height: 44px; margin-left: auto;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar { width: 24px; height: 1.5px; background: var(--text-strong);
transition: transform var(--t-base) var(--ease-entrance), opacity var(--t-base); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-scrim {
position: fixed; inset: 0; z-index: 90;
background: rgba(8,20,43,0.45);
opacity: 0; transition: opacity var(--t-base) var(--ease-micro);
}
.nav-scrim.is-open { opacity: 1; }
/* scroll-progress dimension line (CSS scroll-timeline) */
.scroll-progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--hairline); overflow: hidden;
}
.scroll-progress__bar {
display: block; height: 100%; width: 100%;
transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, var(--color-action) 0 92%, var(--color-accent) 100%);
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.scroll-progress__bar {
animation: progress-grow linear both;
animation-timeline: scroll(root block);
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
}
/* ---- Hero --------------------------------------------------- */
.hero { padding-block: clamp(48px, 8vw, 104px); position: relative; overflow: clip; }
.hero__inner {
display: grid; gap: clamp(32px, 5vw, 64px); align-items: center;
grid-template-columns: 1fr;
}
.hero__copy { max-width: 880px; }
.hero__title { margin-block: var(--sp-4) var(--sp-5); }
.hero__title-accent { color: var(--color-action); }
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--text-secondary); max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero__meta {
display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6);
padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted);
}
.hero__meta li { display: inline-flex; align-items: baseline; gap: 6px; }
.hero__meta strong { color: var(--text-strong); font-weight: 600; }
/* hero drawing-callout visual (first-party, zero request, LCP-safe) */
.hero__visual { margin: 0; }
.callout {
position: relative; aspect-ratio: 7 / 6;
background:
radial-gradient(circle at 1px 1px, var(--grid-dot-light) 1px, transparent 0) 0 0 / 16px 16px,
var(--surface-card);
border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.callout__art { width: 100%; height: 100%; color: var(--text-secondary); padding: 4%; }
.callout__dim { color: var(--text-muted); }
.callout__leader { color: var(--color-accent); stroke: var(--color-accent); }
.callout__art-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); }
/* darker accent for TEXT/labels on light surfaces (WCAG 1.4.3).
#F97316/#FFA63D are reserved for non-text strokes (dimension/leader). */
.callout__art-label--lead { fill: var(--status-warn); }
/* corner crop-marks */
.callout__crop { position: absolute; width: 16px; height: 16px; border: 1px solid var(--text-secondary); z-index: 2; }
.callout__crop--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.callout__crop--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.callout__crop--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.callout__crop--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.callout__dim-label {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
color: var(--color-action); background: var(--surface-card);
padding: 2px 8px; border: 1px solid var(--color-action-tint-100); z-index: 3;
}
.callout__cap {
margin-top: var(--sp-3);
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
color: var(--text-muted);
}
/* ---- Trust strip -------------------------------------------- */
.trust-strip { background: var(--surface-tint); border-block: 1px solid var(--hairline); }
.trust-strip__inner {
display: grid; gap: var(--sp-5) var(--sp-7); align-items: center;
grid-template-columns: auto auto 1fr;
padding-block: var(--sp-6);
}
.trust-strip__badge { display: inline-flex; align-items: center; gap: var(--sp-3); }
.trust-strip__badge .icon { color: var(--color-action); width: 2rem; height: 2rem; }
.trust-strip__badge-k { display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-strong); letter-spacing: 0.02em; }
.trust-strip__badge-v { display: block; font-size: 0.86rem; color: var(--text-secondary); }
.trust-strip__metric { display: flex; align-items: baseline; gap: var(--sp-3); padding-inline: var(--sp-6); border-inline: 1px solid var(--hairline); }
.trust-strip__metric-num { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--color-action); letter-spacing: -0.02em; }
.trust-strip__metric-label { font-size: 0.86rem; color: var(--text-secondary); max-width: 16ch; }
.trust-strip__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
/* ---- Service cards ------------------------------------------ */
.svc-card {
position: relative;
background: var(--surface-card);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
padding: var(--sp-5);
transition: transform var(--t-base) var(--ease-move), border-color var(--t-base);
}
/* elevation = opacity of tinted-shadow pseudo (never animate box-shadow) */
.svc-card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
box-shadow: var(--shadow-card); opacity: 0;
transition: opacity var(--t-base) var(--ease-micro);
}
.svc-card:hover, .svc-card:focus-within { transform: translateY(-4px); border-color: var(--hairline-strong); }
.svc-card:hover::after, .svc-card:focus-within::after { opacity: 1; }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.svc-card__index { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); transition: color var(--t-base); }
.svc-card:hover .svc-card__index, .svc-card:focus-within .svc-card__index { color: var(--color-action); }
.svc-card__icon { display: inline-flex; }
.svc-card__icon .icon { width: 1.75rem; height: 1.75rem; color: var(--color-action); }
.svc-card__title { margin-bottom: var(--sp-2); }
.svc-card__spec { font-weight: 600; color: var(--text-strong); font-size: 0.95rem; margin-bottom: var(--sp-3); }
.svc-card__body { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }
/* ---- Service On Focus feature card -------------------------- */
.focus-card {
margin-top: var(--sp-6);
background: var(--surface-card);
border: 1px solid var(--hairline); border-left: 3px solid var(--color-action);
border-radius: var(--radius-md);
padding: clamp(24px, 4vw, 40px);
}
.focus-card__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.focus-card__icon .icon { width: 1.9rem; height: 1.9rem; color: var(--color-action); }
.focus-card__title { margin-top: 4px; }
.focus-card__lead { max-width: 75ch; color: var(--text-secondary); margin-bottom: var(--sp-5); }
.focus-card__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--sp-3) var(--sp-5); }
.focus-card__list li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; color: var(--text-body); }
.focus-card__list .icon { color: var(--status-success); flex: none; }
.focus-card__note { margin-top: var(--sp-5); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); }
/* ---- Sectors ------------------------------------------------ */
.sector {
background: var(--surface-card);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
padding: var(--sp-5);
transition: border-color var(--t-base), transform var(--t-base) var(--ease-move);
}
.sector:hover, .sector:focus-within { border-color: var(--color-action-tint-100); transform: translateY(-3px); }
.sector__icon { display: inline-flex; margin-bottom: var(--sp-3); }
.sector__icon .icon { width: 1.6rem; height: 1.6rem; color: var(--color-action); }
.sector__title { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.sector__body { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
.sectors__note { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
/* ---- Process / schematic ------------------------------------ */
.schematic { margin-top: var(--sp-6); }
.schematic__sticky {
position: sticky; top: calc(var(--header-h) + 8px); z-index: 1;
padding-block: var(--sp-5);
}
.schematic__svg { width: 100%; height: auto; }
.schematic__box { fill: var(--surface-card); stroke: var(--hairline-strong); stroke-width: 1.5; transition: stroke var(--t-base); }
.schematic__idx { font-family: var(--font-mono); font-size: 12px; font-weight: 600; fill: var(--text-muted); }
.schematic__name { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--text-secondary); letter-spacing: 0.02em; }
.schematic__tick { font-family: var(--font-mono); font-size: 12px; fill: var(--hairline-strong); }
.schematic__node.is-active .schematic__box { stroke: var(--color-action); }
.schematic__node.is-active .schematic__idx,
.schematic__node.is-active .schematic__name { fill: var(--color-action); }
.schematic__node.is-active .schematic__tick { fill: var(--color-accent); }
.schematic__dim { opacity: 0.85; }
.schematic__steps { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); margin-top: var(--sp-6); }
.schematic__step {
border-top: 2px solid var(--hairline); padding-top: var(--sp-4);
transition: border-color var(--t-base);
}
.schematic__step.is-active { border-color: var(--color-action); }
.schematic__step-idx { display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-action); margin-bottom: var(--sp-2); }
.schematic__step p { font-size: 0.92rem; color: var(--text-secondary); margin: 0; }
/* ---- Why ACT bento ------------------------------------------ */
.why__bento { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }
.why__cell {
position: relative; background: var(--surface-card);
border: 1px solid var(--hairline); border-radius: var(--radius-md);
padding: clamp(20px, 3vw, 32px);
transition: border-color var(--t-base), transform var(--t-base) var(--ease-move);
}
.why__cell:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.why__cell--wide { grid-column: span 2; }
.why__cell--accent { border-left: 3px solid var(--color-accent); }
.why__tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.why__cell--accent .why__tag { color: var(--status-warn); }
.why__title { font-size: 1.2rem; margin-bottom: var(--sp-3); }
.why__cell p { font-size: 0.94rem; color: var(--text-secondary); margin: 0; }
/* ---- AMC table (native , CSS-grid rows) -------------- */
.amc-table {
width: 100%; border-collapse: collapse;
border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
overflow: hidden; background: var(--surface-card);
}
.amc-table thead, .amc-table tbody { display: block; }
.amc-table__head, .amc-table__row {
display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr; align-items: stretch;
}
.amc-table__head { background: var(--surface-tint); border-bottom: 1px solid var(--hairline-strong); }
.amc-table__head .amc-table__rowhead,
.amc-table__head .amc-table__col {
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
padding: var(--sp-4) var(--sp-4);
}
.amc-table__head .amc-table__col em { font-style: normal; color: var(--color-action); font-weight: 600; }
.amc-table__row { position: relative; border-bottom: 1px solid var(--hairline); transition: background var(--t-fast); }
.amc-table__row:last-child { border-bottom: 0; }
.amc-table__row::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--color-action); transform: scaleY(0); transform-origin: top;
transition: transform var(--t-fast) var(--ease-entrance);
}
.amc-table__row:hover, .amc-table__row:focus-within { background: var(--surface-tint); }
.amc-table__row:hover::before, .amc-table__row:focus-within::before { transform: scaleY(1); }
.amc-table__rowhead {
font-weight: 600; color: var(--text-strong); font-size: 0.9rem;
text-align: left;
padding: var(--sp-4); display: flex; align-items: center;
background: linear-gradient(90deg, var(--surface-tint), transparent);
min-width: 0; overflow-wrap: anywhere;
}
.amc-table__col {
font-family: var(--font-mono); font-size: 0.86rem; color: var(--text-body);
text-align: left;
padding: var(--sp-4); display: flex; align-items: center;
border-left: 1px solid var(--hairline);
min-width: 0; overflow-wrap: anywhere;
}
.amc-table__col--featured { background: var(--color-action-tint-50); box-shadow: inset 0 0 0 1px var(--color-action); position: relative; z-index: 1; }
.amc-table__col--span { grid-column: 2 / -1; font-family: var(--font-body); }
.amc-table__row--foot { background: #fff; }
.amc__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
/* ---- Stats band --------------------------------------------- */
.stats__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: var(--sp-4); border: 1px solid var(--grid-line-dark); border-radius: var(--radius-md); }
.stat__num {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -0.02em;
color: var(--on-dark);
}
.stat__tick { display: inline-block; width: 4px; height: 1.6rem; background: var(--color-accent); transform: scaleX(0); transform-origin: center; }
.stat.is-counted .stat__tick { transform: scaleX(1); transition: transform 120ms var(--ease-entrance) 120ms; }
.stat__label { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--on-dark-secondary); }
.stats__foot { text-align: center; margin-top: var(--sp-7); color: var(--on-dark-secondary); font-size: 0.95rem; }
/* ---- Founder ------------------------------------------------ */
.founder__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.founder__media { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.founder__photo {
position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md);
display: grid; place-items: center;
background:
radial-gradient(circle at 1px 1px, rgba(153,185,248,0.12) 1px, transparent 0) 0 0 / 18px 18px,
linear-gradient(160deg, var(--dark-bg-2), var(--dark-bg-3));
border: 1px solid var(--grid-line-dark);
overflow: hidden;
}
.founder__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.founder__mono { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 7rem); color: var(--on-dark-blue); letter-spacing: -0.02em; }
.founder__photo-tag { position: absolute; z-index: 1; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--on-dark-secondary); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.founder__tag { margin-top: var(--sp-4); font-size: 1.1rem; color: var(--on-dark-secondary); }
.founder__tag em { color: var(--on-dark-blue); font-style: italic; }
.founder__lead { margin-top: var(--sp-4); color: var(--on-dark-secondary); max-width: 60ch; }
.founder__points { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.founder__points li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--on-dark-secondary); font-size: 0.95rem; }
.founder__points .icon { color: var(--on-dark-blue); flex: none; margin-top: 3px; }
.founder__certs { margin-top: var(--sp-6); }
.founder__certs-head { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--on-dark-blue); margin-bottom: var(--sp-3); }
.founder__certs ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.founder__certs .chip { background: rgba(153,185,248,0.08); border-color: var(--grid-line-dark); color: var(--on-dark-secondary); }
.founder__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* ---- Timeline ----------------------------------------------- */
.timeline { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.timeline__list { position: relative; margin-left: 8px; padding-left: clamp(24px, 4vw, 40px); border-left: 1px solid var(--hairline-strong); }
.timeline__item { position: relative; padding-bottom: var(--sp-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
position: absolute; left: calc(-1 * clamp(24px, 4vw, 40px) - 5px); top: 6px;
width: 9px; height: 9px; background: var(--surface-canvas);
border: 2px solid var(--color-action); border-radius: 50%;
}
.timeline__co { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-action); }
.timeline__co span { color: var(--text-muted); font-weight: 400; }
.timeline__role { font-size: 1.15rem; margin: 2px 0 var(--sp-2); }
.timeline__desc { font-size: 0.94rem; color: var(--text-secondary); margin: 0; max-width: 72ch; }
/* ---- FAQ ---------------------------------------------------- */
.faq__list { max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--hairline-strong); }
.faq__item summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
list-style: none; cursor: pointer;
padding: var(--sp-5) var(--sp-2);
font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--text-strong);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { color: var(--color-action); flex: none; transition: transform var(--t-fast) var(--ease-micro); }
.faq__item[open] .faq__chev { transform: rotate(90deg); }
.faq__answer { padding: 0 var(--sp-2) var(--sp-5); }
.faq__answer p { color: var(--text-secondary); max-width: 75ch; margin: 0; }
/* ---- Contact ------------------------------------------------ */
.contact__grid { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.contact__paths { display: grid; gap: var(--sp-4); }
.contact-card {
position: relative; display: flex; flex-direction: column; gap: 3px;
background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-md);
padding: var(--sp-5);
transition: border-color var(--t-base), transform var(--t-base) var(--ease-move);
}
a.contact-card:hover, a.contact-card:focus-visible { border-color: var(--color-action); transform: translateY(-3px); }
.contact-card--wa:hover, .contact-card--wa:focus-visible { border-color: var(--color-accent); }
.contact-card__icon { display: inline-flex; margin-bottom: var(--sp-2); }
.contact-card__icon .icon { width: 1.5rem; height: 1.5rem; color: var(--color-action); }
.contact-card__k { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.contact-card__v { font-weight: 600; color: var(--text-strong); }
.contact__paths { grid-template-columns: 1fr 1fr; }
.contact-office, .contact__promise { grid-column: 1 / -1; }
.contact-office { display: flex; gap: var(--sp-4); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--sp-5); }
.contact-office .icon { width: 1.5rem; height: 1.5rem; color: var(--color-action); }
.contact-office__addr { margin: 4px 0 6px; color: var(--text-body); line-height: 1.5; }
.contact-office__site { color: var(--color-action); font-size: 0.9rem; }
.contact__promise { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.92rem; color: var(--text-secondary); }
.contact__promise .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); flex: none; }
/* form */
.contact__form-wrap { position: relative; }
.contact-form {
background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
padding: clamp(24px, 4vw, 36px);
}
.contact-form__title { font-size: 1.3rem; margin-bottom: var(--sp-5); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-strong); }
.field .req { color: var(--status-error); }
.field__opt { font-weight: 400; color: var(--text-muted); font-size: 0.82rem; }
.field input, .field textarea {
width: 100%; padding: 12px 14px;
background: var(--surface-canvas); border: 1px solid var(--hairline);
border-radius: var(--radius-md); font-size: 0.96rem; color: var(--text-body);
transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:hover, .field textarea:hover { border-color: var(--hairline-strong); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--color-action); background: #fff; outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--status-error); }
.field__hint { margin-top: 5px; font-size: 0.8rem; color: var(--text-muted); }
.field__err { margin-top: 5px; font-size: 0.82rem; font-weight: 500; color: var(--status-error); display: flex; align-items: center; gap: 5px; }
/* the [hidden] attribute must always defeat the display:flex above */
.field__err[hidden] { display: none; }
.field__err::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--status-error); color: #fff; font-size: 0.7rem; font-weight: 700; }
.contact-form__submit { width: 100%; margin-top: var(--sp-2); }
.contact-form__fallback { margin-top: var(--sp-4); font-size: 0.85rem; color: var(--text-secondary); }
.contact-form__status { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; }
/* keep the live region in the DOM/tree even when empty (do not display:none)
so injected status text is reliably announced by assistive tech. */
.contact-form__status:empty { margin-top: 0; min-height: 0; }
.contact-form.is-sending .contact-form__submit { opacity: 0.7; pointer-events: none; }
.contact-form.has-error .contact-form__status { color: var(--status-error); }
.contact-thanks {
background: var(--color-action-tint-50); border: 1px solid var(--color-action-tint-100);
border-radius: var(--radius-md); padding: clamp(28px, 4vw, 44px); text-align: center;
}
.contact-thanks__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--status-success); color: #fff; margin-bottom: var(--sp-4); }
.contact-thanks__icon .icon { width: 1.8rem; height: 1.8rem; }
.contact-thanks__title { font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--status-success); margin-bottom: var(--sp-3); }
.contact-thanks p { color: var(--text-body); max-width: 46ch; margin-inline: auto; }
/* ---- Footer / title block ----------------------------------- */
.title-block { background: var(--dark-bg-3); color: var(--on-dark-secondary); padding-block: clamp(48px, 7vw, 80px) var(--sp-7); }
.title-block__grid {
display: grid; gap: 0;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
border: 1px solid var(--grid-line-dark);
}
.title-block__cell { padding: var(--sp-5); border-right: 1px solid var(--grid-line-dark); }
.title-block__cell:last-child { border-right: 0; }
.title-block__logo svg { height: 30px; width: auto; color: var(--on-dark); margin-bottom: var(--sp-3); }
.title-block__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--on-dark); }
.title-block__motto { font-style: italic; color: var(--on-dark-blue); font-size: 0.92rem; margin-top: 4px; }
.title-block__blurb { font-size: 0.86rem; margin-top: var(--sp-3); max-width: 34ch; }
.title-block__k { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: var(--on-dark-blue); margin-bottom: var(--sp-3); }
.title-block__v { font-size: 0.88rem; line-height: 1.7; }
.title-block__v a { color: var(--on-dark-secondary); transition: color var(--t-fast); }
.title-block__v a:hover { color: var(--on-dark); }
.title-block__v strong { color: var(--on-dark); }
.title-block__links { display: grid; gap: var(--sp-2); }
/* touch-sized hit area (WCAG 2.5.5 / HIG ~44px) for footer nav + contact links */
.title-block__links a, .title-block__v a {
display: inline-block; padding-block: 8px; min-height: 44px; line-height: 1.6;
color: var(--on-dark-secondary); font-size: 0.88rem; transition: color var(--t-fast);
}
.title-block__links a { font-size: 0.88rem; }
.title-block__links a:hover { color: var(--on-dark-blue); }
.title-block__rule {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
margin-top: var(--sp-5); padding-top: var(--sp-5);
border-top: 1px solid var(--grid-line-dark);
}
.title-block__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--on-dark-secondary); }
.title-block__copy { margin-left: auto; font-size: 0.82rem; color: var(--on-dark-secondary); }
/* ---- Mobile bottom bar -------------------------------------- */
.mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
display: none; grid-template-columns: repeat(3, 1fr);
background: var(--surface-card); border-top: 1px solid var(--hairline-strong);
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(110%); transition: transform var(--t-base) var(--ease-entrance);
box-shadow: 0 -4px 20px rgba(11,31,58,0.08);
}
.mobile-bar.is-visible { transform: translateY(0); }
/* hide the bottom bar while the nav drawer is open so it can't cover
the drawer's lowest CTAs (both sit at z-index:95). */
body.nav-open .mobile-bar { transform: translateY(110%); pointer-events: none; }
.mobile-bar__btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 64px; padding: 8px;
font-size: 0.74rem; font-weight: 600; color: var(--text-strong);
border-right: 1px solid var(--hairline);
}
.mobile-bar__btn:last-child { border-right: 0; }
.mobile-bar__btn .icon { width: 1.4rem; height: 1.4rem; color: var(--color-action); }
.mobile-bar__btn--quote { background: var(--color-action); color: #fff; }
.mobile-bar__btn--quote .icon { color: #fff; }
.mobile-bar__btn:active { transform: translateY(1px); }
.mobile-bar__btn:active .icon { color: var(--color-accent-vivid); }
.mobile-bar__btn--quote:active .icon { color: #fff; }
}
/* ===================================================================
RESPONSIVE — placed in its own layer AFTER `components` so media-query
overrides reliably win over base component rules (layer order beats
media-query specificity, so these must not live in `layout`).
=================================================================== */
@layer responsive {
/* < 1180: collapse nav to hamburger. Raised from 1023px so the single
64px header row (brand + 7 links + Call + CTA button) never wraps in
the tight 1024-1180px band, especially before web fonts settle. */
@media (max-width: 1179px) {
.nav-toggle { display: flex; }
/* NOTE: .site-header uses backdrop-filter, which makes it the containing
block for this fixed drawer. So top/bottom resolve against the 64px
header, not the viewport — we set an explicit height to fill the screen
instead of relying on bottom:0 (which would collapse to 64px). */
.primary-nav {
position: fixed; top: 0; right: 0; z-index: 95;
width: min(340px, 86vw);
height: 100vh; height: 100dvh;
flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
margin: 0; padding: calc(var(--header-h) + 24px) var(--sp-5) var(--sp-6);
background: var(--surface-card); border-left: 1px solid var(--hairline-strong);
box-shadow: -12px 0 40px rgba(11,31,58,0.12);
transform: translateX(100%); transition: transform var(--t-base) var(--ease-entrance);
overflow-y: auto; overscroll-behavior: contain;
}
.primary-nav.is-open { transform: translateX(0); }
.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.primary-nav__list li { border-bottom: 1px solid var(--hairline); }
.primary-nav__list a { display: block; padding: var(--sp-4) 0; font-size: 1rem; }
.primary-nav__list a::after { display: none; }
.primary-nav__list a.is-current::before { display: none; }
.primary-nav__cta { flex-direction: column; align-items: stretch; gap: var(--sp-3); margin-top: var(--sp-5); }
.primary-nav__cta .btn, .nav-call { width: 100%; justify-content: center; }
.nav-call { padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
}
@media (min-width: 1180px) {
.nav-scrim { display: none !important; }
}
/* short landscape phones: tighten the drawer so the top link clears the
header and the whole list fits / scrolls without the first item hiding. */
@media (max-width: 1179px) and (max-height: 480px) {
.primary-nav { padding-top: calc(var(--header-h) + 8px); max-height: 100dvh; }
.primary-nav__list a { padding-block: var(--sp-3); }
}
/* unstick the process schematic on short / touch screens — the static
SVG is already the documented no-JS end state, so this has no cost. */
@media (max-height: 600px), (hover: none) {
.schematic__sticky { position: static; }
}
/* allow long mono chips (e.g. founder cert labels) to wrap on the
narrowest phones so they never exceed the viewport width. */
@media (max-width: 400px) {
.chip { white-space: normal; }
}
/* hero stacks */
@media (max-width: 900px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__visual { order: 2; max-width: 480px; }
}
/* trust strip stacks */
@media (max-width: 860px) {
.trust-strip__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
.trust-strip__metric { border-inline: 0; padding-inline: 0; border-block: 1px solid var(--hairline); padding-block: var(--sp-4); }
.trust-strip__chips { justify-content: flex-start; }
}
/* why bento -> simpler */
@media (max-width: 900px) {
.why__bento { grid-template-columns: repeat(2, 1fr); }
.why__cell--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
.why__bento { grid-template-columns: 1fr; }
.why__cell--wide { grid-column: auto; }
}
/* stats */
@media (max-width: 760px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
/* founder */
@media (max-width: 900px) {
.founder__grid { grid-template-columns: 1fr; }
.founder__media { position: static; max-width: 320px; }
}
/* contact */
@media (max-width: 900px) {
.contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.contact__paths { grid-template-columns: 1fr; }
}
/* AMC table -> stacked, labelled cards under 900px (matches the rest of
the page, which stacks most grids at 900px). The data-label is shown
as visible text per cell; the native | headers also
remain in the a11y tree, so screen-reader column context is preserved. */
@media (max-width: 900px) {
.amc-table { border: 0; background: transparent; display: grid; gap: var(--sp-4); }
.amc-table thead, .amc-table tbody { display: contents; }
.amc-table__head { display: none; }
.amc-table__row {
grid-template-columns: 1fr; gap: 0;
border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
background: var(--surface-card); overflow: hidden;
}
.amc-table__row::before { display: none; }
.amc-table__rowhead { background: var(--surface-tint); border-bottom: 1px solid var(--hairline); }
.amc-table__col { border-left: 0; border-bottom: 1px solid var(--hairline); justify-content: space-between; }
.amc-table__col:last-child { border-bottom: 0; }
.amc-table__col::before { content: attr(data-label); font-family: var(--font-body); font-weight: 600; color: var(--text-secondary); margin-right: var(--sp-4); }
.amc-table__col--featured { box-shadow: none; border-left: 3px solid var(--color-action); }
.amc-table__col--span { grid-column: auto; }
.amc-table__col--span::before { display: none; }
}
/* title block: intermediate 3-col on small laptops before the 2-col rule,
so address/contact/registration cells aren't cramped at 981-1100px. */
@media (max-width: 1100px) {
.title-block__grid { grid-template-columns: 1.4fr 1fr 1fr; }
.title-block__cell:nth-child(3n) { border-right: 0; }
}
/* title block stacks */
@media (max-width: 980px) {
.title-block__grid { grid-template-columns: 1fr 1fr; }
.title-block__cell { border-right: 0; border-bottom: 1px solid var(--grid-line-dark); }
.title-block__cell:nth-child(3n) { border-right: 0; }
.title-block__cell--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.title-block__grid { grid-template-columns: 1fr; }
.title-block__copy { margin-left: 0; }
}
/* mobile bottom bar shows under md, with breathing room above footer */
@media (max-width: 767px) {
.mobile-bar { display: grid; }
body { padding-bottom: 64px; }
}
}
/* ===================================================================
MOTION — progressive enhancement ONLY (no-preference).
Reveal/no-JS state ships visible; opacity:0 lives here only.
=================================================================== */
@layer motion {
@media (prefers-reduced-motion: no-preference) {
/* opacity:0 only when JS is present (html.js) so a JS failure never
leaves the page blank — see the inline script setting .js. */
.js .js-reveal {
opacity: 0; transform: translateY(20px);
transition: opacity var(--t-slow) var(--ease-entrance),
transform var(--t-slow) var(--ease-entrance);
transition-delay: calc(var(--i, 0) * 80ms);
/* will-change intentionally NOT set here — promoting 60+ elements at
once exhausts the layer budget. JS toggles it per-element on reveal. */
}
.js .js-reveal.is-visible { opacity: 1; transform: none; }
/* LCP fix: the hero eyebrow/H1/sub are the largest contentful paint.
They must NOT be gated by the JS IntersectionObserver reveal, nor
carry the expensive blur() filter, or LCP is delayed by the 600ms
entrance + script.js parse. Paint them immediately with a short,
cheap fade only. Scroll-reveal is reserved for below-the-fold. */
.js .hero__copy .js-reveal,
.js .hero__visual.js-reveal {
opacity: 1; transform: none; filter: none;
transition: none;
}
/* schematic wires/dim pre-drawn; JS sets dashoffset when GSAP loads */
}
/* GLOBAL BACKSTOP — reduced motion kills everything (CSS-driven). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
}
}
|