/* =========================================================================
   Kälte- & Klimatechnik H. Metzger — Stylesheet
   Single source of truth for design tokens. No hardcoded values outside :root.
   ========================================================================= */

:root {
  /* Paleta */
  --brand: #1577b8;
  --brand-d: #0f5e95;
  --brand-l: #3ba3df;
  --brand-xs: #eaf4fb;
  --heat: #e23b1e;
  --heat-d: #c22f17;
  --heat-l: #f25a3f;
  /* Deep navy blue — brand dark, used across all dark sections */
  --ink: #1A254B;
  --ink-700: #243466;
  --ink-500: #2e3f7d;
  --text: #18303c;
  --muted: #5e6f78;
  --bg: #f4f7f9;
  --paper: #ffffff;
  --line: #e1e8ed;
  --line-2: #cdd8df;
  --ok: #1e7a3f;
  --ok-bg: rgba(34, 158, 81, .1);
  --ok-border: rgba(34, 158, 81, .25);
  --err-bg: rgba(226, 59, 30, .08);
  --err-border: rgba(226, 59, 30, .25);

  /* Gradientes ricos */
  --grad-brand: linear-gradient(135deg, var(--brand-l) 0%, var(--brand) 45%, var(--brand-d) 100%);
  --grad-heat:  linear-gradient(135deg, var(--heat-l) 0%, var(--heat) 50%, var(--heat-d) 100%);
  --grad-ink:   var(--ink); /* unified solid navy across all dark surfaces */
  --grad-paper: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  --grad-aurora:
    radial-gradient(60% 70% at 15% 10%, rgba(59, 163, 223, .28) 0%, transparent 60%),
    radial-gradient(50% 60% at 90% 20%, rgba(226, 59, 30, .18) 0%, transparent 65%),
    radial-gradient(70% 80% at 50% 100%, rgba(21, 119, 184, .18) 0%, transparent 70%);

  /* Sombras */
  --shadow-xs: 0 1px 3px rgba(14, 21, 25, .06);
  --shadow-s: 0 4px 14px rgba(14, 21, 25, .08);
  --shadow-m: 0 14px 36px -14px rgba(14, 21, 25, .28);
  --shadow-l: 0 30px 64px -24px rgba(14, 21, 25, .44);
  --shadow-glow-brand: 0 18px 50px -18px rgba(21, 119, 184, .55);
  --shadow-glow-heat:  0 18px 50px -18px rgba(226, 59, 30, .55);
  --shadow-card-hover: 0 30px 60px -28px rgba(14, 21, 25, .45), 0 8px 24px -12px rgba(21, 119, 184, .25);

  /* Raios */
  --r: 14px;
  --r-l: 22px;
  --r-xl: 28px;

  /* Easing curves */
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);

  /* Tipografia */
  --fd: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --fb: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --base: clamp(15.5px, 1.04vw, 17px);

  /* Escala tipográfica */
  --s-xs: 0.75rem;
  --s-sm: 0.875rem;
  --s-base: 1rem;
  --s-lg: 1.125rem;
  --s-xl: 1.25rem;
  --s-2xl: 1.5rem;
  --s-3xl: 1.875rem;
  --s-4xl: clamp(1.6rem, 3vw, 2.4rem);
  --s-5xl: clamp(2.4rem, 5.4vw, 4.2rem);

  /* Espaçamento */
  --gap-s: clamp(16px, 2.5vw, 24px);
  --gap-m: clamp(24px, 4vw, 40px);
  --gap-l: clamp(40px, 6vw, 64px);
  --section: clamp(56px, 8vw, 104px);
  --pad: clamp(20px, 5.5vw, 72px);
  --maxw: 1220px;

  /* Header */
  --head-h: 78px;
}

/* =========================================================================
   Reset / base
   ========================================================================= */

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

/* No global smooth scroll — the SPA router does instant scroll-to-top per page change */

body {
  margin: 0;
  font-family: var(--fb);
  font-size: var(--base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

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

a {
  color: var(--brand);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--brand-d);
}

h1, h2, h3, h4 {
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.07;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0 0 1rem;
}

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

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

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: var(--r);
  z-index: 9999;
  font-family: var(--fd);
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
  color: var(--paper);
}

/* =========================================================================
   Layout
   ========================================================================= */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

main {
  min-height: 60vh;
}

/* =========================================================================
   Header
   ========================================================================= */

.head {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Exact brand navy — same as the "Profis für" headline */
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  color: var(--paper);
}

.head .nav-link,
.head .nav-tel {
  color: var(--paper);
}

.head .burger-icon::before,
.head .burger-icon::after,
.head .burger-icon span {
  background: var(--paper);
}

.head .nav-link:hover,
.head .nav-link.active {
  color: var(--brand-l);
}

/* Scrolled — same exact navy + a subtle shadow once user has moved past the hero */
.head.scrolled {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .45);
}

/* Language switch — circular flag buttons */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  opacity: .55;
  transition: opacity .25s ease, border-color .25s ease, transform .25s var(--ease-out-back);
}

.lang-btn .fi {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  /* Slight desaturation when inactive */
  filter: saturate(.9);
}

.lang-btn:hover {
  opacity: .9;
  border-color: rgba(255, 255, 255, .35);
}

.lang-btn.is-active {
  opacity: 1;
  border-color: var(--paper);
}

.lang-btn.is-active .fi {
  filter: saturate(1.05);
}

/* Hide legacy text divider if it ever sneaks back in */
.lang-divider { display: none; }

/* Mobile version — same circular flags, dark borders on light background */
.lang-switch--mobile {
  display: inline-flex;
  gap: 8px;
  margin-left: 0;
}

.lang-switch--mobile .lang-btn {
  border-color: rgba(14, 21, 25, .15);
}

.lang-switch--mobile .lang-btn:hover {
  border-color: rgba(14, 21, 25, .35);
}

.lang-switch--mobile .lang-btn.is-active {
  border-color: var(--ink);
}

@media (max-width: 900px) {
  .head .lang-switch { display: none; }
}

/* Header brand lockup — icon-only logo + text rendered alongside in HTML */
.head .brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .25s ease;
}

.head .brand-link:hover {
  opacity: .85;
}

.head .brand-link .logo-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.head .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.head .brand-name {
  font-family: "Barlow Condensed", "Archivo", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .015em;
  color: var(--paper);
  white-space: nowrap;
  line-height: 1;
}

.head .brand-tag {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

/* Mobile menu uses the same lockup but on light bg */
.mnav .brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mnav .brand-link .logo-mark { height: 38px; width: auto; }
.mnav .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.mnav .brand-name { font-family: "Barlow Condensed", "Archivo", sans-serif; font-weight: 500; font-size: 20px; letter-spacing: .015em; color: var(--ink); white-space: nowrap; line-height: 1; }
.mnav .brand-tag  { font-family: var(--fb); font-weight: 500; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Narrow viewports — site header keeps the company NAME + SLOGAN, smaller. */
@media (max-width: 580px) {
  .head .brand-name {
    font-size: 18px;
    /* Allow soft wrapping if the name truly can't fit on a single line */
    white-space: normal;
    line-height: 1.1;
  }
  .head .brand-tag {
    font-size: 11px;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: normal;
  }
}

/* Logo: keep its colors regardless of header bg */

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  min-height: var(--head-h);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Header uses the wider journey wrap so nav items breathe on large displays */
.head .wrap {
  max-width: var(--maxw-wide, 1480px);
  padding-right: clamp(20px, 4vw, 64px);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.logo-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--s-base);
  color: var(--brand);
  letter-spacing: -.005em;
}

.brand-tag {
  font-family: var(--fb);
  font-weight: 500;
  font-size: var(--s-sm);
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-sm);
  color: var(--ink);
  border-radius: var(--r);
  transition: background .2s ease, color .2s ease;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease-out-expo);
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(.55);
}

.nav-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-m);
  padding: 8px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 110;
}

.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 10px 14px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-sm);
  color: var(--ink);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

.dropdown a:hover,
.dropdown a.active {
  background: var(--brand-xs);
  color: var(--brand);
}

.nav-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--ink);
  margin-left: 8px;
}

.nav-tel:hover {
  color: var(--brand);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--r);
  margin-left: auto;
}

.burger:hover {
  background: var(--brand-xs);
}

.burger-icon {
  width: 24px;
  height: 18px;
  position: relative;
}

.burger-icon::before,
.burger-icon::after,
.burger-icon span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.burger-icon::before { top: 0; }
.burger-icon span { top: 50%; transform: translateY(-50%); display: block; }
.burger-icon::after { bottom: 0; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  letter-spacing: .005em;
  min-height: 44px;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease-out-expo),
              box-shadow .35s var(--ease-out-expo),
              background .25s ease,
              color .25s ease,
              border-color .25s ease;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-out-expo);
  pointer-events: none;
  z-index: 1;
}

.btn:hover::before {
  transform: translateX(110%);
}

.btn > * {
  position: relative;
  z-index: 2;
}

.btn:active {
  transform: translateY(1px) scale(.99);
}

.btn-blue {
  background: var(--grad-brand);
  color: var(--paper);
  box-shadow: 0 8px 22px -10px rgba(21, 119, 184, .55);
}

.btn-blue:hover {
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-brand);
}

.btn-red {
  background: var(--grad-heat);
  color: var(--paper);
  box-shadow: 0 8px 22px -10px rgba(226, 59, 30, .55);
}

.btn-red:hover {
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-heat);
}

.btn-out {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.btn-out:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(14, 21, 25, .45);
}

.btn-out-d {
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-out-d:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35);
}

.btn-lg {
  padding: 17px 28px;
  font-size: var(--s-base);
  min-height: 54px;
}

/* =========================================================================
   Home hero
   ========================================================================= */

.home-hero {
  position: relative;
  background: var(--grad-ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--head-h) * -1);
  padding-top: var(--head-h);
}

@property --hero-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1.08;
}

.hero-bg-img {
  position: absolute;
  inset: -10% 0 0 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  z-index: 0;
  opacity: .88;
  object-position: center center;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--hero-scale, 1.08));
  transition: transform .15s linear;
  will-change: transform;
  animation: heroBgZoom 20s var(--ease-in-out-cubic) infinite alternate;
}

@keyframes heroBgZoom {
  from { --hero-scale: 1.08; }
  to   { --hero-scale: 1.16; }
}

/* Decorative aurora glow */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  background: var(--grad-aurora);
  z-index: 1;
  pointer-events: none;
  filter: blur(40px);
  opacity: .85;
  animation: auroraDrift 22s var(--ease-in-out-cubic) infinite alternate;
}

@keyframes auroraDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: .7; }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: .95; }
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(14, 21, 25, .35) 0%, rgba(14, 21, 25, .55) 60%, rgba(14, 21, 25, .8) 100%),
    linear-gradient(180deg, rgba(14, 21, 25, .35) 0%, transparent 25%, transparent 65%, rgba(14, 21, 25, .85) 100%);
  z-index: 1;
}

.home-hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: var(--section);
  padding-bottom: calc(var(--section) + 40px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-l);
  margin-bottom: 26px;
  padding: 8px 18px 8px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--heat);
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 4px rgba(226, 59, 30, .25), 0 0 16px rgba(226, 59, 30, .65);
  animation: pulseHeat 2.4s ease-in-out infinite;
}

@keyframes pulseHeat {
  0%, 100% { box-shadow: 0 0 0 4px rgba(226, 59, 30, .25), 0 0 16px rgba(226, 59, 30, .65); }
  50%      { box-shadow: 0 0 0 8px rgba(226, 59, 30, .12), 0 0 24px rgba(226, 59, 30, .9); }
}

.home-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  color: var(--paper);
  max-width: 22ch;
  margin: 0 auto 22px;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .35);
}

.home-hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-l) 0%, #6cc4ee 40%, var(--brand-l) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6s linear infinite;
  display: inline-block;
}

@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hero-lede {
  font-size: clamp(var(--s-base), 1.4vw, var(--s-lg));
  color: rgba(255, 255, 255, .9);
  max-width: 60ch;
  margin: 0 auto 36px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
  line-height: 1.6;
}

.home-hero .hero-cta {
  justify-content: center;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--fd);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 580px) {
  .hero-scroll { display: none; }
}

.hero-scroll::after {
  content: "";
  width: 1.5px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent);
  animation: scrollHint 2s var(--ease-in-out-cubic) infinite;
  transform-origin: top;
}

@keyframes scrollHint {
  0%, 100% { transform: scaleY(.4); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* Stats bar — glassmorphism */
.stats {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(14, 21, 25, .35), rgba(14, 21, 25, .75));
  border-top: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 26px 0;
}

.stat {
  color: var(--paper);
  text-align: center;
  padding: 6px 12px;
  position: relative;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.stat-num {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  background: linear-gradient(135deg, var(--brand-l) 0%, #9ed7f3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  line-height: 1;
}

.stat-lbl {
  font-size: var(--s-sm);
  color: rgba(255, 255, 255, .78);
  font-family: var(--fd);
  font-weight: 500;
  letter-spacing: .02em;
}

/* =========================================================================
   Page hero (interior pages)
   ========================================================================= */

.p-hero {
  position: relative;
  background: var(--grad-ink);
  color: var(--paper);
  padding-top: calc(var(--section) + var(--head-h));
  padding-bottom: var(--section);
  margin-top: calc(var(--head-h) * -1);
  overflow: hidden;
  isolation: isolate;
}

.p-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--grad-aurora);
  filter: blur(50px);
  opacity: .7;
  z-index: -1;
  animation: auroraDrift 24s var(--ease-in-out-cubic) infinite alternate;
}

.p-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at top, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 20%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.crumb {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-l);
  margin-bottom: 16px;
}

.crumb a {
  color: var(--brand-l);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--paper);
}

.crumb .sep {
  margin: 0 8px;
  opacity: .5;
}

.p-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: var(--paper);
  margin-bottom: 18px;
  max-width: 22ch;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.p-hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-l), #9ed7f3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.p-hero .subtitle {
  font-size: var(--s-lg);
  color: rgba(255, 255, 255, .88);
  max-width: 65ch;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* =========================================================================
   Generic section
   ========================================================================= */

.section {
  padding-top: var(--section);
  padding-bottom: var(--section);
}

.section.paper {
  background: var(--paper);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--gap-l);
}

.section-head.left {
  text-align: left;
  margin-left: 0;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--heat);
  margin-bottom: 16px;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-heat);
  border-radius: 2px;
}

.section h2 {
  font-size: var(--s-4xl);
  margin-bottom: 16px;
  letter-spacing: -.022em;
  line-height: 1.08;
}

.section h2 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section .lede {
  color: var(--muted);
  font-size: var(--s-lg);
}

/* =========================================================================
   About row
   ========================================================================= */

.about-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap-l);
  align-items: center;
}

.about-text .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-d);
  background: var(--brand-xs);
  border-radius: 999px;
  margin-bottom: 16px;
}

.about-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
  box-shadow: var(--shadow-l);
  transform: translateZ(0);
  transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo);
}

.about-img::before {
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 30% 70%, rgba(21, 119, 184, .35), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(226, 59, 30, .25), transparent 55%);
  filter: blur(40px);
  z-index: -1;
  opacity: .8;
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

.about-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -30px rgba(14, 21, 25, .5), var(--shadow-glow-brand);
}

.about-img:hover img {
  transform: scale(1.06);
}

.about-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 21, 25, 0) 50%, rgba(14, 21, 25, .35) 100%);
  z-index: 1;
}

/* About text — improve headline */
.about-text h2 {
  font-size: var(--s-4xl);
  margin-bottom: 18px;
  line-height: 1.08;
  letter-spacing: -.022em;
}

.about-text h2 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================================
   Service cards
   ========================================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-s);
  perspective: 1400px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform .5s var(--ease-out-expo),
              box-shadow .5s var(--ease-out-expo),
              border-color .35s ease;
  cursor: pointer;
  text-align: left;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Gradient border overlay */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(59, 163, 223, .55), rgba(226, 59, 30, .35), rgba(21, 119, 184, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 4;
}

.card:hover::before {
  opacity: 1;
}

/* Glow underneath */
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 -30px 0;
  height: 50px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(21, 119, 184, .4), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: -1;
}

.card:hover::after {
  opacity: 1;
}

.card.card-icon-only {
  padding: 28px 24px;
}

.card-body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}

.card-img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(59, 163, 223, .35), transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo), filter .5s ease;
}

.card:hover .card-img img {
  transform: scale(1.08);
  filter: saturate(1.15) brightness(1.04);
}

.card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(14, 21, 25, .55) 100%);
  z-index: 1;
  transition: background .35s ease;
}

.card:hover .card-img::after {
  background: linear-gradient(180deg, rgba(21, 119, 184, .15) 0%, rgba(14, 21, 25, .65) 100%);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-xs);
  color: var(--brand);
  border-radius: 12px;
  margin-bottom: 20px;
}

.card h3 {
  font-size: var(--s-xl);
  margin-bottom: 12px;
  transition: color .25s ease;
}

.card:hover h3 {
  color: var(--brand-d);
}

.card p {
  color: var(--muted);
  font-size: var(--s-sm);
  margin-bottom: 18px;
}

.card-more {
  margin-top: auto;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .35s var(--ease-out-back), color .25s ease;
  position: relative;
  padding-bottom: 2px;
}

.card-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-l));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-out-expo);
}

.card:hover .card-more {
  gap: 14px;
  color: var(--heat);
}

.card:hover .card-more::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--heat), var(--heat-l));
}

/* Partner tile with logo image */
.tile {
  overflow: hidden;
  padding: 14px 18px;
}

.tile img {
  max-width: 100%;
  max-height: 60%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4) contrast(.85);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}

.tile:hover img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
}

/* Reference gallery with real photos */
.g-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}

.g-shot:hover img {
  transform: scale(1.05);
}

.g-cap {
  z-index: 3;
}

/* =========================================================================
   Feature row (2 columns: text + media, supports .flip)
   ========================================================================= */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  align-items: center;
}

.feature-row + .feature-row {
  margin-top: var(--section);
}

.feature-row.flip .fr-text {
  order: 2;
}

.feature-row.flip .fr-media {
  order: 1;
}

.fr-text h2 {
  font-size: var(--s-4xl);
  margin-bottom: 16px;
}

.fr-text p {
  color: var(--muted);
  font-size: var(--s-base);
  margin-bottom: 18px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 26px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-xs);
  letter-spacing: .03em;
  color: var(--brand-d);
  background: var(--brand-xs);
  border: 1px solid rgba(21, 119, 184, .18);
  border-radius: 999px;
}

.fr-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
  box-shadow: var(--shadow-l);
  transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo);
}

.fr-media::before {
  content: "";
  position: absolute;
  inset: -30px;
  background:
    radial-gradient(circle at 30% 70%, rgba(21, 119, 184, .3), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(226, 59, 30, .2), transparent 55%);
  filter: blur(35px);
  z-index: -1;
  opacity: .75;
}

.fr-media:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -30px rgba(14, 21, 25, .5), var(--shadow-glow-brand);
}

.fr-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}

.fr-media:hover img {
  transform: scale(1.06);
}

.fr-media .fr-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(59, 163, 223, .35), transparent 55%),
    linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
  color: rgba(255, 255, 255, .6);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Checklist (Wartung) */
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin: 22px 0 26px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--s-sm);
  color: var(--text);
}

.check-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-xs);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  margin-top: 2px;
}

/* =========================================================================
   Partner band (dark)
   ========================================================================= */

.partner-band {
  position: relative;
  background: var(--grad-ink);
  color: var(--paper);
  padding-top: var(--section);
  padding-bottom: var(--section);
  overflow: hidden;
  isolation: isolate;
}

.partner-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 50% at 80% 20%, rgba(21, 119, 184, .22), transparent 60%),
    radial-gradient(35% 45% at 15% 90%, rgba(226, 59, 30, .14), transparent 65%);
  filter: blur(30px);
  z-index: -1;
}

.partner-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

.partner-text h2 .accent {
  background: linear-gradient(120deg, var(--brand-l), #9ed7f3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.partner-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: var(--gap-l);
  align-items: center;
}

.partner-text h2 {
  color: var(--paper);
  font-size: var(--s-4xl);
  margin-bottom: 14px;
}

.partner-text p {
  color: rgba(255, 255, 255, .78);
}

.partner-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tile {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
  transition: transform .45s var(--ease-out-expo),
              background .25s ease,
              color .25s ease,
              border-color .25s ease,
              box-shadow .45s var(--ease-out-expo);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 163, 223, .15), rgba(226, 59, 30, .1));
  opacity: 0;
  transition: opacity .35s ease;
}

.tile:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .25);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.tile:hover::before {
  opacity: 1;
}

/* =========================================================================
   Reference gallery
   ========================================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-s);
}

.g-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
  transition: transform .55s var(--ease-out-expo), box-shadow .55s var(--ease-out-expo);
  cursor: pointer;
}

.g-shot:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-l);
}

.g-shot:nth-child(2) {
  background: linear-gradient(135deg, var(--heat) 0%, var(--ink-700) 100%);
}

.g-shot:nth-child(3) {
  background: linear-gradient(135deg, var(--brand-d) 0%, var(--ink) 100%);
}

.g-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 21, 25, .75) 100%);
  z-index: 1;
}

.g-cap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  z-index: 2;
  color: var(--paper);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-lg);
  transform: translateY(0);
  transition: transform .5s var(--ease-out-expo);
}

.g-shot:hover .g-cap {
  transform: translateY(-4px);
}

.g-cap small {
  display: block;
  font-family: var(--fb);
  font-weight: 500;
  font-size: var(--s-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 4px;
}

/* =========================================================================
   CTA band
   ========================================================================= */

.cta-band {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(21, 119, 184, .15) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(226, 59, 30, .12) 0%, transparent 50%),
    var(--paper);
  text-align: center;
  padding-top: var(--section);
  padding-bottom: var(--section);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21, 119, 184, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 119, 184, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.cta-band h2 .accent {
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cta-band h2 {
  font-size: var(--s-4xl);
  margin-bottom: 14px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band p {
  color: var(--muted);
  font-size: var(--s-lg);
  max-width: 55ch;
  margin: 0 auto 28px;
}

.cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* =========================================================================
   Karriere — benefits, members, jobs
   ========================================================================= */

.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-s);
}

.benefit {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 30px 24px;
  text-align: left;
  transition: transform .5s var(--ease-out-expo),
              box-shadow .5s var(--ease-out-expo),
              border-color .35s ease;
  overflow: hidden;
}

.benefit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--heat), var(--brand));
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}

.benefit::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--r-l) - 2px);
  background: var(--paper);
  z-index: 1;
}

.benefit > * {
  position: relative;
  z-index: 2;
}

.benefit:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

.benefit:hover::before {
  opacity: 1;
}

.benefit-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(226, 59, 30, .12), rgba(226, 59, 30, .05));
  color: var(--heat);
  border-radius: 14px;
  margin-bottom: 20px;
  transition: transform .5s var(--ease-out-back), background .35s ease;
}

.benefit:hover .benefit-icon {
  transform: rotate(-6deg) scale(1.08);
  background: var(--grad-heat);
  color: var(--paper);
  box-shadow: 0 12px 24px -10px rgba(226, 59, 30, .55);
}

.benefit h3 {
  font-size: var(--s-lg);
  margin-bottom: 10px;
}

.benefit p {
  color: var(--muted);
  font-size: var(--s-sm);
}

.members {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-s);
}

.member {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo);
}

.member:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.member-img img {
  transition: transform 1s var(--ease-out-expo), filter .5s ease;
}

.member:hover .member-img img {
  transform: scale(1.06);
  filter: saturate(1.1);
}

.member-img {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(59, 163, 223, .35), transparent 65%),
    linear-gradient(135deg, var(--ink-700) 0%, var(--ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.member-initials {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--s-3xl);
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
}

.member-body {
  padding: 22px 22px 26px;
}

.member-body h3 {
  font-size: var(--s-lg);
  margin-bottom: 10px;
}

.member-rule {
  width: 36px;
  height: 3px;
  background: var(--heat);
  border-radius: 2px;
  margin-bottom: 14px;
}

.member-quote {
  font-style: italic;
  color: var(--muted);
  font-size: var(--s-sm);
  line-height: 1.6;
}

.jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-s);
}

.job {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 28px;
  transition: transform .5s var(--ease-out-expo),
              box-shadow .5s var(--ease-out-expo),
              border-color .35s ease;
  overflow: hidden;
}

.job::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .5s var(--ease-out-expo);
}

.job:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-2);
}

.job:hover::before {
  transform: scaleY(1);
  transform-origin: top center;
}

.job-apply {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .35s var(--ease-out-back), color .25s ease;
}

.job:hover .job-apply {
  gap: 14px;
  color: var(--heat);
}

.job-badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-d);
  background: var(--brand-xs);
  border-radius: 999px;
  margin-bottom: 14px;
}

.job-badge.ausbildung {
  color: var(--heat-d);
  background: rgba(226, 59, 30, .08);
}

.job h3 {
  font-size: var(--s-lg);
  margin-bottom: 10px;
}

.job p {
  color: var(--muted);
  font-size: var(--s-sm);
  margin-bottom: 16px;
}

.apply-mail {
  text-align: center;
  margin-top: var(--gap-l);
  color: var(--muted);
}

.apply-mail a {
  font-weight: 600;
}

/* =========================================================================
   Kontakt — info card + form
   ========================================================================= */

.kontakt-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--gap-l);
  align-items: start;
}

.info-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-l);
  padding: 36px 32px;
  box-shadow: var(--shadow-m);
}

.info-card h2 {
  color: var(--paper);
  font-size: var(--s-2xl);
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.info-item:last-child {
  border-bottom: none;
}

.info-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 163, 223, .15);
  color: var(--brand-l);
  border-radius: 10px;
}

.info-lbl {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 4px;
}

.info-val {
  font-size: var(--s-base);
  color: var(--paper);
  line-height: 1.5;
}

.info-val a {
  color: var(--brand-l);
}

.info-val a:hover {
  color: var(--paper);
}

/* Form */
.contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 36px 32px;
  box-shadow: var(--shadow-xs);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.field {
  display: flex;
  flex-direction: column;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-sm);
  color: var(--ink);
  margin-bottom: 6px;
}

.field .req {
  color: var(--heat);
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: var(--s-base);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 44px;
  font-family: var(--fb);
}

.field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(21, 119, 184, .12);
}

.field input.error,
.field select.error,
.field textarea.error {
  border-color: var(--heat);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0 20px;
  font-size: var(--s-sm);
  color: var(--muted);
  line-height: 1.55;
}

.consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--brand);
}

.consent label {
  cursor: pointer;
}

.consent .req {
  color: var(--heat);
}

.form-msg {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: var(--s-sm);
  display: none;
}

.form-msg.show {
  display: block;
}

.form-msg.success {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok-border);
}

.form-msg.error {
  background: var(--err-bg);
  color: var(--heat-d);
  border: 1px solid var(--err-border);
}

/* =========================================================================
   Testimonials / Google Reviews
   ========================================================================= */

.reviews-band {
  position: relative;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(21, 119, 184, .12) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(226, 59, 30, .08) 0%, transparent 50%),
    var(--bg);
  padding-top: var(--section);
  padding-bottom: var(--section);
  overflow: hidden;
}

.reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--gap-l);
}

.reviews-rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 22px;
}

.reviews-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: var(--s-lg);
  letter-spacing: 1px;
}

.reviews-rating-num {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--s-lg);
  color: var(--ink);
}

.reviews-rating-meta {
  font-size: var(--s-sm);
  color: var(--muted);
}

.reviews-rating-meta strong {
  color: var(--ink);
  font-weight: 700;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-s);
}

.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .5s var(--ease-out-expo),
              box-shadow .5s var(--ease-out-expo),
              border-color .35s ease;
  overflow: hidden;
}

.review::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  right: 18px;
  font-family: var(--fd);
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-xs);
  z-index: 0;
  transition: color .35s ease, transform .5s var(--ease-out-expo);
  pointer-events: none;
}

.review:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

.review:hover::before {
  color: rgba(21, 119, 184, .15);
  transform: scale(1.08) rotate(-3deg);
}

.review-stars,
.review-text,
.review-author {
  position: relative;
  z-index: 1;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: var(--s-sm);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.review-text {
  color: var(--text);
  font-size: var(--s-sm);
  line-height: 1.65;
  margin-bottom: 22px;
  flex: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--ink-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  flex-shrink: 0;
}

.review-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.review-name {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--ink);
}

.review-when {
  font-size: var(--s-xs);
  color: var(--muted);
}

.reviews-cta {
  text-align: center;
  margin-top: var(--gap-l);
}

.reviews-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}

.reviews-cta a:hover {
  border-color: var(--brand);
  background: var(--brand-xs);
  color: var(--brand-d);
}

.google-g {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =========================================================================
   Footer
   ========================================================================= */

.foot {
  position: relative;
  background: var(--grad-ink);
  color: rgba(255, 255, 255, .75);
  padding-top: var(--section);
  padding-bottom: 32px;
  overflow: hidden;
  isolation: isolate;
}

/* On the HOME PAGE only: the footer locks to exactly one viewport,
   sitting right after the Final CTA. The cities marquee, brand+nav grid,
   and copyright bar are vertically distributed to fill the viewport. */
body[data-current-page="start"] .foot {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  padding-top: clamp(40px, 6vh, 90px);
  padding-bottom: clamp(20px, 2.4vh, 36px);
  display: flex;
  align-items: stretch;
}
body[data-current-page="start"] .foot .wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 4vh, 56px);
  min-height: 0;
}

/* Short viewports: release the strict 100dvh so the footer never crops. */
@media (max-height: 680px) {
  body[data-current-page="start"] .foot {
    height: auto;
    min-height: 0;
  }
}

/* Footer .wrap uses the same max-width and gutter as the header so the
   left edge of the brand lockup lines up with the header logo, and the
   right edge of the contact column lines up with the header CTA. */
.foot .wrap {
  max-width: var(--maxw-wide);
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.foot::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 50%;
  background:
    radial-gradient(50% 70% at 20% 0%, rgba(21, 119, 184, .15), transparent 65%),
    radial-gradient(40% 60% at 85% 10%, rgba(226, 59, 30, .08), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
}

/* Footer brand lockup — mirrors the header structure (icon + text) */
.foot-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  text-decoration: none;
  transition: opacity .25s ease;
}

.foot-brand-link:hover { opacity: .85; }

.foot-brand-link .logo-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  margin-bottom: 0;
  max-width: none;
}

.foot-brand-link .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.foot-brand-link .brand-name {
  font-family: "Barlow Condensed", "Archivo", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .015em;
  color: var(--paper);
  white-space: nowrap;
  line-height: 1;
}

.foot-brand-link .brand-tag {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

/* Legacy class kept for safety — no longer used in markup */
.logo-mark-dark {
  filter: invert(1) hue-rotate(180deg);
}

.foot-brand p {
  color: rgba(255, 255, 255, .65);
  font-size: var(--s-sm);
  max-width: 36ch;
}

.foot-col h4 {
  color: var(--paper);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.foot-col ul li {
  margin-bottom: 10px;
}

.foot-col a {
  color: rgba(255, 255, 255, .7);
  font-size: var(--s-sm);
  transition: color .15s ease;
}

.foot-col a:hover {
  color: var(--brand-l);
}

.foot-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--s-sm);
  color: rgba(255, 255, 255, .7);
}

.foot-contact-row svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-l);
}

.foot-contact-row a {
  color: rgba(255, 255, 255, .7);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--s-xs);
  color: rgba(255, 255, 255, .5);
}

.foot-bottom-links {
  display: flex;
  gap: 18px;
}

.foot-bottom-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fd);
  font-weight: 500;
  letter-spacing: .04em;
}

.foot-credit-link {
  position: relative;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--paper);
  text-decoration: none;
  background: linear-gradient(120deg, var(--brand-l) 0%, #9ed7f3 50%, var(--brand-l) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .5s ease;
}

.foot-credit-link:hover {
  background-position: 100% center;
  color: transparent;
}

.foot-bottom a {
  color: rgba(255, 255, 255, .55);
}

.foot-bottom a:hover {
  color: var(--brand-l);
}

.foot-bottom .foot-credit-link {
  color: transparent;
}

.foot-demo {
  font-style: italic;
  opacity: .6;
}

/* =========================================================================
   Mobile nav overlay
   ========================================================================= */

/* =========================================================================
   Mobile nav — full-bleed overlay with dark editorial header.
   Leistungen group is open by default for clarity.
   ========================================================================= */
.mnav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .35s var(--ease-out-expo, ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Use dvh so the overlay fills the actual visible viewport on mobile
     (accounts for the browser chrome). */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

.mnav.open {
  transform: translateX(0);
}

/* HEAD — same dark navy as the site header for visual continuity */
.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  min-height: var(--head-h);
  flex: 0 0 auto;
}

/* Match the desktop header brand lockup EXACTLY: coloured logo + white name +
   muted tag, same sizes as `.head .brand-*`. */
.mnav-head .brand-link { color: var(--paper); }
.mnav-head .brand-name {
  font-family: "Barlow Condensed", "Archivo", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .015em;
  color: var(--paper);
  white-space: nowrap;
  line-height: 1;
}
.mnav-head .brand-tag {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
/* Logo: same colours and same 44px height as the desktop header.
   The extra `.mnav` selector beats the earlier `.mnav .brand-link .logo-mark`
   default of 38px without resorting to !important. */
.mnav .mnav-head .brand-link .logo-mark {
  filter: none;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
.mnav-head .brand-text { display: flex; flex-direction: column; line-height: 1.15; }

/* Mobile (≤580px): in the MOBILE MENU header, show ONLY the logo —
   no brand name, no slogan. The site header keeps the name (smaller). */
@media (max-width: 580px) {
  .mnav .mnav-head .brand-link .logo-mark { height: 34px; }
  .mnav-head .brand-text { display: none; }
}

/* Right-side cluster: language switch (left) then close button (right) */
.mnav-head-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  flex: 0 0 auto;
}
.mnav-head-actions .lang-switch--mobile { order: 1; }
.mnav-head-actions .mnav-close          { order: 2; }

/* Lang switch lives on a dark background here — adjust contrast accordingly */
.mnav-head .lang-switch--mobile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.mnav-head .lang-switch--mobile .lang-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  overflow: hidden;
}
.mnav-head .lang-switch--mobile .lang-btn:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
}
.mnav-head .lang-switch--mobile .lang-btn.is-active {
  background: rgba(255, 255, 255, .2);
  border-color: var(--paper);
}
.mnav-head .lang-switch--mobile .fi {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.mnav-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  color: var(--paper);
  background: transparent;
  border: none;
  transition: background .2s ease;
}

.mnav-close:hover {
  background: rgba(255, 255, 255, .08);
}

/* LIST — fills all available space; large editorial type */
.mnav-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1vh, 12px);
  padding: clamp(24px, 5vh, 60px) var(--pad);
  margin: 0;
  list-style: none;
  min-height: 0;
}

.mnav-list > li {
  list-style: none;
}

.mnav-list > li > a,
.mnav-group-label {
  display: block;
  padding: clamp(10px, 1.6vh, 16px) 0;
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
  transition: color .2s ease;
}

.mnav-list > li > a:hover,
.mnav-list > li > a.active {
  color: var(--brand);
}

.mnav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 14px;
}

.mnav-group-label > span:first-child { flex: 1 1 auto; }

.mnav-group-label .chev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease-out-expo, ease);
  color: var(--muted);
}

.mnav-group.open .mnav-group-label .chev {
  transform: rotate(180deg);
  color: var(--brand);
}

/* SUB — open by default (no max-height collapse); reveal smoothly when toggled */
.mnav-sub {
  list-style: none;
  margin: 0;
  padding: clamp(8px, 1.4vh, 14px) 0 clamp(10px, 1.8vh, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .6vh, 8px);
  overflow: hidden;
  max-height: 600px;
  transition: max-height .35s var(--ease-out-expo, ease),
              padding .35s var(--ease-out-expo, ease),
              opacity .25s ease;
  opacity: 1;
}

/* When explicitly collapsed via JS toggle */
.mnav-group:not(.open) .mnav-sub {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.mnav-sub li {
  list-style: none;
}

.mnav-sub li a {
  display: block;
  padding: clamp(8px, 1.2vh, 12px) 0 clamp(8px, 1.2vh, 12px) clamp(18px, 4vw, 24px);
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  letter-spacing: -.005em;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.mnav-sub li a:hover,
.mnav-sub li a.active {
  color: var(--brand);
  border-left-color: var(--brand);
}

/* FOOT — anchored at the bottom with a subtle grey wash so the CTA stands out */
.mnav-foot {
  flex: 0 0 auto;
  padding: clamp(20px, 3vh, 32px) var(--pad) clamp(22px, 3.4vh, 36px);
  border-top: 1px solid var(--line);
  background: #f3f5f8;
}

.mnav-foot .btn {
  width: 100%;
  font-size: clamp(1rem, 3vw, 1.1rem);
  padding: clamp(14px, 2vh, 18px) 24px;
}

/* =========================================================================
   Pages
   ========================================================================= */

.page {
  display: none;
}

.page.active {
  display: block;
  animation: pageIn .55s var(--ease-out-expo) both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.992);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* =========================================================================
   Cinematic reveal — multi-axis with blur + clip
   ========================================================================= */

.rv {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out-expo),
              transform .9s var(--ease-out-expo),
              filter .9s var(--ease-out-expo);
  will-change: transform, opacity, filter;
}

.rv.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Directional variants */
.rv-left {
  transform: translate3d(-40px, 0, 0);
}

.rv-right {
  transform: translate3d(40px, 0, 0);
}

.rv-scale {
  transform: scale(.94);
  filter: blur(10px);
}

.rv-scale.in {
  transform: scale(1);
}

.rv.d1 { transition-delay: 90ms; }
.rv.d2 { transition-delay: 180ms; }
.rv.d3 { transition-delay: 270ms; }
.rv.d4 { transition-delay: 360ms; }
.rv.d5 { transition-delay: 450ms; }

/* Tilt cards (driven by JS via CSS vars) */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --tx: 50%;
  --ty: 50%;
  transition: transform .25s var(--ease-out-expo),
              box-shadow .35s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  }

  .tilt:hover {
    transition: transform .15s linear, box-shadow .35s var(--ease-out-expo);
  }

  /* Subtle gloss layer that follows cursor */
  .tilt-gloss {
    position: relative;
  }

  .tilt-gloss::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(280px circle at var(--tx) var(--ty), rgba(255, 255, 255, .14), transparent 50%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: 5;
    mix-blend-mode: overlay;
  }

  .tilt-gloss:hover::before {
    opacity: 1;
  }
}

/* Counter animation hook */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1080px) {
  .nav-link {
    padding: 10px 10px;
    font-size: var(--s-xs);
  }

  .nav-tel {
    font-size: var(--s-xs);
  }
}

@media (max-width: 900px) {
  .nav,
  .nav-tel {
    display: none;
  }

  .burger {
    display: flex;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-s);
  }

  .about-row,
  .feature-row,
  .partner-grid,
  .kontakt-grid {
    grid-template-columns: 1fr;
  }

  .feature-row.flip .fr-text {
    order: 0;
  }

  .feature-row.flip .fr-media {
    order: 0;
  }

  .cards,
  .benefits,
  .members,
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .jobs {
    grid-template-columns: 1fr;
  }

  .partner-tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-hero h1 {
    max-width: none;
  }
}

@media (max-width: 580px) {
  :root {
    --head-h: 64px;
  }

  .logo-mark {
    height: 36px;
    width: auto;
  }

  .foot-brand-link .logo-mark {
    height: 38px;
  }
  .foot-brand-link .brand-name { font-size: 20px; }
  .foot-brand-link .brand-tag  { font-size: 13px; }

  .cards,
  .benefits,
  .members,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .partner-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }

  .checklist {
    grid-template-columns: 1fr;
  }

  .hero-cta,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn,
  .cta-actions .btn {
    width: 100%;
  }

  .info-card,
  .contact-form {
    padding: 24px 22px;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================================
   ╔═══════════════════════════════════════════════════════════════════════╗
   ║  JOURNEY HOMEPAGE — Awwwards-grade editorial layout                   ║
   ║  All classes prefixed .j-* to avoid colliding with legacy components. ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   ========================================================================= */

/* ---------- Editorial typography scale ---------- */
:root {
  --s-display: clamp(1.8rem, min(4.6vw, 8.5vh), 4.5rem);  /* hero / KPI numbers — reduced for better balance */
  --s-mega:    clamp(1.9rem, 5vw, 4.6rem);
  --s-huge:    clamp(1.7rem, 3.6vw, 3.4rem);
  --pad-fluid: clamp(20px, 5vw, 80px);
  --maxw-wide: 1480px;
  --gutter-x: clamp(20px, 4.4vw, 64px);
}

.j-wrap {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

/* Custom cursor removed — native pointer is the better default for a service business. */

/* =========================================================================
   1) j-hero — split editorial
   ========================================================================= */

.j-hero {
  position: relative;
  /* Always fill the viewport on desktop — dynamic viewport keeps mobile URL bar from cropping */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  /* Text column gets ~58% so the long German title (Klimatechnik.) has room without ever
     being overlapped by the photo. Photo gets the remaining ~42%. */
  grid-template-columns: minmax(min(620px, 55%), 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  /* Bright, airy left side fading into the photo on the right */
  background:
    radial-gradient(60% 80% at 12% 18%, #ffffff 0%, transparent 55%),
    radial-gradient(50% 70% at 25% 90%, #dbeafd 0%, transparent 60%),
    linear-gradient(125deg, #f4f8fc 0%, #e3eef8 50%, #cfe1ef 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(var(--head-h) * -1);
  padding-top: var(--head-h);
}

/* Soft sky-blue aurora — luminous, very subtle */
.j-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(45% 55% at 10% 20%, rgba(125, 211, 252, .35) 0%, transparent 65%),
    radial-gradient(40% 50% at 35% 80%, rgba(91, 192, 240, .28) 0%, transparent 65%),
    radial-gradient(35% 40% at 0% 100%, rgba(226, 59, 30, .08) 0%, transparent 70%);
  filter: blur(80px);
  opacity: .85;
  z-index: 0;
  pointer-events: none;
  animation: auroraDrift 22s var(--ease-in-out-cubic) infinite alternate;
}

/* Technical grid removed — keeps left side clean */

.j-hero__main {
  position: relative;
  z-index: 2;
  /* Left padding mirrors the .j-wrap formula:
       (viewport_minus_maxw / 2)  +  inner_gutter
     so the hero text starts on the exact same vertical axis as the header logo
     and the section content below. */
  padding:
    clamp(28px, 5vh, 100px)
    clamp(28px, 4vw, 56px)
    clamp(28px, 4vh, 70px)
    calc(max(0px, (100vw - var(--maxw-wide, 1480px)) / 2) + var(--gutter-x));
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  min-height: 0;
}

/* Tighten internal spacing when viewport is short */
.j-hero__eyebrow { margin-bottom: clamp(14px, 2.4vh, 36px); }
.j-hero__title  { margin: 0 0 clamp(14px, 2.4vh, 30px); }
.j-hero__lede   { margin: 0 0 clamp(18px, 3vh, 40px); }

.j-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Inter", "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: clamp(14px, 2.4vh, 36px);
  padding: 11px 22px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(14, 21, 25, .08);
  border-radius: 999px;
  width: fit-content;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px -6px rgba(14, 21, 25, .15);
}

/* Pulsing dot removed for a calmer eyebrow */

.j-hero__title {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-display);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 clamp(14px, 2.4vh, 30px);
  text-shadow: none;
  max-width: 14ch;
}

.j-hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.j-hero__title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise .9s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 100ms + 200ms);
}

@keyframes rise {
  to { transform: translateY(0); }
}

.j-hero__title .gradient {
  background: linear-gradient(110deg, var(--brand-d) 0%, var(--brand) 50%, var(--brand-l) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-hero__lede {
  font-size: clamp(var(--s-base), 1.25vw, 1.15rem);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.55;
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .9s var(--ease-out-expo) .7s forwards;
  text-shadow: none;
}

@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

.j-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  animation: fadeUp .9s var(--ease-out-expo) .9s forwards;
  transform: translateY(20px);
}

/* KPI strip — fills the lower-left, adds credibility cues */
.j-hero__kpis {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: clamp(28px, 3.2vw, 56px);
  row-gap: clamp(18px, 2.4vh, 28px);
  justify-content: start;
  margin-top: clamp(28px, 4vh, 56px);
  padding-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid rgba(14, 21, 25, .1);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .9s var(--ease-out-expo) 1.1s forwards;
  max-width: 620px;
}

.j-hero__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.j-hero__kpi-num {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}

.j-hero__kpi-num .star {
  color: var(--heat);
  font-size: .85em;
  margin-left: 2px;
}

.j-hero__kpi-lbl {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .j-hero__kpis { max-width: none; }
}

@media (max-width: 640px) {
  .j-hero__kpis {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(20px, 4vw, 32px);
    row-gap: 16px;
  }
}

/* Vertical eyebrow on far left */
.j-hero__vert {
  position: absolute;
  /* Vertically centered in the hero, sits in the gutter just left of the
     main text axis. */
  left: calc(max(0px, (100vw - var(--maxw-wide, 1480px)) / 2) + var(--gutter-x) - clamp(40px, 4.5vw, 60px));
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-lr;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand-d);
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Short brand-blue line — sits above the rotated label visually (below in source) */
.j-hero__vert::before {
  content: "";
  display: block;
  width: 1.5px;
  height: 40px;
  background: var(--brand);
}

/* Image side */
.j-hero__media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0%);
  animation: clipReveal 1.4s var(--ease-out-expo) .2s both;
}

@keyframes clipReveal {
  from { clip-path: inset(0% 0% 100% 0%); }
  to   { clip-path: inset(0% 0% 0% 0%); }
}

.j-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photo centered in its column on both axes */
  object-position: 50% 50%;
  transform: scale(1.04);
  animation: heroBgZoom 22s var(--ease-in-out-cubic) infinite alternate;
  filter: saturate(1.05) contrast(1.02);
}

/* Soft feathered edge — blends photo into the light text side, no darkening */
.j-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, transparent 75%, rgba(207, 225, 239, .6) 95%, rgba(207, 225, 239, .9) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Hero index card overlay */
/* Google-attribution chip — child of .j-hero__media so it sits inside the photo cell, never overlapping the marquee */
.j-hero__media .j-hero__badge {
  position: absolute;
  right: clamp(20px, 2.5vw, 32px);
  bottom: clamp(20px, 4vh, 48px);
  top: auto;
  left: auto;
  z-index: 5; /* above the photo gradient */
  z-index: 4;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(14, 21, 25, .06);
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--fd);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .9s var(--ease-out-expo) 1.1s forwards;
  box-shadow: 0 18px 40px -16px rgba(14, 21, 25, .3),
              0 4px 12px -4px rgba(14, 21, 25, .12);
}

.j-hero__badge-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}

.j-hero__badge-lbl {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 600;
}

.j-hero__badge-lbl .stars {
  color: #f5a623;
  font-size: 1.05em;
  letter-spacing: 1px;
}

/* Marquee at bottom of hero */
.j-hero__marquee {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  padding: clamp(14px, 1.8vh, 24px) 0;
  border-top: 1px solid rgba(14, 21, 25, .08);
  border-bottom: 1px solid rgba(14, 21, 25, .06);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.j-hero__marquee .j-marquee__item {
  color: var(--ink-700);
}

.j-hero__marquee .j-marquee__item::after {
  color: var(--heat);
}

/* ---------- Generic marquee ---------- */
.j-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.j-marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  animation: marqueeScroll var(--marquee-duration, 38s) linear infinite;
}

.j-marquee--reverse .j-marquee__track {
  animation-direction: reverse;
}

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.j-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(.95rem, 1.3vw, 1.2rem);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  text-transform: uppercase;
}

.j-marquee__item::after {
  content: "✱";
  color: var(--heat);
  margin-left: clamp(28px, 4vw, 56px);
  font-size: .9em;
  opacity: .9;
}

.j-marquee__item:last-child::after { display: none; }

.j-marquee--dark { background: var(--ink); padding: clamp(24px, 3vw, 40px) 0; }
.j-marquee--light { background: var(--paper); padding: clamp(24px, 3vw, 40px) 0; }
.j-marquee--light .j-marquee__item { color: var(--ink); }
.j-marquee--light .j-marquee__item::after { color: var(--heat); }
.j-marquee--big .j-marquee__item { font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -.02em; text-transform: none; }

/* =========================================================================
   2) j-stats — editorial KPIs full-bleed
   ========================================================================= */

.j-stats {
  position: relative;
  /* Continues the airy hero gradient; flows into the white About section below */
  background:
    linear-gradient(180deg, #cfe1ef 0%, #e7eff6 60%, #ffffff 100%);
  color: var(--ink);
  padding: clamp(60px, 9vw, 140px) 0;
  overflow: hidden;
}

.j-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(91, 192, 240, .18), transparent 65%);
  pointer-events: none;
}

.j-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 80px);
  position: relative;
  z-index: 1;
}

.j-stat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(14, 21, 25, .15);
  padding-top: clamp(22px, 3vw, 36px);
  color: var(--ink);
}

.j-stat__num {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
  display: inline-block;
}

.j-stat__lbl {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-sm);
  letter-spacing: .04em;
  color: var(--muted);
  max-width: 28ch;
  line-height: 1.5;
}

.j-stat__caption {
  font-size: var(--s-xs);
  color: var(--brand-d);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--fd);
  font-weight: 700;
}

/* =========================================================================
   3) j-about — sticky split
   ========================================================================= */

.j-about {
  position: relative;
  background: var(--paper);
  /* Section locks to exactly one viewport — header overlaps via sticky. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  padding: calc(var(--head-h) + clamp(20px, 3vh, 50px)) 0 clamp(30px, 5vh, 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* On short viewports release the strict one-screen rule so content stays readable */
@media (max-height: 680px) {
  .j-about {
    height: auto;
    min-height: 0;
    padding: 60px 0;
  }
  .j-about__media {
    max-height: 480px;
    aspect-ratio: 4 / 5;
  }
}

.j-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 70px);
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.j-about__media {
  /* Photo's height is constrained by the available vertical space, then aspect
     ratio gives it width. No more overflow at the bottom of the section. */
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 4 / 5;
  justify-self: start;
  align-self: center;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--grad-ink);
  box-shadow: var(--shadow-l);
}

.j-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.j-about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 21, 25, .55) 100%);
}

.j-about__media-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  color: var(--paper);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: rgba(14, 21, 25, .55);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.j-about__text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 40px);
  padding: 0;
  justify-content: center;
}

.j-about__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--heat);
}

.j-about__kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--grad-heat);
  border-radius: 2px;
}

.j-about__head h2 {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(1.6rem, min(4vw, 7vh), 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 12px 0 0;
  color: var(--ink);
}

.j-about__head h2 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-about__blocks {
  display: grid;
  gap: clamp(14px, 2vh, 26px);
}

.j-about__block {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding-top: clamp(12px, 1.6vh, 22px);
  border-top: 1px solid var(--line);
}

.j-about__block-num {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  color: var(--heat);
  letter-spacing: .12em;
}

.j-about__block h3 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.j-about__block p {
  color: var(--muted);
  font-size: clamp(.82rem, 1vw, .95rem);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================================
   4) j-services — horizontal pinned scroll
   ========================================================================= */

.j-services {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  /* Stage height = 100vh - head_h. Pin distance = 3 × stage_height (4 panels = 3 transitions).
     We add a small extra buffer (+ head_h) so the sticky stage stays anchored
     a little past the moment the last panel is fully revealed — this hides any
     sub-pixel gap that would otherwise let the next section peek through. */
  height: calc(4 * (100vh - var(--head-h)) + var(--head-h));
  /* clip-x lets `position: sticky` inside still work, while preventing horizontal scroll */
  overflow-x: clip;
}

.j-services__stage {
  /* Hide horizontal overflow only on the sticky stage where the track lives */
  overflow: hidden;
}

/* "Continue scrolling" hint shown only when the user reaches the last panel.
   --pin-progress is driven by the scroll engine (0 → 1 across the whole pin). */
.j-services__continue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
  white-space: nowrap;
}

/* Animated chevron rendered with a pseudo element so we don't touch i18n */
.j-services__continue::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: j-continue-bounce 1.6s var(--ease-in-out-cubic) infinite;
}

@keyframes j-continue-bounce {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .6; }
  50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 1; }
}

/* Reveal when the last panel is the active one (class toggled by scroll-engine) */
.j-services.is-last-panel .j-services__continue {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .j-services__continue::after { animation: none; }
}

.j-services__intro {
  position: absolute;
  top: clamp(20px, 3vh, 50px);
  left: 0;
  right: 0;
  z-index: 3;
  /* Left padding mirrors the header .wrap formula so the intro title aligns
     with the logo / .j-hero__main / page title axis. */
  padding-left: calc(max(0px, (100vw - var(--maxw-wide, 1480px)) / 2) + var(--pad));
  padding-right: clamp(40px, 6vw, 100px);
  pointer-events: none;
}

.j-services__intro > * { pointer-events: auto; }

.j-services__intro-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 60px);
}

.j-services__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-l);
}

.j-services__kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--brand-l);
  border-radius: 2px;
}

.j-services__title {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-huge);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 14px 0 0;
  color: var(--paper);
  max-width: 14ch;
}

.j-services__title .accent {
  background: linear-gradient(120deg, var(--brand-l), #9ed7f3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-services__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.j-services__progress-bar {
  width: clamp(80px, 14vw, 200px);
  height: 2px;
  background: rgba(255, 255, 255, .15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.j-services__progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  transform-origin: left center;
  transform: scaleX(var(--pin-progress, 0));
  transition: transform .15s linear;
}

.j-services__stage {
  position: sticky;
  /* Stick below the header so the content never gets covered by it */
  top: var(--head-h);
  height: calc(100vh - var(--head-h));
  overflow: hidden;
  z-index: 1;
}

.j-services__track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.j-service {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  /* Top padding leaves room for the intro row sitting on top.
     Left padding mirrors the header .wrap formula so the service text starts
     on the same vertical axis as the header logo, j-hero text and intro title. */
  padding-top: clamp(110px, 16vh, 170px);
  padding-bottom: clamp(40px, 6vh, 80px);
  padding-left: calc(max(0px, (100vw - var(--maxw-wide, 1480px)) / 2) + var(--pad));
  padding-right: clamp(40px, 6vw, 100px);
  gap: clamp(40px, 6vw, 100px);
  overflow: hidden;
}

/* Vertically center the text column inside its grid track */
.j-service__content {
  align-self: center;
}

.j-service__num {
  position: absolute;
  /* Sits below the sticky intro row so they never overlap; capped by viewport height */
  top: clamp(70px, 11vh, 130px);
  right: clamp(40px, 6vw, 100px);
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(5rem, min(14vw, 18vh), 12rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .15);
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.j-service__content {
  position: relative;
  z-index: 2;
  max-width: 56ch;
}

.j-service__tag {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-l);
  background: rgba(59, 163, 223, .08);
  border: 1px solid rgba(59, 163, 223, .25);
  border-radius: 999px;
  margin-bottom: 28px;
}

.j-service h3 {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-mega);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  color: var(--paper);
}

.j-service p {
  font-size: clamp(.95rem, 1.1vw, 1.1rem);
  color: rgba(255, 255, 255, .82);
  line-height: 1.65;
  margin: 0 0 30px;
  max-width: 56ch;
}

.j-service__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.j-service__list span {
  display: inline-flex;
  padding: 6px 14px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
}

.j-service__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  background: var(--grad-brand);
  color: var(--paper);
  border-radius: var(--r);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  box-shadow: var(--shadow-glow-brand);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}

.j-service__cta:hover {
  transform: translateY(-3px);
  color: var(--paper);
  box-shadow: 0 24px 50px -16px rgba(21, 119, 184, .7);
}

.j-service__cta svg {
  width: 16px;
  height: 16px;
  transition: transform .35s var(--ease-out-expo);
}

.j-service__cta:hover svg { transform: translateX(4px); }

.j-service__media {
  position: relative;
  /* Landscape photo — wider than tall, fills more horizontal space.
     Height capped so the giant outline number stays visible above it. */
  height: auto;
  max-height: calc(100vh - var(--head-h) - clamp(260px, 32vh, 380px));
  aspect-ratio: 16 / 11;
  width: 100%;
  max-width: clamp(480px, 48vw, 760px);
  justify-self: end;
  align-self: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--grad-ink);
  box-shadow: var(--shadow-l);
}

.j-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.j-service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(21, 119, 184, .12), rgba(14, 21, 25, .35));
}

/* =========================================================================
   5) j-process — vertical timeline that fills with scroll
   ========================================================================= */

.j-process {
  position: relative;
  background: var(--paper);
  padding: clamp(60px, 9vw, 140px) 0;
}

.j-process__head {
  max-width: 720px;
  margin: 0 auto clamp(50px, 6vw, 90px);
  text-align: center;
}

.j-process__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--heat);
  margin-bottom: 18px;
}

.j-process__kicker::before,
.j-process__kicker::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-heat);
  border-radius: 2px;
}

.j-process__title {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-huge);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 18px;
}

.j-process__title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-process__sub {
  color: var(--muted);
  font-size: var(--s-lg);
  line-height: 1.6;
  margin: 0;
}

.j-process__list {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: clamp(50px, 6vw, 100px);
}

.j-process__rail {
  position: absolute;
  left: clamp(18px, 2vw, 32px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.j-process__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
  transition: transform .15s linear;
}

.j-process__step {
  position: relative;
  padding: clamp(30px, 4vw, 50px) 0 clamp(30px, 4vw, 50px) clamp(28px, 3vw, 50px);
  opacity: .55;
  transition: opacity .5s var(--ease-out-expo);
}

.j-process__step.is-active {
  opacity: 1;
}

.j-process__step + .j-process__step {
  border-top: 1px solid var(--line);
}

.j-process__dot {
  position: absolute;
  left: calc(-1 * clamp(50px, 6vw, 100px) + clamp(11px, 1.4vw, 25px));
  top: clamp(34px, 4vw, 56px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 6px var(--paper);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  z-index: 1;
}

.j-process__step.is-active .j-process__dot {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 0 0 6px var(--paper), 0 0 24px rgba(21, 119, 184, .55);
}

.j-process__num {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(.8rem, 1vw, .9rem);
  letter-spacing: .25em;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.j-process__step h3 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}

.j-process__step p {
  color: var(--muted);
  font-size: var(--s-base);
  line-height: 1.65;
  margin: 0;
  max-width: 60ch;
}

/* =========================================================================
   6) j-brands — light marquee section
   ========================================================================= */

.j-brands {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(60px, 8vw, 110px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.j-brands__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 70px);
}

.j-brands__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}

.j-brands__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.j-brands__title {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--ink);
  letter-spacing: -.018em;
  line-height: 1.2;
  margin: 0;
}

.j-brands__marquees {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 26px);
  --marquee-duration: 52s;
  /* Soft side fades so brand names appear/disappear gracefully */
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

/* Override base marquee item style inside .j-brands so the names read clearly on a light bg */
.j-brands .j-marquee__item {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  opacity: .7;
  transition: opacity .35s ease, color .35s ease;
}

.j-brands .j-marquee__item:hover {
  color: var(--brand);
  opacity: 1;
}

.j-brands .j-marquee__item::after {
  content: "·";
  color: var(--brand);
  font-size: 1.6em;
  opacity: .45;
  margin-left: clamp(28px, 4vw, 56px);
  line-height: 1;
  transform: translateY(-4px);
  display: inline-block;
}

/* =========================================================================
   7) j-references — masonry editorial gallery
   ========================================================================= */

.j-references {
  background: var(--paper);
  padding: clamp(60px, 9vw, 140px) 0;
}

.j-references__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: clamp(40px, 5vw, 70px);
  flex-wrap: wrap;
}

.j-references__title {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-huge);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 12px 0 0;
  max-width: 14ch;
}

.j-references__title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-references__sub {
  color: var(--muted);
  max-width: 50ch;
  font-size: var(--s-lg);
  line-height: 1.55;
  margin: 0;
}

.j-references__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(120px, 14vw, 200px);
  gap: clamp(14px, 1.4vw, 22px);
}

.j-ref {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--grad-ink);
  cursor: pointer;
}

.j-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-expo), filter .5s ease;
}

.j-ref:hover img {
  transform: scale(1.06);
  filter: saturate(1.15);
}

.j-ref::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 21, 25, .8) 100%);
  z-index: 1;
}

.j-ref__cap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  z-index: 2;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.j-ref__tag {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brand-l);
}

.j-ref__title {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* Masonry layout */
.j-ref--lg  { grid-column: span 7; grid-row: span 3; }
.j-ref--md  { grid-column: span 5; grid-row: span 2; }
.j-ref--sm  { grid-column: span 5; grid-row: span 2; }
.j-ref--wide { grid-column: span 7; grid-row: span 2; }
.j-ref--tall { grid-column: span 5; grid-row: span 3; }

/* =========================================================================
   8) j-reviews — cinematic carousel
   ========================================================================= */

.j-reviews {
  position: relative;
  background: var(--grad-ink);
  color: var(--paper);
  padding: clamp(60px, 9vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}

.j-reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 80% 10%, rgba(21, 119, 184, .18), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(226, 59, 30, .12), transparent 70%);
  filter: blur(60px);
  z-index: -1;
}

/* ---------- Header (title + rating chip with Google logo) ---------- */
.j-reviews__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 64px);
  gap: 30px;
  flex-wrap: wrap;
}

.j-reviews__head-text { flex: 1; min-width: 0; }

.j-reviews__head h2 {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-huge);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--paper);
  margin: 12px 0 0;
  white-space: nowrap;
}

.j-reviews__head h2 .accent {
  background: linear-gradient(120deg, var(--brand-l), #9ed7f3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.j-reviews__google {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.j-reviews__rating-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.j-reviews__rating-num {
  font-family: var(--fd);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--paper);
}

.j-reviews__stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: .85rem;
  margin-top: 2px;
}

.j-reviews__rating-meta {
  color: rgba(255, 255, 255, .7);
  font-size: var(--s-sm);
  font-family: var(--fd);
  font-weight: 600;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Multi-card carousel ---------- */
.j-reviews__viewport {
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter-x));
  padding: 8px var(--gutter-x);
}

.j-reviews__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  transition: transform .65s var(--ease-out-expo);
  will-change: transform;
}

.j-review {
  /* 3 cards visible by default; the JS sets a CSS var --review-per-page */
  flex: 0 0 calc(
    (100% - (var(--reviews-per-page, 3) - 1) * clamp(16px, 2vw, 28px))
    / var(--reviews-per-page, 3)
  );
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(26px, 2.6vw, 36px);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-l);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .35s ease, border-color .35s ease, transform .5s var(--ease-out-expo);
  position: relative;
}

.j-review:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-4px);
}

.j-review__stars {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 1rem;
}

.j-review__text {
  font-family: var(--fb);
  font-weight: 500;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .92);
  margin: 0;
  /* Clamp to 7 lines so cards stay roughly the same height */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
  max-width: none;
  flex-grow: 1;
}

.j-review__text::before {
  content: none;
}

.j-review__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 0;
}

.j-review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-weight: 800;
  color: var(--paper);
  font-size: 1rem;
  flex-shrink: 0;
}

.j-review__name {
  font-family: var(--fd);
  font-weight: 700;
  color: var(--paper);
  font-size: var(--s-sm);
  display: block;
  line-height: 1.2;
}

.j-review__source {
  color: rgba(255, 255, 255, .55);
  font-size: var(--s-xs);
  line-height: 1.2;
}

/* ---------- Controls ---------- */
.j-reviews__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  flex-wrap: wrap;
}

/* Google CTA — pill with logo */
.j-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  text-decoration: none;
  transition: transform .35s var(--ease-out-expo),
              box-shadow .35s var(--ease-out-expo);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35);
}

.j-reviews__cta:hover {
  transform: translateY(-2px);
  color: var(--ink);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55);
}

.j-reviews__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.j-reviews__arrows {
  display: flex;
  gap: 12px;
}

.j-reviews__arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-out-back), opacity .2s ease;
}

.j-reviews__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.j-reviews__arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.j-reviews__arrow:disabled:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  transform: none;
}

/* ---------- Responsive: 2 cards on tablet, 1 on mobile ---------- */
@media (max-width: 1024px) {
  .j-reviews__track { --reviews-per-page: 2; }
  .j-review { flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2); }
}

@media (max-width: 640px) {
  .j-reviews__track { --reviews-per-page: 1; }
  .j-review { flex-basis: 100%; }
  .j-reviews__head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   9) j-kpis — gigantic editorial numbers
   ========================================================================= */

.j-kpis {
  background: var(--paper);
  padding: clamp(60px, 9vw, 140px) 0;
  overflow: hidden;
}

.j-kpis__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}

.j-kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

.j-kpi__num {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
}

.j-kpi:nth-child(2) .j-kpi__num,
.j-kpi:nth-child(4) .j-kpi__num {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.j-kpi__lbl {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--s-sm);
  letter-spacing: .04em;
  color: var(--muted);
}

/* =========================================================================
   10) j-faq — accordion
   ========================================================================= */

.j-faq {
  background: var(--bg);
  /* Fit the whole section in one viewport with the header overlap */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  padding: calc(var(--head-h) + clamp(20px, 3vh, 50px)) 0 clamp(30px, 5vh, 80px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-height: 700px) {
  .j-faq {
    height: auto;
    min-height: 0;
    padding: 60px 0;
    display: block;
  }
  .j-faq__head { position: relative; top: auto; }
}

.j-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  width: 100%;
}

.j-faq__head {
  /* No sticky needed — the whole section fits in one viewport */
  position: relative;
  top: auto;
}

.j-faq__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--heat);
  margin-bottom: 10px;
}

.j-faq__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-heat);
  border-radius: 2px;
}

.j-faq__title {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(1.4rem, min(3vw, 5vh), 2.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 14px;
}

.j-faq__title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-faq__sub {
  color: var(--muted);
  font-size: clamp(.85rem, 1.1vw, 1rem);
  line-height: 1.5;
  margin: 0;
}

.j-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.j-faq__item {
  border-top: 1px solid var(--line-2);
  padding: 0;
}

.j-faq__item:last-child {
  border-bottom: 1px solid var(--line-2);
}

.j-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(12px, 1.6vh, 22px) 0;
  text-align: left;
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: var(--ink);
  letter-spacing: -.01em;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .25s ease;
}

.j-faq__q:hover {
  color: var(--brand);
}

.j-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition: background .3s var(--ease-out-back), border-color .3s ease, transform .3s var(--ease-out-back);
}

.j-faq__icon::before,
.j-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.8px;
  margin: -.9px 0 0 -7px;
  background: var(--ink);
  border-radius: 1.5px;
  transition: transform .35s var(--ease-out-back), background .25s ease;
}

.j-faq__icon::after {
  transform: rotate(90deg);
}

.j-faq__item.is-open .j-faq__icon {
  background: var(--grad-heat);
  border-color: transparent;
}

.j-faq__item.is-open .j-faq__icon::before,
.j-faq__item.is-open .j-faq__icon::after {
  background: var(--paper);
}

.j-faq__item.is-open .j-faq__icon::after {
  transform: rotate(0deg);
}

.j-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out-expo);
}

.j-faq__a-inner {
  padding: 0 0 clamp(14px, 2vh, 22px);
  color: var(--muted);
  font-size: clamp(.85rem, 1.1vw, .98rem);
  line-height: 1.6;
  max-width: 65ch;
}

.j-faq__item.is-open .j-faq__a {
  max-height: 400px;
}

/* =========================================================================
   11) j-final — full-bleed CTA
   ========================================================================= */

.j-final {
  position: relative;
  /* Section locks to exactly one viewport — header overlaps via sticky. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--head-h) + clamp(30px, 5vh, 80px)) var(--gutter-x) clamp(30px, 5vh, 80px);
  text-align: center;
}

@media (max-height: 680px) {
  .j-final {
    height: auto;
    min-height: 0;
    padding: 80px var(--gutter-x);
  }
}

.j-final::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--grad-aurora);
  filter: blur(60px);
  opacity: .7;
  animation: auroraDrift 24s var(--ease-in-out-cubic) infinite alternate;
  z-index: 0;
}

.j-final::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  z-index: 0;
}

.j-final__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.j-final__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-xs);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brand-l);
  margin-bottom: 22px;
}

.j-final__kicker::before,
.j-final__kicker::after {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--brand-l);
}

.j-final h2 {
  font-family: var(--fd);
  font-weight: 900;
  font-size: var(--s-mega);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--paper);
  margin: 0 0 24px;
}

.j-final h2 .accent {
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.j-final p {
  color: rgba(255, 255, 255, .85);
  font-size: clamp(var(--s-base), 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto 40px;
}

.j-final__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Magnetic button shell — sized for the hero by default, more contained */
.j-magnet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--s-sm);
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--grad-heat);
  color: var(--paper);
  box-shadow: 0 8px 20px -10px rgba(226, 59, 30, .45);
  transition: box-shadow .35s var(--ease-out-expo);
  min-height: 52px;
  will-change: transform;
}

.j-magnet > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.j-magnet:hover {
  color: var(--paper);
  box-shadow: 0 12px 28px -12px rgba(226, 59, 30, .55);
}

/* Bigger, statement size — reserved for the climactic final CTA section */
.j-final .j-magnet {
  padding: 22px 44px;
  font-size: var(--s-base);
  min-height: 64px;
  min-width: 220px;
  box-shadow: var(--shadow-glow-heat);
}

.j-final .j-magnet:hover {
  box-shadow: 0 24px 60px -18px rgba(226, 59, 30, .7);
}

/* Default ghost button — light contexts (e.g. home hero) */
.j-magnet--ghost {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(14, 21, 25, .15);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}

.j-magnet--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Ghost on dark contexts (e.g. final CTA section) */
.j-final .j-magnet--ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .25);
  color: var(--paper);
}

.j-final .j-magnet--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.j-magnet [data-magnetic-label] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform .15s linear;
}

/* =========================================================================
   12) j-foot-cities — marquee of served cities inside footer
   ========================================================================= */

.j-cities-marquee {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(40px, 5vw, 80px) 0;
  margin-bottom: clamp(40px, 5vw, 70px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  --marquee-duration: 36s;
}

.j-cities-marquee .j-marquee__item {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.9rem);
  letter-spacing: .01em;
  /* Solid soft-white fill instead of outline — far more legible on small screens */
  color: rgba(255, 255, 255, .72);
  -webkit-text-stroke: 0;
  text-transform: none;
}

.j-cities-marquee .j-marquee__item::after {
  color: var(--brand-l);
  -webkit-text-stroke: 0;
  font-size: .9em;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Short laptops/external displays — release the min-height clamp so nothing crops */
@media (min-width: 1024px) and (max-height: 820px) {
  .j-hero {
    min-height: auto;
  }
  .j-hero__main {
    padding-top: clamp(24px, 4vh, 60px);
    padding-bottom: clamp(20px, 3vh, 50px);
  }
}

@media (max-width: 1180px) {
  .j-hero {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    /* Exact viewport — no gap to the next section. */
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .j-hero__main {
    grid-column: 1;
    grid-row: 1;
    /* Bring left padding back to a sensible mobile gutter (no more 1480 axis) */
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
    /* Sit tight under the header — just a hair of breathing room */
    padding-top: calc(var(--head-h) + clamp(2px, 0.4vh, 8px));
    /* No bottom padding — the marquee strip provides the visual separation */
    padding-bottom: 0;
    /* Lift text on top of the photo + anchor content to the top */
    position: relative;
    z-index: 2;
    max-width: 720px;
    min-height: 0;
    overflow: hidden;
    justify-content: flex-start;
  }

  /* Photo becomes the hero background instead of a separate column */
  .j-hero__media {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    aspect-ratio: auto;
    clip-path: none;
    animation: none;
    z-index: 0;
  }
  .j-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    transform: none;
    animation: none;
    filter: saturate(.95) brightness(.9);
  }

  /* Strong overlay so the dark text + light chip remain readable.
     Higher opacity on the text side (left) to guarantee contrast for the headline. */
  .j-hero__media::after {
    background:
      linear-gradient(110deg, rgba(244, 248, 252, .98) 0%, rgba(244, 248, 252, .94) 45%, rgba(244, 248, 252, .72) 70%, rgba(207, 225, 239, .55) 100%),
      linear-gradient(180deg, transparent 50%, rgba(16, 36, 52, .45) 100%);
  }

  .j-hero__marquee {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    z-index: 2;
  }
  .j-hero__vert { display: none; }
  .j-hero__badge { display: none; }
}

/* Services on tablet: each card is a clean split-screen viewport (text left,
   photo right) — the same editorial DNA as desktop, but stacked vertically. */
@media (max-width: 1180px) {
  .j-services {
    height: auto;
    padding: 0;
  }

  /* Intro: compact strip that sits above card #1 inside its own viewport.
     Kicker + title on a single row aligned to the editorial axis.
     Extra bottom padding gives the title room to breathe before card #1. */
  .j-services__intro {
    position: relative;
    top: auto;
    height: auto;
    padding: calc(var(--head-h) + clamp(28px, 4.5vh, 56px)) var(--pad) clamp(28px, 4.5vh, 56px);
    display: block;
  }
  .j-services__intro-row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, .8vh, 10px);
  }
  .j-services__kicker { margin: 0; }
  .j-services__title {
    font-size: clamp(1.6rem, 4.6vw, 2.6rem);
    line-height: 1.02;
    margin: 0;
    max-width: 22ch;
  }
  .j-services__stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .j-services__track {
    flex-direction: column;
    transform: none !important;
    gap: 0;
    padding: 0;
  }

  /* Each service card = one viewport, split into two columns.
     Asymmetric padding: top reserves the sticky header + number outline space,
     bottom is generous so the centred content sits LOWER on the screen —
     visually below the upper-third where the number/header live. */
  .j-service {
    flex: 0 0 auto;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: minmax(0, 1fr);
    padding: calc(var(--head-h) + clamp(70px, 11vh, 130px)) var(--pad) clamp(30px, 4.5vh, 60px);
    border-radius: 0;
    background: transparent;
    border: none;
    column-gap: clamp(24px, 3.5vw, 56px);
    overflow: hidden;
    align-items: stretch;
  }

  /* Card #1 shares the viewport with the intro — make it shorter so
     intro (head + title + breathing room) + card #1 together equal one viewport. */
  .j-services__track > .j-service:first-child {
    height: calc(100vh - clamp(160px, 22vh, 240px));
    height: calc(100svh - clamp(160px, 22vh, 240px));
    height: calc(100dvh - clamp(160px, 22vh, 240px));
    padding-top: clamp(10px, 1.6vh, 22px);
  }

  /* LEFT column: convert into a flex column with three blocks distributed
     evenly — number (top), content (centre), implicit bottom slack. */
  .j-service > .j-service__num,
  .j-service > .j-service__content,
  .j-service > .j-service__media {
    grid-row: 1;
  }
  /* Wrapper trick: put num + content into the same grid cell using subgrid-ish
     flex stacking via the first column being a flex container. */
  .j-service {
    /* Switch from grid to a 2-col flex so the left side can be its own column */
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 3.5vw, 56px);
  }
  .j-service__num,
  .j-service__content {
    /* They share the left column via being siblings inside the flex card —
       wrap them visually as one column using a pseudo-grouping. */
  }
  /* Number sits comfortably below the sticky header with generous breathing
     room from the top edge. */
  .j-service__num {
    position: absolute;
    top: calc(var(--head-h) + clamp(40px, 6vh, 80px));
    left: var(--pad);
    font-size: clamp(2.4rem, 7vw, 4rem);
    margin: 0;
    line-height: .85;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2);
    display: block;
    z-index: 2;
  }
  /* Make .j-service relative so the absolutely-positioned number anchors to it */
  .j-service { position: relative; }

  /* Card #1 anchors the number near the top of its (shorter) box */
  .j-services__track > .j-service:first-child .j-service__num {
    top: clamp(20px, 3vh, 36px);
  }

  /* LEFT column = content block, fills the whole left side, centred vertically
     in the FULL card height (the absolutely-positioned number sits over it). */
  .j-service__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56ch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1.4vh, 16px);
    /* No top padding — the number is absolute and doesn't take vertical space */
    padding-top: 0;
  }
  .j-services__track > .j-service:first-child .j-service__content {
    padding-top: 0;
  }
  .j-service__tag { align-self: start; margin: 0; }
  .j-service h3 {
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    line-height: 1.04;
    margin: 0;
  }
  .j-service p {
    font-size: clamp(.85rem, 1.35vw, .98rem);
    line-height: 1.5;
    margin: 0;
    max-width: 52ch;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .j-service__cta {
    align-self: start;
    margin-top: clamp(4px, 1vh, 12px);
  }

  /* RIGHT column: photo — vertically centred, shorter than the card so it
     reads as an editorial inset rather than a wall of image. */
  .j-service__media {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    width: 100%;
    height: auto;
    max-height: clamp(280px, 56vh, 460px);
    aspect-ratio: 4 / 3;
    align-self: center;
    max-width: none;
    border-radius: clamp(10px, 1.6vw, 18px);
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
  }
  .j-service__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Subtle divider between consecutive cards */
  .j-service + .j-service {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .j-services__progress { display: none; }
  .j-services__continue { display: none; }
}

/* Short tablet landscape (≤800px tall): keep the split layout but tighten
   the text block and clamp the paragraph to fewer lines so everything fits. */
@media (max-width: 1180px) and (max-height: 800px) {
  .j-service {
    padding-top: calc(var(--head-h) + clamp(16px, 2.4vh, 28px));
    padding-bottom: clamp(20px, 3vh, 36px);
    row-gap: clamp(10px, 1.6vh, 18px);
  }
  .j-service__num { font-size: clamp(2rem, 6vw, 3.2rem); }
  .j-service h3 { font-size: clamp(1.3rem, 3.2vw, 1.75rem); }
  .j-service p {
    font-size: clamp(.82rem, 1.3vw, .94rem);
    line-height: 1.45;
    -webkit-line-clamp: 5;
  }
  .j-services__track > .j-service:first-child {
    height: calc(100vh - clamp(140px, 19vh, 210px));
    height: calc(100svh - clamp(140px, 19vh, 210px));
    height: calc(100dvh - clamp(140px, 19vh, 210px));
  }
}

/* =========================================================================
   Tablet viewport-fit: every section is exactly one viewport tall (≤1180px)
   ========================================================================= */
@media (max-width: 1180px) {

  /* ---- Page-level scroll-snap so each viewport-tall home section "clicks"
     into place as the user scrolls. Proximity snap (not mandatory) so reading
     a section never feels trapped; only the boundaries pull in. ---- */
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  /* Each viewport-tall home section is a snap target, aligned to its start.
     For Services: the intro+card1 form viewport #1; cards 2/3/4 are viewports
     2/3/4. So we snap to the intro (start of services panel #1) and to each
     card from #2 onward. */
  body[data-current-page="start"] .j-hero,
  body[data-current-page="start"] .j-about,
  body[data-current-page="start"] .j-services__intro,
  body[data-current-page="start"] .j-services__track > .j-service:not(:first-child),
  body[data-current-page="start"] .j-references,
  body[data-current-page="start"] .j-reviews,
  body[data-current-page="start"] .j-faq,
  body[data-current-page="start"] .j-final,
  body[data-current-page="start"] .foot {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* About — horizontal split inside one viewport */
  .j-about {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(40px, 6vh, 80px) 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .j-about__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3vw, 50px);
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .j-about__media {
    position: relative;
    top: auto;
    height: 100%;
    max-height: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 3 / 4;
    align-self: center;
    justify-self: start;
  }
  .j-about__text { padding: 0; gap: clamp(14px, 2vh, 24px); justify-content: center; }
  .j-about__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
  .j-about__block { padding-top: clamp(10px, 1.4vh, 18px); gap: 14px; grid-template-columns: 40px 1fr; }
  .j-about__block h3 { font-size: clamp(.9rem, 1.6vw, 1.1rem); margin-bottom: 3px; }
  .j-about__block p { font-size: clamp(.78rem, 1.3vw, .92rem); line-height: 1.45; }
  .j-about__blocks { gap: clamp(10px, 1.5vh, 18px); }

  /* Process — fits all 4 steps in one viewport */
  .j-process {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(40px, 6vh, 70px) 0;
    display: flex;
    align-items: center;
  }
  .j-process .j-wrap { width: 100%; }
  .j-process__head { margin-bottom: clamp(20px, 3vh, 40px); }
  .j-process__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
  .j-process__sub { font-size: clamp(.85rem, 1.4vw, 1rem); }
  .j-process__step { padding: clamp(14px, 2vh, 22px) 0 clamp(14px, 2vh, 22px) clamp(20px, 3vw, 40px); }
  .j-process__step h3 { font-size: clamp(1rem, 1.8vw, 1.3rem); }
  .j-process__step p { font-size: clamp(.82rem, 1.3vw, .95rem); line-height: 1.45; }
  .j-process__num { font-size: .7rem; margin-bottom: 6px; }

  /* Brands — slim editorial strip, not a full viewport */
  .j-brands {
    height: auto;
    min-height: 0;
    padding: clamp(48px, 7vh, 90px) 0;
    display: block;
  }
  .j-brands__head { margin-bottom: clamp(20px, 3vh, 36px); }
  .j-brands__title { font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
  .j-brands .j-marquee__item { font-size: clamp(1.2rem, 2.8vw, 1.8rem); }

  /* References — editorial split: head left, 5-tile mosaic right.
     Exact-fit viewport: section = 100dvh, header on the left, the right grid
     consumes whatever vertical space remains so the whole thing locks in. */
  .j-references {
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: calc(var(--head-h) + clamp(20px, 3vh, 36px)) 0 clamp(20px, 3vh, 36px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  .j-references .j-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 2.2fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 60px);
    align-items: center;
  }
  .j-references__head {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vh, 18px);
    align-self: center;
    grid-row: 1;
    grid-column: 1;
  }
  .j-references__title {
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    line-height: 1.05;
    margin: 0;
  }
  .j-references__sub {
    font-size: clamp(.82rem, 1.3vw, .95rem);
    line-height: 1.5;
    margin: 0;
    max-width: 36ch;
  }
  /* 5 cards in a 3-col × 2-row mosaic — fills the right column EXACTLY,
     no overflow, no max-height cap that could push the section taller. */
  .j-references__grid {
    grid-row: 1;
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 0;
    height: 100%;
    max-height: none;
    min-height: 0;
    gap: clamp(10px, 1.2vw, 18px);
    align-self: stretch;
  }
  /* Mosaic placement */
  .j-ref--lg   { grid-column: 1 / span 2; grid-row: 1; }
  .j-ref--md   { grid-column: 3;          grid-row: 1; }
  .j-ref--sm   { grid-column: 1;          grid-row: 2; }
  .j-ref--wide { grid-column: 2;          grid-row: 2; }
  .j-ref--tall { grid-column: 3;          grid-row: 2; }
  /* Reset any aspect-ratio / min-heights coming from desktop rules so the tiles
     conform exactly to the grid track height. */
  .j-ref--lg, .j-ref--md, .j-ref--sm, .j-ref--wide, .j-ref--tall {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  .j-ref { height: 100%; min-height: 0; }
  /* Tighter caption sizing for smaller tiles */
  .j-ref__cap   { padding: clamp(10px, 1.4vw, 16px); }
  .j-ref__tag   { font-size: 10px; letter-spacing: .12em; margin-bottom: 4px; }
  .j-ref__title { font-size: clamp(.85rem, 1.4vw, 1.05rem); line-height: 1.2; }

  /* Reviews — multi-card carousel fits in one viewport */
  .j-reviews {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(40px, 5vh, 70px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .j-reviews__head { margin-bottom: clamp(24px, 3vh, 40px); }
  .j-reviews__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
  .j-review { padding: clamp(22px, 3vw, 30px); }
  .j-review__text { -webkit-line-clamp: 6; line-clamp: 6; }

  /* FAQ — force one viewport on tablet too */
  .j-faq {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(40px, 5vh, 70px) 0;
    display: flex;
    align-items: center;
  }
  .j-faq .j-wrap { width: 100%; }
  .j-faq__grid { grid-template-columns: 1fr; gap: clamp(16px, 2.4vh, 28px); align-items: stretch; }
  .j-faq__head { position: relative; top: auto; }
  .j-faq__title { font-size: clamp(1.3rem, 3vw, 2.1rem); }
  .j-faq__sub { margin-bottom: 0; }
  .j-faq__q { padding: clamp(10px, 1.4vh, 18px) 0; font-size: clamp(.9rem, 1.5vw, 1.05rem); }
  .j-faq__a-inner { font-size: clamp(.8rem, 1.3vw, .95rem); padding-bottom: clamp(10px, 1.4vh, 18px); }

  /* Final CTA — keep one viewport */
  .j-final {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(40px, 6vh, 80px) var(--pad);
  }
  .j-final h2 { font-size: clamp(1.6rem, 5vw, 3rem); }
}

/* On very short tablets / phones in landscape, release strict 100vh so
   nothing crops. Excludes .j-references — we keep its strict viewport-fit
   layout intact so the 5-tile mosaic always reads as one screen. */
@media (max-width: 1180px) and (max-height: 720px) {
  .j-services__intro,
  .j-service,
  .j-about,
  .j-process,
  .j-brands,
  .j-reviews,
  .j-faq,
  .j-final {
    height: auto;
    min-height: 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .j-service__media { max-height: 240px; }
  /* References stays viewport-locked; just shrink its inner caps so it fits
     into the shorter screen without overflowing. */
  .j-references {
    padding-top: calc(var(--head-h) + 16px);
    padding-bottom: 16px;
  }
  .j-references__title { font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
  .j-references__sub { font-size: clamp(.78rem, 1.2vw, .9rem); }
  .j-ref__title { font-size: clamp(.78rem, 1.2vw, .92rem); }
}

@media (max-width: 900px) {
  .j-stats__grid { grid-template-columns: 1fr; gap: 30px; }
  .j-stat { padding-top: 22px; }

  .j-kpis__row { grid-template-columns: repeat(2, 1fr); }

  .j-service {
    grid-template-columns: 1fr;
  }
  .j-service__num { top: 16px; right: 20px; font-size: clamp(5rem, 16vw, 9rem); }
  .j-service__media { height: 280px; }
}

/* Portrait + mobile: single-column FLEX stack that fills the viewport.
   Order: number → content (chip + title + text + CTA) → photo.
   We use flex (not grid) to override the landscape rules that set
   display:flex and absolute-position the number. */
@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {
  .j-service {
    display: flex !important;
    flex-direction: column;
    column-gap: 0;
    gap: clamp(16px, 2.4vh, 24px);
    padding: calc(var(--head-h) + clamp(28px, 4vh, 50px)) var(--pad) clamp(28px, 4vh, 50px);
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    align-items: stretch;
    justify-content: flex-start;
  }
  /* Number flows inline as a small label right above the title block.
     Important: override the landscape rule that makes it position:absolute. */
  .j-service__num {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    font-size: clamp(1.8rem, 5.5vw, 2.6rem);
    margin: 0;
    align-self: flex-start;
    -webkit-text-stroke: 1.2px rgba(255, 255, 255, .25);
    order: 1;
  }
  /* Content block — natural height, comes second */
  .j-service__content {
    padding-top: 0;
    margin-top: 0;
    max-width: none;
    align-self: stretch;
    flex: 0 0 auto;
    gap: clamp(10px, 1.6vh, 18px);
    order: 2;
  }
  .j-service h3 {
    font-size: clamp(1.6rem, 5.4vw, 2.2rem);
    line-height: 1.05;
  }
  .j-service p {
    font-size: clamp(.9rem, 2.2vw, 1rem);
    line-height: 1.55;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    max-width: none;
  }
  /* Photo sits right BELOW the text — third in the flex stack. */
  .j-service__media {
    width: 100%;
    height: clamp(180px, 30vh, 320px);
    max-height: clamp(180px, 30vh, 320px);
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
    flex: 0 0 auto;
    margin: 0;
    border-radius: clamp(12px, 3vw, 20px);
    overflow: hidden;
    order: 3;
  }
  .j-service__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Card #1 shares viewport with intro — make it shorter accordingly */
  .j-services__track > .j-service:first-child {
    height: calc(100vh - clamp(140px, 18vh, 200px));
    height: calc(100svh - clamp(140px, 18vh, 200px));
    height: calc(100dvh - clamp(140px, 18vh, 200px));
    padding-top: clamp(10px, 1.6vh, 22px);
  }
  /* Hide the categorical chip on portrait/mobile — the title carries it */
  .j-service__tag { display: none; }

  .j-references__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
  .j-ref--lg  { grid-column: span 2; grid-row: span 2; }
  .j-ref--md  { grid-column: span 1; grid-row: span 2; }
  .j-ref--sm  { grid-column: span 1; grid-row: span 2; }
  .j-ref--wide { grid-column: span 2; grid-row: span 2; }
  .j-ref--tall { grid-column: span 2; grid-row: span 2; }
}

/* =========================================================================
   Tablet PORTRAIT + Mobile: stack everything vertically, release strict
   100dvh viewport-fit on sections that don't suit narrow screens.
   Triggered for ≤900px width OR portrait tablets.
   ========================================================================= */
@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {

  /* ---- HERO — distribute content across the full viewport.
     The text column becomes a flex stack with `justify-content: center`,
     so chip + title + lede + CTAs sit in the visual middle, and the KPIs
     anchor near the bottom via auto-margin. Scales with viewport size. ---- */
  .j-hero__main {
    padding-top: var(--head-h);
    padding-bottom: clamp(10px, 1.6vh, 22px);
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 2.4vh, 28px);
    /* Allow content to use the full viewport width on portrait — desktop
       max-width 720px would crunch tablet portrait. */
    max-width: none;
    overflow: hidden;
  }
  .j-hero__eyebrow {
    align-self: flex-start;
    margin: 0;
  }
  .j-hero__title {
    font-size: clamp(2.4rem, 7.5vw, 4.2rem);
    line-height: 1.02;
    margin: 0;
    max-width: 14ch;
  }
  .j-hero__lede {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.5;
    max-width: 44ch;
    margin: 0;
  }
  .j-hero__cta {
    gap: 12px;
    margin: 0;
    flex-wrap: wrap;
  }
  /* KPIs anchored at the bottom of the text column */
  .j-hero__kpis {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: clamp(12px, 2vh, 20px);
    margin: auto 0 0;
    padding-top: clamp(16px, 2.4vh, 28px);
    max-width: 560px;
  }
  .j-hero__kpi-num { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
  .j-hero__kpi-lbl { font-size: 10px; letter-spacing: .1em; }

  /* ---- ÜBER UNS — text on top, photo below in a clean stack ---- */
  .j-about {
    height: auto;
    min-height: 0;
    padding: clamp(60px, 9vh, 100px) 0 clamp(50px, 7vh, 80px);
    display: block;
  }
  .j-about__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: clamp(28px, 4vh, 44px);
    height: auto;
    align-items: start;
  }
  /* Text block FIRST (DOM order is already text → media for stacking) */
  .j-about__text {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    gap: clamp(16px, 2.4vh, 26px);
    height: auto;
    justify-content: flex-start;
  }
  .j-about__head h2 {
    font-size: clamp(1.7rem, 5.5vw, 2.6rem);
    line-height: 1.1;
  }
  .j-about__block {
    padding-top: clamp(12px, 2vh, 18px);
    gap: 14px;
    grid-template-columns: 44px 1fr;
  }
  .j-about__block h3 { font-size: clamp(1rem, 2.6vw, 1.15rem); }
  .j-about__block p { font-size: clamp(.88rem, 2.2vw, 1rem); line-height: 1.55; }
  .j-about__blocks { gap: clamp(14px, 2vh, 22px); }

  /* Photo BELOW the text — natural block image, not absolute background */
  .j-about__media {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    aspect-ratio: 4 / 3;
    align-self: stretch;
    justify-self: stretch;
    margin: 0;
    border-radius: clamp(12px, 3vw, 20px);
    z-index: auto;
    box-shadow: 0 20px 50px rgba(10, 16, 20, .12);
  }
  .j-about__media img {
    border-radius: inherit;
    object-position: center;
  }
  .j-about__media::after {
    /* Subtle vignette only — no heavy gradient like the tablet-landscape variant */
    background: linear-gradient(180deg, transparent 60%, rgba(10, 16, 20, .15) 100%);
  }
  .j-about__media-tag { display: inline-flex; }

  /* ---- REFERENZEN — single-column vertical stack of all 5 cards ---- */
  .j-references {
    height: auto;
    min-height: 0;
    padding: clamp(60px, 8vh, 100px) 0 clamp(50px, 7vh, 80px);
    display: block;
    overflow: visible;
  }
  .j-references .j-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vh, 44px);
    align-items: stretch;
  }
  /* Header: kicker + title + sub stacked in a single column, aligned to the
     same editorial axis as the About section above (start of content). */
  .j-references__head {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(10px, 1.6vh, 16px);
    margin-bottom: 0;
    width: 100%;
  }
  .j-references__head > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 14px);
  }
  .j-references__title {
    font-size: clamp(1.7rem, 5.5vw, 2.6rem);
    line-height: 1.05;
    margin: 0;
  }
  .j-references__sub {
    font-size: clamp(.9rem, 2.2vw, 1.05rem);
    max-width: none;
    margin: 0;
  }
  /* Two-up grid — cards arranged 2 per row, respecting the editorial gutter */
  .j-references__grid {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    gap: clamp(10px, 2vw, 18px);
    /* Inherit the .j-wrap horizontal padding — photos stay inside the gutter */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  /* Reset all the masonry placements — every card is one cell of the 2-col grid */
  .j-ref--lg, .j-ref--md, .j-ref--sm, .j-ref--wide, .j-ref--tall {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: clamp(10px, 2vw, 16px);
  }
  /* Odd number of cards (5) — give the last one full row for symmetry */
  .j-ref:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
  .j-ref { height: auto; min-height: 0; }
  .j-ref__cap { padding: clamp(14px, 2vw, 20px); }
  .j-ref__tag { font-size: 10px; margin-bottom: 5px; }
  .j-ref__title { font-size: clamp(.95rem, 2.2vw, 1.1rem); line-height: 1.25; }

  /* ---- UNSER PROZESS — head aligned to the same editorial axis as
     Über uns and Referenzen, with matching title size. ---- */
  .j-process__head {
    max-width: none;
    margin: 0 0 clamp(28px, 4vh, 50px);
    text-align: left;
  }
  .j-process__kicker {
    margin-bottom: clamp(8px, 1.4vh, 14px);
  }
  .j-process__title {
    font-size: clamp(1.7rem, 5.5vw, 2.6rem);
    line-height: 1.05;
    margin: 0 0 clamp(10px, 1.6vh, 16px);
  }
  .j-process__sub {
    font-size: clamp(.9rem, 2.2vw, 1.05rem);
    line-height: 1.5;
    margin: 0;
  }

  /* ---- TESTIMONIALS — 2×2 grid of compact cards (no carousel) ---- */
  .j-reviews {
    height: auto;
    min-height: 0;
    padding: clamp(50px, 7vh, 90px) 0 clamp(40px, 6vh, 70px);
    display: block;
    overflow: visible;
  }
  .j-reviews .j-wrap {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Head: kicker + title + rating stacked on one editorial axis */
  .j-reviews__head {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.6vh, 18px);
    margin: 0 0 clamp(20px, 3vh, 32px);
  }
  .j-reviews__head h2 {
    font-size: clamp(1.7rem, 5.5vw, 2.4rem);
    line-height: 1.05;
  }
  /* Rating: strip the card chrome — plain inline strip */
  .j-reviews__rating {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
  .j-reviews__google { width: 22px; height: 22px; }
  .j-reviews__rating-num { font-size: 1.05rem; }
  .j-reviews__stars { font-size: .9rem; }
  .j-reviews__rating-meta {
    font-size: .72rem;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .15);
  }
  /* 2×2 GRID — break out of the carousel mechanic on small screens.
     We force the track into a grid layout so all 4 cards show at once.
     The JS still updates transform on resize, but since we override it
     with !important and disable the controls, the layout stays static. */
  .j-reviews__viewport {
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .j-reviews__track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.8vw, 16px);
    transform: none !important;
    transition: none !important;
  }
  .j-review {
    flex: 0 0 auto;
    width: auto;
    padding: clamp(14px, 2.6vw, 20px);
    gap: clamp(8px, 1.2vh, 12px);
    border-radius: clamp(10px, 2vw, 16px);
  }
  .j-review__stars { font-size: .85rem; }
  .j-review__text {
    font-size: clamp(.78rem, 1.9vw, .88rem);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .j-review__text::before { display: none; }
  .j-review__meta { gap: 8px; margin-top: auto; }
  .j-review__avatar { width: 32px; height: 32px; font-size: .75rem; }
  .j-review__name { font-size: .82rem; }
  .j-review__source { font-size: .68rem; }
  /* Hide controls — no carousel = no arrows/CTA inline */
  .j-reviews__controls {
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.6vh, 16px);
    margin-top: clamp(20px, 3vh, 28px);
  }
  .j-reviews__arrows { display: none; }
  .j-reviews__cta { justify-content: center; }
}

/* Mobile (<=640px): collapse the 2x2 grid into a single column */
@media (max-width: 640px) {
  .j-reviews__track {
    grid-template-columns: 1fr;
  }
  .j-review__text { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* =========================================================================
   Mobile (≤640px) — keep the tablet-portrait stack DNA, only fine-tune
   sizes and a few touch-friendly tweaks.
   ========================================================================= */
@media (max-width: 640px) {
  /* HERO — phones: distribute the content across the full viewport.
     The text column becomes a flex stack with `justify-content: center`,
     so chip + title + lede + CTAs sit in the visual middle, and the KPIs
     anchor near the bottom — using the available height instead of crowding. */
  .j-hero__main {
    padding-top: var(--head-h);
    padding-bottom: clamp(8px, 1.2vh, 16px);
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 2vh, 22px);
  }
  /* Top block: chip + title + lede + CTAs — centred vertically */
  .j-hero__eyebrow {
    font-size: 10px;
    padding: 6px 12px;
    margin: 0;
    align-self: flex-start;
  }
  .j-hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.02;
    margin: 0;
  }
  .j-hero__lede {
    font-size: clamp(.92rem, 3.2vw, 1.05rem);
    line-height: 1.5;
    max-width: 34ch;
    margin: 0;
  }
  .j-hero__cta {
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
  }
  .j-hero__cta .j-magnet,
  .j-hero__cta .btn {
    font-size: .95rem;
    padding: 12px 18px;
  }
  /* KPIs sit at the bottom, anchored above the marquee */
  .j-hero__kpis {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: clamp(10px, 3vw, 18px);
    row-gap: clamp(8px, 1.4vh, 14px);
    margin: auto 0 0;       /* auto-margin pushes them to the bottom */
    padding-top: clamp(12px, 2vh, 20px);
    max-width: none;
  }
  .j-hero__kpi-num { font-size: clamp(.95rem, 2.8vw, 1.05rem); }
  .j-hero__kpi-lbl { font-size: 9px; letter-spacing: .08em; }
  .j-hero__badge { display: none; }

  /* ÜBER UNS — typography size tuned for narrow screens */
  .j-about__head h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .j-about__block { padding-top: 10px; gap: 12px; grid-template-columns: 36px 1fr; }
  .j-about__block-num { font-size: .8rem; }
  .j-about__block h3 { font-size: .98rem; margin-bottom: 2px; }
  .j-about__block p { font-size: .88rem; line-height: 1.5; }

  /* LEISTUNGEN — keep the 100dvh stack with the right padding */
  .j-services__title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .j-service h3 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
  .j-service p { font-size: clamp(.88rem, 3vw, .98rem); }

  /* REFERENZEN — single column on phones (cleaner) */
  .j-references__grid { grid-template-columns: 1fr; }
  .j-ref--lg, .j-ref--md, .j-ref--sm, .j-ref--wide, .j-ref--tall,
  .j-ref:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
  }
  .j-references__title { font-size: clamp(1.5rem, 6vw, 2.1rem); }

  /* UNSER PROZESS — keep vertical timeline tight */
  .j-process__title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .j-process__sub { font-size: clamp(.85rem, 2.8vw, .98rem); }
  .j-process__list { padding-left: 40px; }
  .j-process__rail { left: 8px; }
  .j-process__dot { left: calc(-40px + 1px); }
  .j-process__step h3 { font-size: 1rem; }
  .j-process__step p  { font-size: .88rem; line-height: 1.5; }

  /* KUNDENSTIMMEN — already in stacked 1-col grid from above */
  .j-reviews__head h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .j-reviews__head { flex-direction: column; align-items: flex-start; }

  /* FAQ — readable touch-friendly accordion */
  .j-faq__title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .j-faq__q { font-size: clamp(.95rem, 3.2vw, 1.05rem); padding: 14px 0; }
  .j-faq__a-inner { font-size: clamp(.85rem, 2.8vw, .95rem); padding-bottom: 14px; }

  /* FINAL CTA — fills 100dvh exactly, with content tuned for phones. */
  .j-final {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: calc(var(--head-h) + clamp(20px, 4vh, 40px)) 18px clamp(24px, 4vh, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .j-final__inner {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .j-final__kicker {
    font-size: 10px;
    letter-spacing: .22em;
    margin-bottom: clamp(14px, 2.2vh, 20px);
  }
  .j-final h2 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1.05;
    margin: 0 0 clamp(14px, 2.2vh, 20px);
  }
  .j-final p {
    font-size: clamp(.92rem, 3vw, 1rem);
    line-height: 1.55;
    margin: 0 0 clamp(20px, 3.4vh, 32px);
    max-width: 40ch;
  }
  .j-final__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .j-final__actions .j-magnet { width: 100%; justify-content: center; }

  /* FOOTER — centered brand + 2-col nav (Leistungen left, Unternehmen right) +
     centered contact block. */
  body[data-current-page="start"] .foot {
    height: auto;
    min-height: 0;
  }
  .foot { text-align: center; }
  /* 2-col grid: brand spans both columns (centered), Leistungen+Unternehmen
     share row 2 left/right, Kontakt spans both columns again (centered). */
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 40px);
    justify-items: stretch;
  }
  .foot-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .foot-brand .brand-link.foot-brand-link {
    justify-content: center;
  }
  .foot-brand .brand-text { align-items: center; }
  .foot-brand p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* Leistungen (1st .foot-col) → left, aligned to the start */
  .foot-grid .foot-col:nth-of-type(2) {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }
  /* Unternehmen (2nd .foot-col) → right, aligned to the end */
  .foot-grid .foot-col:nth-of-type(3) {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
  }
  /* Kontakt (3rd .foot-col) → full width, centered below */
  .foot-grid .foot-col:nth-of-type(4) {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .foot-col h4 { font-size: 13px; }
  .foot-col ul {
    padding: 0;
    list-style: none;
  }
  .foot-col ul li a {
    font-size: 15px;
    padding: 6px 0;
    display: inline-block;
  }
  .foot-contact-row {
    font-size: 14px;
    justify-content: center;
    text-align: center;
  }
  .foot-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* Extra breathing room above the copyright bar on phones */
    margin-top: clamp(20px, 4vh, 36px);
    padding-top: clamp(18px, 3vh, 28px);
  }
  /* Break "Alle Rechte vorbehalten." onto its own line below the company name */
  .foot-copy-rights {
    display: block;
    margin-top: 2px;
  }
}

/* Ultra-wide screens (1680px+) — gentle proportional scaling on the hero left side */
@media (min-width: 1680px) {
  .j-hero__title    { font-size: 5rem; max-width: 14ch; }
  .j-hero__lede     { font-size: 1.1rem; max-width: 48ch; }
  .j-hero__kpi-num  { font-size: 1.5rem; }
  .j-hero__kpis     { max-width: 520px; }
}

@media (min-width: 1800px) {
  .j-services__title, .j-references__title, .j-process__title, .j-faq__title { max-width: 16ch; }
}

/* 4K and beyond — one more small step */
@media (min-width: 2200px) {
  .j-hero__title    { font-size: 5.6rem; }
  .j-hero__lede     { font-size: 1.2rem; }
  .j-hero__kpi-num  { font-size: 1.65rem; }
}

/* =========================================================================
   Legal documents (Impressum & Datenschutz)
   ========================================================================= */

.legal-doc {
  max-width: 820px;
  /* Align to the same editorial axis as the p-hero title above, not centered */
  margin: 0;
}

.legal-doc .legal-block + .legal-block {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

.legal-doc h2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 14px;
}

.legal-doc p {
  color: var(--muted);
  font-size: var(--s-base);
  line-height: 1.7;
  margin: 0 0 12px;
}

.legal-doc p:last-child { margin-bottom: 0; }

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

.legal-doc a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.legal-doc a:hover {
  color: var(--brand-d);
}

/* =========================================================================
   prefers-reduced-motion
   ========================================================================= */

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

  .rv,
  .rv-left,
  .rv-right,
  .rv-scale {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero-bg-img,
  .tilt,
  .j-hero__title .word > span,
  .j-hero__lede,
  .j-hero__cta,
  .j-hero__badge,
  .j-hero__media {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }

  .j-marquee__track { animation: none !important; }
}