/* ==========================================================================
   JK Concepts – main.css
   Mobile first · shared stylesheet for all pages
   1. Fonts  2. Tokens  3. Base  4. Layout  5. Components  6. Sections
   7. Motion states  8. Utilities
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------
   Three type roles, all Google Fonts, self-hosted (DSGVO, no external requests):
   --font-display  Sora           headings, key values, large prices
   --font          Inter          body copy, navigation, buttons, field labels
   --mono          JetBrains Mono kickers/eyebrows, tags, technical readouts
   Archivo stays only as a 10-glyph subset for the "JK Concepts" wordmark (logo).
   Each role has a metric-matched local fallback so the swap causes no layout shift. */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Wordmark";
  src: url("../fonts/archivo-wordmark.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 114.7%;
  ascent-override: 84.6%;
  descent-override: 25.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.5%;
  ascent-override: 91%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 84%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
  /* Navy · Ink (from #022237 / #013a60) */
  --navy-50: #eff7fd;
  --navy-100: #dcecf9;
  --navy-200: #bfd8ed;
  --navy-300: #97bcdc;
  --navy-400: #6a98bd;
  --navy-500: #4377a0;
  --navy-600: #2b5f87;
  --navy-700: #154c72;
  --navy-800: #013a60;
  --navy-900: #022237;
  --navy-950: #001425;

  /* Blue · Brand (from #0f7bd6) */
  --blue-50: #eef6ff;
  --blue-100: #daecff;
  --blue-200: #b5d8ff;
  --blue-400: #379bfc;
  --blue-500: #0f7bd6;
  --blue-600: #0069bb;
  --blue-700: #00579e;

  /* Cyan · Signal (from #10bddf) */
  --cyan-100: #cff4ff;
  --cyan-200: #b3e8f8;
  --cyan-300: #88d5ea;
  --cyan-400: #10bddf;
  --cyan-700: #006f84;

  /* Slate · Neutral (navy-tinted) */
  --slate-50: #f6fbff;
  --slate-100: #ecf5fc;
  --slate-200: #dee8f0;
  --slate-300: #cbd6df;
  --slate-400: #99a7b3;
  --slate-500: #6d7d8b;
  --slate-600: #4f606e;
  --slate-700: #3e4c59;

  /* Status (from #e10707 / #a0ce4e) */
  --red-50: #fff2ef;
  --red-300: #ff8b7b;
  --red-600: #c10002;
  --green-50: #ecfedf;
  --green-300: #a0ce4e;
  --green-700: #3d6900;

  /* Semantic – light surface (default) */
  --bg: #ffffff;
  --bg-alt: var(--slate-50);
  --text: var(--navy-900);
  --text-muted: var(--slate-600);
  --heading: var(--navy-900);
  --link: var(--blue-600);
  --link-hover: var(--blue-700);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --focus: var(--blue-600);

  /* Type */
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Sora Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Archivo Wordmark", "Archivo Fallback", var(--font);
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.1875rem, 1.07rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);

  /* Space & shape */
  --gutter: 1rem;
  --container: 98rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --header-h: 4.25rem;
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -24px rgba(0, 10, 20, 0.7);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 40em) { :root { --gutter: 1.5rem; } }
@media (min-width: 64em) { :root { --gutter: 2rem; --header-h: 5rem; --fs-base: 1.125rem; } }

/* Dark surfaces re-map the semantic tokens */
.surface-dark {
  --bg: var(--navy-900);
  --bg-alt: var(--navy-950);
  --text: #ffffff;
  --text-muted: var(--navy-200);
  --heading: #ffffff;
  --link: var(--cyan-300);
  --link-hover: #ffffff;
  --border: rgba(151, 188, 220, 0.18);
  --border-strong: rgba(151, 188, 220, 0.32);
  --focus: var(--cyan-400);
  background-color: var(--bg);
  color: var(--text);
}

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
strong { font-weight: 680; }
abbr[title] { text-decoration: none; cursor: help; }
::selection { background: var(--cyan-200); color: var(--navy-900); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  background: var(--cyan-400); color: var(--navy-900); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

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

/* 4. Layout -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head p { margin-top: 1rem; font-size: var(--fs-md); color: var(--text-muted); }
.lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 40rem; }

/* Homepage intent hub */
.intent-primary-grid, .intent-secondary-grid { display: grid; gap: 1rem; }
.intent-secondary-grid { margin-top: 1rem; }
.intent-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 100%; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; color: var(--text); text-decoration: none;
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.04); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.intent-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.intent-card:hover, .intent-card:focus-visible { transform: translateY(-4px); border-color: var(--blue-200); box-shadow: 0 1rem 2.25rem rgba(0, 33, 55, 0.11); color: var(--text); text-decoration: none; }
.intent-card:hover::before, .intent-card:focus-visible::before { transform: scaleX(1); }
.intent-card-kicker { color: var(--blue-700); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.intent-card h3 { margin-top: 0.6rem; font-size: clamp(1.2rem, 1.05rem + 0.65vw, 1.45rem); }
.intent-card p { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }
.intent-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: auto; padding-top: 1.5rem; }
.intent-card-price { color: var(--heading); font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.intent-card-link { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--link); font-size: 0.9375rem; font-weight: 650; }
.intent-card-link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
.intent-card:hover .intent-card-link .icon { transform: translateX(3px); }
.intent-card--featured { border-color: var(--navy-800); background: linear-gradient(145deg, var(--navy-950), var(--navy-800)); box-shadow: 0 1rem 2.5rem -1.5rem rgba(0, 20, 37, 0.7); }
.intent-card--featured::before { transform: scaleX(1); }
.intent-card--featured .intent-card-kicker { color: var(--cyan-300); }
.intent-card--featured h3, .intent-card--featured .intent-card-price { color: #fff; }
.intent-card--featured p { color: var(--navy-100); }
.intent-card--featured .intent-card-link { color: var(--cyan-300); }
.intent-card--featured:hover, .intent-card--featured:focus-visible { border-color: var(--cyan-400); color: #fff; }
.intent-card--primary { min-height: clamp(18rem, 15rem + 8vw, 22rem); padding: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.intent-card--primary:not(.intent-card--featured) { border-color: var(--blue-200); background: linear-gradient(145deg, #fff, var(--blue-50)); }
.intent-card--primary h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.intent-card--primary p { max-width: 36rem; font-size: 1rem; }

@media (min-width: 42em) {
  .intent-primary-grid, .intent-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 75em) {
  .intent-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 5. Components ---------------------------------------------------------- */

/* Buttons */
.btn {
  --btn-bg: var(--blue-600); --btn-fg: #fff; --btn-bd: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.375rem;
  border: 2px solid var(--btn-bd); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: 1rem; font-weight: 680; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out);
}
.btn:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--signal { --btn-bg: var(--cyan-400); --btn-fg: var(--navy-900); --btn-bd: var(--cyan-400); }
.btn--signal:hover { --btn-bg: var(--cyan-300); --btn-bd: var(--cyan-300); --btn-fg: var(--navy-950); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--text); --btn-fg: var(--text); }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn .icon { width: 1.125rem; height: 1.125rem; }

.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Price figures */
.price { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-weight: 700; }

/* Text link with chevron (only used where a link leads onward) */
.more-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 650; text-decoration: none; }
.more-link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
.more-link:hover .icon { transform: translateX(3px); }
.more-link:hover { text-decoration: underline; }

/* ---------- Notice bar ---------- */
.notice-bar { background: var(--slate-100); color: var(--slate-700); font-size: var(--fs-sm); border-bottom: 1px solid var(--slate-200); }
.notice-bar .container { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; padding-block: 0.375rem; text-align: center; }
.notice-bar a { color: var(--blue-700); font-weight: 650; }
.notice-bar a:hover { color: var(--navy-900); }
.notice-bar .icon { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.375rem; vertical-align: -0.15em; color: var(--red-600); }

/* ---------- Header ---------- */
.site-header {
  --focus: var(--blue-600);
  position: sticky; top: 0; z-index: 50;
  background: #fff; color: var(--navy-900);
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow .35s var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 12px 32px -20px rgba(2, 34, 55, 0.45); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.no-js .scroll-progress, html:not(.motion-ok) .scroll-progress { display: none; }

/* Brand lockup: mark | divider | wordmark + tagline */
.brand { display: inline-flex; align-items: center; color: var(--navy-900); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--navy-900); text-decoration: none; }
.brand-mark { width: 2.5rem; height: 2.5rem; overflow: visible; }
.bm-shadow { fill: var(--cyan-400); }
.bm-front { fill: var(--navy-900); }
.brand-divider { align-self: center; width: 1px; height: 2.125rem; margin: 0 0.8125rem 0 0.875rem; background: var(--slate-300); transform-origin: 50% 50%; }
.brand-text { display: flex; flex-direction: column; justify-content: center; }
.brand-name {
  display: block; overflow: hidden;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
  font-family: var(--font-wordmark);
  font-size: 1.3125rem; font-weight: 760; font-stretch: 80%; letter-spacing: 0.006em; line-height: 1.05;
}
.brand-name .ch { display: inline-block; white-space: pre; }
.brand-tag { display: block; overflow: hidden; margin-top: 0.3125rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.2; color: var(--slate-600); }
.brand-tag > span { display: block; }
.brand:hover .bm-shadow { fill: var(--blue-500); transition: fill .25s; }
@media (min-width: 64em) {
  .brand-mark { width: 2.75rem; height: 2.75rem; }
  .brand-divider { height: 2.375rem; margin: 0 0.9375rem 0 1rem; }
  .brand-name { font-size: 1.4375rem; }
  .brand-tag { font-size: 0.78125rem; }
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 3rem; min-height: 3rem; padding: 0 0.75rem; margin-right: -0.75rem;
  background: transparent; border: 0; color: var(--navy-900); font: inherit; font-weight: 650; cursor: pointer;
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile navigation panel */
.site-nav { display: none; }
.no-js .site-nav { display: block; width: 100%; padding-bottom: 1rem; }
.no-js .header-inner { flex-wrap: wrap; }
.no-js .nav-toggle { display: none; }
.site-nav.is-open {
  display: block; position: fixed; inset: calc(var(--header-h) + 1px) 0 0 0; z-index: 49;
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; padding: 0.5rem var(--gutter) 2rem;
}
.nav-list { list-style: none; }
.nav-list > li { border-bottom: 1px solid var(--slate-200); }
.nav-link, .nav-sub-toggle {
  position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 3.5rem; padding: 0.5rem 0; background: none; border: 0;
  color: var(--navy-900); font: inherit; font-size: 1.1875rem; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-link:hover, .nav-sub-toggle:hover { color: var(--blue-600); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--blue-600); }
.nav-sub-toggle .icon { transition: transform .25s var(--ease-out); }
.nav-sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-cta { margin-top: 1.5rem; }
.nav-cta .btn { width: 100%; }

.btn--navy { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); --btn-fg: #fff; }
.btn--navy:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); }

/* Mega panel (Leistungen) */
.mega { display: none; padding: 0.25rem 0 1.25rem; }
.mega.is-open, .no-js .mega { display: block; }
.mega-grid { display: grid; gap: 1.5rem; }
.mega-group h2 { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--slate-600); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; }
.mega-group ul { list-style: none; }
.mega-group a { display: block; padding: 0.5rem 0; color: var(--navy-900); font-weight: 600; text-decoration: none; line-height: 1.3; }
.mega-group a span { display: block; font-size: 0.875rem; font-weight: 400; color: var(--slate-600); margin-top: 0.125rem; }
.mega-group a:hover { color: var(--blue-600); }
.mega-group a:hover span { color: var(--slate-700); }
.site-nav .mega-group a[aria-current="page"] {
  padding-inline: 0.75rem;
  border-radius: 4px;
  background-color: var(--navy-900);
  color: #fff;
  text-decoration: none;
}
.site-nav .mega-group a[aria-current="page"] span {
  color: #fff;
  opacity: 0.82;
}
.site-nav .mega-group a[aria-current="page"]:hover {
  background-color: var(--navy-800);
  color: #fff;
}
.site-nav .mega-group a[aria-current="page"]:hover span { color: #fff; }
.mega-aside { display: none; }

@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .site-nav, .no-js .site-nav { display: block; width: auto; padding: 0; }
  .site-nav.is-open { position: static; padding: 0; overflow: visible; background: none; }
  .nav-list { display: flex; align-items: center; gap: 0.125rem; }
  .nav-list > li { border: 0; }
  .nav-link, .nav-sub-toggle {
    min-height: 2.75rem; padding: 0.5rem 0.875rem; font-size: 1rem; font-weight: 600; gap: 0.375rem;
  }
  .nav-link::after, .nav-sub-toggle::after {
    content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.3125rem; height: 2px;
    background: var(--blue-600); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out);
  }
  .nav-link:hover::after, .nav-sub-toggle:hover::after, .nav-sub-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
  .nav-sub-toggle::after { right: 2.25rem; }
  .nav-sub-toggle[aria-expanded="true"] { color: var(--blue-600); }
  .nav-sub-toggle .icon { width: 1rem; height: 1rem; }
  .nav-cta { margin: 0 0 0 0.875rem; }
  .nav-cta .btn { width: auto; }

  .has-mega { position: static; }
  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 2rem 0 2.25rem; background: #fff; color: var(--navy-900);
    border-top: 1px solid var(--slate-200);
    box-shadow: 0 24px 48px -24px rgba(2, 34, 55, 0.45);
  }
  .no-js .mega { display: none; }
  .no-js .has-mega:hover .mega, .no-js .has-mega:focus-within .mega { display: block; }
  .mega-inner { display: grid; grid-template-columns: 1fr 17rem; gap: 2.5rem; }
  .mega-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .mega-group h2 { border-bottom: 1px solid var(--slate-200); padding-bottom: 0.5rem; margin-bottom: 0.25rem; }
  .mega-group a { padding: 0.625rem 0; font-weight: 650; }
  .mega-aside {
    --focus: var(--cyan-400);
    display: block; align-self: start; padding: 1.5rem; border-radius: var(--radius);
    background: var(--navy-900); color: #fff;
  }
  .mega-aside p { color: var(--navy-200); font-size: 0.9375rem; margin: 0.5rem 0 1.25rem; }
  .mega-aside strong { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.015em; }
}

/* ---------- Hero ---------- */
.hero {
  --hero-cell: 3rem; /* grid size – hero-field.js snaps its traces to it */
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
  background-color: var(--navy-900);
  background-image:
    radial-gradient(60rem 30rem at 85% 30%, rgba(16, 189, 223, 0.10), transparent 60%),
    linear-gradient(rgba(151, 188, 220, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 188, 220, 0.06) 1px, transparent 1px);
  background-size: auto, var(--hero-cell) var(--hero-cell), var(--hero-cell) var(--hero-cell);
  background-position: 0 0, -1px -1px, -1px -1px;
}
/* Signal grid behind the home hero (canvas, injected by hero-field.js only when motion is allowed) */
.hero > .container { position: relative; z-index: 1; }
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.hero-field canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (forced-colors: active) { .hero-field { display: none; } }
@media print { .hero-field { display: none; } }
.hero-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
.hero h1 { max-width: 17ch; }
.hero-subtitle { max-width: 28ch; margin-top: 0.875rem; color: var(--navy-100); }
.hero .lead { margin-top: 1.5rem; color: var(--navy-100); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-actions .btn { flex: 1 1 15rem; }
.hero-note { margin-top: 1rem; font-size: var(--fs-sm); color: var(--navy-200); }
.hero-note .price { color: #fff; }
.assurances { list-style: none; display: grid; gap: 0.625rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.assurances li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; color: var(--navy-100); line-height: 1.45; }
.assurances .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--cyan-400); stroke-width: 2.5; }

@media (min-width: 40em) {
  .hero-actions .btn { flex: 0 0 auto; }
}
@media (min-width: 64em) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .assurances { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* ---------- Hero visual: a new website takes shape (browser + phone) ----------
   Markup: src/components/home/HeroSection.astro · motion: main.js buildSequence().
   Default = finished state (no JS / reduced motion); .motion-ok starts from the blueprint. */
.build-figure { margin: 0; }
.build {
  --b-line: rgba(151, 188, 220, 0.16);
  position: relative; isolation: isolate;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(1, 58, 96, 0.55), rgba(0, 20, 37, 0.92));
  box-shadow: var(--shadow-panel);
}

/* browser chrome: address + status */
.build-chrome { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--b-line); }
.build-url {
  display: flex; flex: 1; align-items: center; gap: 0.5rem; min-width: 0; height: 2rem; padding: 0 0.875rem;
  border: 1px solid rgba(151, 188, 220, 0.14); border-radius: 999px; background: rgba(151, 188, 220, 0.07);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--navy-100);
}
.build-lock { width: 0.875rem; height: 0.875rem; flex-shrink: 0; fill: none; stroke: var(--green-300); stroke-width: 1.6; stroke-linecap: round; transition: stroke 0.4s; }
.build-host { overflow: hidden; white-space: nowrap; }
.build-caret { width: 1px; height: 0.875rem; margin-left: -0.375rem; background: var(--cyan-300); opacity: 0; }
.build.is-typing .build-caret { opacity: 1; animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.build-status {
  display: inline-flex; align-items: center; gap: 0.4375rem; height: 1.75rem; padding: 0 0.6875rem;
  border: 1px solid rgba(160, 206, 78, 0.38); border-radius: 999px; background: rgba(160, 206, 78, 0.1);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-300);
  transition: color 0.4s, border-color 0.4s, background-color 0.4s;
}
.build-status i { position: relative; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
.build-status i::after { content: ""; position: absolute; inset: -4px; border: 1px solid currentColor; border-radius: 50%; animation: live-pulse 2.4s var(--ease-out) infinite; }
@keyframes live-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.bs-draft { display: none; }

/* stage: browser viewport with the phone in front */
.build-stage { position: relative; padding: 0.875rem 0.875rem 0; }
.build-viewport {
  position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 16 / 10;
  border: 1px solid rgba(151, 188, 220, 0.22); border-radius: 10px; background: var(--navy-950);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9);
}
.bv-layer { position: absolute; inset: 0; }
.bv-wire {
  background-color: #011a2e;
  background-image:
    linear-gradient(rgba(151, 188, 220, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 188, 220, 0.07) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
}
.bv-design { background: var(--slate-50); }

/* the mock site – one layout, rendered as blueprint and as design */
.s-site { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4.4cqw; padding: 3.8cqw 4.6cqw; }
.s-nav { display: flex; align-items: center; gap: 3cqw; height: 4cqw; }
.s-logo { display: inline-flex; align-items: center; gap: 1.1cqw; height: 100%; margin-right: auto; padding-right: 0.6cqw; }
.s-mark { display: block; width: 3cqw; height: 3cqw; border-radius: 0.8cqw; }
.s-logo b { font-family: var(--font-display); font-size: 1.9cqw; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.s-links { display: flex; align-items: center; gap: 2.2cqw; height: 100%; }
.s-links i { display: block; width: 6cqw; height: 1cqw; border-radius: 1cqw; }
.s-cta { width: 10cqw; height: 3.8cqw; border-radius: 99cqw; }
.s-hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 4cqw; align-items: center; }
.s-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.s-eyebrow { width: 13cqw; height: 1.1cqw; border-radius: 1cqw; }
.s-h1 { margin-top: 1.8cqw; font-family: var(--font-display); font-size: 5.3cqw; font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
.s-text { display: flex; flex-direction: column; gap: 1.2cqw; width: 100%; margin-top: 2.4cqw; }
.s-text i { display: block; height: 1.1cqw; border-radius: 1cqw; }
.s-text i:last-child { width: 72%; }
.s-btns { display: flex; gap: 1.6cqw; margin-top: 3cqw; }
.s-btn { width: 13cqw; height: 4.2cqw; border-radius: 99cqw; }
.s-btn--ghost { width: 11cqw; }
.s-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3.3; border-radius: 1.8cqw; }
.s-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6cqw; }
.s-card { display: flex; flex-direction: column; gap: 1.1cqw; padding: 2.2cqw; border-radius: 1.6cqw; }
.s-card i { display: block; }
.s-ic { width: 3.4cqw; height: 3.4cqw; margin-bottom: 0.6cqw; border-radius: 0.9cqw; }
.s-t { width: 62%; height: 1.3cqw; border-radius: 1cqw; }
.s-l { width: 100%; height: 0.9cqw; border-radius: 1cqw; }
.s-l--short { width: 70%; }

/* blueprint */
.bv-wire .x { position: relative; border: 1px dashed rgba(136, 213, 234, 0.55); border-radius: 0.8cqw; background: rgba(16, 189, 223, 0.05); color: transparent; }
.bv-wire .x > * { visibility: hidden; }
.bv-wire .x[data-label]::before {
  content: attr(data-label); position: absolute; left: 0.4cqw; bottom: 100%; margin-bottom: 0.5cqw;
  font-family: var(--mono); font-size: 1.25cqw; line-height: 1; letter-spacing: 0.04em; color: var(--cyan-300); white-space: nowrap;
}
.bv-wire .s-img {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(136, 213, 234, 0.35) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(136, 213, 234, 0.35) 50%, transparent calc(50% + 0.5px)),
    rgba(16, 189, 223, 0.05);
}

/* design */
.bv-design .s-mark, .bp-nav .s-mark { background: linear-gradient(135deg, var(--cyan-400), var(--blue-600)); }
.bv-design .s-logo b, .bv-design .s-h1 { color: var(--navy-900); }
.bv-design .s-links i, .bv-design .s-text i { background: var(--slate-300); }
.bv-design .s-cta { background: var(--navy-900); }
.bv-design .s-eyebrow { background: var(--cyan-400); }
.bv-design .s-btn { background: var(--blue-600); }
.bv-design .s-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--slate-400); }
.bv-design .s-card { background: #fff; box-shadow: 0 0.5cqw 1.8cqw rgba(2, 34, 55, 0.07), inset 0 0 0 1px var(--slate-200); }
.bv-design .s-ic { background: var(--cyan-100); box-shadow: inset 0 0 0 1px rgba(16, 189, 223, 0.25); }
.bv-design .s-t { background: var(--navy-800); }
.bv-design .s-l { background: var(--slate-200); }
.bv-design .s-img, .bp-img {
  background:
    radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.95) 0 6.5%, rgba(255, 255, 255, 0) 7%),
    linear-gradient(165deg, var(--cyan-300) 0%, var(--blue-500) 52%, var(--navy-800) 100%);
}
.bv-design .s-img::before, .bp-img::before,
.bv-design .s-img::after, .bp-img::after { content: ""; position: absolute; inset: 0; }
.bv-design .s-img::before, .bp-img::before { background: var(--navy-900); opacity: 0.5; clip-path: polygon(0 76%, 21% 55%, 37% 67%, 60% 41%, 82% 63%, 100% 50%, 100% 100%, 0 100%); }
.bv-design .s-img::after, .bp-img::after { background: var(--navy-950); opacity: 0.72; clip-path: polygon(0 89%, 29% 73%, 52% 85%, 76% 69%, 100% 81%, 100% 100%, 0 100%); }

/* render pass + launch sheen */
.bv-render {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; opacity: 0;
  background: var(--cyan-300); box-shadow: 0 0 14px 2px rgba(16, 189, 223, 0.7);
}
.bv-render::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3.5rem; background: linear-gradient(180deg, rgba(16, 189, 223, 0), rgba(16, 189, 223, 0.16)); }
.bv-sheen {
  position: absolute; z-index: 3; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* phone */
.build-phone {
  position: absolute; z-index: 2; right: 2.5%; bottom: -1.5rem; width: 23%; aspect-ratio: 9 / 18.5;
  container-type: inline-size; padding: 0.3rem; border-radius: 1.2rem;
  background: linear-gradient(160deg, #0f2d46, #000c17);
  box-shadow: 0 0 0 1px rgba(151, 188, 220, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 50px -18px rgba(0, 0, 0, 0.9);
}
.bp-screen {
  position: relative; display: flex; flex-direction: column; gap: 5cqw; height: 100%; overflow: hidden;
  padding: 15cqw 7cqw 7cqw; border-radius: 0.9rem; background: var(--slate-50);
}
.bp-screen::before { content: ""; position: absolute; top: 3.8cqw; left: 50%; width: 27cqw; height: 5.5cqw; border-radius: 99px; background: #000c17; transform: translateX(-50%); }
.bp-nav { display: flex; align-items: center; justify-content: space-between; }
.bp-nav .s-mark { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; }
.bp-burger {
  display: block; width: 10cqw; height: 6.4cqw;
  background: linear-gradient(var(--navy-900), var(--navy-900)) top / 100% 1.3cqw no-repeat,
              linear-gradient(var(--navy-900), var(--navy-900)) center / 100% 1.3cqw no-repeat,
              linear-gradient(var(--navy-900), var(--navy-900)) bottom / 100% 1.3cqw no-repeat;
}
.bp-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 5cqw; }
.bp-h1 { font-family: var(--font-display); font-size: 12cqw; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: var(--navy-900); }
.bp-text { display: flex; flex-direction: column; gap: 3cqw; }
.bp-text i { display: block; height: 3cqw; border-radius: 3cqw; background: var(--slate-300); }
.bp-text i:last-child { width: 70%; }
.bp-btn { width: 54%; height: 12cqw; border-radius: 99px; background: var(--blue-600); }
.bp-card { display: flex; align-items: center; gap: 4cqw; padding: 5cqw; border-radius: 5cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--slate-200); }
.bp-card .s-ic { flex-shrink: 0; width: 10cqw; height: 10cqw; margin: 0; border-radius: 2.6cqw; background: var(--cyan-100); }
.bp-card .s-t { flex: 1; width: auto; height: 3cqw; border-radius: 3cqw; background: var(--navy-800); }

/* quality scores (left of the phone) */
.build-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 1.125rem 28% 0.875rem 0.875rem; }
.bsc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; min-width: 0; text-align: center; }
.bsc svg { width: 2.75rem; height: 2.75rem; transform: rotate(-90deg); }
.bsc circle { fill: none; stroke-width: 2.6; }
.bsc-track { stroke: rgba(151, 188, 220, 0.16); }
.bsc-val { stroke: var(--green-300); stroke-linecap: round; stroke-dasharray: 100 100; }
.bsc--98 .bsc-val { stroke-dashoffset: 2; }
.bsc--100 .bsc-val { stroke-dashoffset: 0; }
.bsc-text { display: block; max-width: 100%; }
.bsc b {
  position: absolute; top: 0; left: 50%; width: 2.75rem; height: 2.75rem; margin-left: -1.375rem;
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; line-height: 2.75rem; font-variant-numeric: tabular-nums; color: #fff;
}
.bsc-text > span { display: block; max-width: 100%; overflow: hidden; font-size: 0.6875rem; color: var(--navy-200); white-space: nowrap; text-overflow: ellipsis; }

/* phase steps */
.build-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; padding: 0.875rem 0.875rem 1rem; border-top: 1px solid var(--b-line); list-style: none; }
.build-steps li { min-width: 0; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-100); transition: color 0.3s; }
.build-steps span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.build-steps i { --p: 1; position: relative; display: block; height: 3px; margin-top: 0.4375rem; overflow: hidden; border-radius: 2px; background: rgba(151, 188, 220, 0.16); }
.build-steps i::after { content: ""; position: absolute; inset: 0; background: var(--cyan-400); transform: scaleX(var(--p)); transform-origin: left center; }
.build-steps li:last-child i::after { background: var(--green-300); }
.build-caption { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--navy-300); text-align: center; }
/* infinite loops must stop (not speed up) under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .build-status i::after, .build-caret { animation: none !important; }
}

@media (max-width: 39.99em) {
  .build-chrome { padding: 0.625rem 0.75rem; }
  .build-stage { padding: 0.75rem 0.75rem 0; }
  .build-phone { bottom: 0.5rem; width: 24%; padding: 0.2rem; border-radius: 0.8rem; }
  .bp-screen { border-radius: 0.6rem; }
  .build-scores { padding: 1rem 0.75rem 0.75rem; gap: 0.5rem; }
  .bsc-text > span { font-size: 0.625rem; }
  .build-steps { gap: 0.5rem; padding: 0.75rem; }
  .build-steps li { font-size: 0.5625rem; letter-spacing: 0.02em; }
}

/* ---------- Triage ---------- */
.triage { list-style: none; border-top: 1px solid var(--border-strong); }
.triage li { border-bottom: 1px solid var(--border-strong); }
.triage a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
  padding: 1.25rem 0.25rem; color: var(--text); text-decoration: none;
  transition: background-color .2s;
}
.triage-symptom { grid-column: 1 / -1; font-size: var(--fs-md); font-weight: 560; line-height: 1.35; }
.triage-fix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.triage-service { color: var(--link); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.triage-price { color: var(--text-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.triage .icon { color: var(--link); transition: transform .2s var(--ease-out); }
.triage a:hover { background: var(--bg-alt); }
.triage a:hover .triage-service { text-decoration: underline; text-underline-offset: 0.18em; }
.triage a:hover .icon { transform: translateX(4px); }
.triage-urgent .triage-symptom::before {
  content: "Notfall"; display: inline-block; margin-right: 0.625rem; padding: 0.125rem 0.5rem; vertical-align: 0.15em;
  border-radius: 4px; background: var(--red-50); color: var(--red-600); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

@media (min-width: 48em) {
  .triage a { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; padding: 1.375rem 0.75rem; gap: 2rem; }
  .triage-symptom { grid-column: auto; }
  .triage-fix { flex-direction: column; gap: 0.125rem; }
}

/* ---------- Services & prices ---------- */
.service-groups { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.service-group-head {
  position: relative; overflow: hidden; display: grid; align-content: center; gap: 0.625rem;
  margin-bottom: 1rem; padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--navy-700); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 12%, rgba(16, 189, 223, 0.2), transparent 34%),
    linear-gradient(135deg, var(--navy-950), var(--navy-800));
  box-shadow: 0 1rem 2.5rem -1.5rem rgba(0, 20, 37, 0.65);
}
.service-group-head::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
}
.service-group-head h3 { color: #fff; font-size: var(--fs-lg); }
.service-group-head p { color: var(--navy-100); max-width: 38rem; }
.price-list { list-style: none; display: grid; gap: 0.75rem; }
.price-list li {
  position: relative; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; box-shadow: 0 0.5rem 1.5rem rgba(0, 33, 55, 0.04);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.price-list li::before {
  content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); pointer-events: none;
}
.price-list li:hover, .price-list li:focus-within {
  transform: translateY(-4px); border-color: var(--blue-200);
  box-shadow: 0 1rem 2.25rem rgba(0, 33, 55, 0.11);
}
.price-list li:hover::before, .price-list li:focus-within::before { transform: scaleX(1); }
.price-card {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0.375rem 1.25rem;
  width: 100%; height: 100%; padding: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
  color: var(--text); text-decoration: none;
}
.price-card:hover { color: var(--text); text-decoration: none; }
.price-card:focus-visible { border-radius: var(--radius); outline-offset: -4px; }
.price-card-title {
  color: var(--link); font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -0.01em;
}
.price-card:hover .price-card-title { color: var(--link-hover); }
.price-card-copy { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; }
.price-list .price { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; color: var(--heading); }
.price-list .price small { font-family: var(--font); font-weight: 500; color: var(--text-muted); font-size: 0.8125rem; }
.price-footnote { margin-top: 2rem; font-size: var(--fs-sm); color: var(--text-muted); max-width: 46rem; }

@media (min-width: 34em) {
  .price-card { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .price-card-copy { grid-column: 1 / -1; }
}

.agency-band {
  display: grid; gap: 1.25rem; align-items: center; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-lg);
  background: var(--navy-900); color: #fff;
}
.agency-band h2, .agency-band h3 { color: #fff; }
.agency-band-kicker { color: var(--cyan-300); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.agency-band p { color: var(--navy-100); margin-top: 0.5rem; max-width: 40rem; }
.agency-band ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin-top: 0.875rem; font-size: 0.9375rem; color: var(--navy-200); }
.agency-band li { display: inline-flex; align-items: center; gap: 0.375rem; }
.agency-band li .icon { width: 1rem; height: 1rem; color: var(--cyan-400); stroke-width: 2.5; }

@media (min-width: 56em) {
  .service-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    row-gap: 1rem;
  }
  .service-group {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .service-group-head { margin-bottom: 0; }
  .price-list { display: flex; flex-direction: column; }
  .price-list li { flex: 1; }
  .agency-band { grid-template-columns: 1fr auto; }
}

/* ---------- Process ---------- */
.process-track { position: relative; }
.process { list-style: none; position: relative; display: grid; gap: 2rem; }
.process-track::before, .process-line {
  content: ""; position: absolute; left: 1.1875rem; top: 1.25rem; bottom: 1.25rem; width: 2px;
  background: var(--border-strong);
}
.process-line { background: var(--blue-600); transform-origin: top center; }
.process-step { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1.25rem; align-content: start; }
.process-num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--blue-600); color: #fff; border: 2px solid var(--blue-600);
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .3s, color .3s, border-color .3s;
}
.process-step h3 { padding-top: 0.375rem; }
.process-step p { grid-column: 2; margin-top: 0.5rem; color: var(--text-muted); max-width: 32rem; }
.process-step .price { display: inline-block; margin-top: 0.75rem; grid-column: 2; justify-self: start; padding: 0.25rem 0.625rem; border-radius: 4px; background: var(--blue-50); color: var(--blue-700); font-size: 0.9375rem; }

.diagnosis-box {
  display: grid; gap: 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
}
.diagnosis-box h3 { font-size: var(--fs-lg); }
.diagnosis-box > div > p { margin-top: 0.75rem; color: var(--text-muted); }
.check-list { list-style: none; display: grid; gap: 0.75rem; }
.check-list li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.5; }
.check-list .icon { margin-top: 0.15em; color: var(--blue-600); stroke-width: 2.5; }
.diagnosis-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.diagnosis-cta .price { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); letter-spacing: -0.02em; color: var(--heading); line-height: 1.1; white-space: normal; text-wrap: balance; }
.diagnosis-cta .price small { display: block; font-family: var(--font); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-top: 0.25rem; }

@media (min-width: 64em) {
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .process-track::before, .process-line { left: 1.25rem; right: calc((100% - 6rem) / 5 - 1.25rem); top: 1.1875rem; bottom: auto; width: auto; height: 2px; }
  .process-line { transform-origin: left center; }
  .process-step { grid-template-columns: 1fr; gap: 0; }
  .process-step h3 { padding-top: 1.25rem; min-height: calc(2.4em + 1.25rem); }
  .process-step p, .process-step .price { grid-column: 1; }
  .diagnosis-box { grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
}

/* ---------- Care plans ---------- */
.plans { display: grid; gap: 2rem 1.25rem; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: #fff;
}
.plan-name { font-size: var(--fs-lg); }
.plan-for { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.9375rem; min-height: 3em; }
.plan-price { margin-top: 1.25rem; display: flex; align-items: baseline; gap: 0.375rem; }
.plan-price .price { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--heading); }
.plan-price > span:not(.price) { color: var(--text-muted); font-size: 0.9375rem; }
.plan-setup { margin-top: 0.375rem; font-size: 0.875rem; color: var(--text-muted); }
.plan-features { list-style: none; display: grid; gap: 0; margin: 1.5rem 0; border-top: 1px solid var(--border); }
.plan-features li { display: grid; gap: 0.125rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; line-height: 1.45; }
.plan-features dt, .plan-features .k { color: var(--text-muted); font-size: 0.8125rem; }
.plan .btn { margin-top: auto; }
.plan--featured { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.plan--featured .plan-name, .plan--featured .plan-price .price { color: #fff; }
.plan--featured .plan-for, .plan--featured .plan-price > span:not(.price), .plan--featured .plan-setup, .plan--featured .k { color: var(--navy-200); }
.plan--featured .plan-features, .plan--featured .plan-features li { border-color: rgba(151, 188, 220, 0.2); }
.plan-flag { position: absolute; top: 0; left: clamp(1.5rem, 1.2rem + 1vw, 2rem); transform: translateY(-50%); padding: 0.25rem 0.625rem; border-radius: 4px; background: var(--cyan-400); color: var(--navy-900); font-size: 0.8125rem; font-weight: 700; }

.baseline { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; gap: 1.5rem; }
.baseline h3 { font-size: var(--fs-h3); }
.baseline .check-list { gap: 0.875rem; }
.plans-note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--text-muted); max-width: 48rem; }

@media (min-width: 48em) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

@media (min-width: 56em) {
  .baseline { grid-template-columns: 16rem 1fr; gap: 3rem; }
  .baseline .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

@media (min-width: 75em) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- About ---------- */
.about-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
.about-subtitle { margin-top: 1rem; color: var(--heading); font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.2rem); }
.about-text .lead { margin-top: 1.25rem; }
.principles { display: grid; gap: 1.75rem; margin-top: 2.5rem; }
.principles h3 { font-size: 1.125rem; }
.principles p { margin-top: 0.375rem; color: var(--text-muted); font-size: 0.9875rem; }
.profile {
  align-self: start; min-width: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-lg);
  background: var(--navy-900); color: #fff;
}
.profile-head { display: flex; align-items: stretch; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.profile-head svg { width: 3.5rem; height: 3.5rem; }
.profile-headings { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding-block: 0.3125rem; }
.profile-name { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.profile-role { margin-top: 0; color: var(--navy-200); font-size: 0.9375rem; line-height: 1.2; }
.profile dl { margin: 0; display: grid; gap: 1rem; padding-top: 1.25rem; }
.profile dt { font-size: 0.8125rem; color: var(--navy-300); }
.profile dd { margin: 0.125rem 0 0; color: var(--navy-50); line-height: 1.5; }
.profile-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.project-grid { display: grid; gap: 1rem; }
.project-card {
  display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; color: var(--text); text-decoration: none;
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.04);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.project-card:hover { transform: translateY(-3px); border-color: var(--blue-200); box-shadow: 0 1rem 2.5rem rgba(0, 33, 55, 0.09); color: var(--text); text-decoration: none; }
.project-card h3 { font-size: 1.25rem; }
.project-card p { margin-top: 0.625rem; color: var(--text-muted); font-size: 0.95rem; }
.project-link { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 1.25rem; color: var(--link); font-weight: 650; }
.project-link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
.project-card:hover .project-link .icon { transform: translateX(3px); }
.project-more { max-width: 64rem; margin-top: 1.5rem; color: var(--text-muted); font-size: 0.9375rem; }

.project-grid--showcase { gap: 1.25rem; }
.project-card--showcase { padding: 0; overflow: hidden; }
.project-logo {
  display: grid; place-items: center; min-height: 10.5rem; padding: 1.75rem;
  border-bottom: 1px solid var(--border); background: linear-gradient(145deg, #fff 0%, var(--slate-50) 100%);
  overflow: hidden;
}
.project-logo img {
  display: block; width: auto; height: auto; max-width: min(100%, 15rem); max-height: 7.25rem; object-fit: contain;
  filter: grayscale(1) saturate(0); opacity: 0.68;
  transition: filter .3s var(--ease-out), opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.project-card--showcase:hover .project-logo img,
.project-card--showcase:focus-visible .project-logo img { filter: none; opacity: 1; transform: scale(1.025); }
.project-wordmark {
  max-width: 14rem; color: var(--navy-800); font-family: var(--font-display); font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.75rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.04em; text-align: center;
}
.project-card-content { display: flex; flex: 1; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.project-card--showcase h3 { margin-top: 0.45rem; font-size: 1.4rem; }
.project-summary { display: block; margin-top: 0.75rem; color: var(--navy-800); font-size: 1rem; line-height: 1.45; }
.project-description { display: block; margin-top: 0.65rem; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.project-attribution { display: block; margin-top: 0.65rem; color: var(--slate-600); font-size: 0.825rem; font-style: italic; line-height: 1.5; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; list-style: none; }
.project-tags li {
  padding: 0.32rem 0.55rem; border: 1px solid var(--blue-100); border-radius: 999px; background: var(--blue-50);
  color: var(--blue-700); font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.2;
}
.project-card--showcase .project-link { width: fit-content; }
.project-grid--partner .project-logo { min-height: 8.5rem; background: var(--navy-900); }
.project-grid--partner .project-wordmark { color: #fff; }
.project-principles .copy-rich > p:first-child { margin-top: 0; }
.project-standard-list { margin-top: 1.5rem; }

/* ---------- Project case studies ---------- */
.case-study-hero .hero-grid { align-items: stretch; }
.case-brand-card {
  display: flex; flex-direction: column; align-self: stretch; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(1, 58, 96, 0.72), rgba(0, 20, 37, 0.94));
  box-shadow: var(--shadow-panel);
}
.case-brand-logos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); place-items: center;
  gap: 1.25rem; min-height: 12rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--border); background: linear-gradient(145deg, #fff, var(--slate-50));
}
.case-brand-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 6.5rem; object-fit: contain; }
.case-brand-wordmark {
  color: var(--navy-900); font-family: var(--font-display); font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1; text-align: center;
}
.case-role { padding: 1.35rem 1.5rem 0; color: var(--navy-100); font-size: 0.9375rem; line-height: 1.6; }
.case-external-link {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; margin: 0.75rem 1.5rem 0;
  color: var(--cyan-300); font-weight: 650; text-decoration: none;
}
.case-external-link:last-child { margin-bottom: 1.5rem; }
.case-external-link:hover { color: #fff; text-decoration: underline; }
.case-external-link .icon { width: 1rem; height: 1rem; }

.case-facts { border-bottom: 1px solid var(--slate-200); background: #fff; box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.035); }
.case-fact-grid { display: grid; margin: 0; }
.case-fact-grid > div { padding: 1.25rem 0; border-bottom: 1px solid var(--slate-200); }
.case-fact-grid > div:last-child { border-bottom: 0; }
.case-fact-grid dt {
  color: var(--blue-700); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.case-fact-grid dd { margin: 0.35rem 0 0; color: var(--heading); font-family: var(--font-display); font-weight: 600; line-height: 1.4; }
.case-challenge-list { align-content: start; }
.case-challenge-list li { padding-bottom: 0.75rem; border-bottom: 1px solid var(--slate-200); }

.case-step-grid { display: grid; gap: 1rem; list-style: none; }
.case-step-grid li {
  position: relative; min-width: 0; padding: 1.5rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.035);
}
.case-step-number {
  display: block; margin-bottom: 1.25rem; color: var(--blue-600); font-family: var(--mono); font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.08em;
}
.case-step-grid h3 { font-size: 1.125rem; }
.case-step-grid p { margin-top: 0.625rem; color: var(--text-muted); font-size: 0.9375rem; }
.case-decision { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-left: 3px solid var(--cyan-400); background: #fff; box-shadow: var(--shadow-sm); }
.case-decision h3 { font-size: var(--fs-md); }
.case-decision p { margin-top: 0.875rem; color: var(--text-muted); }
.case-outcomes .info-card { border-top: 3px solid var(--cyan-400); }

.case-next { padding-top: 0; }
.case-next-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); color: #fff;
  box-shadow: var(--shadow-panel);
}
.case-next-card .eyebrow { color: var(--cyan-300); }
.case-next-card h2 { margin-top: 0.45rem; color: #fff; }
.case-next-card p:not(.eyebrow) { max-width: 42rem; margin-top: 0.5rem; color: var(--navy-100); }
.related-grid--cases { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

.cv-overview .section-head { max-width: 32rem; }
.cv-list { border-top: 1px solid var(--border-strong); }
.cv-entry { position: relative; padding: 1.5rem 0 1.5rem 1.5rem; border-bottom: 1px solid var(--border-strong); }
.cv-entry::before { content: ""; position: absolute; top: 1.95rem; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 0 5px var(--cyan-100); }
.cv-date { color: var(--blue-700); font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cv-entry h3 { margin-top: 0.3rem; font-size: 1.125rem; }
.cv-entry h3 + p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.95rem; }

@media (min-width: 48em) {
  .principles, .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .case-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fact-grid > div { padding-inline: 1.5rem; border-right: 1px solid var(--slate-200); }
  .case-fact-grid > div:nth-child(2n) { border-right: 0; }
  .case-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-next-card { flex-direction: row; align-items: center; justify-content: space-between; }
  .case-next-card .btn { flex: 0 0 auto; }
  #kompetenz .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) { .about-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (min-width: 64em) {
  .case-fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-fact-grid > div { border-bottom: 0; }
  .case-fact-grid > div:nth-child(2n) { border-right: 1px solid var(--slate-200); }
  .case-fact-grid > div:last-child { border-right: 0; }
  .case-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 75em) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2rem; }
.faq-list { border-top: 1px solid var(--border-strong); }
.faq-item { border-bottom: 1px solid var(--border-strong); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--link); }
.faq-item summary .icon { color: var(--link); transition: transform .25s var(--ease-out); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item summary h3 { flex: 1; font: inherit; color: inherit; letter-spacing: inherit; }
.faq-answer { padding: 0 0 1.5rem; color: var(--text-muted); max-width: 44rem; }
.faq-answer ul { margin: 0.75rem 0 0 1.25rem; }
.faq-answer li + li { margin-top: 0.25rem; }
.faq-answer a { font-weight: 600; }
.faq-topics { padding-block: 1.25rem; border-bottom: 1px solid var(--border-strong); background: var(--bg); }
.faq-topics ul { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; }
.faq-topics a { display: inline-flex; padding: 0.55rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--heading); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.faq-topics a:hover { border-color: var(--link); color: var(--link); }
.faq-updated { margin-top: 1rem; color: var(--text-muted); font-size: 0.875rem; }

@media (min-width: 64em) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 4rem; }
  .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- Contact ---------- */
.contact { background-color: var(--navy-900); background-image: radial-gradient(50rem 28rem at 0% 100%, rgba(15, 123, 214, 0.18), transparent 60%); }
.contact-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
.contact-intro .lead { color: var(--navy-100); margin-top: 1.25rem; }
.contact-direct { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.contact-direct li { display: flex; gap: 0.875rem; align-items: flex-start; }
.contact-direct .icon { margin-top: 0.2em; color: var(--cyan-400); }
.contact-direct span { display: block; font-size: 0.8125rem; color: var(--navy-300); }
.contact-direct a { font-weight: 650; }
.contact-urgent { margin-top: 2rem; padding: 1.125rem 1.25rem; border-left: 3px solid var(--red-300); background: rgba(0, 20, 37, 0.55); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.9375rem; color: var(--navy-100); }
.contact-urgent strong { color: #fff; }

.form-card {
  --text: var(--navy-900); --text-muted: var(--slate-600); --heading: var(--navy-900);
  --link: var(--blue-600); --link-hover: var(--blue-700); --focus: var(--blue-600);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); border-radius: var(--radius-lg); background: #fff; color: var(--text);
}
.form-card h3 { font-size: var(--fs-lg); color: var(--navy-900); }
.form-card > p { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--slate-600); }
.form-grid { display: grid; gap: 1.125rem; margin-top: 1.5rem; }
.form-status { padding: 0.875rem 1rem; border: 1px solid; border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 600; }
.form-status:focus { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.form-status--success { color: var(--green-700); border-color: var(--green-300); background: #f5faeb; }
.form-status--error { color: var(--red-600); border-color: var(--red-300); background: #fff5f3; }
.field { display: grid; gap: 0.375rem; align-content: start; }
.field label, .field legend { font-size: 0.9375rem; font-weight: 650; color: var(--navy-900); padding: 0; }
.field .opt { font-weight: 400; color: var(--slate-600); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--slate-500); border-radius: var(--radius-sm); background: #fff; color: var(--navy-900);
  font: inherit; font-size: 1rem; line-height: 1.4;
}
.field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022237' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.125rem; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-700); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 1px; border-color: var(--blue-600); }
.field-hint { font-size: 0.8125rem; color: var(--slate-600); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-row label { position: relative; display: inline-flex; }
.radio-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-row span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--slate-500); border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 500; cursor: pointer;
}
.radio-row input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.radio-row input:focus-visible + span { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.check-field { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; }
.check-field input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--blue-600); flex-shrink: 0; }
.form-submit { display: grid; gap: 0.875rem; margin-top: 0.5rem; }
.form-legal { font-size: 0.8125rem; color: var(--slate-600); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 40em) { .form-grid .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; } }
@media (min-width: 64em) { .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

/* ---------- Consent manager ---------- */
.consent-manager {
  position: fixed; z-index: 100; inset: auto auto max(1rem, env(safe-area-inset-bottom)) 50%;
  width: min(72rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  margin: 0; padding: 0; overflow: auto; transform: translateX(-50%);
  border: 1px solid var(--slate-300); border-top: 3px solid var(--cyan-400); border-radius: var(--radius-lg);
  background: #fff; color: var(--navy-900);
  box-shadow: 0 28px 80px -28px rgba(0, 20, 37, 0.6), 0 8px 24px -16px rgba(0, 20, 37, 0.3);
}
.consent-panel { padding: clamp(1.25rem, 0.9rem + 1.25vw, 2rem); }
.consent-layout { display: grid; gap: 1.5rem; }
.consent-copy { min-width: 0; }
.consent-kicker {
  margin-bottom: 0.5rem; color: var(--blue-700); font-family: var(--mono);
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
}
.consent-manager h2 { max-width: none; font-size: clamp(1.375rem, 1.18rem + 0.75vw, 1.875rem); }
.consent-copy > p:not(.consent-kicker) { max-width: 50rem; margin-top: 0.75rem; color: var(--slate-700); font-size: 0.9375rem; line-height: 1.6; }
.consent-copy .consent-note { color: var(--slate-600); font-size: 0.8125rem; }
.consent-actions { display: grid; align-content: start; gap: 0.625rem; }
.consent-settings-button, .consent-back {
  appearance: none; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  border: 0; background: transparent; color: var(--blue-700);
  font: inherit; font-size: 0.875rem; font-weight: 680; text-decoration: underline;
  text-underline-offset: 0.2em; cursor: pointer;
}
.consent-settings-button:hover, .consent-back:hover { color: var(--navy-900); }
.consent-status {
  display: grid; gap: 0.625rem; margin-top: 1.25rem; padding: 1rem 0;
  border-block: 1px solid var(--slate-200); list-style: none;
  color: var(--slate-700); font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
}
.consent-status li { display: flex; align-items: center; gap: 0.625rem; }
.consent-status-dot { width: 0.625rem; height: 0.625rem; flex: 0 0 auto; border-radius: 50%; background: var(--slate-400); }
.consent-status-dot.is-required { background: var(--navy-700); }
.consent-status-dot.is-anonymous { background: var(--green-700); }
.consent-status-dot.is-optional { background: var(--cyan-700); }
.consent-status-dot.is-marketing { background: #a76d00; }
.consent-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 0.875rem; font-size: 0.8125rem; }
.consent-legal a { color: var(--slate-600); }
.consent-legal a:hover { color: var(--navy-900); }

.consent-detail-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.consent-back { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding-inline: 0; }
.consent-options { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.consent-option {
  display: grid; gap: 1rem; align-content: start; padding: 1rem;
  border: 1px solid var(--slate-200); border-radius: var(--radius);
  background: var(--slate-50);
}
.consent-option h3, .consent-option--toggle strong {
  display: block; color: var(--navy-900); font-family: var(--font-display);
  font-size: 1rem; font-weight: 680; line-height: 1.3;
}
.consent-option p, .consent-option--toggle > span:first-child > span {
  display: block; margin-top: 0.375rem; color: var(--slate-600); font-size: 0.8125rem; line-height: 1.5;
}
.consent-badge {
  justify-self: start; padding: 0.25rem 0.5rem; border-radius: 999px;
  background: var(--navy-100); color: var(--navy-800);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.03em;
}
.consent-option--toggle {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; cursor: pointer;
  background: #fff; border-color: var(--slate-300);
}
.consent-switch { position: relative; display: inline-grid; place-items: center; width: 3rem; height: 1.75rem; }
.consent-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.consent-switch > span[aria-hidden] {
  position: absolute; inset: 0; border: 1px solid var(--slate-400); border-radius: 999px;
  background: var(--slate-300); transition: background-color .2s, border-color .2s;
}
.consent-switch > span[aria-hidden]::after {
  content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 20, 37, 0.3); transition: transform .2s var(--ease-out);
}
.consent-switch input:checked + span { border-color: var(--blue-600); background: var(--blue-600); }
.consent-switch input:checked + span::after { transform: translateX(1.25rem); }
.consent-switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.consent-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 1.25rem; }
.consent-detail-actions .consent-settings-button { min-height: 3rem; }

@media (min-width: 40em) {
  .consent-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 52em) {
  .consent-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); gap: 2rem; align-items: start; }
  .consent-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-option { grid-template-rows: 1fr auto; }
  .consent-option--toggle { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr; }
}
@media (max-width: 39.99em) {
  .consent-manager {
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    width: calc(100% - 1rem); max-height: calc(100dvh - 1rem);
  }
  .consent-detail-actions { display: grid; }
  .consent-detail-actions .btn { width: 100%; }
}
@media (forced-colors: active) {
  .consent-manager, .consent-option { border: 2px solid CanvasText; }
  .consent-status-dot, .consent-switch > span[aria-hidden] { forced-color-adjust: none; }
}
@media print { .consent-manager { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--navy-200); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; font-size: 0.9375rem; }
.site-footer a { color: var(--navy-100); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; }
.site-footer .brand, .site-footer .brand:hover { color: #fff; text-decoration: none; }
.site-footer .brand-tag { color: var(--navy-200); }
.site-footer .brand-divider { background: rgba(151, 188, 220, 0.35); }
.footer-brand p { margin-top: 1.25rem; max-width: 22rem; }
.footer-brand address { font-style: normal; margin-top: 1.25rem; line-height: 1.7; }
.footer-col h2 { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.875rem; }
.footer-col ul { list-style: none; display: grid; gap: 0.5rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(151, 188, 220, 0.16); font-size: 0.875rem; color: var(--navy-300); }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; } }

/* 7. Motion states --------------------------------------------------------
   .motion-ok is set in <head> only when the visitor has not asked for
   reduced motion. Above-the-fold elements start hidden here and GSAP
   animates them in (.intro-done is added afterwards). .motion-fallback
   (set if animations have not started after 3 s) shows the final state.
   Scroll reveals below the fold are prepared by JS only, never by CSS.
   ------------------------------------------------------------------------- */
html.motion-ok:not(.motion-fallback):not(.intro-done) :is(.brand-mark, .brand-divider, .brand-name, .brand-tag > span, .nav-toggle),
html.motion-ok:not(.motion-fallback):not(.intro-done) .hero-copy > :not(h1),
html.motion-ok:not(.motion-fallback):not(.intro-done) .service-hero-card,
html.motion-ok:not(.motion-fallback):not(.intro-done) .case-brand-card { opacity: 0; }
@media (min-width: 64em) {
  html.motion-ok:not(.motion-fallback):not(.intro-done) .nav-list > li { opacity: 0; }
}
/* Hero headline "scan": text is visible from the first paint (dimmed) and
   lights up top-down – keeps LCP at first paint. */
html.motion-ok:not(.motion-fallback) .hero h1:not(.is-lit) {
  background-image: linear-gradient(180deg, #fff 0%, #fff 45%, var(--cyan-300) 50%, var(--navy-300) 55%, var(--navy-300) 100%);
  background-size: 100% 220%; background-position: 0 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .hero h1 { background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; }
}

/* Hero build visual starts as a blueprint: design hidden, phone out, scores at 0, status "Entwurf" */
html.motion-ok:not(.motion-fallback) .bv-design { clip-path: inset(0 0 100% 0); }
html.motion-ok:not(.motion-fallback) .bv-wire .x,
html.motion-ok:not(.motion-fallback) .build-phone,
html.motion-ok:not(.motion-fallback) .bsc b,
html.motion-ok:not(.motion-fallback) .bsc-val { opacity: 0; }
html.motion-ok:not(.motion-fallback) .bsc-val { stroke-dashoffset: 100; }
html.motion-ok:not(.motion-fallback) .build-steps i { --p: 0; }
html.motion-ok:not(.motion-fallback) .build-steps li { color: var(--navy-400); }
html.motion-ok:not(.motion-fallback) .build-steps li.is-done { color: var(--navy-100); }
html.motion-ok:not(.motion-fallback) .build-steps li.is-active { color: #fff; }
html.motion-ok:not(.motion-fallback) .build-host { visibility: hidden; }
html.motion-ok:not(.motion-fallback) .build:not(.is-live) .build-lock { stroke: var(--navy-300); }
html.motion-ok:not(.motion-fallback) .build:not(.is-live) .build-status { border-color: var(--b-line); background: transparent; color: var(--navy-200); }
html.motion-ok:not(.motion-fallback) .build:not(.is-live) .build-status i::after { animation: none; opacity: 0; }
html.motion-ok:not(.motion-fallback) .build:not(.is-live) .bs-live { display: none; }
html.motion-ok:not(.motion-fallback) .build:not(.is-live) .bs-draft { display: inline; }

/* The finished hero is the mobile experience. It avoids canvas work and the
   staged build sequence competing with initial layout on touch devices. */
html.motion-ok.hero-static:not(.motion-fallback) .hero-copy > :not(h1) { opacity: 1; }
html.motion-ok.hero-static:not(.motion-fallback) .hero h1:not(.is-lit) {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}
html.motion-ok.hero-static:not(.motion-fallback) .bv-design { clip-path: inset(0); }
html.motion-ok.hero-static:not(.motion-fallback) .bv-wire .x,
html.motion-ok.hero-static:not(.motion-fallback) .build-phone,
html.motion-ok.hero-static:not(.motion-fallback) .bsc b,
html.motion-ok.hero-static:not(.motion-fallback) .bsc-val { opacity: 1; }
html.motion-ok.hero-static:not(.motion-fallback) .bsc-val { stroke-dashoffset: 0; }
html.motion-ok.hero-static:not(.motion-fallback) .bsc--98 .bsc-val { stroke-dashoffset: 2; }
html.motion-ok.hero-static:not(.motion-fallback) .build-steps i { --p: 1; }
html.motion-ok.hero-static:not(.motion-fallback) .build-steps li { color: var(--navy-100); }
html.motion-ok.hero-static:not(.motion-fallback) .build-host { visibility: visible; }
html.motion-ok.hero-static:not(.motion-fallback) .build:not(.is-live) .build-lock { stroke: var(--green-300); }
html.motion-ok.hero-static:not(.motion-fallback) .build:not(.is-live) .build-status { border-color: rgba(160, 206, 78, 0.38); background: rgba(160, 206, 78, 0.1); color: var(--green-300); }
html.motion-ok.hero-static:not(.motion-fallback) .build:not(.is-live) .build-status i::after { animation: none; opacity: 0; }
html.motion-ok.hero-static:not(.motion-fallback) .build:not(.is-live) .bs-live { display: inline; }
html.motion-ok.hero-static:not(.motion-fallback) .build:not(.is-live) .bs-draft { display: none; }
.motion-ok:not(.motion-fallback) .process-line { transform: scaleY(0); }
@media (min-width: 64em) { .motion-ok:not(.motion-fallback) .process-line { transform: scaleX(0); } }
.motion-ok:not(.motion-fallback) .process-step:not(.is-active) .process-num { background: var(--bg-alt); color: var(--slate-600); border-color: var(--border-strong); }
@keyframes num-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.motion-ok .process-step.is-active .process-num { animation: num-pop 0.5s var(--ease-out); }

/* SplitText line masks: room for descenders */
.split, .split-mask { display: block; }
.split-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 8. Utilities ----------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.text-muted { color: var(--text-muted); }

/* 9. Static subpages ----------------------------------------------------- */
.breadcrumb { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.375rem 0.625rem; list-style: none; font-size: var(--fs-sm); color: var(--navy-300); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.625rem; }
.breadcrumb li + li::before { content: "/"; color: var(--navy-500); }
.breadcrumb a { color: var(--navy-100); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.eyebrow { margin-bottom: 0.875rem; color: var(--cyan-300); font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.subhero h1 { max-width: 20ch; }
.subhero--compact .hero-copy { max-width: 50rem; }

/* ---------- Alert hero (emergency pages, e.g. /wordpress-gehackt/) ----------
   Content flag heroVariant: "alert" → .hero--alert. The background breathes slowly
   from navy to deep red (opacity only, 7 s cycle – far below any flashing threshold);
   faint malware motifs float at the edges and light up with the red phase.
   Decorative only (aria-hidden); reduced motion shows a calm, static red tint. */
/* red, "infected" grid lines; hero-field.js switches its circuit traces to red as well */
.hero--alert {
  background-image:
    radial-gradient(60rem 30rem at 85% 30%, rgba(225, 7, 7, 0.12), transparent 60%),
    linear-gradient(rgba(255, 139, 123, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 139, 123, 0.07) 1px, transparent 1px);
}
/* the red pulse sits below the grid canvas, so traces and lines stay visible */
.hero--alert::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 139, 123, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 139, 123, 0.1) 1px, transparent 1px),
    radial-gradient(60rem 34rem at 82% 22%, rgba(225, 7, 7, 0.5), rgba(225, 7, 7, 0) 65%),
    radial-gradient(44rem 28rem at 8% 92%, rgba(193, 0, 2, 0.32), rgba(193, 0, 2, 0) 70%),
    linear-gradient(180deg, rgba(64, 6, 4, 0.86), rgba(36, 4, 8, 0.92));
  background-size: var(--hero-cell) var(--hero-cell), var(--hero-cell) var(--hero-cell), auto, auto, auto;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0, 0 0;
  animation: alert-wash 7s ease-in-out infinite;
}
.alert-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
@keyframes alert-wash { 0%, 100% { opacity: 0.08; } 42%, 58% { opacity: 1; } }

.af-item { position: absolute; color: var(--red-300); animation: af-float var(--af-float, 12s) ease-in-out var(--af-delay, 0s) infinite alternate; }
.af-item > svg, .af-item > code { display: block; opacity: 0.14; animation: af-glow 7s ease-in-out infinite; }
.af-item svg { width: var(--af-size, 2.5rem); height: var(--af-size, 2.5rem); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.af-code {
  padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 139, 123, 0.4); border-radius: 4px; background: rgba(64, 6, 4, 0.4);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; white-space: nowrap; color: var(--red-300);
}
@keyframes af-float { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(0, -16px, 0) rotate(4deg); } }
@keyframes af-glow { 0%, 100% { opacity: 0.12; } 42%, 58% { opacity: 0.5; } }

/* positions: edges and gaps, away from the copy */
.af-1 { top: 7%; left: 47%; --af-size: 2.25rem; --af-float: 11s; --af-delay: -4s; }
.af-2 { top: 9%; right: 3%; --af-size: 3.25rem; --af-float: 14s; --af-delay: -2s; }
.af-3 { bottom: 9%; left: 42%; --af-size: 2.75rem; --af-float: 13s; --af-delay: -7s; }
.af-4 { top: 46%; right: 1.5%; --af-size: 2.25rem; --af-float: 10s; --af-delay: -1s; }
.af-5 { bottom: 13%; right: 26%; --af-size: 2.5rem; --af-float: 12s; --af-delay: -5s; }
.af-6 { bottom: 5%; left: 3%; --af-size: 2.5rem; --af-float: 15s; --af-delay: -9s; }
.af-7 { top: 3%; left: 30%; --af-size: 2rem; --af-float: 11s; --af-delay: -3s; }
.af-8 { top: 30%; left: 52%; --af-size: 1.75rem; --af-float: 9s; --af-delay: -6s; }
.af-c1 { top: 3%; right: 14%; --af-float: 16s; --af-delay: -8s; }
.af-c2 { bottom: 3.5%; left: 22%; --af-float: 14s; --af-delay: -2s; }
.af-c3 { bottom: 4%; right: 4%; --af-float: 13s; --af-delay: -10s; }
.af-c4 { top: 18%; left: 44%; --af-float: 15s; --af-delay: -5s; }

/* make the red phase visible on the hero card as well */
.hero--alert .service-hero-card { border-color: rgba(255, 139, 123, 0.28); }

/* small screens: the copy fills the hero, so only the bands above the breadcrumb
   and below the card carry motifs */
@media (max-width: 63.99em) {
  .af-wide, .af-1, .af-2, .af-3, .af-4, .af-7 { display: none; }
  .af-c1 { top: 1.2%; right: 4%; }
  .af-5 { top: auto; bottom: 1.2%; left: 30%; right: auto; --af-size: 2rem; }
  .af-6 { bottom: 1.2%; left: 4%; --af-size: 2rem; }
  .af-c3 { bottom: 1.5%; right: 3%; }
  .af-code { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--alert::before, .af-item, .af-item > svg, .af-item > code { animation: none !important; }
  .hero--alert::before { opacity: 0.45; }
}
@media (forced-colors: active) { .alert-field, .hero--alert::before { display: none; } }
@media print { .alert-field, .hero--alert::before { display: none; } }
.service-hero-card {
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(1, 58, 96, 0.72), rgba(0, 20, 37, 0.86)); box-shadow: var(--shadow-lg);
}
.service-hero-card--portrait {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(8.5rem, 0.8fr);
  align-items: center; overflow: hidden; padding: 0;
}
.service-hero-portrait {
  position: relative; grid-column: 2; grid-row: 1; min-width: 0; margin: 0;
  padding: 0.75rem 0.75rem 0.75rem 0;
}
.service-hero-photo-wrap {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 2 / 3;
  border-radius: calc(var(--radius-lg) - 0.45rem); background: var(--navy-800);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.service-hero-photo-wrap::after {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 20, 37, 0.82) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.service-hero-photo-wrap picture { display: block; width: 100%; height: 100%; }
.service-hero-photo {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%;
  filter: saturate(0.9) contrast(1.03); transform-origin: 50% 35%;
}
/* Binary rain behind the transparent portrait (canvas injected by portrait-rain.js only when motion is allowed) */
.service-hero-photo { position: relative; z-index: 1; }
.portrait-rain {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 62%, var(--navy-800) 100%);
}
.portrait-rain.is-on { opacity: 1; }
@media (forced-colors: active) { .portrait-rain { display: none; } }
@media print { .portrait-rain { display: none; } }
.service-hero-portrait figcaption {
  position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem; left: 0.75rem;
  display: flex; flex-direction: column; align-items: start; gap: 0.15rem;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 20, 37, 0.65);
}
.service-hero-portrait figcaption strong { font-size: 0.9rem; line-height: 1.2; }
.service-hero-portrait figcaption span { color: var(--navy-100); font-size: 0.7rem; line-height: 1.25; }
.service-hero-card--portrait .service-hero-details {
  grid-column: 1; grid-row: 1; min-width: 0;
  padding: 1.25rem 1rem 1rem clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}
.service-hero-kicker { color: var(--cyan-300); font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.service-hero-card dl { display: grid; gap: 0; margin-top: 0.75rem; }
.service-hero-card dl > div { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.service-hero-card dl > div:last-child { border-bottom: 0; }
.service-hero-card dt { color: var(--navy-300); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; }
.service-hero-card dd { margin: 0.25rem 0 0; color: #fff; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }

@media (max-width: 30em) {
  .service-hero-card--portrait { grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.72fr); }
  .service-hero-card--portrait .service-hero-details { padding: 1rem 0.75rem 0.75rem 1rem; }
  .service-hero-card--portrait dl > div { padding: 0.75rem 0; }
  .service-hero-portrait figcaption span { display: none; }
}

.content-split { display: grid; gap: 1rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
.content-split .section-head { margin-bottom: 0; }
.copy-rich { max-width: 48rem; }
.copy-rich > * + * { margin-top: 1rem; }
.copy-rich h2 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.copy-rich h3 { margin-top: 2rem; font-size: var(--fs-md); }
.copy-rich ul, .copy-rich ol { margin-left: 1.25rem; }
.copy-rich li + li { margin-top: 0.375rem; }
.copy-rich dl { margin-top: 1.5rem; }

.card-grid { display: grid; gap: 1rem; }
.info-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.04);
}
.info-card h3 { font-size: 1.125rem; }
.info-card p { margin-top: 0.625rem; color: var(--text-muted); font-size: 0.95rem; }
.card-label { display: inline-flex; margin-bottom: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--blue-50); color: var(--blue-700); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.ai-landscape { overflow: hidden; }
.ai-landscape .section-head { max-width: 55rem; }
.ai-system-grid { display: grid; gap: 0.75rem; list-style: none; }
.ai-system-card {
  position: relative; overflow: hidden; min-width: 0; padding: 1.125rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 55, 0.035);
}
.ai-system-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan-400), var(--blue-600));
}
.ai-system-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.75rem; }
.ai-system-card h3 { color: var(--heading); font-size: 1.0625rem; }
.ai-system-card-head span {
  color: var(--blue-700); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.ai-system-card p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; }
.ai-landscape-note {
  max-width: 58rem; margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--cyan-500);
  color: var(--text-muted); font-size: var(--fs-sm);
}

.related-grid { display: grid; gap: 1rem; }
.related-card {
  display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; color: var(--text); text-decoration: none;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--shadow-md); text-decoration: none; }
.related-card h3 { color: var(--heading); font-size: 1.125rem; }
.related-card p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.9375rem; }
.related-card > span { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 1.25rem; color: var(--link); font-weight: 650; }
.related-card .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
.related-card:hover .icon { transform: translateX(3px); }

.legal-page .container { max-width: 56rem; }
.legal-data { display: grid; gap: 0; border-top: 1px solid var(--border); }
.legal-data > div { display: grid; gap: 0.25rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.legal-data dt { color: var(--text-muted); font-size: 0.8125rem; }
.legal-data dd { font-weight: 600; }
.review-note { padding: 1rem 1.125rem; border-left: 3px solid var(--cyan-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--blue-50); color: var(--navy-900); }

.site-nav a[aria-current="page"], .site-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }

@media (min-width: 48em) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legal-data > div { grid-template-columns: minmax(10rem, 0.4fr) 1fr; gap: 1.5rem; }
}
@media (min-width: 64em) {
  .content-split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}
@media (min-width: 75em) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}