/* ==========================================================================
   EBSB GmbH — ebsb.de
   Design tokens
   ========================================================================== */
:root {
  /* Palette taken from the EBSB logo: sun / solar panels / EV plug */
  --blue: #1b6dc1;
  --blue-dk: #14508f;
  --blue-soft: #eaf2fb;
  --amber: #ffb93e;
  --amber-soft: #fff5e2;
  --green: #327146;
  --green-dk: #275838;
  --green-soft: #e9f2ec;

  --ink: #10151c;
  --ink-soft: #444d59;
  --muted: #6b7480;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --bg-deep: #0e1b2b;
  --border: #e2e8f0;
  --border-soft: #eef2f7;

  --shadow-sm: 0 1px 2px rgba(16, 30, 54, .05), 0 4px 12px rgba(16, 30, 54, .05);
  --shadow: 0 2px 4px rgba(16, 30, 54, .05), 0 12px 32px rgba(16, 30, 54, .08);
  --shadow-lg: 0 4px 8px rgba(16, 30, 54, .06), 0 24px 56px rgba(16, 30, 54, .12);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --header-h: 76px;
  --max-w: 1200px;
  --measure: 68ch;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Manrope', var(--font-body);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; text-decoration: none; }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-narrow { max-width: 900px; }

.section { padding: clamp(56px, 7vw, 104px) 0; }
.section-alt { background: var(--bg-alt); }
.section-tight { padding-top: clamp(32px, 4vw, 56px); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.125rem; }
.section-head h2 { margin-bottom: .45em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-dk);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--amber);
}
.section-head.center .eyebrow { justify-content: center; }

/* Section titles: the amber rule and the section's own name, nothing else.
   Every page title on the site uses this one rule, so the bar, the type and
   the position of the title are identical wherever it appears. The only
   deliberate exception is the Privatkunden title on the start page, which
   sits inside a content section rather than in a page header band. */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.08rem + .6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
}
.section-head.center .section-title { justify-content: center; }

/* An illustration that belongs to a section rather than to its title. Parking
   it beside the title would force that header band taller than every other
   page's, so it is centred under the section's content instead — free to be
   as large as it likes without touching the shared title bar. */
.section-figure {
  display: grid;
  place-items: center;
  margin-top: clamp(28px, 3.4vw, 48px);
}
.section-figure img { width: clamp(190px, 28vw, 330px); height: auto; }

/* Intro copy that reads as body text under a page header, on the content side
   of the hero's dividing line rather than inside the header band. */
.page-intro { max-width: var(--measure); margin-bottom: clamp(30px, 3.6vw, 48px); }
/* Variant that parks the company mark in the empty space to the right of the
   intro copy, above the form card. Sized to sit just under the height of the
   text beside it so it fills the gap without becoming the loudest thing on
   the page; it drops away entirely once the layout goes single column. */
.page-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: none;
}
.page-intro-split > div { max-width: var(--measure); }
.page-intro-mark {
  width: clamp(110px, 14vw, 172px);
  height: auto;
  justify-self: end;
}
@media (max-width: 760px) { .page-intro-mark { display: none; } }
.page-intro .lead-line {
  margin-bottom: .5em;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
}

.lede { font-size: 1.1875rem; color: var(--ink-soft); max-width: var(--measure); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); box-shadow: var(--shadow); }

.btn-green { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-green:hover { background: var(--green-dk); border-color: var(--green-dk); box-shadow: var(--shadow); }

.btn-outline { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-dk); }

.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--amber); border-color: var(--amber); }

.btn-on-dark { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-on-dark:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn-sm { padding: 9px 18px; font-size: .9375rem; }
.btn-block { width: 100%; }

.btn-arrow::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.btn-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: 0 4px 20px rgba(16,30,54,.05); }

.site-header .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img.brand-mark { width: 42px; }
.brand img.brand-word { width: 74px; }
.brand-sub {
  display: none;
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--muted);
  max-width: 152px;
}
@media (min-width: 1120px) { .brand-sub { display: block; } }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  display: block;
  position: relative;
  padding: 9px 13px;
  font-size: .96rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: color .16s ease, background-color .16s ease;
}
.main-nav a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--blue-dk); font-weight: 600; }
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}

.header-cta { flex-shrink: 0; }

/* The in-nav CTA is the mobile-panel copy; the desktop one lives in .header-cta */
.main-nav .nav-cta { display: none; }

/* Dropdown (Home). Reines CSS: :hover fuer die Maus, :focus-within fuer die
   Tastatur - deshalb braucht das Menue kein JavaScript. */
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a { display: flex; align-items: center; gap: 7px; }
.main-nav .caret {
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.main-nav .has-sub:hover > a .caret,
.main-nav .has-sub:focus-within > a .caret { transform: translateY(1px) rotate(225deg); }
.main-nav .subnav {
  position: absolute;
  top: 100%; left: 0;
  z-index: 30;
  min-width: 196px;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.main-nav .has-sub:hover > .subnav,
.main-nav .has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.main-nav .subnav a { padding: 9px 11px; font-size: .92rem; white-space: nowrap; }
.main-nav .subnav a[aria-current="page"]::after { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .22s ease, opacity .16s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 12px 24px 28px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { padding: 13px 12px; font-size: 1.05rem; }
  .main-nav a[aria-current="page"]::after { display: none; }
  /* Die aktive Seite bekommt am Telefon keine Flaeche - der blaue Block war
     schwerer als der Rest des schlanken Panels. */
  .main-nav a[aria-current="page"] { background: none; font-weight: 700; }
  .main-nav .caret { display: none; }
  /* Untermenue offen ausgeklappt, aber knapper gesetzt als die Hauptpunkte:
     kleinere Schrift und weniger Polsterung, damit die zwei Zeilen das Panel
     nicht wieder in die Laenge ziehen. */
  .main-nav .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 1px 0 5px 13px;
    padding: 0 0 0 13px;
    background: none;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  .main-nav .subnav a { padding: 8px 12px; font-size: .94rem; line-height: 1.5; }
  /* Der Knopf steht schon im Kopf jeder Seite und im Fuss - am Telefon
     verlaengert er das Panel nur. */
  .main-nav .nav-cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6.5vw, 92px) 0 clamp(48px, 6vw, 84px);
  background:
    radial-gradient(1100px 520px at 88% -12%, var(--blue-soft) 0%, transparent 62%),
    radial-gradient(760px 420px at 4% 8%, var(--amber-soft) 0%, transparent 58%),
    var(--bg);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: .3em; }
.hero h1 .accent { color: var(--blue-dk); }
.hero .lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); margin-bottom: 1.6em; }
.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 10px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.hero .kicker b { color: var(--ink); font-weight: 700; }
.hero .kicker .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
}

.hero-figure { position: relative; display: grid; place-items: center; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -8% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 68%);
}
.hero-figure img {
  position: relative;
  width: min(100%, 400px);
  filter: drop-shadow(0 24px 48px rgba(16, 30, 54, .14));
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-figure img { width: min(66%, 250px); }
}

/* Compact page header for interior pages */
.page-hero {
  position: relative;
  overflow: hidden;
  /* gleiche Polsterung oben wie unten, damit der Titel im Band mittig sitzt */
  padding: clamp(26px, 2.6vw, 34px) 0;
  background:
    radial-gradient(880px 380px at 92% -30%, var(--blue-soft) 0%, transparent 62%),
    radial-gradient(560px 300px at 2% 0%, var(--amber-soft) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-hero h1:not(.section-title) { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); margin-bottom: .3em; }
.page-hero .lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
/* A section opening straight under a full-width band does not need the full
   between-sections gap on top of that band's own padding — the two together
   left an empty strip taller than the title itself. Applies to the page
   header band on the interior pages and to the trust band on the start page,
   so the run-up to a section title is the same everywhere. */
.page-hero + .section,
.trustbar + .section { padding-top: clamp(28px, 3vw, 44px); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
/* Three facts, built from the same white-card idiom as the rest of the site
   (border + radius + soft shadow) so the band stops reading as a stray strip. */
/* Compact trust band. The three facts used to sit in tall stacked cards with
   everything centred, which made this strip taller than the hero it followed.
   Turning each card on its side — icon left, figure and caption right — takes
   the band to roughly two fifths of that height without shrinking the type to
   the point of illegibility; the icon spans both text rows so the caption can
   wrap without pushing it out of line. */
.trustbar {
  padding: clamp(18px, 1.9vw, 26px) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.stat {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  row-gap: 1px;
  padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.stat-ico {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dk);
}
.stat-ico svg { width: 17px; height: 17px; }
/* the Google mark is multicolour, so it gets a plain plate instead of the tint */
.stat-ico-plain { background: #fff; border: 1px solid var(--border); }
.stat-ico-plain img { width: 17px; height: 17px; }
/* Figure and stars share the top row so the rating reads "5,0 ★★★★★" on one
   line; the caption spans both columns underneath. The two cards without a
   rating simply leave the third column empty. */
.stat-num { grid-column: 2; grid-row: 1; }
.stat-stars { grid-column: 3; grid-row: 1; }
.stat-label { grid-column: 2 / -1; grid-row: 2; }
.stat-num {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--ink);
}
.stat-stars {
  justify-self: start;
  margin-left: -4px;
  color: var(--amber);
  letter-spacing: 2px;
  font-size: .72rem;
  line-height: 1.1;
}
.stat-label { font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* ==========================================================================
   Kundenlogos - laufendes Band
   ========================================================================== */
.logo-river {
  padding: clamp(30px, 3.6vw, 48px) 0 clamp(32px, 3.8vw, 52px);
  background: var(--bg);
}
.logo-river .eyebrow { display: flex; justify-content: center; margin-bottom: 22px; }
/* A hairline above and below the moving row, full-bleed like the reference. */
.logo-river-rail {
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* The fade lives on the inner element so it never eats into those rules. */
.logo-river-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.logo-river-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-river 62s linear infinite;
}
/* The list is duplicated once, so -50% is exactly one full set. */
@keyframes logo-river { to { transform: translateX(-50%); } }
.logo-river:hover .logo-river-track,
.logo-river:focus-within .logo-river-track { animation-play-state: paused; }
.logo-river-track li {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(200px, 21vw, 280px);
  padding: 0 clamp(20px, 2.6vw, 40px);
}
.logo-river-track img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .logo-river-track { animation: none; }
  .logo-river-mask { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Service cards
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(24px, 2.6vw, 34px);
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #d7e0ea; }

/* Every service image is normalised to 800x1067 (see scripts/fetch-assets.py),
   so a 3:4 box is an exact fit: each photo fills its card edge to edge and all
   six render at precisely the same size. */
.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-soft);
}
.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card-media img { transform: scale(1.03); }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(26px, 2.6vw, 34px);
}
.card-body > h3 { margin-bottom: .28em; font-size: clamp(1.2rem, 1.04rem + .5vw, 1.45rem); }
.card-tagline { color: var(--blue-dk); font-weight: 700; font-size: 1rem; margin-bottom: 1.3em; }
.card-body .checklist { margin-bottom: 28px; }
/* margin-top:auto pins the CTA to the bottom edge, so the buttons sit on one
   line across all three cards however long the checklist is. */
.card-body .btn { margin-top: auto; align-self: flex-start; }

/* On the B2B page the three headings and taglines run to different lengths
   ("Energiewirtschaftliche Beratung" wraps, "Elektromobilität" does not), so
   each checklist used to start at its own height. Reserving two heading lines
   and three tagline lines puts the first bullet of all three cards on one
   line. Only needed while the cards sit side by side — below that they are a
   single column and there is nothing to line up. */
@media (min-width: 742px) {
  .cards-even .card-body > h3 { min-height: 2.3em; }
  .cards-even .card-tagline { min-height: 4.95em; }
}

/* Checklists — replaces the bullet-point PNG the Wix site repeated 12x */
.checklist { display: grid; gap: 11px; font-size: .96rem; }
.checklist li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23327146' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.6 9.4 18 20 6.6'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.checklist.tight { gap: 9px; font-size: .9rem; }
.checklist.tight li { padding-left: 26px; }
.checklist.tight li::before { width: 16px; height: 16px; background-size: 9px; }
.checklist b { font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Steps
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
.steps::before {
  content: "";
  position: absolute;
  top: 27px; left: 16.66%; right: 16.66%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px);
}
.step { position: relative; }
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 24px;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 0 0 6px var(--bg);
}
.step-figure {
  aspect-ratio: 4 / 5;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
}
.step-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.step h3 { margin-bottom: .45em; text-align: center; }
.step p { font-size: .96rem; color: var(--muted); }

.section-alt .step-num { box-shadow: 0 0 0 6px var(--bg-alt); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }
  .step { display: grid; grid-template-columns: 54px 1fr; gap: 4px 20px; }
  .step-num { margin: 0; }
  .step-figure { display: none; }
  .step h3 { grid-column: 2; align-self: center; text-align: left; margin-bottom: .3em; }
  .step p { grid-column: 2; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 28px); }
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(24px, 2.6vw, 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.quote .stars { color: var(--amber); font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 18px; }
.quote blockquote { flex: 1; margin: 0; font-size: 1.0625rem; color: var(--ink); }
.quote figcaption {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-weight: 600; color: var(--muted); font-size: .9375rem;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  margin-top: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: .9375rem;
  color: var(--muted);
}
.google-badge img { width: 17px; }
.google-badge b { color: var(--ink); font-weight: 700; }
.google-badge .stars { color: var(--amber); letter-spacing: 1px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0;
  background:
    radial-gradient(700px 340px at 84% 110%, rgba(27,109,193,.5) 0%, transparent 65%),
    radial-gradient(520px 280px at 8% -20%, rgba(255,185,62,.22) 0%, transparent 62%),
    var(--bg-deep);
  color: rgba(255,255,255,.78);
  text-align: center;
}
.cta-band h2 { color: #fff; max-width: 24ch; margin-inline: auto; }
.cta-band p { max-width: 56ch; margin-inline: auto; font-size: 1.0625rem; }
.cta-band .btn-row { justify-content: center; margin-top: 30px; }

/* ==========================================================================
   Split feature / prose
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.prose { max-width: var(--measure); }

.pullquote {
  padding: clamp(28px, 3.4vw, 42px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
}
.pullquote p {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -.015em;
}
.section-alt .pullquote { background: #fff; }

/* Numbered principle blocks */
.principles { display: grid; gap: clamp(20px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.principle {
  padding: clamp(26px, 2.8vw, 36px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.principle .ico {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-dk);
}
.principle .ico svg { width: 24px; height: 24px; }
.principle:nth-child(2) .ico { background: var(--green-soft); color: var(--green); }
.principle:nth-child(3) .ico { background: var(--amber-soft); color: #96620a; }

/* ==========================================================================
   Team
   ========================================================================== */
/* Bernhard's portrait sits flush in the card - no padding around it, the way
   the photos in the team grid below fill their cards edge to edge. The card
   carries no padding of its own; the two text columns bring their own, and the
   portrait stretches to whatever height they set. Measured against the real
   Inter metrics at 1200px: the card comes to ~338px instead of ~420px, and at
   .78rem every checklist entry fits on one line. */
.person-featured {
  display: grid;
  grid-template-columns: clamp(230px, 25vw, 300px) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.person-featured .portrait {
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--bg-alt);
}
.person-featured .portrait picture { display: block; height: 100%; }
.person-featured .portrait img { width: 100%; height: 100%; object-fit: cover; }
.person-featured-main { padding: clamp(20px, 2.2vw, 26px) 0 clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px); }
.person-featured h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-bottom: .15em; }
.person-featured .role { color: var(--blue-dk); font-weight: 600; margin-bottom: 1.3em; }
/* Same size as the checklists in the team grid below (.checklist.tight), so
   Bernhard's entries do not read smaller than everyone else's. The middle
   column is wide enough at this size for every entry to stay on one line. */
.person-featured .checklist { gap: 9px; font-size: .9rem; }
.person-featured .checklist li { padding-left: 26px; }
.person-featured .checklist li::before { top: .3em; width: 16px; height: 16px; background-size: 9px; }
/* Set in a tinted box and a step down in size, so the biography reads as an
   aside rather than competing with the name beside it. */
.person-bio {
  margin: clamp(20px, 2.2vw, 26px);
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.person-bio p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* Two columns: the portrait spans both text rows so it stays flush top to
   bottom, with the biography tucked under the name. */
@media (max-width: 1160px) {
  .person-featured { grid-template-columns: clamp(200px, 26vw, 290px) minmax(0, 1fr); }
  .person-featured .portrait { grid-row: 1 / -1; }
  .person-bio { grid-column: 2; margin-top: 0; }
}
@media (max-width: 760px) {
  .person-featured { grid-template-columns: 1fr; }
  .person-featured .portrait { grid-row: auto; aspect-ratio: 4 / 3; }
  .person-featured-main { padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) 0; }
  .person-bio { grid-column: 1; margin-top: clamp(16px, 2vw, 22px); }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
.person {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.person .portrait { aspect-ratio: 1; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--border-soft); }
.person .portrait img { width: 100%; height: 100%; object-fit: cover; }
.person-body { flex: 1; padding: 22px 24px 26px; }
.person-body h3 { font-size: 1.15rem; margin-bottom: .12em; }
.person-body .role { font-size: .9rem; font-weight: 600; color: var(--blue-dk); margin-bottom: 1.15em; }

/* ==========================================================================
   Partner cards (Engagement)
   ========================================================================== */
.partners { display: grid; gap: clamp(24px, 3vw, 36px); }
.partner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.partner:nth-child(even) .partner-figure { order: 2; }
.partner-figure { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.partner-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Three photos for one partner: one wide shot over two portraits. */
.partner-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: visible;
  /* rows size themselves from the cells below, so drop the 4:3 cage */
  aspect-ratio: auto;
}
/* The cells carry the photos' real proportions - 4:3 for the slope shot,
   3:4 for the two portraits - so nothing is cropped away. */
.partner-gallery picture:first-child { aspect-ratio: 4 / 3; }
.partner-gallery picture:nth-child(n+2) { aspect-ratio: 3 / 4; }
.partner-gallery picture { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-alt); }
.partner-gallery picture:first-child { grid-column: 1 / -1; }
.partner-gallery img { width: 100%; height: 100%; object-fit: cover; }
/* This tile has the same 3:4 proportion as its source file, so object-fit
   crops nothing and the three athletes end up small under a lot of empty sky.
   Scaling from the bottom edge pulls them closer: at 1.25 the visible window
   starts about 213px down the original, which drops the sky but keeps roughly
   40px of headroom above the heads and the boots just inside the frame. The
   tile itself is untouched, so no surrounding layout moves. */
.partner-gallery picture.crop-in img {
  transform: scale(1.25);
  transform-origin: 50% 100%;
}

/* Partners we have a logo but no photograph for. */
.partner-figure.logo-panel {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
}
/* Capping both axes keeps a square logo and a wide one at a comparable
   optical size, each centred with room to breathe on every side. */
.partner-figure.logo-panel img {
  width: auto;
  height: auto;
  max-width: 66%;
  max-height: 62%;
  object-fit: contain;
}
.partner-logo {
  height: 68px;
  width: auto;
  margin-bottom: 22px;
  object-fit: contain;
  object-position: left center;
}
.partner h3 { margin-bottom: .35em; }
.partner .tagline { color: var(--blue-dk); font-weight: 600; margin-bottom: 1em; }
@media (max-width: 820px) {
  .partner { grid-template-columns: 1fr; }
  .partner:nth-child(even) .partner-figure { order: 0; }
}

/* Placeholder shown until a logo file is supplied */
.logo-slot {
  display: grid;
  place-items: center;
  height: 68px;
  width: 158px;
  margin-bottom: 22px;
  padding: 6px;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   Client logo strip (B2B)
   ========================================================================== */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-strip li {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 24px;
  background: #fff;
}
.logo-strip img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .22s ease, opacity .22s ease;
}
.logo-strip li:hover img { filter: none; opacity: 1; }
.logo-strip .more {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
  text-align: center;
}
.logo-strip .empty {
  background: var(--bg-alt);
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  line-height: 1.45;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: 22px; }
.contact-list li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.contact-list .ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dk);
}
.contact-list .ico svg { width: 19px; height: 19px; }
.contact-list .label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.contact-list a, .contact-list address { color: var(--ink); font-style: normal; font-weight: 500; }
.contact-list address { line-height: 1.55; }

.legal-links { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .9375rem; }
.legal-links ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.form-card {
  padding: clamp(26px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--blue); }
.field input, .field textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa3ae; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.field textarea { min-height: 152px; resize: vertical; }
.field.invalid input, .field.invalid textarea { border-color: #c0392b; }
.field .error { display: none; margin-top: 6px; font-size: .85rem; color: #c0392b; }
.field.invalid .error { display: block; }

.field-consent { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin-bottom: 24px; }
.field-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.field-consent label { font-size: .85rem; font-weight: 400; color: var(--muted); line-height: 1.5; margin: 0; }
.field-consent.invalid label { color: #c0392b; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 20px; padding: 15px 18px; border-radius: var(--radius-sm); font-size: .96rem; }
.form-status.ok { background: var(--green-soft); color: var(--green-dk); border: 1px solid #bcd9c6; }
.form-status.err { background: #fdecea; color: #a5281b; border: 1px solid #f3c4bf; }
.form-status strong { display: block; color: inherit; font-size: 1.05rem; margin-bottom: 3px; }
.form-status a { color: inherit; font-weight: 600; }

button[disabled] { opacity: .6; cursor: progress; }
button[disabled]:hover { transform: none; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .toc { position: static; } }

.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toc h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc ul { display: grid; gap: 2px; }
.toc a {
  display: block;
  padding: 6px 10px;
  font-size: .9rem;
  color: var(--ink-soft);
  border-radius: 7px;
  border-left: 2px solid transparent;
}
.toc a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.toc a.active { background: #fff; border-left-color: var(--amber); color: var(--ink); font-weight: 600; }

.legal { max-width: var(--measure); }
.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.08rem; margin-top: 1.9em; }
.legal p, .legal li { font-size: 1rem; }
.legal ul { display: grid; gap: 8px; margin: 0 0 1.15em; }
.legal ul li { position: relative; padding-left: 20px; }
.legal ul li::before {
  content: "";
  position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
}
.legal a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

.imprint-card {
  display: grid;
  gap: 20px;
  padding: clamp(26px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-width: 660px;
  margin: 0;
}
.imprint-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.imprint-row dt { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.imprint-row dd { margin: 0; color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .imprint-row { grid-template-columns: 1fr; gap: 3px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: clamp(48px, 5vw, 76px) 0 32px;
  background: var(--bg-deep);
  color: rgba(255,255,255,.66);
  font-size: .96rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

.footer-brand img { width: 122px; margin-bottom: 22px; }
.footer-brand address { font-style: normal; line-height: 1.85; }
.site-footer h2 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 16px;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.site-footer ul { display: grid; gap: 10px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-left: auto; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

.social { display: inline-flex; align-items: center; gap: 9px; }
.social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Content is visible by default.  Only once main.js has run (html.js) do we
   hide it to animate it in - so a JS error, a blocked script or a slow
   observer can never leave the page blank. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   404
   ========================================================================== */
.center-page {
  display: grid;
  place-items: center;
  padding: clamp(64px, 9vw, 130px) 0;
  text-align: center;
}
.center-page .code {
  font-family: var(--font-head);
  font-size: clamp(4rem, 3rem + 8vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--blue-soft);
  letter-spacing: -.04em;
  margin-bottom: 12px;
}
.center-page .btn-row { justify-content: center; margin-top: 28px; }