/* ============================================================================
   SysCore – style.css
   Order: 1. Tokens & themes · 2. Reset · 3. Base · 4. Layout · 5. Components
          6. Pages · 7. Utilities & motion · 8. Print
   All colors are semantic tokens; components never reference raw hex.
   ========================================================================== */

/* ===== 1. TOKENS & THEMES ================================================ */

:root {
  color-scheme: light;

  --bg:            #F4F6F9;
  --surface:       #FFFFFF;
  --surface-2:     #EBEFF3;

  --text:          #131C24;
  --text-2:        #3E4C59;
  --text-3:        #5F6E7C;

  /* Hue 209, not 200. The brand blue used to sit at hue 200, which is cyan-teal: at the dark theme's
     lightness (L 59) that still reads as sky blue, but at L 30 on a large filled button it reads petrol,
     and people call it green. Same hue, opposite verdict, decided by lightness alone. The light ramp is
     rotated to 209 so it reads blue at its own lightness; the dark accent is untouched. See ADR-0066. */
  --accent:        #185691;
  --accent-hover:  #124778;
  --accent-soft:   #E3EDF7;
  --on-accent:     #FFFFFF;

  --border:        #D8E0E7;
  --border-strong: #AEBCC8;

  --ring:          #206EB6;

  --ok:            #1B7A44;
  --ok-glow:       rgba(27, 122, 68, 0.35);
  --notice:        #8A5A00;
  --notice-bg:     #FFF3D6;
  --notice-border: #EAD9A8;

  --shadow-1: 0 1px 2px rgba(15, 23, 32, 0.06), 0 4px 12px rgba(15, 23, 32, 0.05);
  --shadow-2: 0 2px 4px rgba(15, 23, 32, 0.07), 0 12px 28px rgba(15, 23, 32, 0.09);
  --grid-line: rgba(19, 28, 36, 0.045);
  --header-bg: rgba(255, 255, 255, 0.85);
  --field-bg: #FFFFFF;
  --field-border: #AEBCC8;

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='%23185691' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
               "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
               "DejaVu Sans Mono", "Liberation Mono", monospace;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 10px;

  --ease:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 450ms;

  --header-h: 56px;
  --subnav-h: 52px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0E141B;
  --surface:       #161E27;
  --surface-2:     #1D2833;

  --text:          #E8EDF2;
  --text-2:        #A9B7C4;
  --text-3:        #7C8B99;

  --accent:        #5BA3D0;
  --accent-hover:  #7DB8DC;
  --accent-soft:   #16293A;
  --on-accent:     #0B1620;

  --border:        #263340;
  --border-strong: #33424F;

  --ring:          #6FB1DC;

  --ok:            #46C288;
  --ok-glow:       rgba(70, 194, 136, 0.35);
  --notice:        #E0A93E;
  --notice-bg:     #2A2113;
  --notice-border: #4A3B1B;

  --shadow-1: none;
  --shadow-2: none;
  --grid-line: rgba(232, 237, 242, 0.04);
  --header-bg: rgba(22, 30, 39, 0.85);
  --field-bg: #1D2833;
  --field-border: #5C6E7E;

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='%235BA3D0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* No-JS fallback: when the bootstrap never ran (no data-theme attribute),
   follow the OS preference. Values duplicate the dark block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:            #0E141B;
    --surface:       #161E27;
    --surface-2:     #1D2833;
    --text:          #E8EDF2;
    --text-2:        #A9B7C4;
    --text-3:        #7C8B99;
    --accent:        #5BA3D0;
    --accent-hover:  #7DB8DC;
    --accent-soft:   #16293A;
    --on-accent:     #0B1620;
    --border:        #263340;
    --border-strong: #33424F;
    --ring:          #6FB1DC;
    --ok:            #46C288;
    --ok-glow:       rgba(70, 194, 136, 0.35);
    --notice:        #E0A93E;
    --notice-bg:     #2A2113;
    --notice-border: #4A3B1B;
    --shadow-1: none;
    --shadow-2: none;
    --grid-line: rgba(232, 237, 242, 0.04);
    --header-bg: rgba(22, 30, 39, 0.85);
    --field-bg: #1D2833;
    --field-border: #5C6E7E;
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='%235BA3D0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

@media (min-width: 768px) {
  :root { --header-h: 64px; }
}

/* ===== 2. RESET ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

/* Author display declarations beat the UA's [hidden] rule – restore it */
[hidden] { display: none !important; }

/* --- Language gates ---------------------------------------------------------
   The markup carries BOTH languages; html[lang] (Dutch authored default,
   toggled by the header button, bootstrapped from localStorage) decides which
   layer shows. Pure CSS, so the split also works with JS disabled. */
html[lang="en"] .lang-nl { display: none !important; }
html:not([lang="en"]) .lang-en { display: none !important; }

.svg-sprite { display: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

ul, ol { padding: 0; }

table { border-collapse: collapse; }

address { font-style: normal; }

/* ===== 3. BASE =========================================================== */

h1, h2, h3 {
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; }
h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }

.display {
  font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
}

p { color: var(--text-2); }

.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-2); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease);
}

a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

#main:focus, h1:focus, h2:focus { outline: none; }

::selection { background: var(--accent); color: var(--on-accent); }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* The mono "instrumentation voice" – the brand signature */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-3);
  margin-bottom: 12px;
}

.eyebrow-slash { color: var(--accent); }

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ok);
}

/* ===== 4. LAYOUT ========================================================= */

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

.prose { max-width: 68ch; }

.prose p + p { margin-top: 1em; }

@media (min-width: 600px) {
  .container { padding-inline: 24px; }
}

.section { padding-block: 64px; }
.section-pad { padding-block: 48px; }
.section-divided { border-top: 1px solid var(--border); }

.section > .container > .eyebrow + h2,
.section > .container > h2 { margin-bottom: 32px; }

@media (min-width: 768px) {
  .section { padding-block: 96px; }
  .section-pad { padding-block: 64px; }
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-m);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 12px;
  color: var(--on-accent);
}

/* --- Header elevation sentinel (observed by IntersectionObserver) --- */
.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
}

/* --- Sticky header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-2) var(--ease);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .site-header {
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    backdrop-filter: saturate(1.2) blur(8px);
  }
}

.site-header.is-scrolled { box-shadow: var(--shadow-1); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.brand-name {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.logo-mark { color: var(--text); flex: none; }

/* --- Primary nav --- */

.site-nav a:not(.nav-contact) {
  font-size: 1rem;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.site-nav a:not(.nav-contact):hover { color: var(--accent); }

.site-nav a:not(.nav-contact)[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Nav is a plain wrapping row at every width – no menu to open or break */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

@media (min-width: 768px) {
  .site-nav { gap: 32px; }
}

/* Small screens: brand + theme toggle on the first row, nav wraps below.
   The header goes static so the taller wrapped bar never covers content.
   (Sticky-offset overrides for .svc-subnav/.svc-panel live with those
   components – they must come after their base rules in the cascade.) */
@media (max-width: 767.98px) {
  .site-header { position: static; height: auto; }
  .header-inner { flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
  .site-nav { width: 100%; }
  [id] { scroll-margin-top: 16px; }
}

/* --- Header buttons --- */
.theme-toggle,
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

/* Pushes itself (and the buttons/nav after it) to the right; DOM order
   matches visual order at every width for a sane focus order. */
.lang-toggle { margin-left: auto; }

/* Shows the two-letter code of the language you'll switch TO */
.lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.theme-toggle:hover,
.lang-toggle:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Toggle shows the theme you'll switch TO: moon in light, sun in dark */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- JS-dependent chrome (multi-page site: content is always visible;
       only controls that NEED script.js hide without it) --- */
html:not(.js) .theme-toggle { display: none; }
html:not(.js) .lang-toggle { display: none; }
html:not(.js) .contact-form-panel { display: none; }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 48px 32px;
  margin-top: 64px;
}

.footer-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: 12px;
}

.footer-strap {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: 8px;
  max-width: 40ch;
}

.footer-nav { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.footer-nav a, .footer-contact a {
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
}

.footer-nav a:hover, .footer-contact a:hover { color: var(--accent); }

.footer-nav a[aria-current="page"] { color: var(--accent); }

.footer-contact { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.footer-contact a { font-family: var(--font-mono); font-size: 0.8125rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding-top: 24px;
}

.footer-bottom p { font-size: 0.875rem; color: var(--text-3); }

.footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.footer-legal a {
  font-size: 0.875rem;
  color: var(--text-3);
  text-decoration: none;
}

.footer-legal a:hover { color: var(--accent); }

/* ===== 5. COMPONENTS ===================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-m);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.btn-lg { padding: 14px 24px; }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn-secondary {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow-1);
}

/* --- Icon plates --- */
.icon { width: 24px; height: 24px; color: var(--accent); }
.icon-lg { width: 28px; height: 28px; }
.icon-in-btn { color: currentColor; width: 20px; height: 20px; }

.icon-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-plate-lg { width: 48px; height: 48px; }

.icon-plate-xl {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-l);
}

.logo-mark-xl { width: 56px; height: 56px; }

.card-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* --- Testimonials --- */
.testimonial-grid {
  list-style: none;
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.testimonial blockquote p {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.testimonial figcaption {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
}

/* --- Contact form (mailto handoff, no backend) --- */

/* The form sits in a card with the same icon-plate/heading grammar as the
   Phone/Email/Signal cards above it, so it reads as one more contact channel. */
.form-card { max-width: 880px; padding: 28px 24px; }

@media (min-width: 768px) { .form-card { padding: 40px 48px; } }

.form-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.form-head .eyebrow { margin-bottom: 4px; }

.form-intro { max-width: 62ch; margin-bottom: 32px; }

.contact-form {
  display: grid;
  gap: 20px;
  max-width: 640px;
}

/* Sentence-style form: inputs sit inline as blanks in a sentence */
.madlib {
  font-size: 1.125rem;
  line-height: 2.3;
  color: var(--text);
}

.madlib input,
.madlib select {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--field-border);
  border-radius: 0;
  padding: 2px 8px;
  margin-inline: 2px;
  max-width: 100%;
}

.madlib input:focus-visible,
.madlib select:focus-visible { border-bottom-color: var(--accent); }

.madlib input::placeholder { color: var(--text-3); }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-m);
  padding: 12px 14px;
}

.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--accent); }

.field textarea { resize: vertical; min-height: 150px; }

/* --- FAQ --- */
.faq { max-width: 68ch; }

.faq details { border-top: 1px solid var(--border); }

.faq details:last-child { border-bottom: 1px solid var(--border); }

.faq summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  content: "+" / "";       /* alt-text syntax keeps it out of the a11y name */
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  color: var(--accent);
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
  content: "\2013" / "";
}

.faq details p { padding-bottom: 20px; }

/* --- Check list --- */
.check-list {
  list-style: none;
  display: grid;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 32px;
  color: var(--text-2);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  background-image: var(--icon-check);
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Tech tag pills --- */
.tag-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tag-row li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 4px 10px;
}

/* --- CTA band --- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 32px;
  box-shadow: var(--shadow-1);
}

@media (min-width: 768px) { .cta-band { padding: 48px; } }

.cta-band > div { max-width: 62ch; }

.cta-band h2 { margin-bottom: 8px; }

.cta-band .btn { flex: none; }

/* --- Notice (legal placeholder banner) --- */
.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-s);
  padding: 20px;
  margin-bottom: 48px;
}

.notice p { font-size: 0.875rem; color: var(--text-2); }

.notice strong { color: var(--notice); }

/* --- Note panel (contact page: managed-clients emergency line) ---
   Full container width: it closes the contact page as its own section, so a
   narrow floating box looks lost. The text itself stays capped at a readable
   measure inside the wide panel. */
.note-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 24px 28px;
}

.note-panel p { font-size: 0.9375rem; max-width: 88ch; }

/* The contact form's "not enabled yet" notice: revealed by script.js when
   the deployed form still carries data-form-disabled (the deploy's
   ENABLE_CONTACT_FORM question, defaults in deploy/content-flags.conf). */
.form-disabled-note { margin-top: 24px; }

/* --- Tables --- */
.table-wrap { overflow-x: auto; }

/* ===== 6. PAGES ========================================================== */

/* --- Hero / page heads with the engineering-grid band --- */
.grid-band { position: relative; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(600px 300px at 30% 20%, var(--accent-soft), transparent 70%),
    repeating-linear-gradient(to right,  var(--grid-line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.grid-band > .container { position: relative; z-index: 1; }

.hero { padding-block: 80px 64px; }

@media (min-width: 768px) { .hero { padding-block: 128px 96px; } }

.hero-inner { max-width: 780px; }

.hero .display { margin-bottom: 24px; }

.hero .lede { max-width: 58ch; margin-bottom: 32px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.page-head {
  padding-block: 64px 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

@media (min-width: 768px) { .page-head { padding-block: 96px 64px; } }

.page-head h1 { margin-bottom: 16px; }

.page-head .status-line { margin-top: 24px; }

/* --- Homepage story sections --- */
.story-inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .story-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .story-flip .story-art { order: -1; }
}

.story-text h2 { margin-bottom: 16px; }

.story-text p + p { margin-top: 1em; }

.story-cta { margin-top: 24px; }

.story-art {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 40px;
}

.story-art svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  margin-inline: auto;
  color: var(--text-2);
}

/* --- Services sub-nav (chips) --- */
.svc-subnav {
  position: sticky;
  top: 0;                    /* mobile: the header is static and scrolls away */
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--subnav-h);
}

@media (min-width: 768px) {
  .svc-subnav { top: var(--header-h); }   /* below the sticky header */
}

.svc-subnav-track {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.svc-subnav-track::-webkit-scrollbar { display: none; }

.svc-subnav a {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.svc-subnav a:hover { color: var(--accent); border-color: var(--accent); }

.svc-subnav a[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --- Service panels --- */
.svc-panel {
  padding-block: 48px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--subnav-h) + 16px);
}

.svc-panel:first-of-type { border-top: none; }

@media (min-width: 768px) {
  .svc-panel {
    padding-block: 64px;
    scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px);
  }
}

@media (min-width: 900px) {
  .svc-panel {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
  }
}

.svc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.svc-head .card-index { width: 100%; }

@media (min-width: 900px) {
  .svc-head { display: block; margin-bottom: 0; }
  .svc-head .icon-plate { margin-block: 16px 20px; }
}

.svc-head h2 { margin-bottom: 8px; }

.svc-tagline { color: var(--text-2); font-size: 1.0625rem; }

.svc-body { max-width: 68ch; }

.svc-body > p:first-child { margin-bottom: 24px; }

.svc-body .eyebrow { margin-bottom: 16px; }

.svc-cta { margin-top: 24px; }

.svc-cta a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.svc-cta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- About --- */
.about-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.about-intro > div { flex: 1 1 320px; }

.principle-grid {
  list-style: none;
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) { .principle-grid { grid-template-columns: repeat(2, 1fr); } }

.principle-grid h3 { margin-bottom: 12px; }

/* --- Contact --- */
/* The contact page-head is the plain single-column .page-head (eyebrow, h1,
   lede), the same as the services page; it needs no rules of its own. */
.contact-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }

.contact-card h2 { font-size: 1.1875rem; margin-block: 16px 8px; }

.contact-value, .contact-value a {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--text);
}

.contact-value a { text-decoration-color: var(--border-strong); }

.contact-value a:hover { color: var(--accent); }

.contact-note {
  font-size: 0.875rem;
  color: var(--text-3);
  margin-top: 12px;
}

/* Signal QR: the tile stays white in BOTH themes – it is a scan target,
   and camera apps read dark-on-light far more reliably than inverted codes. */
.qr-tile {
  width: 148px;
  height: 148px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  margin-block: 16px 12px;
}

.qr-tile svg { width: 100%; height: 100%; }

/* --- Legal --- */
.legal-body {
  padding-block: 48px 64px;
  font-size: 0.875rem;
}

.legal-body article + article { margin-top: 64px; }

.legal-body h2 { margin-bottom: 8px; }

.legal-body h3 { font-size: 1rem; margin-block: 28px 8px; }

.legal-body p { font-size: 0.875rem; }

.doc-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  margin-bottom: 24px;
}

/* --- Standalone 404 (served by nginx error_page; no script.js) --- */
.nf-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.nf-inner { padding-block: 72px; }

.nf-inner .brand { margin-bottom: 48px; }

.nf-eyebrow { margin-bottom: 16px; }

.nf-inner .display { margin-bottom: 20px; }

.nf-inner .lede { max-width: 54ch; margin-bottom: 32px; }

/* Small mono footnote under the 404 lede (the factual error text) */
.nf-note {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: -16px;
  margin-bottom: 32px;
  max-width: 54ch;
}

/* ===== 7. UTILITIES & MOTION ============================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal-on-scroll: hidden ONLY when JS confirmed IntersectionObserver
   support and motion is allowed (html.js-reveal). Otherwise always visible. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) ease-out, transform var(--dur-3) ease-out;
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger within card groups, capped at 160ms */
html.js-reveal .testimonial-grid .reveal:nth-child(2),
html.js-reveal .principle-grid .reveal:nth-child(2) { transition-delay: 40ms; }
html.js-reveal .testimonial-grid .reveal:nth-child(3),
html.js-reveal .principle-grid .reveal:nth-child(3) { transition-delay: 80ms; }
html.js-reveal .principle-grid .reveal:nth-child(4) { transition-delay: 120ms; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: staggered rise on each load of the homepage */
  .hero .anim {
    animation: rise-in var(--dur-3) var(--ease) backwards;
  }
  .hero .a1 { animation-delay: 60ms; }
  .hero .a2 { animation-delay: 120ms; }
  .hero .a3 { animation-delay: 180ms; }
  .hero .a4 { animation-delay: 240ms; }

  .status-dot {
    animation: dot-pulse 3s var(--ease) infinite;
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ok-glow); }
  60%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@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;
  }
}

/* ===== 8. PRINT ========================================================== */

@media print {
  .site-header, .skip-link, .theme-toggle, .lang-toggle, .contact-form-panel,
  .svc-subnav, .footer-nav, .status-line, .top-sentinel { display: none !important; }

  /* Unrevealed below-the-fold content must not print as blank space */
  html.js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reset EVERY color token to print-safe values, whichever theme is active.
     Backgrounds don't print by default, so --on-accent must be dark. */
  :root, :root[data-theme="dark"], :root:not([data-theme]) {
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --text: #000; --text-2: #222; --text-3: #444;
    --border: #999; --shadow-1: none; --shadow-2: none;
    --accent: #185691; --accent-hover: #124778;
    --accent-soft: #fff; --on-accent: #000; --ring: #206EB6;
    --ok: #1B7A44; --ok-glow: transparent;
    --notice: #8A5A00; --notice-bg: #fff; --notice-border: #999;
    --grid-line: transparent; --header-bg: #fff;
  }

  .hero-bg { display: none; }

  /* Background images don't print by default – swap the check bullet for a glyph */
  .check-list li::before {
    background: none;
    content: "\2713";
    color: #000;
    font-weight: 700;
    line-height: 1;
  }

  .faq summary::after { display: none; }

  a[href^="mailto:"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}