/* Self-hosted, SIL Open Font License: the site makes no external request at
   runtime, so the typefaces are served from our own domain. Both files are
   variable, so one file covers the whole weight range. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* ==========================================================================
   OM Webdesign design system
   Self-hosted, no external font or script CDN (keeps the site GDPR-friendly
   and fast). Colours are derived from the OM Webdesign logo ring.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand: #004777 tiefblau, #A30000 rot, #FF7700 orange, #EFD28D sand,
     #00AFB5 petrol. Die alten Namen bleiben, damit alle Regeln greifen. */
  --deep-blue: #004777;  /* dunkle Flaechen, Ueberschriften, Links: Weiss darauf 9.7:1 */
  --red: #a30000;        /* Hover der Buttons und Links: Weiss darauf 8.2:1 */
  --orange: #ff7700;     /* Hauptbutton, nur mit dunkler Schrift (4.8:1), Weiss faellt durch */
  --sand: #efd28d;       /* Flaechen; auf Tiefblau als Schrift 6.6:1 */
  --teal: #00afb5;       /* Linien, Marker, Flaechen: als Schrift zu hell (2.6:1) */

  --blue-700: var(--deep-blue);
  --blue-600: var(--deep-blue);
  --blue-500: var(--teal);
  --blue-400: var(--teal);
  --blue-100: #ccf0f0;
  --blue-50: #ebf8f8;

  --green-500: var(--teal);
  --yellow-500: var(--sand);
  --orange-500: var(--orange);

  /* neutrals, leicht zum Tiefblau hin getoent, damit Text und Marke
     nicht gegeneinander arbeiten */
  --ink-900: var(--deep-blue);
  --ink-800: #1f2e3a;
  --ink-700: #33434f;
  --ink-500: #56636e;
  --ink-400: #8a949c;
  --ink-300: #b8bec3;
  --ink-200: #dde1e4;
  --ink-100: #eceef0;
  --paper: #fcfaf9;
  --paper-2: #ffffff;

  /* semantic */
  --bg: var(--paper);
  --surface: var(--paper-2);
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --border: rgba(0, 71, 119, 0.20);
  --border-strong: var(--deep-blue);

  /* Flat: the design uses solid fills, never a blend. */
  --brand-gradient: var(--blue-400);
  --brand-gradient-soft: var(--blue-100);

  /* type */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.26rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.72rem, 1.42rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.5vw, 3.6rem);
  --step-5: clamp(2.5rem, 1.6rem + 4vw, 4.6rem);

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 71, 119, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 71, 119, 0.07);
  --shadow-md: 0 10px 30px -12px rgba(0, 71, 119, 0.20);
  --shadow-lg: 0 28px 60px -28px rgba(0, 71, 119, 0.34);
  --shadow-glow: 0 20px 60px -24px rgba(255, 119, 0, 0.45);

  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

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

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

/* ------------------------------------------- abschnittsweises Scrollen
   Eine Geste bewegt genau einen Abschnitt weiter. Das macht der Browser
   selbst im Compositor, deshalb kann es nicht gegen die Seite arbeiten,
   so wie es eine eigene Scroll-Animation im Hauptthread tut.
   Gilt auf jeder Seite und jedem Geraet. Ist ein Abschnitt hoeher als
   der Bildschirm, laesst der Browser innerhalb davon frei scrollen und
   rastet erst am naechsten Abschnitt wieder ein. Frueher wurde das
   Snapping fuer die ganze Seite abgeschaltet, sobald ein einziger
   Abschnitt nicht passte, und fiel damit nach Inhaltsaenderungen still aus. */
@media (prefers-reduced-motion: no-preference) {
  html.snap-ok { scroll-snap-type: y mandatory; }
  html.snap-ok main > section,
  html.snap-ok .site-footer { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* Touch: "proximity" statt "mandatory". Mandatory waehlt nach einem Wisch
   den naechstgelegenen Rastpunkt, und liegt der naechste Abschnitt weiter
   weg als der Wisch lang war, federt die Seite zurueck. Mit proximity
   bleibt ein kurzer Wisch stehen, wo er endet, und scroll-snap-stop
   haelt einen schnellen Wisch trotzdem am naechsten Abschnitt an. Das
   Mausrad rastet dagegen richtungsabhaengig, dort bleibt mandatory. */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html.snap-ok { scroll-snap-type: y proximity; }
}

/* Oberster Rastpunkt ist der Seitenanfang samt Hinweisleiste, nicht der
   Hero. Sonst blieb man beim Hochscrollen 30 bis 90px vor dem Anfang
   haengen und die Leiste war nicht mehr erreichbar. */
@media (prefers-reduced-motion: no-preference) {
  html.snap-ok .announce { scroll-snap-align: start; }
  html.snap-ok .announce ~ main > section:first-of-type { scroll-snap-align: none; }
}


/* --------------------------------------------------- Parallax-Ebenen
   Scroll-getrieben und damit ausserhalb des Hauptthreads. Ohne
   Browser-Unterstuetzung passiert schlicht nichts, die Seite bleibt
   korrekt. Nur transform-Eigenschaften, nie Layout. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .px {
      animation: pxDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes pxDrift {
      from { translate: 0 var(--px-from, 7%); }
      to   { translate: 0 var(--px-to, -7%); }
    }
    .px-scale {
      animation: pxScale linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes pxScale {
      from { scale: 1.12; }
      to   { scale: 1; }
    }
  }
}

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

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.035em; }
h2 { font-size: var(--step-4); letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

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

::selection { background: rgba(0, 71, 119, 0.18); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------- primitives */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

.section { padding-block: clamp(2.25rem, 5.5vh, 4.5rem); position: relative; }
.section--tight { padding-block: clamp(1.75rem, 4vh, 3.25rem); }
.section--surface { background: var(--surface); }
.section--tinted { background: var(--yellow-500); }
.section--ink { background: var(--ink-900); color: #fff; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p { color: rgba(255, 255, 255, 0.74); }
.section--ink .prose p,
.section--ink .prose li { color: rgba(255, 255, 255, 0.76); }
.section--ink .prose strong { color: #fff; }
.section--ink .prose a { color: var(--blue-400); }
.section--ink .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.section--ink .card p { color: rgba(255, 255, 255, 0.72); }
.section--ink .card__icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--blue-400);
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: var(--step-1); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.section--ink .eyebrow { color: var(--blue-400); }

.lede { font-size: var(--step-1); color: var(--text-muted); }

.gradient-text { color: var(--ink-900); }

.icon { width: 24px; height: 24px; flex: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color 0.2s;
  box-shadow: var(--shadow-sm);
}
.btn .icon { width: 19px; height: 19px; transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--blue-500);
  box-shadow: var(--shadow-glow);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { background: var(--blue-600); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(0, 71, 119, 0.04); box-shadow: var(--shadow-sm); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink-900); }
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--blue-600);
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ----------------------------------------------------------------- header */
.announce {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--step--1);
  text-align: center;
  padding: 0.55rem 1rem;
  position: relative;
  overflow: hidden;
}
.announce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-gradient);
  opacity: 0.14;
}
.announce a { position: relative; display: inline-flex; gap: 0.4rem; align-items: center; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -18px rgba(0, 71, 119, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.brand img, .brand svg { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav__link {
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-pill);
  font-weight: 550;
  font-size: 0.97rem;
  color: var(--ink-700);
  transition: color 0.2s, background-color 0.2s;
  position: relative;
}
.nav__link:hover { color: var(--ink-900); background: rgba(0, 71, 119, 0.05); }
.nav__link.is-active { color: var(--blue-600); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.28rem;
  height: 2px; border-radius: 2px;
  background: var(--brand-gradient);
}

.nav__item { position: relative; }
.nav__item--has-children > .nav__link::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--blue-500);
  opacity: 0.55;
}
.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav__item--has-children:hover .nav__panel,
.nav__item--has-children:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__panel a {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.18s;
}
.nav__panel a:hover { background: var(--blue-50); }
.nav__panel strong { display: block; font-size: 0.96rem; font-weight: 600; }
.nav__panel span { color: var(--text-muted); font-size: var(--step--1); }
.nav__panel .icon { color: var(--blue-500); margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 650;
}
.lang-switch a {
  padding: 0.35rem 0.7rem;
  color: var(--ink-500);
  transition: background-color 0.2s, color 0.2s;
}
.lang-switch a.is-active { background: var(--ink-900); color: #fff; }
.lang-switch a:not(.is-active):hover { background: rgba(0, 71, 119, 0.06); color: var(--ink-900); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
}

/* mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--surface);
  padding: var(--sp-5);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.mobile-nav a.mobile-nav__link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step-1);
  font-weight: 600;
}
.mobile-nav .mobile-nav__sub a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--text-muted);
  font-size: var(--step-0);
  font-weight: 500;
  border-bottom: none;
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-block: clamp(2rem, 4.5vh, 4rem) clamp(2.5rem, 6vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
/* The drifting colour blob is gone: the design is flat paper. */
.hero__bg { display: none; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: none;
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

.hero__inner { max-width: 62rem; }
.hero--center .hero__inner { margin-inline: auto; text-align: center; }
.hero--center .hero__badges, .hero--center .btn-row { justify-content: center; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero__sub {
  font-size: var(--step-1);
  color: var(--ink-700);
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}
.hero--center .hero__sub { margin-inline: auto; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}
.hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-700);
  backdrop-filter: blur(6px);
}
.hero__badges .icon { width: 15px; height: 15px; color: var(--green-500); }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.stat__value {
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat__label { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

/* ---------------------------------------------------------------- marquee */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 0.35rem;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0.75rem;
  animation: marquee var(--marquee-duration, 46s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-700);
  white-space: nowrap;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.marquee__item:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.marquee__item::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0.85;
}
.marquee__item svg { max-height: 22px; width: auto; }
.marquee__item--brand {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-800);
  background: transparent;
  border-color: transparent;
  padding-inline: 1rem;
}
.marquee__item--brand::before { display: none; }
.section--ink .marquee__item--brand { color: rgba(255, 255, 255, 0.72); }
.section--ink .marquee__item--brand:hover { color: #fff; }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 0; font-size: var(--step-1); }
.card p { color: var(--text-muted); margin-bottom: 0; }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--blue-50);
  color: var(--blue-600);
  border: 1px solid rgba(0, 71, 119, 0.14);
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.card:hover .card__icon { transform: rotate(-6deg) scale(1.06); background: var(--blue-100); }
.card__link { margin-top: auto; padding-top: var(--sp-2); }

.card--link:hover { cursor: pointer; }

.card--feature {
  background: var(--surface);
}

/* service cards that link to a page */
.service-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--blue-600);
  font-weight: 600;
}

/* --------------------------------------------------------------- split */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.split--sticky > *:first-child { position: sticky; top: calc(var(--header-h) + 2rem); }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--ink-700); }
.prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.2rem; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink-900); }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--blue-500);
  background: var(--blue-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.checklist li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ink-700);
}
.checklist .icon {
  width: 22px; height: 22px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: rgba(47, 174, 78, 0.12);
  color: var(--green-500);
  margin-top: 2px;
}

/* ---------------------------------------------------------------- process */
.process { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--sp-5); }
.process li {
  position: relative;
  counter-increment: step;
  padding-left: 4.25rem;
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue-600);
  z-index: 1;
}
.process li::after {
  content: "";
  position: absolute;
  left: 23px; top: 46px; bottom: -1.5rem;
  width: 2px;
  background: var(--border-strong);
}
.process li:last-child::after { display: none; }
.process h3 { font-size: var(--step-1); margin-bottom: 0.3rem; }
.process p { color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------- testimonials */
.quote-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.quote-card__result {
  align-self: flex-start;
  margin-top: 0;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(0, 71, 119, 0.16);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--blue-700);
}
.quote-card blockquote { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--ink-800); }
.quote-card figcaption { margin-top: auto; font-size: var(--step--1); color: var(--text-muted); }
.quote-card figcaption strong { display: block; color: var(--ink-900); font-size: var(--step-0); }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; gap: 0.75rem; max-width: 52rem; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq details[open] { border-color: rgba(0, 71, 119, 0.3); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  font-weight: 650;
  font-size: var(--step-0);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--blue-500);
  border-bottom: 2px solid var(--blue-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding: 0 1.35rem 1.25rem; color: var(--text-muted); }
.faq__body p { margin: 0; }

/* ------------------------------------------------------------------ price */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan--highlight {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  background:
    var(--surface) padding-box,
    var(--blue-400) border-box;
  border: 2px solid transparent;
}
.plan__flag {
  position: absolute;
  top: -0.85rem; left: var(--sp-6);
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan h3 { margin-bottom: 0; }
.plan__tagline { color: var(--text-muted); margin: 0; }
.plan__price { font-size: var(--step-2); font-weight: 750; letter-spacing: -0.02em; }
.plan .checklist { margin-block: var(--sp-2) var(--sp-4); }
.plan .btn { margin-top: auto; }

/* -------------------------------------------------------------- portfolio */
.project {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (min-width: 800px) { .project { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.project__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.project__tags li {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-700);
}
.project__result {
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------- team */
.member { text-align: center; }
.member__avatar {
  width: 92px; height: 92px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: var(--shadow-md);
}
/* A photograph has to fill the circle rather than be squashed into it. */
img.member__avatar { object-fit: cover; background: var(--blue-50, #eef2ff); }

.member h3 { margin-bottom: 0.15rem; font-size: var(--step-1); }
.member__role { color: var(--blue-600); font-weight: 600; font-size: var(--step--1); margin-bottom: var(--sp-3); }

/* -------------------------------------------------------------------- cta */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--ink-900);
  color: #fff;
  text-align: center;
  isolation: isolate;
}
/* The spinning colour haze behind the closing band is gone: flat charcoal. */
.cta-band::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta-band h2 { color: #fff; max-width: 24ch; margin-inline: auto; }
.cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 56ch; margin-inline: auto; font-size: var(--step-1); }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* ------------------------------------------------------------------- form */
.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: var(--step--1); color: var(--ink-700); }
.field input, .field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0, 71, 119, 0.14);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--check { display: flex; gap: 0.65rem; align-items: flex-start; }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.field--check label { font-weight: 450; color: var(--text-muted); }
.field-validation-error, .validation-summary-errors { color: #c0392b; font-size: var(--step--1); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

.alert-success {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  background: rgba(47, 174, 78, 0.1);
  border: 1px solid rgba(47, 174, 78, 0.3);
  color: #1c6b32;
}
.alert-success .icon { color: var(--green-500); flex: none; }

/* contact tiles */
.contact-tile {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-tile .icon { color: var(--blue-500); }
.contact-tile strong { display: block; }
.contact-tile span { color: var(--text-muted); font-size: var(--step--1); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.68);
  padding-block: clamp(2.5rem, 5vh, 4rem) var(--sp-6);
  margin-top: 0;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.footer-grid {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid > div:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: span 1; }
}
.footer-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--sp-4);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer-list a { transition: color 0.2s; }
.footer-list a:hover { color: #fff; }
.site-footer .brand img, .site-footer .brand svg { height: 46px; }
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
}
.footer-bottom a:hover { color: #fff; }

/* ------------------------------------------------------------ breadcrumbs */
.breadcrumbs { font-size: var(--step--1); color: var(--text-muted); padding-block: var(--sp-4) 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--ink-300); }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs a:hover { color: var(--blue-600); }

/* --------------------------------------------------------- scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* floating helper */
.float-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: none;
}
@media (max-width: 900px) {
  .float-cta { display: inline-flex; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

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

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .cta-band, .marquee, .float-cta { display: none !important; }
  body { background: #fff; }
}


/* --------------------------------------------------------------- articles */
.article-topic {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(0, 71, 119, 0.18);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.article-meta > * { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta > * + *::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-300);
}

.article-header { padding-top: clamp(2rem, 4vw, 3.5rem); }
.article-header h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.article-header .lede { margin-bottom: var(--sp-4); }

.answer-box {
  position: relative;
  margin-block: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--blue-50);
  border: 1px solid rgba(0, 71, 119, 0.2);
}
.answer-box::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25rem; bottom: 1.25rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gradient);
}
.answer-box__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-2);
}
.answer-box p { margin: 0; font-size: var(--step-1); color: var(--ink-800); }

.article-card h3 { font-size: var(--step-1); }
.article-card .article-topic { margin-bottom: 0; align-self: flex-start; }

.article-feature {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background:
    var(--surface) padding-box,
    var(--blue-400) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.article-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (min-width: 860px) { .article-feature { grid-template-columns: 1.7fr 1fr; align-items: center; } }
.article-feature h2 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.article-feature p { color: var(--text-muted); }
.article-feature__meta { display: grid; gap: var(--sp-3); align-content: start; }
.article-feature__flag {
  justify-self: start;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* Booking tile: the fastest route to a conversation, so it looks like it. */
.contact-tile--booking {
  margin-top: 1.5rem;
  border-color: transparent;
  background:
    var(--surface) padding-box,
    var(--blue-400) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-md);
}
.contact-tile--booking strong { font-size: var(--step-1); }


/* --------------------------------------------------- marquee brand marks */
/* Logos keep the vendor's own colours, so nothing here may set `fill`.
   The height is fixed and the width follows the viewBox, which keeps a wide
   mark like .NET from being squashed into a square box. */
.marquee__item .marquee__logo {
  flex: none;
  height: 20px;
  width: auto;
  max-width: 30px;
  opacity: 0.92;
  transition: opacity 0.25s;
}
.marquee__item:hover .marquee__logo { opacity: 1; }
/* The gradient dot stands in for a logo, so drop it once there is a real one. */
.marquee__item--logo::before { display: none; }
/* The looping duplicate must not create a box of its own, or the row would wrap. */
.marquee__dupe { display: contents; }


/* ==========================================================================
   Homepage patterns from the redesign: an uneven services grid, a sand band
   of figures, the team as portraits, the guides as hairline rows.
   ========================================================================== */

/* ---- services: unequal tiles, two of them carrying colour ---- */
.om-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  grid-auto-flow: row dense;
}
@media (max-width: 960px) { .om-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .om-bento { grid-template-columns: minmax(0, 1fr); } }

.om-bento__tile:first-child { grid-column: span 2; }
@media (max-width: 640px) { .om-bento__tile:first-child { grid-column: span 1; } }
.om-bento__tile:first-child h3 { font-size: var(--step-2); }

/* The third tile takes the sand, the fifth the charcoal, so the grid is never
   a field of identical white boxes. */
.om-bento__tile:nth-child(3) { background: var(--yellow-500); }
.om-bento__tile:nth-child(5) { background: var(--ink-900); }
.om-bento__tile:nth-child(5) h3 { color: #fff; }
.om-bento__tile:nth-child(5) p { color: var(--ink-200); }
.om-bento__tile:nth-child(5) .card__icon { background: rgba(255, 255, 255, .12); color: var(--blue-400); }
.om-bento__tile:nth-child(5) .link-arrow { color: var(--blue-400); }

/* ---- the figures band ---- */
.om-metrics { background: var(--yellow-500); }
.om-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 760px) { .om-metrics__grid { grid-template-columns: minmax(0, 1fr); } }
.om-metrics b {
  font-family: var(--font-display);
  display: block;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.om-metrics b::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 7px;
  margin-top: 0.7rem;
  background: var(--blue-400);
  border-radius: 4px;
}
.om-metrics span {
  display: block;
  margin-top: 0.8rem;
  color: var(--ink-700);
  max-width: 24ch;
}

/* ---- the team, as portraits ---- */
.om-team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
}
.om-team li { text-align: center; }
.om-team img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sp-3);
  background: var(--ink-100);
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .om-team li:hover img { transform: translateY(-4px) scale(1.03); }
}
.om-team b { display: block; font-family: var(--font-display); letter-spacing: -0.02em; }
.om-team span { display: block; font-size: var(--step--1); color: var(--text-muted); }


/* ---- hero: 7/5, left aligned, with a framed photograph ---- */
.hero--split .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 1000px) { .hero--split .container { grid-template-columns: minmax(0, 1fr); } }
.hero--split .hero__inner { max-width: none; text-align: left; margin: 0; }

/* The eyebrow becomes a drawn chip with a mint square, as in the design. */
.hero--split .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--ink-900);
  background: var(--paper-2);
  padding: 0.35rem 0.75rem;
  border-radius: 0;
  color: var(--ink-900);
}
.hero--split .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--blue-400);
  flex: 0 0 auto;
}

/* The closing sentence of the headline sits on solid mint. Mint cannot carry
   text on the off-white, but charcoal on mint is 8:1. */
.hero h1 .mark {
  display: inline-block;
  background: var(--blue-400);
  color: var(--ink-900);
  padding: 0.02em 0.22em;
  margin-top: 0.12em;
}

.hero__media { min-width: 0; }
.hero__frame {
  border: 1px solid rgba(0, 71, 119, 0.18);
  background: var(--paper-2);
  padding: 8px;
}
.hero__frame img { display: block; width: 100%; height: auto; }
.hero__caption {
  margin: 0.75rem 0 0;
  text-align: right;
  font-size: var(--step--1);
  font-style: italic;
  color: var(--text-muted);
}


/* ---- the closing band: charcoal, left aligned, mint call ---- */
.cta-band {
  background: var(--ink-900);
  border-radius: 0;
  text-align: left;
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: var(--ink-200); max-width: 54ch; }
.cta-band .btn-row { justify-content: flex-start; }
.cta-band .btn--light { background: var(--blue-400); color: var(--ink-900); border-color: var(--blue-400); }
.cta-band .btn--light:hover { background: #fff; color: var(--ink-900); }

/* ---- drawn borders instead of soft shadows, the printed feel ---- */
.om-bento__tile, .om-metrics, .section--tinted { border-radius: 0; }
/* Drawn at full strength by default, as in the design: the border is the
   panel, not a hover effect. */
.om-bento__tile { border: 1px solid var(--ink-900); box-shadow: none; }
.om-bento__tile:hover { box-shadow: none; transform: translateY(-2px); }



/* ---- case studies: collapsed to the facts, expanded to the story ---- */
.case {
  border: 1px solid var(--ink-900);
  background: var(--paper-2);
}
.case + .case { margin-top: clamp(0.8rem, 2vw, 1.2rem); }
.case > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(1.1rem, 3vw, 2.2rem);
  cursor: pointer;
  list-style: none;
}
.case > summary::-webkit-details-marker { display: none; }
.case > summary:hover .case__client { color: var(--blue-600); }
.case__head { min-width: 0; }
.case__client {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: color 0.2s;
}
.case__result { text-align: right; }
.case__result-label {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.case__result b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink-900);
  background: var(--blue-400);
  padding: 0.1rem 0.5rem;
  display: inline-block;
  margin-top: 0.3rem;
}
@media (max-width: 760px) {
  .case > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .case__result { grid-column: 1 / -1; text-align: left; }
}

/* The chevron turns rather than swapping glyphs. */
.case__chevron {
  width: 14px; height: 14px;
  border-right: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.case[open] > summary .case__chevron { transform: rotate(-135deg); }

.case__panel {
  padding: 0 clamp(1.1rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--border);
  margin-top: -1px;
}
/* The height is animated in the script; this is only for a panel that opened
   without a click, such as a link arriving from the homepage. */
.case__panel.is-arriving { animation: caseOpen 0.45s var(--ease); }
@keyframes caseOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.case__summary { font-size: var(--step-1); color: var(--ink-700); margin-top: 1.2rem; }
.case__panel h4 {
  font-family: var(--font-display);
  margin: 1.4rem 0 0.3rem;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case__panel p { color: var(--ink-700); max-width: 70ch; }
.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .case__panel { animation: none; }
  .case__chevron { transition: none; }
}


/* ---- case studies, exactly as drawn: bordered box, framed photo, facts ---- */
.om-cases { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 5rem); }
.om-case {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: center;
  border: 1px solid var(--ink-900);
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease);
}
@media (max-width: 900px) { .om-case { grid-template-columns: minmax(0, 1fr); } }
/* Rows alternate: the photograph changes side. */
.om-case:nth-child(even) .om-case__figure { order: 2; }
@media (max-width: 900px) { .om-case:nth-child(even) .om-case__figure { order: 0; } }

.om-case__figure {
  border: 1px solid var(--ink-900);
  background: var(--paper-2);
  padding: 8px;
}
.om-case__figure img { display: block; width: 100%; height: auto; }

.om-case__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.om-case__body h3 { margin-bottom: 0.8rem; }
.om-case__body > p { color: var(--ink-800); font-size: var(--step-1); margin-bottom: 1.4rem; }

.om-case__facts { margin: 0; border-top: 1px solid var(--border); padding-top: 1rem; display: grid; gap: 0.6rem; }
.om-case__facts > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.om-case__facts dt { color: var(--text-muted); font-size: var(--step--1); }
.om-case__facts dd { margin: 0; text-align: right; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .om-case:hover { background: var(--paper-2); }
  .om-case:hover h3 { color: var(--blue-600); }
}

/* ---- guides: numbered hairline rows ---- */
.om-guides { border-top: 1px solid var(--border); }
.om-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.18s;
}
@media (min-width: 760px) {
  .om-guide { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}
.om-guide__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  transition: transform 0.15s var(--ease);
  display: inline-block;
}
.om-guide__no { color: var(--text-muted); margin-right: 0.4rem; }
.om-guide__meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  flex-shrink: 0;
}
.om-guide__meta .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .om-guide:hover { background: rgba(0, 71, 119, 0.05); }
  .om-guide:hover .om-guide__title { transform: translateX(4px); }
  .om-guide:hover .om-guide__meta { color: var(--ink-900); }
  .om-guide:hover .om-guide__meta .icon { transform: translate(4px, -4px); }
}
@media (prefers-reduced-motion: reduce) {
  .om-guide__title, .om-guide__meta .icon { transition: none; }
}

/* ===========================================================================
   Abschnitte auf Bildschirmhoehe bringen
   ---------------------------------------------------------------------------
   Damit das abschnittsweise Scrollen (html.snap-ok) ueberhaupt anspringt,
   muss jeder Abschnitt in die sichtbare Hoehe passen. Zwei Bloecke der
   Startseite waren zu hoch. Beides sind reine Layout-Korrekturen, die
   Inhalte bleiben unveraendert.
   =========================================================================== */

/* Fallstudien: drei nebeneinander statt drei volle Zeilen untereinander.
   Gestapelt brauchten sie rund 2100px, also fast zwei Bildschirme. */
.om-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  align-items: stretch;
}
.om-case {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1rem, 1.8vw, 1.4rem);
}
.om-case:nth-child(even) .om-case__figure { order: 0; }
.om-case__figure { padding: 6px; }
.om-case__body h3 { margin-bottom: 0.5rem; font-size: var(--step-1); }
.om-case__body > p { font-size: var(--step-0); margin-bottom: 1rem; }
.om-case__facts { margin-top: auto; padding-top: 0.75rem; gap: 0.35rem; }

@media (max-width: 900px) {
  .om-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-case:last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .om-cases { grid-template-columns: minmax(0, 1fr); }
  .om-case:last-child { grid-column: span 1; }
}

/* Ablauf: die fuenf Schritte in zwei Spalten statt einer langen Liste. */
@media (min-width: 901px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-6);
  }
}

/* Leistungen: sechs Kacheln in genau zwei Reihen.
   Die erste Kachel lief ueber zwei Spalten, dadurch brauchten sechs
   Kacheln drei Reihen und der Abschnitt war 1601px hoch. Ohne den
   Ueberhang sind es zwei Reihen und rund 380px weniger. Die Kacheln
   bleiben unterschiedlich: die dritte traegt Sand, die fuenfte Anthrazit. */
@media (min-width: 961px) {
  .om-bento__tile:first-child { grid-column: span 1; }
  .om-bento__tile:first-child h3 { font-size: var(--step-1); }
}

/* Abschnittskopf etwas naeher an seinem Inhalt, auf allen Seiten. */
.section-head { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }

/* Etwas Luft nach oben: der Leistungs-Abschnitt lag nur 2px unter der
   Bildschirmhoehe und haette bei einem etwas niedrigeren Fenster das
   Snapping wieder abgeschaltet. */
@media (min-width: 961px) {
  .om-bento__tile { padding: 1.6rem; gap: 0.6rem; }
  .om-bento__tile .card__icon { width: 38px; height: 38px; }
}

/* ===========================================================================
   Startseite: Beleg-Block und Ablauf
   =========================================================================== */

/* Kennzahlen und Technologien in einem Abschnitt. */
.om-proof { background: var(--surface); border-block: 1px solid var(--border); }
.om-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.om-proof__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.om-proof__label {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0.55rem 0 0;
  max-width: 22ch;
  line-height: 1.45;
}
.om-proof__tech { margin-top: clamp(1.75rem, 3.5vh, 2.75rem); }
.om-proof__heading { font-size: var(--step-2); margin-bottom: 1.25rem; }
.om-proof__marquees { display: grid; gap: 0.75rem; }
@media (max-width: 760px) { .om-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .om-proof__stats { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf: fuenf Schritte nebeneinander auf einer Fortschrittslinie.
   Vorher eine lange nummerierte Liste neben der Ueberschrift, die den
   Abschnitt ueber die Bildschirmhoehe geschoben hat. */
.om-proc {
  list-style: none;
  margin: 0;
  padding: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  position: relative;
}
.om-proc::before,
.om-proc::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.om-proc::before { right: 0; background: rgba(255, 255, 255, 0.22); }
.om-proc::after { width: 100%; background: var(--blue-400); transform-origin: left; }
.om-proc__step { position: relative; min-width: 0; }
.om-proc__step::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: 0;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  background: var(--blue-400);
}
.om-proc__step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; color: #fff; }
.om-proc__step p { font-size: var(--step--1); line-height: 1.6; color: rgba(255, 255, 255, 0.68); margin: 0; }

/* Die Linie fuellt sich mit dem Scrollen. Zeigt die Abfolge der Schritte. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .om-proc::after {
      animation: omProcFill linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 70%;
    }
    @keyframes omProcFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* Bei zwei Reihen ergibt eine durchgehende Linie keinen Sinn mehr. */
@media (max-width: 1100px) {
  .om-proc { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; gap: 1.75rem 1.5rem; }
  .om-proc::before, .om-proc::after, .om-proc__step::before { display: none; }
  .om-proc__step { border-top: 2px solid rgba(255, 255, 255, 0.26); padding-top: 1rem; }
}
@media (max-width: 620px) { .om-proc { grid-template-columns: minmax(0, 1fr); } }

/* Die scroll-getriebene Skalierung muss beschnitten werden, sonst
   laeuft das Bild ueber seinen Rahmen hinaus. */
.hero__frame, .om-case__figure { overflow: hidden; }

/* ===========================================================================
   Luft um kurze Einleitungstexte
   ---------------------------------------------------------------------------
   Das Muster "section--tight > container--narrow > prose lede" steht auf
   acht Seiten direkt unter dem Hero und traegt oft nur einen Satz.
   Gemessen auf /de/team/: 194px Abschnittshoehe bei 74px Inhalt, also
   120px reine Polsterung um zwei Zeilen. Der Satz gehoert optisch zum
   Hero, nicht in einen eigenen Block.
   =========================================================================== */
.section--tight { padding-block: clamp(1.5rem, 3vh, 2.5rem); }

.hero + .section--tight {
  padding-top: 0;
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
}
.hero + .section--tight .prose.lede { margin-top: 0; }

/* Und er ist keine eigene Scroll-Station: eine ganze Geste fuer einen
   einzigen Satz waere verschenkt. Er bleibt zusammen mit dem Hero sichtbar. */
html.snap-ok main > .hero + .section--tight { scroll-snap-align: none; }

/* Die Fusszeile stand vorher hart am letzten Abschnitt, weil der
   Aussenabstand fuer die Bildschirmhoehe entfernt worden war. */
.site-footer { margin-top: clamp(2rem, 4vh, 3rem); }

/* Einleitung auf dunklem Grund: .section-head p setzte hier Grau auf Anthrazit und
   war kaum lesbar. */
.section--ink .lede,
.section--ink .section-head p { color: rgba(255, 255, 255, 0.76); }

/* Der Anruf-Button lag beim Laden auf dem Haupt-CTA im Hero. Er erscheint
   erst, wenn der Hero aus dem Bild ist (site.js setzt .is-shown). */
@media (max-width: 900px) {
  .float-cta {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .float-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; }
}

/* Handy: Karten mit 24px Innenabstand statt 32px. Bei 350px Breite
   bleibt so mehr Zeilenlaenge fuer den Text. */
@media (max-width: 600px) {
  .card, .quote-card { padding: var(--sp-5); }
}

/* ===========================================================================
   Abstands-System
   ---------------------------------------------------------------------------
   Die Abstaende waren an die Bildschirmhoehe gekoppelt und gestaucht,
   damit jeder Abschnitt fuer das Snapping auf einen Bildschirm passt. Das
   Snapping braucht das nicht mehr (siehe "abschnittsweises Scrollen"),
   also gilt wieder ein Raster nach Bildschirmbreite: gleiche Abstaende auf
   gleichen Geraeten, egal wie hoch das Fenster ist.
                      Handy 390px   Laptop 1440px
     Abschnitt            56px         104px
     enger Abschnitt      40px          64px
     Kopf -> Inhalt       32px          56px
     Kartenraster         24px          32px
   =========================================================================== */
:root {
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --head-gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  --grid-gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section-head { margin-bottom: var(--head-gap); }
.grid { gap: var(--grid-gap); }

.hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 1.5rem + 4.5vw, 6rem); }

/* Der Einleitungssatz unter dem Hero bleibt am Hero (siehe oben). */
.hero + .section--tight { padding-top: 0; padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

.om-proof__tech { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.om-proof__heading { margin-bottom: 1.5rem; }

@media (min-width: 961px) {
  .om-bento__tile { padding: clamp(1.75rem, 1rem + 1.2vw, 2.25rem); gap: var(--sp-3); }
  .om-bento__tile .card__icon { width: 44px; height: 44px; }
}

.site-footer {
  margin-top: 0;
  padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) var(--sp-6);
}


/* Ueberschrift und Einleitung standen nur 16px auseinander und lasen sich
   als ein Block. Dazu hing die Einleitung dicht an der Ueberschrift, waehrend
   darunter 56px bis zum Inhalt kamen: die Gewichtung stimmte nicht. */
.section-head h2,
.cta-band h2 { margin-bottom: clamp(1rem, 0.75rem + 0.6vw, 1.35rem); }

/* CTA-Kasten: Ueberschrift und Text waren als Block zentriert (alte Regel),
   der Text darin aber links, die Buttons ebenfalls links. Nichts stand auf
   einer Kante. Jetzt beginnt alles an der Innenkante des Kastens. */
.cta-band h2,
.cta-band p { margin-inline: 0; }
.cta-band .btn-row { margin-top: clamp(1.75rem, 1.25rem + 1vw, 2.25rem); }
@media (max-width: 600px) {
  .cta-band { padding: 2.5rem 1.75rem; }
}

/* ===========================================================================
   Farbpalette: Rollen
   ---------------------------------------------------------------------------
   Orange und Petrol tragen keine weisse Schrift (2.7:1), deshalb bekommt
   der Hauptbutton dunkle Schrift und wird beim Hover rot mit Weiss. Auf
   Tiefblau stehen kleine Beschriftungen und Links in Sand statt Petrol,
   weil Petrol dort nur 3.6:1 erreicht.
   =========================================================================== */
h1, h2, h3, h4 { color: var(--ink-900); }

.btn--primary { --btn-bg: var(--orange); --btn-fg: var(--ink-800); }
.btn--primary:hover { background: var(--red); color: #fff; }

.cta-band .btn--light { background: var(--teal); border-color: var(--teal); color: var(--ink-800); }
.cta-band .btn--light:hover { background: var(--sand); border-color: var(--sand); color: var(--ink-800); }

.section--ink .eyebrow,
.section--ink .prose a,
.section--ink .card__icon,
.om-bento__tile:nth-child(5) .card__icon,
.om-bento__tile:nth-child(5) .link-arrow { color: var(--sand); }

.link-arrow:hover,
.prose a:hover,
.breadcrumbs a:hover { color: var(--red); }

:focus-visible { outline-color: var(--deep-blue); }
.faq summary::after { border-color: var(--deep-blue); }
::selection { background: rgba(0, 175, 181, 0.28); }

/* Die Hinweisleiste lag als Petrol-Schleier auf Tiefblau; pur wirkt sie klarer. */
.announce::before { display: none; }


/* Kontrast-Pruefung: Sand ist hell, gedaempftes Grau erreicht darauf nur
   4.2:1. Auf Sandflaechen wird es eine Stufe dunkler. */
.section--tinted,
.om-metrics,
.om-bento__tile:nth-child(3) { --text-muted: var(--ink-700); }
.footer-title { color: var(--sand); }
.plan__flag { color: var(--ink-800); }

/* Rot als Leitfarbe: Abschnittsmarken, "Mehr erfahren", aktiver
   Menuepunkt. 7.9:1 auf Papier, 5.6:1 auf Sand. Auf Tiefblau erreicht Rot
   nur 1.2:1, dort bleibt es bei Sand (Regeln oben). */
.eyebrow { color: var(--red); }
.eyebrow::before { background: var(--red); }
.section--ink .eyebrow::before { background: var(--sand); }
.hero--split .eyebrow { color: var(--ink-900); }
.hero--split .eyebrow::before { background: var(--red); }

.link-arrow { color: var(--red); }
.link-arrow:hover { color: var(--deep-blue); }
.section--ink .link-arrow,
.om-bento__tile:nth-child(5) .link-arrow { color: var(--sand); }
.section--ink .link-arrow:hover,
.om-bento__tile:nth-child(5) .link-arrow:hover { color: #fff; }

.nav__link.is-active { color: var(--red); }
.nav__link.is-active::after { background: var(--red); }
/* Abschnittsmarken im Kopf erbten Farbe und Groesse von ".section-head p"
   (grau, Einleitungsgroesse). Jetzt sehen alle Marken gleich aus. */
.section-head .eyebrow { color: var(--red); font-size: var(--step--1); }
.section--ink .section-head .eyebrow { color: var(--sand); }