/* ============================================================================
   hochzwei.tech 2026 Rebrand: Core Design System
   ----------------------------------------------------------------------------
   New electric-blue + lime brand (replaces the navy/green system in
   colors_and_type.css). Self-contained so the redesign can roll out page by
   page without touching the live pages still on the old brand.

   Sections:
     1. Fonts (self-hosted)
     2. Theme tokens (light + dark)
     3. Reset and base
     4. Layout primitives (container, section, bands)
     5. Utilities (mono label, marker highlight, 4-corner brackets, a11y)
     6. Background grid layer (hover-reactive)
     7. Header / nav / theme toggle
     8. Buttons
     9. Marquee
    10. Footer
    11. Responsive

   NOTE: no em-dashes or en-dashes anywhere (brand rule), comments included.
   ========================================================================== */

/* 1. FONTS ================================================================= */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. THEME TOKENS ========================================================== */
:root {
  /* Raw brand palette (from the Figma _HOME_lightMode export) */
  --blue:        #294CEC;
  --blue-strong: #1F43FF;
  --lime:        #D9F55C;
  --ink:         #0C0E15;
  --off:         #F7F8FA;
  --white:       #FFFFFF;
  --grey:        #5C5D5D;
  --grey-line:   #C7CEDB;
  --grey-soft:   #DBE0E9;

  /* Typography */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One deliberate ramp (px: mobile 390 / desktop 1440 / max 2560). Every role
     uses exactly one of these, fluidly scaled. No per-component size overrides. */
  --fs-display: clamp(2.475rem, 1.728rem + 3.084vw, 5.4rem);  /* hero +20%     39.6 / 72 / 86.4 */
  --fs-h1:      clamp(1.6875rem, 1.29rem + 1.62vw, 2.875rem); /* section head  27 / 44 / 46 */
  --fs-h2:      clamp(1.375rem, 1.24rem + 0.57vw, 1.875rem);  /* card title    22 / 28 / 30 */
  --fs-h3:      clamp(1.1875rem, 1.12rem + 0.29vw, 1.5rem);   /* small title   19 / 22 / 24 */
  --fs-lead:    clamp(1.0625rem, 1.02rem + 0.19vw, 1.25rem);  /* lead / intro  17 / 19 / 20 */
  --fs-body:    clamp(0.9375rem, 0.89rem + 0.19vw, 1.0625rem);/* body          15 / 17 / 17 */
  --fs-eyebrow: clamp(0.75rem, 0.71rem + 0.1vw, 0.8125rem);   /* mono Dachzeile 12 / 13 / 13 */
  --fs-label:   0.75rem;                                       /* tag / meta    12 (fixed) */
  --fs-nav:     0.9375rem;                                     /* nav / small btn 15 (fixed) */
  --fs-btn:     clamp(1rem, 0.95rem + 0.19vw, 1.125rem);      /* button        16 / 18 / 18 */

  /* One heading leading for every section headline + card title (the
     "hochzwei, so wie Sie es brauchen" line-height). Body/lead keep their own. */
  --lh-head: 1.22;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 3.05rem + 2.5vw, 6rem); /* 64 / 85 / 96: even section rhythm, no 236px mega-seams */

  /* Radii: nur 2 echte Werte (vorher 4 Namen fuer 2 Werte: md=lg, pill=sm). */
  --radius-sm: 8px;
  --radius-lg: 13px;

  /* Layout */
  --container-max: 100%; /* full-bleed: only the side padding constrains the content */
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 7.5rem);
  --grid-fade: 100px; /* horizontal fade-out of the background grid */
  --grid-cell: 112px;

  /* Motion */
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Semantic tokens: LIGHT (default, equals the PDF) ---- */
  --c-bg:           var(--off);
  --c-surface:      var(--white);
  --c-surface-2:    var(--off);
  --c-text:         var(--ink);
  --c-text-muted:   var(--ink);     /* Deep Navy: no graphite for text/Dachzeile/meta */
  --c-text-invert:  var(--off);
  --c-border:       var(--grey-line);
  --c-border-soft:  var(--grey-soft);

  --c-brand:        var(--blue);
  --c-brand-ink:    var(--off);     /* text on brand blue */
  --c-accent:       var(--lime);
  --c-accent-ink:   var(--ink);     /* text on lime */

  --c-band-blue:    var(--blue);
  --c-glass:        rgba(255, 255, 255, 0.60);
  --c-glass-top:    rgba(255, 255, 255, 0.60);
  --c-glass-bottom: rgba(255, 255, 255, 0.08);
  --c-glass-border: rgba(12, 14, 21, 0.08);

  --grid-line:      rgba(12, 14, 21, 0.21);
  --grid-glow:      rgba(41, 76, 236, 0.33);
  --grid-glow-2:    rgba(217, 245, 92, 0.25);

  --shadow-card: 0 1px 3px rgba(12, 14, 21, 0.08), 0 8px 24px rgba(12, 14, 21, 0.05);
  --shadow-pop:  0 14px 44px rgba(41, 76, 236, 0.20);

  /* Legacy aliases for the shared consent banner (styles/consent.css) so it
     renders in the new brand and stays theme-aware (these point at --c-* which
     flip in dark mode). */
  --bg-1: var(--c-surface);
  --bg-2: var(--c-surface-2);
  --fg-1: var(--c-text);
  --fg-2: var(--c-text-muted);
  --fg-3: var(--c-text-muted);
  --fg-link: var(--c-brand);
  --fg-accent: var(--c-brand);
  --border-1: var(--c-border);
  --border-2: var(--c-border);
  --border-strong: var(--c-text);
  --hz-green: var(--c-brand);
  --hz-green-900: var(--blue-strong);
  --hz-green-light: var(--c-accent);
  --hz-white: var(--white);
  --hz-grey-300: var(--c-border);
  --font-sans: var(--font-display);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-h4: 1.25rem;
  --lh-normal: 1.5;
  --lh-snug: 1.2;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;

  color-scheme: light;
}

/* Consent banner: compact + on-brand (overrides the shared consent.css size). */
body .hz-consent { max-width: 460px; padding: 18px 20px 16px; box-shadow: var(--shadow-pop); }
body .hz-consent-btn--primary { font-weight: 600; }

/* ---- Semantic tokens: DARK (derived; no dark reference in the PDF) ---- */
[data-theme="dark"] {
  --c-bg:           #0B0D14;
  --c-surface:      #15181F;
  --c-surface-2:    #11141B;
  --c-text:         #EEF1F6;
  --c-text-muted:   #9AA3B4;
  --c-text-invert:  #EEF1F6;
  --c-border:       rgba(255, 255, 255, 0.14);
  --c-border-soft:  rgba(255, 255, 255, 0.09);

  --c-brand:        #3D5BFF;        /* a touch brighter so it reads on dark */
  --c-brand-ink:    #F4F6FF;
  --c-accent:       var(--lime);
  --c-accent-ink:   var(--ink);

  --c-band-blue:    #294CEC;        /* vibrant blue band on dark (brand rule) */
  --c-glass:        rgba(13, 16, 24, 0.52);
  --c-glass-top:    rgba(13, 16, 24, 0.52);
  --c-glass-bottom: rgba(13, 16, 24, 0.05);
  --c-glass-border: rgba(255, 255, 255, 0.10);

  --grid-line:      rgba(255, 255, 255, 0.11);
  --grid-glow:      rgba(99, 126, 255, 0.35);
  --grid-glow-2:    rgba(217, 245, 92, 0.18);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-pop:  0 16px 48px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Lime pages (Über uns, Karriere): set via data-accent="lime" on <html>. Lime is
   used as a FILL (boxes, bands, footer) with ink text, never as text on a light
   background (contrast); functional text and links stay ink/blue. */
[data-accent="lime"] .marker:not(.marker--ink):not(.marker--lime) { background: var(--lime); color: var(--ink); }
[data-accent="lime"] .btn:not(.btn--ghost):not(.btn--dark):not(.btn--lime) {
  --btn-bg: var(--lime); --btn-fg: var(--ink); border-color: var(--ink);
}
[data-accent="lime"] .footer { background: var(--lime); color: var(--ink); border-top: 1px solid var(--ink); }
[data-accent="lime"] .footer a,
[data-accent="lime"] .footer__brand .logo,
[data-accent="lime"] .footer__col-title,
[data-accent="lime"] .footer__cert .mono-label { color: var(--ink); }
[data-accent="lime"] .footer__brand .logo sup { color: var(--blue); }
[data-accent="lime"] .footer__bottom { border-top-color: rgba(12, 14, 21, 0.2); }
[data-accent="lime"] .footer__badge { filter: brightness(0); }
[data-accent="lime"] .footer__logo img { filter: brightness(0); height: 1.7rem; width: auto; }

/* 3. RESET AND BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Safety net: einzelne zu breite Elemente duerfen die Seite nicht horizontal
   pannable machen (Mobil "verliert" sonst die Seite). clip statt hidden:
   erzeugt KEINEN Scroll-Container, position:sticky funktioniert weiter. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  /* Positioned so the global .hz-grid--page layer (absolute, inset 0) spans the
     full document height instead of only the initial viewport. */
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.33;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
/* Responsive-Standard: width/height-Attribute (CLS-Reservierung) duerfen die
   gerenderte Hoehe nicht festnageln, sonst schlagen sie CSS-aspect-ratio-Crops
   (ka-collage: Attribut-Hoehe 1200px statt 4:3). Explizite CSS-Hoehen (.logo
   img etc.) gewinnen weiterhin gegen dieses auto. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 2px; }

/* 4. LAYOUT PRIMITIVES ===================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Sections are opaque by default so they cover the global page grid; sections
   that want the grid opt in with .section--on-grid (transparent). Colour bands
   (.band--blue/.band--lime) and page CSS override the background as before. */
.section { position: relative; padding-block: var(--space-section); background: var(--c-bg); }
.section--on-grid { background: transparent; }
.section > .container { position: relative; z-index: 1; }

/* Full-bleed coloured bands keep their own inner container. */
.band--blue {
  background: var(--c-band-blue);
  color: var(--c-brand-ink);
}
.band--blue h2, .band--blue h3 { color: var(--c-brand-ink); }
/* Der globale Fokus-Ring ist blau (--c-brand) und damit auf einem Blau-Band
   praktisch unsichtbar (in Light Mode sogar exakt dieselbe Farbe wie der
   Band-Hintergrund). Auf Blau-Baendern deshalb Lime, analog zum bestehenden
   Pillar-Link-Muster (a.pillar__media:focus-visible). */
.band--blue :focus-visible { outline-color: var(--c-accent); }

/* Lime band: same primitive as band--blue, ink text. Lime in light and dark. */
.band--lime {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.band--lime h2, .band--lime h3 { color: var(--c-accent-ink); }
.band--lime .mono-label { color: var(--c-accent-ink); opacity: 0.8; }
.band--lime .sec-head__intro { color: var(--c-accent-ink); opacity: 0.9; }
/* Buttons on lime: ink fill so they stay legible (ghost/dark keep their own look). */
.band--lime .btn:not(.btn--dark):not(.btn--ghost) {
  --btn-bg: var(--ink); --btn-fg: var(--off); border-color: var(--ink);
}

/* 5. UTILITIES ============================================================= */
/* Monospace eyebrow / Dachzeile label. No brackets: brackets belong on tags. */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 3px;
  text-transform: none;
  color: var(--c-text-muted);
  display: inline-block;
}
.band--blue .mono-label { color: var(--c-brand-ink); opacity: 0.85; }

/* Marker-pen highlight behind a run of words (the signature look). */
.marker {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.marker--lime { background: var(--c-accent); color: var(--blue); }   /* lime box, digital-blue type */
.marker--ink  { background: var(--ink); color: var(--off); }
/* On a vibrant-blue band the highlight inverts: lime box, blue type. */
.band--blue .marker:not(.marker--lime):not(.marker--ink) { background: var(--c-accent); color: var(--blue); }
/* On a lime band the highlight is an ink box with lime type. */
.band--lime .marker { background: var(--ink); color: var(--lime); }

/* 4-corner bracket frame: chunky solid tabs with rounded outer corners
   (the crosshair motif). Apply .brackets to a positioned wrapper. Colour via --bk. */
.brackets {
  position: relative;
  --bk: var(--c-brand); /* blue on light backgrounds; lime is set where the bg is blue */
  --bk-size: 44px;
  --bk-off: calc(var(--bk-size) * -0.089); /* arm straddles the edge 50/50, centered over the picture corner (team photos override) */
  --bk-img: url("../assets/visuals/bracket-corner.svg");
}
.brackets::before,
.brackets::after,
.brackets__x::before,
.brackets__x::after {
  content: "";
  position: absolute;
  width: var(--bk-size);
  height: var(--bk-size);
  background: var(--bk);
  -webkit-mask: var(--bk-img) center / contain no-repeat;
          mask: var(--bk-img) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
  transition: top var(--transition), left var(--transition), right var(--transition), bottom var(--transition);
}
.brackets::before    { top: var(--bk-off);    left: var(--bk-off); }                          /* top-left */
.brackets__x::before { top: var(--bk-off);    right: var(--bk-off);  transform: scaleX(-1); } /* top-right */
.brackets__x::after  { bottom: var(--bk-off); left: var(--bk-off);   transform: scaleY(-1); } /* bottom-left */
.brackets::after     { bottom: var(--bk-off); right: var(--bk-off);  transform: scale(-1, -1); } /* bottom-right */
.brackets__x { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.brackets--lime { --bk: var(--c-accent); }
.brackets--white { --bk: var(--white); }
/* Dedicated thicker corner bracket for the hero title image (~10% thicker arms). */
.brackets--title { --bk-img: url("../assets/visuals/bracket-corner-title.svg"); }
/* Bracket snap: corners animate inward on hover. */
.brackets:hover { --bk-off: 7px; }

/* --- Two-image swap (graded B/W -> colour, or tile blue -> white) -----------
   The base image sits in flow; the .swap__over layer stacks on top and fades in.
   The corner marks are z-index 2 (above), the overlay is z-index 1, so the
   brackets always frame both images. The reveal trigger and the touch fallback
   are defined per page (index.css / uu.css) because the hover target differs
   (the media frame itself vs the whole card). */
.swap { position: relative; }
.swap picture { display: contents; }
.swap__over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 450ms ease;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .swap__over { transition: none; } }

/* --- Image lightbox (shared by home + ueber-uns; JS in scripts/lightbox.js) --
   Tap any bracketed photo to see it enlarged in colour. */
.hz-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.hz-lightbox.is-open { display: flex; }
.hz-lightbox__backdrop { position: absolute; inset: 0; background: rgba(12, 14, 21, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hz-lightbox__fig { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: min(92vw, 1100px); max-height: 90vh; }
.hz-lightbox__img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-lg); background: var(--c-surface-2); }
.hz-lightbox__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-accent); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-pop); }
.hz-lightbox__cap { display: grid; gap: var(--space-1); text-align: center; color: var(--off); }
.hz-lightbox__eyebrow { color: var(--c-accent); }
.hz-lightbox__text { font-size: var(--fs-lead); font-weight: 600; }
.hz-lightbox.is-open .hz-lightbox__fig { animation: hz-lb-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes hz-lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hz-lightbox.is-open .hz-lightbox__fig { animation: none; } }
/* Keyboard focus ring for any lightbox-able media. */
.hero__media:focus-visible, .approach__media:focus-visible, .person__photo:focus-visible,
.tm-card__photo:focus-visible, .tl-photo:focus-visible, .work__media:focus-visible,
.value-card__media:focus-visible, .quote__media:focus-visible,
.eg-person__photo:focus-visible, .ka-collage__frame:focus-visible, .ka-region__frame:focus-visible,
.hl__media:focus-visible, .case-panel__media:focus-visible, .sec-case__media:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }

/* "Alle Bilder anklickbar" hint under the hero image (mobile only). */
.hero__taphint { display: none; }
@media (max-width: 640px) {
  .hero__taphint { display: block; order: 2; margin-top: var(--space-2); color: var(--c-text-muted); }
}

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--c-brand); color: var(--c-brand-ink);
  padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* 6. BACKGROUND GRID LAYER ================================================= */
/* A decorative layer behind a section's content. Faint base lines are always
   visible; JS lights individual cells near the pointer. The whole layer fades
   out 100px on the left and right edges for the floating "3D layer" look. */
.hz-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--grid-fade),
      #000 calc(100% - var(--grid-fade)), transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0, #000 var(--grid-fade),
      #000 calc(100% - var(--grid-fade)), transparent 100%);
}
/* Static grid lines */
.hz-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  /* Left-aligned like the JS canvas lattice (which draws from x=0). Centering
     would leave a narrow, clipped half-cell at both edges on pages without the
     canvas (e.g. karriere, which loads no grid script). */
  background-position: left top;
}
/* When JS mounts a canvas, it draws the lines + lit cells; drop the CSS lines. */
.hz-grid canvas { position: absolute; inset: 0; }
.hz-grid.js-grid::before { display: none; }
/* Global page layer: ONE grid behind the whole page, as the first child of
   <body> (body is position:relative, so inset:0 spans the document). The CSS
   fallback tiles above are document-anchored; the JS canvas is viewport-fixed
   and redrawn with the scroll offset so its lattice stays document-anchored
   too. Sections cover it unless they carry .section--on-grid. */
.hz-grid--page canvas { position: fixed; }

/* 7. HEADER / NAV / THEME TOGGLE =========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* iOS (viewport-fit=cover): push the bar below the notch while the blur layers
     below still cover the safe area, so the blurred background reaches the very top. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 16px;
  border-bottom: 0;
}
/* Pure transparent glass: NO colour tint at all, just a backdrop blur whose
   STRENGTH ramps from heavy at the top (status bar / Dynamic Island + control row)
   to nothing below the bar. Two stacked layers fake the blur GRADIENT: ::before is
   a light blur across the whole height that dissolves at the bottom (so the
   page-to-nav seam is invisible); ::after adds extra blur concentrated up top and,
   because it paints over ::before, the two compound there into a heavy frost.
   Neither layer carries a background-color, so only the blur reads, never a fill. */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: -38px;                  /* extend the blur + its fade-out below the bar so the seam never shows */
  z-index: -1;
  pointer-events: none;
}
.site-header::before {            /* light base blur, full height, ramps to zero across the lower bar */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
}
.site-header::after {             /* heavy blur concentrated over the status bar / Dynamic Island; compounds over ::before */
  /* 30px so the island zone reads as a dense frost, not a light wash. The long fade
     (full to 22%, gone by 80%) spreads the 30px -> 8px drop over the whole bar so the
     stronger top still transitions smoothly into the light base, no visible band edge. */
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 80%);
  /* Below the blur alone, bold hero highlights (the blue .marker boxes) still smear
     into a visible halo as they scroll past the status bar / Dynamic Island. Paint
     that exact strip solid so nothing ever shows through it, blurred or not; the
     blur below keeps doing its job for the rest of the bar. */
  background: linear-gradient(to bottom,
      var(--c-bg) 0,
      var(--c-bg) env(safe-area-inset-top, 0px),
      transparent calc(env(safe-area-inset-top, 0px) + 20px));
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 84px;
  /* keep the normal container gutter, but grow it if a landscape notch/Island
     needs more room. max() preserves --container-pad (env insets are 0 in portrait). */
  padding-left: max(var(--container-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--container-pad), env(safe-area-inset-right, 0px));
}
.site-header__inner > .logo { flex: 1 1 0; }
.site-header__inner > .nav { flex: 0 1 auto; }   /* centered between the two flex:1 sides */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 1.7rem; width: auto; }
.logo__light { display: block; }
.logo__dark { display: none; }
[data-theme="dark"] .logo__light { display: none; }
[data-theme="dark"] .logo__dark { display: block; }

/* Scrolled state: swap the full wordmark for the compact [2] mark
   (blue in light mode, lime in dark mode). Toggled by scripts/home.js.
   Marks are larger than the wordmark; selector beats `.logo img` height. */
.logo img.logo__mark { display: none; height: 2.6rem; }
.site-header.is-scrolled .logo__light,
.site-header.is-scrolled .logo__dark { display: none; }
/* Scrolled [2] mark recolours by the band under the nav (JS sets data-nav-bg):
   default bg -> blue, over a blue band -> white, over a lime band -> black. */
.site-header.is-scrolled .logo__mark--blue { display: block; }
.site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--blue { display: none; }
.site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--white { display: block; }
.site-header.is-scrolled[data-nav-bg="lime"] .logo__mark--blue { display: none; }
.site-header.is-scrolled[data-nav-bg="lime"] .logo__mark--black { display: block; }
/* Home (no lime accent) in light mode: the scrolled [2] mark stays black instead of
   blue, except over a blue band where it flips to white for contrast. */
html[data-theme="light"]:not([data-accent]) .site-header.is-scrolled .logo__mark--blue { display: none; }
html[data-theme="light"]:not([data-accent]) .site-header.is-scrolled .logo__mark--black { display: block; }
html[data-theme="light"]:not([data-accent]) .site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--black { display: none; }
html[data-theme="light"]:not([data-accent]) .site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--white { display: block; }
/* Dark mode: lime mark on every page, whatever the band. */
[data-theme="dark"] .site-header.is-scrolled .logo__mark--blue,
[data-theme="dark"] .site-header.is-scrolled .logo__mark--white,
[data-theme="dark"] .site-header.is-scrolled .logo__mark--black { display: none; }
[data-theme="dark"] .site-header.is-scrolled .logo__mark--lime { display: block; }
/* ...except over a lime band in dark mode: lime-on-lime is invisible, so the
   mark goes deep navy (black) instead. */
[data-theme="dark"] .site-header.is-scrolled[data-nav-bg="lime"] .logo__mark--lime { display: none; }
[data-theme="dark"] .site-header.is-scrolled[data-nav-bg="lime"] .logo__mark--black { display: block; }
/* Ueber uns (lime page) in dark mode: the scrolled [2] mark is always blue. */
[data-theme="dark"][data-accent="lime"] .site-header.is-scrolled .logo__mark--lime,
[data-theme="dark"][data-accent="lime"] .site-header.is-scrolled .logo__mark--black { display: none; }
[data-theme="dark"][data-accent="lime"] .site-header.is-scrolled .logo__mark--blue { display: block; }

.nav-cluster { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
}
.nav__item {
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  padding: 0.5em 0.85em;
  border-radius: 6px;
  color: var(--c-text);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav__item:hover { background: color-mix(in srgb, var(--c-brand) 12%, transparent); }
.nav__item--active { background: var(--c-brand); color: var(--c-brand-ink); }
.nav__cta {
  font-family: var(--font-display);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.nav__cta:hover { filter: brightness(1.08); background: var(--c-brand); }
/* Lime pages (Über uns, Karriere): nav active item + CTA turn lime with ink type. */
[data-accent="lime"] .nav__item--active { background: var(--lime); color: var(--ink); }
[data-accent="lime"] .nav__item:hover { background: color-mix(in srgb, var(--lime) 24%, transparent); }
[data-accent="lime"] .nav__cta { background: var(--lime); color: var(--ink); }
[data-accent="lime"] .nav__cta:hover { background: var(--lime); filter: brightness(1.04); }

/* Light/dark toggle */
.theme-toggle {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.theme-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Burger (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: var(--c-brand);
  border: none;
  border-radius: var(--radius-sm);
}
.nav-toggle span { width: 22px; height: 2px; background: var(--c-brand-ink); transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 8. BUTTONS =============================================================== */
.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: var(--c-brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7em 1.4em;
  min-height: 52px;
  border: 1px solid var(--c-brand-ink);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  white-space: normal;           /* allow wrapping to two lines when the label is long */
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--lime { --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink); border-color: var(--c-accent-ink); }
.btn--ghost { --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--ink); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--off); border-color: var(--off); }
.btn--sm { min-height: 44px; font-size: var(--fs-nav); padding: 0.55em 1em; border-radius: var(--radius-sm); }
.band--blue .btn:not(.btn--lime) { --btn-bg: var(--white); --btn-fg: var(--blue); }
.recruit__cta .arrow { display: inline-block; }

/* 9. MARQUEE =============================================================== */
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  width: max-content;
  animation: hz-marquee var(--marquee-dur, 32s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes hz-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* 10. FOOTER =============================================================== */
.footer {
  /* Positioned so the footer paints ABOVE the global .hz-grid--page layer
     (positioned z-0): backgrounds of non-positioned blocks would paint below
     it and the grid lines would shine through (visible on the lime footer). */
  position: relative;
  background: var(--c-band-blue);
  color: var(--c-brand-ink);
  padding-block: var(--space-8);
}
.footer a { color: var(--c-brand-ink); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.1fr;
  gap: var(--space-7);
}
.footer__brand .logo { color: var(--c-brand-ink); margin-bottom: var(--space-4); }
.footer__brand .logo sup { color: var(--c-accent); }
.footer__addr { font-family: var(--font-mono); font-size: var(--fs-label); opacity: 0.9; line-height: 1.8; }
.footer__addr a { display: inline-flex; align-items: center; gap: 0.6em; }
.footer__col-title { font-size: var(--fs-h3); font-weight: 700; color: var(--c-accent); margin-bottom: var(--space-4); }
.footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a { font-size: var(--fs-body); opacity: 0.9; transition: opacity var(--transition); }
.footer__list a:hover { opacity: 1; text-decoration: underline; }
.footer__cert { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__cert .mono-label { color: var(--c-brand-ink); }
.footer__badge { width: 180px; max-width: 100%; height: auto; filter: brightness(0) invert(1); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.8;
  text-align: center;
}

/* 11. SHARED SECTION + SUB-PAGE COMPONENTS ================================
   Promoted out of the home page so every redesigned page can reuse them. */
/* Section head */
.sec-head { max-width: 64ch; margin-bottom: var(--space-8); }
.sec-head__title { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; margin-bottom: var(--space-4); text-wrap: balance; }
.sec-head__kicker { margin-bottom: var(--space-4); color: var(--c-text); }
.sec-head__intro { font-size: var(--fs-lead); color: var(--c-text); }
.band--blue .sec-head__intro { color: var(--c-brand-ink); opacity: 0.92; }
.sec-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); align-items: start; }
.sec-head--split .sec-head__title { grid-column: 1 / -1; }
/* ============================================================================
   Sektions-Koepfe: nur zwei Typen (Single-Source, gilt fuer alle Seiten).
   Typ S = .sec-head          gestapelt: Eyebrow -> Titel -> optional Intro.
   Typ N = .sec-head--beside  Head links (~35%), Body rechts, Unterkanten buendig.
                              + .sec-head--action fuer einen Button rechts.
   ========================================================================== */
/* Typ S zentriert (z.B. "Kurz gerechnet"). */
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center .sec-head__title { margin-bottom: 0; }
.sec-head--center .sec-head__intro { margin-inline: auto; }

/* Typ N: Head links, Beitext rechts, an der Unterkante buendig (align: end). */
.sec-head--beside {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.4fr);
  gap: var(--space-6) var(--space-7);
  align-items: end;
  margin-bottom: var(--space-8);
}
.sec-head--beside .sec-head { margin-bottom: 0; max-width: none; }
.sec-head--beside .sec-head__title { margin-bottom: 0; }
.sec-head__body { display: grid; gap: var(--space-4); max-width: 54ch; }
.sec-head__body p { font-size: var(--fs-lead); color: var(--c-text); text-wrap: pretty; }
.band--blue .sec-head__body p { color: var(--c-brand-ink); opacity: 0.92; }
.band--lime .sec-head__body p { color: var(--c-accent-ink); opacity: 0.9; }
/* Action-Variante: dritte Spalte fuer einen Button, unten-buendig (Die Menschen). */
.sec-head--action { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.4fr) auto; }
.sec-head--action .btn { justify-self: end; align-self: end; }

/* Card grids */
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--space-6); grid-template-columns: repeat(4, 1fr); }

/* Outlined card for blue bands (shared: ai-copilot Hebel + power-platform
   Fundament). Graphic-free: optional mono index, title, body, bracket tags. */
.lever {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  color: var(--c-brand-ink);
}
.lever__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; color: var(--c-accent); }
.lever__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); }
.lever__body { font-size: var(--fs-body); opacity: 0.92; flex: 1; }
.lever__tags { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.lever__tag { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; text-transform: uppercase; opacity: 0.85; }
.lever__tag::before { content: "["; margin-right: 0.2em; }
.lever__tag::after  { content: "]"; margin-left: 0.2em; }

/* Mono tag label: no brackets, no pill. Uppercase, tracked, in the card's text colour. */
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--blue);            /* blue text on light, lime on dark (below) */
  white-space: nowrap;
}
/* Tags: bracket annotation in a contrasting colour (black on light, white on
   dark); the inverse of Dachzeilen, which are bare. */
.tag::before { content: "["; margin-right: 0.2em; color: var(--ink); }
.tag::after  { content: "]"; margin-left: 0.2em; color: var(--ink); }
[data-theme="dark"] .tag { color: var(--lime); }
[data-theme="dark"] .tag::before,
[data-theme="dark"] .tag::after { color: var(--white); }

/* Sub-page hero (compact; service, content and legal pages) */
.subhero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-8); }
.subhero__title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; margin-bottom: var(--space-5); max-width: 20ch; }
.subhero__lead { font-size: var(--fs-lead); color: var(--c-text); max-width: 60ch; }

/* Breadcrumb (pairs with BreadcrumbList JSON-LD) */
.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--space-5); display: flex; gap: 0.6em; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-brand); }
.breadcrumb__sep { opacity: 0.5; }

/* Long-form prose (Impressum, Datenschutz) */
.prose { max-width: 75ch; }
.prose h2 { font-size: var(--fs-h2); font-weight: 700; margin: var(--space-8) 0 var(--space-4); }
.prose h3 { font-size: var(--fs-h3); font-weight: 700; margin: var(--space-6) 0 var(--space-3); }
.prose p { font-size: var(--fs-body); color: var(--c-text); margin-bottom: var(--space-4); line-height: 1.6; }
.prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { margin: 0 0 var(--space-4) var(--space-5); list-style: disc; }
.prose li { font-size: var(--fs-body); color: var(--c-text); margin-bottom: var(--space-2); }

/* Form controls (Erstgespräch, contact forms) */
.form { display: grid; gap: var(--space-5); max-width: 640px; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-muted); }
.input, .textarea, .select {
  font: inherit; font-size: var(--fs-body);
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 0.8em 1em; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 22%, transparent);
}
.textarea { min-height: 160px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.field--check input { margin-top: 0.2em; width: 18px; height: 18px; flex: none; accent-color: var(--c-brand); }

/* Comparison: "Üblich am Markt" vs hochzwei. Honest, neutral sub-page differentiation.
   Three columns (dimension | them | us); the hochzwei column carries a brand bar. */
.compare { border-top: 1px solid var(--c-border); }
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 1.35fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.compare__row--head { padding: var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--c-border); }
.compare__head { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; text-transform: uppercase; }
.compare__head--them { color: var(--c-text-muted); opacity: 0.75; }
.compare__head--us { color: var(--c-brand); }
.compare__dim { font-weight: 700; line-height: var(--lh-head); }
.compare__them { color: var(--c-text-muted); opacity: 0.9; }
.compare__us { color: var(--c-text); font-weight: 600; position: relative; padding-left: var(--space-4); }
.compare__us::before { content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 3px; border-radius: 2px; background: var(--c-brand); }
@media (max-width: 640px) {
  .compare__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .compare__row--head { display: none; }
  .compare__dim { margin-bottom: var(--space-1); }
  .compare__them { padding-left: var(--space-4); position: relative; }
  .compare__them::before { content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 3px; border-radius: 2px; background: var(--c-border); }
}

/* 12. RESPONSIVE =========================================================== */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Typ N stapelt: Head ueber Body, 44px dazwischen (space-6 + space-3).
     Eyebrow->H2 bleibt der normale kicker-Abstand (16px, ab <=640 dann 8px). */
  .sec-head--beside, .sec-head--action { grid-template-columns: 1fr; row-gap: calc(var(--space-6) + var(--space-3)); }
  .sec-head--action .btn { justify-self: start; align-self: start; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .nav[data-open] {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--container-pad);
    right: var(--container-pad);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
    background: var(--c-surface);
  }
  .nav[data-open] .nav__item { padding: 0.8em 1em; }
  /* Erstgespraech CTA in the burger menu: button-width, not stretched full-width. */
  .nav[data-open] .nav__cta { align-self: flex-start; }
  /* Dark + lime page (Ueber uns): burger keeps its default blue; the light/dark
     toggle goes blue too (never lime), at any scroll position. */
  [data-theme="dark"][data-accent="lime"] .theme-toggle { border-color: var(--c-brand); color: var(--c-brand); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cert { grid-column: 1 / -1; }
  /* "Unternehmen" ist die laengste Spalte (6 Links, teils zweizeilig) und
     zieht die Auto-Placement-Zeile in die Laenge; "Rechtliches" wuerde dadurch
     erst unterhalb der vollen Unternehmen-Hoehe starten statt gleich unter
     Leistungen. Explizite Platzierung: Leistungen und Rechtliches teilen sich
     Spalte 1 (Zeile 1 / Zeile 2), Unternehmen steht daneben in Spalte 2 und
     spannt beide Zeilen. */
  .footer__col:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .footer__col:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
  .footer__col:nth-of-type(3) { grid-column: 1; grid-row: 2; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sec-head--split { grid-template-columns: 1fr; }

  /* #8 Mobil: engerer Abstand zwischen Head und den zugehoerigen Texten,
     ueber alle Sektionen (Section-Head -> Intro/Inhalt). */
  .sec-head { margin-bottom: var(--space-6); }
  .sec-head__kicker { margin-bottom: var(--space-2); }
  /* H2->Body ueberall 20px mobil (Typ S). Kein Skalen-Token trifft exakt
     20px (space-3=12, space-4=16); bewusster Fixwert. */
  .sec-head__title { margin-bottom: 20px; }
  .sec-head__intro { margin-top: 0; }
  /* Typ N (Head+Body, Desktop nebeneinander) stapelt <=1024px mit 44px
     row-gap (siehe oben); auf Handy-Breite denselben H2->Body-Wert wie
     Typ S: 20px. */
  .sec-head--beside, .sec-head--action { row-gap: 20px; }

  /* Type sizes all come from the fluid tokens now (no per-breakpoint overrides). */
  /* Mono Dachzeilen: lighter tracking on phones so they stay legible at small size. */
  .mono-label { letter-spacing: 2px; }
  /* Background grid fainter on phones so it doesn't compete with the content. */
  .hz-grid { opacity: 0.55; }

  /* Buttons: a bit more compact on phones (the size lives in --fs-btn). */
  .btn { min-height: 46px; padding: 0.6em 1.1em; letter-spacing: 0.5px; }
  .btn--sm { min-height: 40px; padding: 0.5em 0.9em; }

  /* Compact footer: two link columns, tighter padding, smaller type. */
  .footer { padding-block: var(--space-6); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
  .footer__col-title { margin-bottom: var(--space-2); }
  .footer__list { gap: var(--space-1); }
  .footer__brand .logo { margin-bottom: var(--space-3); }
  .footer__bottom { margin-top: var(--space-5); padding-top: var(--space-4); }
}