/* Hallmark · shape: colour-led consulting brief · genre: modern-minimal · job: hire · theme: custom · redesign: full
 * idea: "An ink-red opening leads to four interlocking disciplines on ivory" · vibe: quiet precise open assured human
 * hero: open brief (/) compact introduction (/portfolio /contact /404) · nav: edge-aligned · footer: simple close
 * axes: light/grotesk/warm · posture: committed · imagery: native three-dimensional software-layer assembly · motion: calm with reduced-motion fallback · signature: interface, integration, conversion and database layers assemble in depth · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V5 · weakest: E, the new sans and continuous section rhythm require desktop and mobile render checks */
/* Hallmark · waive 77 · no published cases or office material exists · the consulting site keeps its real services and software animation rather than inventing work */
/* Hallmark · dropped decorative sheet references and note numbers · 66 names document apparatus that does not help visitors */
/* Hallmark · reworded "Performance for commercial and government systems." to "Strategic technology consulting." · user requested freedom to improve hierarchy and copy */
/* Hallmark · hero-review: approved text-led Terracotta opening preserved; finish-review: software-layer animation accepted by owner; email-only finalization independently reviewed with browser regression coverage; final delivery removes preview/controls/repeated labels and uses one4s animation */
/* Hallmark · previous design record: .hallmark/previous-blueprint-stamp.txt */
/* Hallmark · reworded "Four capabilities" to "Our expertise." · user rejected the numbered list and granted freedom to improve presentation */
/* Hallmark · reworded "User experience design" to "Experience design" · shorter display heading keeps the original application and website scope in its description */
/* Hallmark · reworded "Commercial off the shelf integration" to "Software integration" · the original commercial software scope stays in its description */
/* Hallmark · reworded "Data cleansing and conversion" to "Data conversion" · cleansing and conversion are both retained in its description */
/* Hallmark · reworded "Database design, development and maintenance" to "Database engineering" · design, development and maintenance remain in its description */
/* Hallmark · answered F4 · the same primary action inverts its paired ink and paper on the red opening to preserve contrast; size and shape are identical */
/* Hallmark · dismissed 40 · measured expanded mobile nav at 9.78:1 ink against background in Chrome; static parser confuses opening tokens */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --font-display: "Archivo", ui-sans-serif, sans-serif; --font-body: "Archivo", ui-sans-serif, sans-serif; --font-outlier: "Archivo", ui-sans-serif, sans-serif;
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.045em; --display-weight: 600; --display-optical: 96;
  --text-hero: clamp(3.25rem, 7.5vw, 7rem); --wordmark-width: 168px; --footer-wordmark-width: 280px;
  --service-title: clamp(1.875rem, 3vw, 3rem); --expertise-title: clamp(2.75rem, 5vw, 4.5rem);
  --nav-h: 88px; --control-height: 48px; --menu-bar-width: 20px; --menu-bar-height: 2px;
  --hero-measure: 18ch; --text-body: 1.0625rem;
  --reveal-distance: 20px; --dur-reveal: 650ms; --reveal-delay: 100ms;

  --color-paper: oklch(96% 0.028 75);
  --color-ink: oklch(25% 0.045 250);
  --color-muted: oklch(43% 0.04 250);
  --color-opening: oklch(76% 0.105 45);
  --color-opening-ink: oklch(25% 0.045 250);
  --color-opening-muted: oklch(37% 0.04 250);
  --color-action: oklch(35% 0.10 250);
  --color-action-ink: oklch(96% 0.028 75);
  --color-opening-action: oklch(35% 0.10 250);
  --color-opening-action-ink: oklch(96% 0.028 75);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --assembly-width: 300px; --assembly-depth: 180px; --assembly-thickness: 16px; --assembly-gap: 64px; --assembly-shift: 16px;
  --assembly-scene-height: 560px; --assembly-perspective: 1200px; --assembly-scale: 1; --assembly-duration: 4s;
  --assembly-shadow: 18px 28px 30px color-mix(in oklab, var(--color-ink) 18%, transparent);

}

:root[data-theme="estuary"] {
  --color-paper: oklch(96% 0.025 85); --color-paper-2: oklch(92% 0.03 85); --color-paper-3: oklch(88% 0.03 85);
  --color-ink: oklch(28% 0.045 205); --color-ink-2: oklch(35% 0.055 205); --color-muted: oklch(44% 0.035 205);
  --color-rule: oklch(76% 0.025 160); --color-rule-2: oklch(84% 0.02 160);
  --color-accent: oklch(35% 0.065 205); --color-accent-ink: oklch(96% 0.025 85); --color-focus: oklch(35% 0.065 205);
  --color-opening: oklch(32% 0.055 205); --color-opening-ink: oklch(96% 0.025 85); --color-opening-muted: oklch(85% 0.035 115);
}
:root[data-theme="aubergine"] {
  --color-paper: oklch(96% 0.018 310); --color-paper-2: oklch(92% 0.025 310); --color-paper-3: oklch(88% 0.03 310);
  --color-ink: oklch(28% 0.055 325); --color-ink-2: oklch(35% 0.065 325); --color-muted: oklch(44% 0.035 325);
  --color-rule: oklch(76% 0.025 325); --color-rule-2: oklch(84% 0.025 325);
  --color-accent: oklch(37% 0.09 325); --color-accent-ink: oklch(96% 0.018 310); --color-focus: oklch(37% 0.09 325);
  --color-opening: oklch(32% 0.07 325); --color-opening-ink: oklch(96% 0.018 310); --color-opening-muted: oklch(85% 0.035 310);
}
:root[data-theme="olive"] {
  --color-paper: oklch(96% 0.025 95); --color-paper-2: oklch(92% 0.03 95); --color-paper-3: oklch(88% 0.035 95);
  --color-ink: oklch(29% 0.035 110); --color-ink-2: oklch(36% 0.04 110); --color-muted: oklch(44% 0.035 110);
  --color-rule: oklch(76% 0.03 105); --color-rule-2: oklch(84% 0.03 105);
  --color-accent: oklch(38% 0.065 110); --color-accent-ink: oklch(96% 0.025 95); --color-focus: oklch(38% 0.065 110);
  --color-opening: oklch(35% 0.055 110); --color-opening-ink: oklch(96% 0.025 95); --color-opening-muted: oklch(85% 0.04 95);
}

:root[data-theme="cobalt"] {
  --color-paper: oklch(96% 0.012 255);
  --color-ink: oklch(24% 0.02 265);
  --color-muted: oklch(44% 0.03 265);
  --color-opening: oklch(36% 0.19 265);
  --color-opening-ink: oklch(97% 0.02 95);
  --color-opening-muted: oklch(85% 0.03 260);
  --color-action: oklch(36% 0.19 265);
  --color-action-ink: oklch(97% 0.02 95);
  --color-opening-action: oklch(88% 0.16 110);
  --color-opening-action-ink: oklch(23% 0.02 265);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="ocean"] {
  --color-paper: oklch(95% 0.02 80);
  --color-ink: oklch(25% 0.03 230);
  --color-muted: oklch(43% 0.035 230);
  --color-opening: oklch(35% 0.075 230);
  --color-opening-ink: oklch(96% 0.02 80);
  --color-opening-muted: oklch(84% 0.03 230);
  --color-action: oklch(76% 0.13 35);
  --color-action-ink: oklch(23% 0.025 230);
  --color-opening-action: oklch(76% 0.13 35);
  --color-opening-action-ink: oklch(23% 0.025 230);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="mint"] {
  --color-paper: oklch(96% 0.017 160);
  --color-ink: oklch(24% 0.02 200);
  --color-muted: oklch(43% 0.02 200);
  --color-opening: oklch(82% 0.10 170);
  --color-opening-ink: oklch(24% 0.02 200);
  --color-opening-muted: oklch(35% 0.025 200);
  --color-action: oklch(24% 0.02 200);
  --color-action-ink: oklch(96% 0.017 160);
  --color-opening-action: oklch(24% 0.02 200);
  --color-opening-action-ink: oklch(96% 0.017 160);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="rose"] {
  --color-paper: oklch(96% 0.015 350);
  --color-ink: oklch(23% 0.02 325);
  --color-muted: oklch(43% 0.035 325);
  --color-opening: oklch(86% 0.06 350);
  --color-opening-ink: oklch(23% 0.02 325);
  --color-opening-muted: oklch(38% 0.03 325);
  --color-action: oklch(23% 0.02 325);
  --color-action-ink: oklch(96% 0.015 350);
  --color-opening-action: oklch(23% 0.02 325);
  --color-opening-action-ink: oklch(96% 0.015 350);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="ultramarine"] {
  --color-paper: oklch(94% 0.065 95);
  --color-ink: oklch(25% 0.03 270);
  --color-muted: oklch(44% 0.04 270);
  --color-opening: oklch(34% 0.20 270);
  --color-opening-ink: oklch(94% 0.065 95);
  --color-opening-muted: oklch(83% 0.04 95);
  --color-action: oklch(34% 0.20 270);
  --color-action-ink: oklch(94% 0.065 95);
  --color-opening-action: oklch(94% 0.065 95);
  --color-opening-action-ink: oklch(34% 0.20 270);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="terracotta"] {
  --color-paper: oklch(96% 0.028 75);
  --color-ink: oklch(25% 0.045 250);
  --color-muted: oklch(43% 0.04 250);
  --color-opening: oklch(76% 0.105 45);
  --color-opening-ink: oklch(25% 0.045 250);
  --color-opening-muted: oklch(37% 0.04 250);
  --color-action: oklch(35% 0.10 250);
  --color-action-ink: oklch(96% 0.028 75);
  --color-opening-action: oklch(35% 0.10 250);
  --color-opening-action-ink: oklch(96% 0.028 75);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="forest"] {
  --color-paper: oklch(96% 0.018 75);
  --color-ink: oklch(27% 0.035 160);
  --color-muted: oklch(43% 0.035 160);
  --color-opening: oklch(29% 0.055 160);
  --color-opening-ink: oklch(91% 0.045 350);
  --color-opening-muted: oklch(80% 0.045 350);
  --color-action: oklch(82% 0.07 350);
  --color-action-ink: oklch(27% 0.035 160);
  --color-opening-action: oklch(82% 0.07 350);
  --color-opening-action-ink: oklch(27% 0.035 160);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="saffron"] {
  --color-paper: oklch(96% 0.025 85);
  --color-ink: oklch(24% 0.02 270);
  --color-muted: oklch(44% 0.03 270);
  --color-opening: oklch(86% 0.16 90);
  --color-opening-ink: oklch(24% 0.02 270);
  --color-opening-muted: oklch(37% 0.03 270);
  --color-action: oklch(24% 0.02 270);
  --color-action-ink: oklch(96% 0.025 85);
  --color-opening-action: oklch(24% 0.02 270);
  --color-opening-action-ink: oklch(96% 0.025 85);
  --color-ink-2: var(--color-muted); --color-rule: color-mix(in oklab, var(--color-ink) 35%, var(--color-paper)); --color-rule-2: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-paper-2: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper)); --color-paper-3: color-mix(in oklab, var(--color-ink) 10%, var(--color-paper));
  --color-accent: var(--color-ink); --color-accent-ink: var(--color-paper); --color-focus: var(--color-ink);
}

:root[data-theme="merlot"] {
  --color-paper: oklch(96% 0.025 78); --color-paper-2: oklch(92% 0.03 76); --color-paper-3: oklch(88% 0.035 75);
  --color-ink: oklch(30% 0.07 20); --color-ink-2: oklch(37% 0.085 20); --color-muted: oklch(44% 0.04 25);
  --color-rule: oklch(76% 0.03 45); --color-rule-2: oklch(84% 0.025 50);
  --color-accent: oklch(40% 0.115 25); --color-accent-ink: oklch(96% 0.025 78); --color-focus: oklch(40% 0.115 25);
  --color-opening: oklch(37% 0.11 22); --color-opening-ink: oklch(96% 0.025 78); --color-opening-muted: oklch(85% 0.035 55);
  --color-action: var(--color-ink); --color-action-ink: var(--color-paper);
  --color-opening-action: var(--color-opening-ink); --color-opening-action-ink: var(--color-opening);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: duotone ink paper con=8 */
[data-slot]:has(> img) { isolation: isolate; background: var(--color-paper); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
[data-slot] > img { z-index: 0; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
[data-slot]:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-ink); mix-blend-mode: lighten; pointer-events: none; }
html { scroll-behavior: smooth; }
body { font-size: var(--text-body); }
h1, h2, h3 { text-transform: none; }
.num { font-variant-numeric: tabular-nums; }
a:hover { text-decoration-thickness: 2px; }
.skip { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(calc(-100% - var(--space-xl))); }
.skip:focus-visible { transform: none; }
#main:focus { outline: none; }

/* The page is one surface. Navigation and content share its edges. */
.nav { position: relative; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: var(--space-xl); }
.nav__mark, .footer__mark { display: inline-flex; color: var(--color-ink); text-decoration: none; }
.wordmark { width: var(--wordmark-width); height: auto; }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); }
.nav__link { display: inline-block; padding-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-md); text-decoration: none; white-space: nowrap; }
.nav__link:hover, .nav__link.is-active { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.35em; }
.nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); width: var(--control-height); height: var(--control-height); padding: 0; border: 0; background: transparent; color: var(--color-ink); cursor: pointer; }
.nav__toggle-bar { width: var(--menu-bar-width); height: var(--menu-bar-height); background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child { transform: translateY(-3px) rotate(-45deg); }
.nav__panel { position: absolute; inset: 100% 0 auto; height: calc(100svh - var(--nav-h)); z-index: var(--z-modal); overflow-y: auto; background: var(--color-paper); }
.nav__panel-inner { display: flex; flex-direction: column; min-height: 100%; padding-block: var(--space-xl); gap: var(--space-lg); }
.nav__panel .nav__link { font-size: var(--text-3xl); }
.nav__panel-email { margin-top: auto; padding-top: var(--space-xl); overflow-wrap: anywhere; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--action { background: var(--color-action); color: var(--color-action-ink); border-color: var(--color-action); }
.btn--action:hover { background: color-mix(in oklab, var(--color-action) 88%, var(--color-action-ink)); }
.btn:active, .nav__toggle:active { transform: translateY(1px); }
.btn:disabled, .nav__toggle:disabled { opacity: 0.5; cursor: not-allowed; }

/* One statement, with the explanation and action kept together. */
.hero { min-height: min(calc(100svh - var(--nav-h)), 900px); }
.hero__inner { display: flex; flex-direction: column; justify-content: center; min-height: inherit; padding-block: var(--space-2xl) var(--space-xl); }
.hero__base { display: grid; gap: var(--space-xl); }
.hero__title { max-width: var(--hero-measure); font-size: var(--text-hero); line-height: 1.04; text-wrap: balance; }
.hero__aside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.hero__lead { max-width: 38ch; color: var(--color-muted); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-lg); }
.hero__link { font-size: var(--text-sm); }
.assembly { margin: var(--space-3xl) 0 0; }
.assembly__caption { color: var(--color-muted); font-size: var(--text-sm); }

/* Services read as a single column, rather than boxed sections. */
.section { padding-block: var(--space-3xl); }
#capabilities > .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.section__head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.section__head h2 { max-width: 16ch; font-size: var(--text-section); }
.section__line { max-width: 34ch; color: var(--color-muted); }
.register__head { display: none; }
.register__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xl); }
.register__row { display: flex; flex-direction: column; gap: var(--space-lg); }
.register__num { padding-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.register__title { max-width: 28ch; font-size: var(--text-2xl); font-weight: 500; line-height: 1.2; }
.register__text { grid-column: 2; max-width: 48ch; color: var(--color-muted); }

/* Feedback stays open on the same background, with no panel or stripe. */
.section--notes { padding-block: var(--space-4xl) var(--space-3xl); }
.section--notes .section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.note { max-width: 46ch; }
.note__quote { margin: 0; font-size: var(--text-xl); line-height: 1.5; letter-spacing: -0.02em; }
.notes__status { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

.close { padding-block: var(--space-4xl); }
.close__block { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.close h2 { max-width: 17ch; font-size: var(--text-section); }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-lg); }
.close__email { font-size: var(--text-md); }

.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.page-head__inner { width: 100%; }
.page-head__block { display: grid; gap: var(--space-lg); }
.page-head h1 { max-width: 18ch; font-size: var(--text-display); }
.page-head__lead { max-width: 45ch; color: var(--color-muted); }
.page-head__actions { margin-top: var(--space-md); }
.page-head--notfound { min-height: 65svh; }
.page-head + .section { padding-top: var(--space-xl); }
.run__dim { display: none; }
.run__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.run__num { display: block; margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.run__title { max-width: 26ch; margin-bottom: var(--space-md); font-size: var(--text-2xl); line-height: 1.2; }
.run__text { max-width: 45ch; color: var(--color-muted); }

.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: start; }
.contact__main { display: grid; gap: var(--space-2xl); }
.contact__email-block { display: grid; gap: var(--space-xs); }
.contact__label, .legend__label { color: var(--color-muted); font-size: var(--text-sm); }
.contact__email { color: var(--color-ink); font-size: var(--text-2xl); overflow-wrap: anywhere; }
.form__head { margin-bottom: var(--space-xl); }
.form__title { font-size: var(--text-section); }
.form__row { margin-bottom: var(--space-lg); }
.field { display: grid; gap: var(--space-sm); }
.field label { font-size: var(--text-md); }
.field input, .field textarea { width: 100%; min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); }
.field textarea { min-height: var(--space-4xl); resize: vertical; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.form__note { min-height: 1lh; max-width: 36ch; color: var(--color-muted); font-size: var(--text-sm); }
.form__notice { margin-top: var(--space-lg); padding: var(--space-md); border: var(--rule-hair) solid var(--color-muted); font-size: var(--text-sm); }
.details { margin: var(--space-xl) 0 0; }
.details__row { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.details dt { color: var(--color-muted); font-size: var(--text-sm); }
.details dd { margin: 0; }
.slot { color: var(--color-muted); }

/* A single closing rule, not a divider at every chapter. */
.footer { padding-block: var(--space-2xl); }
.footer__block { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 4fr); gap: var(--gap-columns); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__cell { display: grid; align-content: start; gap: var(--space-sm); }
.footer__cell--mark { gap: var(--space-xl); }
.footer__wordmark { width: var(--footer-wordmark-width); max-width: 100%; height: auto; }
.footer__copyright, .footer__label { color: var(--color-muted); font-size: var(--text-sm); }
.footer__links { display: grid; gap: var(--space-xs); }
.footer__links a, .footer__email { font-size: var(--text-md); text-decoration: none; overflow-wrap: anywhere; }
.footer__links a:hover, .footer__email:hover { text-decoration: underline; }

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--space-2xl); }
  .hero__aside { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__actions, .close__actions { justify-content: flex-start; }
  .assembly { margin-top: var(--space-2xl); }
  #capabilities > .container { grid-template-columns: minmax(0, 1fr); }
  .section__head { margin-bottom: var(--space-xl); }
  .close__block, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .footer__block { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .footer__cell--mark { grid-column: 1 / -1; }
  .form__foot { flex-wrap: wrap; }
}
@media (max-width: 40rem) {
  .hero__title { font-size: var(--text-display-s); max-width: 17ch; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .section { padding-block: var(--space-2xl); }
  .section--notes { padding-top: var(--space-3xl); }
  .section--notes .section__head, .notes, .run__list { grid-template-columns: minmax(0, 1fr); }
  .notes { gap: var(--space-xl); }
  .note__quote { font-size: var(--text-lg); }
  .register__title, .run__title { font-size: var(--text-xl); }
  .register__num { padding-top: var(--space-2xs); }
  .register__list { gap: var(--space-xl); }
  .close { padding-block: var(--space-3xl); }
  .close__actions { align-items: flex-start; flex-direction: column; }
  .page-head { padding-block: var(--space-2xl); }
  .contact__email { font-size: var(--text-lg); }
  .form__foot { align-items: flex-start; flex-direction: column; }
  .footer__block { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 60.01rem) { .nav__panel { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Ink-red opening. One colour transition, without a stack of bands. */
.nav, .hero, .page-head { background: var(--color-opening); color: var(--color-opening-ink); }
.nav__mark, .nav__link, .nav__toggle { color: var(--color-opening-ink); }
.nav__link:hover, .nav__link.is-active { color: var(--color-opening-ink); }
.nav__panel { background: var(--color-opening); color: var(--color-opening-ink); }
.nav :focus-visible, .hero :focus-visible, .page-head :focus-visible { outline-color: var(--color-opening-ink); }
.hero__lead, .page-head__lead, .assembly__caption { color: var(--color-opening-muted); }
.hero__title { font-weight: 500; font-size: var(--text-hero); }
.hero__inner { justify-content: flex-end; padding-block: var(--space-2xl); }
.hero__aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero .btn--action, .page-head .btn--action { background: var(--color-opening-action); color: var(--color-opening-action-ink); border-color: var(--color-opening-action); }
.hero .btn--action:hover, .page-head .btn--action:hover { background: color-mix(in oklab, var(--color-opening-action) 88%, var(--color-opening-action-ink)); }
.assembly { margin-top: var(--space-2xl); }
#capabilities { padding-block: var(--space-3xl); }
#capabilities > .container { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--gap-columns); }
#capabilities .section__head { padding-top: var(--space-xs); }
#capabilities > .container > .section__head h2 { max-width: 8ch; font-size: var(--expertise-title); line-height: 1.05; }
#capabilities .section__line { max-width: 24ch; }
.register__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.register__row { display: flex; flex-direction: column; gap: var(--space-lg); }
.register__row:nth-child(even) { margin-top: var(--space-3xl); }
.register__title { max-width: 12ch; font-size: var(--service-title); font-weight: 500; line-height: 1.08; letter-spacing: -0.045em; }
.register__text { max-width: 45ch; line-height: 1.6; }
.section--notes { padding-top: var(--space-2xl); }
.close h2 { font-size: var(--expertise-title); line-height: 1.08; }
@media (max-width: 60rem) {
  .hero__inner { padding-block: var(--space-3xl) var(--space-2xl); }
  .hero__aside { grid-template-columns: minmax(0, 1fr); }
  #capabilities > .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  #capabilities > .container > .section__head h2 { max-width: none; }
  #capabilities .section__line { max-width: 40ch; }
  .register__row:nth-child(even) { margin-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  .hero__title { font-size: var(--text-display-s); }
  .hero__inner { padding-block: var(--space-2xl); }
  .register__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .register__row { gap: var(--space-md); }
  .register__row:nth-child(even) { margin-top: 0; }
  .register__title { max-width: none; }
  .register__text { max-width: 45ch; }
}

/* Development-only palette study, excluded from the production render. */
.theme-preview { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-sm) var(--gutter); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.theme-preview summary { cursor: pointer; min-height: var(--space-lg); }
.theme-preview__body { display: grid; gap: var(--space-sm); padding-top: var(--space-md); }
.theme-preview select { width: 100%; min-height: var(--control-height); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); padding: var(--space-xs); background: var(--color-paper); color: var(--color-ink); }
.theme-preview p { color: var(--color-muted); }

.theme-preview:not([open]) .theme-preview__body { display: none; }

.theme-preview__swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); }
.theme-preview__swatches span:nth-child(1) { background: var(--color-opening); }
.theme-preview__swatches span:nth-child(2) { background: var(--color-paper); }
.theme-preview__swatches span:nth-child(3) { background: var(--color-opening-action); }
.theme-preview__reference span { display: block; margin-top: var(--space-xs); }
/* One calm reveal recipe. Content is visible without JS; the animation runs in CSS. */
@keyframes content-arrives {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}
.hero__title { animation: content-arrives var(--dur-reveal) var(--ease-out) both; }
.hero__aside { animation: content-arrives var(--dur-reveal) var(--ease-out) var(--reveal-delay) both; }
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__aside { animation: none; transform: none; opacity: 1; }
}

/* The local study stays in flow, so it never covers page content or actions. */
.theme-preview summary { width: fit-content; margin-left: auto; padding-block: var(--space-sm); }
.theme-preview__body { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-md) var(--gap-columns); padding-bottom: var(--space-lg); }
.theme-preview__body label { align-self: center; }
.theme-preview__body > p { grid-column: 2; }
.theme-preview__swatches { grid-column: 2; }
@media (max-width: 40rem) {
  .theme-preview__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .theme-preview__body > p, .theme-preview__swatches { grid-column: 1; }
}





/* sloplint waiver 25: 38ch is a short figure caption, not body prose. */
/* Approved text-led opening, followed by a software-layer motion piece. */
.hero__inner { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--space-xl); padding-block: var(--space-2xl); }
.hero__title { max-width: var(--hero-measure); font-size: var(--text-hero); }
.hero__aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.hero__actions { justify-content: flex-end; }
.work-study { grid-column: 1 / -1; margin-top: var(--space-xl); }
.software-assembly { margin: 0; }
.software-assembly__heading { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.software-assembly__heading h2 { font-size: var(--text-section); max-width: 18ch; }
.software-assembly__heading p { color: var(--color-muted); max-width: 38ch; }
.assembly-scene { position: relative; width: 100%; height: var(--assembly-scene-height); perspective: var(--assembly-perspective); }
.assembly-world { position: absolute; left: 50%; top: 62%; width: var(--assembly-width); height: var(--assembly-depth); transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-32deg) scale3d(var(--assembly-scale), var(--assembly-scale), var(--assembly-scale)); }
.assembly-layer { position: absolute; inset: 0; transform-style: preserve-3d; --layer-surface: var(--color-paper-3); --layer-ink: var(--color-ink); animation: assemble-software var(--assembly-duration) var(--ease-in-out) 1 both; animation-play-state: paused; }
.assembly-layer--interface { --layer-surface: var(--color-paper); }
.assembly-layer--integration { --layer-surface: var(--color-opening); }
.assembly-layer--database { --layer-surface: var(--color-ink); --layer-ink: var(--color-paper); }
.assembly-layer__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); background: var(--layer-surface); color: var(--layer-ink); box-shadow: var(--assembly-shadow); }
.assembly-layer__face > span { font-size: var(--text-sm); }
.assembly-layer__face > code { font-family: var(--font-code); font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.assembly-layer::before, .assembly-layer::after { content: ""; position: absolute; background: color-mix(in oklab, var(--layer-surface) 70%, var(--color-ink)); }
.assembly-layer::before { top: 100%; left: 0; width: 100%; height: var(--assembly-thickness); transform-origin: top; transform: rotateX(-90deg); }
.assembly-layer::after { left: 100%; top: 0; width: var(--assembly-thickness); height: 100%; transform-origin: left; transform: rotateY(90deg); }
.assembly-layer__lines { display: flex; gap: var(--space-xs); }
.assembly-layer__lines i { width: var(--space-xl); height: var(--rule-heavy); background: currentColor; opacity: 0.35; }
.software-assembly[data-running="true"] .assembly-layer { animation-play-state: running; }
@keyframes assemble-software {
  0%, 15%, 85%, 100% { transform: translate3d(calc(var(--layer-index) * var(--assembly-shift)), calc(var(--layer-index) * var(--assembly-shift) * -1), calc(var(--layer-index) * var(--assembly-gap))); }
  40%, 60% { transform: translate3d(calc(var(--layer-index) * var(--assembly-shift) * -1), calc(var(--layer-index) * var(--assembly-shift) * -2), calc(var(--layer-index) * var(--assembly-gap) * 1.4)); }
}
@media (max-width: 60rem) {
  .hero__aside, .software-assembly__heading { grid-template-columns: minmax(0, 1fr); }
  .hero__actions { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  :root { --assembly-scale: 0.5; --assembly-scene-height: 480px; }
  .assembly-world { top: 72%; }
  .hero__title { font-size: var(--text-display-s); }
}
@media (prefers-reduced-motion: reduce) {
  .software-assembly .assembly-layer { animation: none !important; transform: translate3d(calc(var(--layer-index) * var(--assembly-shift)), calc(var(--layer-index) * var(--assembly-shift) * -1), calc(var(--layer-index) * var(--assembly-gap))); }
}

/* Email is the complete contact flow; no unfinished form or placeholder details. */
.page-head--contact .contact__email-block { margin-top: var(--space-xl); }
.contact__hint { color: var(--color-muted); font-size: var(--text-sm); max-width: 45ch; }