:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --surface-2: #ecece7;
  --surface-3: #e4e4df;
  --text: #0a0a0b;
  --muted: #67676b;
  --line: rgba(10, 10, 11, .105);
  --soft-line: rgba(10,10,11,.065);
  --glass: rgba(245,245,242,.82);
  --accent: #0a0a0b;
  --accent-contrast: #ffffff;
  --shadow: 0 24px 70px rgba(0,0,0,.09);
  --radius-s: 16px;
  --radius: 26px;
  --radius-l: 38px;
}

html[data-theme="dark"] {
  --bg: #09090a;
  --surface: #111113;
  --surface-2: #151517;
  --surface-3: #1b1b1e;
  --text: #f5f5f2;
  --muted: #a6a6aa;
  --line: rgba(255,255,255,.105);
  --soft-line: rgba(255,255,255,.06);
  --glass: rgba(9,9,10,.82);
  --accent: #f5f5f2;
  --accent-contrast: #09090a;
  --shadow: 0 28px 90px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  overflow-x: hidden;
}
body.menu-open,
body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
svg { display:block; }
::selection { background: var(--text); color: var(--bg); }

.noise {
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .018;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 118px 0; }
.section-soft { background: var(--surface-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.2);
}
.nav-wrap {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.08em;
}
.brand-name { font-size: 17px; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
}
.desktop-nav a { color: var(--muted); transition: color .2s ease; }
.desktop-nav a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 9px; }

.theme-toggle,
.menu-toggle,
.back-to-top {
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
}
.theme-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .2s ease, transform .25s ease;
}
.theme-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { opacity: 0; transform: scale(.7) rotate(-25deg); }
html[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: scale(.7) rotate(25deg); }
html[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: none; }

.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
}
.menu-toggle span {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 1.7px;
  background: currentColor;
  border-radius: 999px;
  transition: .3s cubic-bezier(.2,.8,.2,1);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 24px; }
body.menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
body.menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 77px 0 0;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .26s ease, visibility .26s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu-layout {
  min-height: calc(100dvh - 160px);
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 96px;
  padding-top: 66px;
  padding-bottom: 48px;
}
.menu-kicker,
.eyebrow,
.cookie-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .125em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-primary { display: flex; flex-direction: column; }
.menu-primary > .menu-kicker { margin-bottom: 18px; }
.menu-primary > a {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.menu-primary a span { color: var(--muted); font-size: 11px; font-weight: 700; }
.menu-primary a strong {
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 700;
}
.menu-primary a i {
  font-style: normal;
  font-size: 24px;
  opacity: .35;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-primary a:hover i { transform: translate(3px,-3px); opacity: 1; }

.menu-secondary {
  display: grid;
  align-content: start;
  gap: 34px;
  padding-top: 30px;
}
.menu-secondary > div { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.menu-secondary .menu-kicker { margin-bottom: 8px; }
.menu-secondary a,
.link-button {
  font-size: 14px;
  color: var(--muted);
  transition: color .2s ease;
}
.menu-secondary a:hover,
.link-button:hover { color: var(--text); }
.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.menu-footer {
  min-height: 82px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 12px;
}

.social-icons { display:flex; align-items:center; gap:8px; }
.social-icons a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.social-icons a:hover { transform: translateY(-2px); background: var(--text); color: var(--bg); }
.social-icons svg { width: 17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.social-icons a:nth-child(2) svg,
.social-icons a:nth-child(3) svg,
.social-icons a:nth-child(4) svg { fill: currentColor; stroke: none; }

.hero { padding-top: 92px; }
.hero-grid {
  min-height: 665px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 76px;
}
.eyebrow { margin-bottom: 18px; }
h1,h2,h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  letter-spacing: -.055em;
}
h1 {
  max-width: 760px;
  font-size: clamp(52px, 6.2vw, 90px);
  line-height: .98;
}
h1 span { color: var(--muted); }
h2 {
  max-width: 880px;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
}
h3 { font-size: 25px; line-height: 1.12; }
.hero-lead {
  max-width: 670px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}
.hero-actions { display:flex; gap:11px; flex-wrap:wrap; margin-top:34px; }
.button {
  min-height: 52px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button-primary { background:var(--text); color:var(--bg); }
.button-ghost { background:var(--surface); border-color:var(--line); }
.button-text { border-color: transparent; background: transparent; color:var(--muted); }
.button-inverse { background:var(--bg); color:var(--text); }

.hero-proof {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.hero-proof div { display:flex; flex-direction:column; gap:4px; }
.hero-proof strong { font-family:"Manrope"; font-size:21px; letter-spacing:-.04em; }
.hero-proof span { font-size:12px; color:var(--muted); }

.hero-visual {
  position:relative;
  min-height:540px;
  display:grid;
  place-items:center;
}
.visual-glow {
  position:absolute;
  width:450px;
  height:450px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(210,210,205,.4) 38%, transparent 72%);
  filter: blur(6px);
}
html[data-theme="dark"] .visual-glow {
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 40%, transparent 72%);
}
.visual-shell {
  position:relative;
  z-index:2;
  width:min(100%,555px);
  aspect-ratio:1.03/1;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:color-mix(in srgb,var(--surface) 93%, transparent);
  box-shadow:var(--shadow);
}
.visual-top {
  height:58px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.visual-logo {
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--text);color:var(--bg);
  font-family:"Manrope";font-size:11px;font-weight:800;
}
.visual-meta { display:flex;gap:8px; }
.visual-meta i { display:block;width:35px;height:6px;border-radius:999px;background:var(--line); }
.visual-content {
  min-height:330px;
  padding:60px 26px 34px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:18px;
}
.visual-copy { display:flex;flex-direction:column;gap:10px; }
.visual-kicker { width:58px;height:6px;border-radius:999px;background:var(--muted);opacity:.33; }
.visual-line { display:block;height:17px;border-radius:999px;background:var(--text); }
.visual-line.xl { width:96%; }
.visual-line.lg { width:76%; }
.visual-sub { width:85%;height:7px;border-radius:999px;background:var(--line); }
.visual-sub.short { width:62%; }
.visual-cta { width:85px;height:27px;border-radius:999px;background:var(--text);margin-top:9px; }

.seven-stack {
  height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.seven-stack span {
  display:block;
  width:var(--w);
  height:17px;
  border-radius:5px;
  background:var(--text);
  transform:skewX(-17deg);
}
.visual-bottom {
  position:absolute;
  left:22px;right:22px;bottom:22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.visual-bottom span {
  height:64px;
  border-radius:14px;
  background:var(--surface-2);
  display:flex;
  align-items:flex-end;
  padding:10px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.status-pill {
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 15px 40px rgba(0,0,0,.07);
  font-size:12px;
  font-weight:700;
}
.status-pill span { width:6px;height:6px;border-radius:50%;background:var(--text); }
.status-a { top:105px; right:-5px; }
.status-b { bottom:90px; left:-12px; }

.principles { border-block:1px solid var(--line); overflow:hidden; }
.principles-row {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  white-space:nowrap;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.principles-row i { width:4px;height:4px;border-radius:50%;background:var(--line); }

.section-heading { margin-bottom:56px; }
.section-heading p {
  max-width:680px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.layer-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:15px; }
.layer-card {
  min-height:285px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .25s ease,border-color .25s ease;
}
.layer-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--text) 24%,transparent); }
.card-top { display:flex;align-items:center;justify-content:space-between; }
.card-index { font-size:12px;font-weight:700;color:var(--muted); }
.card-mark {
  min-width:36px;height:36px;padding:0 9px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--surface-2);
  font-family:"Manrope";font-size:12px;font-weight:800;
}
.layer-card h3 { margin-bottom:10px; }
.layer-card p { margin:0;color:var(--muted);line-height:1.58; }
.layer-card-wide {
  grid-column:1/-1;
  min-height:230px;
  background:var(--text);
  color:var(--bg);
}
.layer-card-wide .card-index { color:color-mix(in srgb,var(--bg) 60%,transparent); }
.layer-card-wide .card-mark { background:color-mix(in srgb,var(--bg) 10%,transparent); }
.layer-card-wide p { color:color-mix(in srgb,var(--bg) 68%,transparent);max-width:700px; }
.wide-copy { display:flex;align-items:flex-end;justify-content:space-between;gap:30px; }
.wide-note { color:color-mix(in srgb,var(--bg) 60%,transparent);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700; }

.journey { position:relative; }
.journey::before {
  content:"";
  position:absolute;
  top:32px;
  bottom:32px;
  left:31px;
  width:1px;
  background:var(--line);
}
.journey-step {
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:28px;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.step-number {
  position:relative;
  z-index:1;
  width:64px;height:64px;
  border:1px solid var(--line);
  border-radius:20px;
  display:grid;place-items:center;
  background:var(--surface);
  font-family:"Manrope";
  font-weight:800;
}
.step-label {
  display:inline-block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.journey-step h3 { font-size:29px; }
.journey-step p { max-width:735px;margin:10px 0 0;color:var(--muted);line-height:1.62; }
.journey-focus .step-number,
.journey-final .step-number { background:var(--text);color:var(--bg); }
.journey-final { border-bottom:0; }

.statement-section { background:#080809; color:#f5f5f2; }
.statement-grid { display:grid;grid-template-columns:.42fr 1fr;gap:90px;align-items:center; }
.statement-number {
  font-family:"Manrope";
  font-size:clamp(240px,31vw,470px);
  line-height:.72;
  letter-spacing:-.11em;
  font-weight:800;
  color:#f5f5f2;
  opacity:.96;
}
.statement-copy .eyebrow { color:#8d8d92; }
.statement-copy h2 { max-width:720px; }
.statement-copy p { max-width:670px;color:#a8a8ad;font-size:18px;line-height:1.66; }
.text-arrow { display:inline-flex;gap:10px;align-items:center;margin-top:16px;font-size:14px;font-weight:700; }
.text-arrow span { transition:transform .2s ease; }
.text-arrow:hover span { transform:translate(3px,-3px); }

.split-section { display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start; }
.large-copy {
  margin:0;
  font-family:"Manrope";
  font-size:29px;
  line-height:1.36;
  letter-spacing:-.04em;
}
.about-points { margin-top:40px;border-top:1px solid var(--line); }
.about-points div {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:15px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.about-points span { color:var(--muted);font-size:11px;font-weight:700; }
.about-points p { margin:0;color:var(--muted);line-height:1.5; }

.cta-section { padding-top:20px; }
.cta-card {
  padding:60px;
  border-radius:var(--radius-l);
  background:var(--text);
  color:var(--bg);
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:50px;
  align-items:end;
}
.cta-card h2 { font-size:clamp(42px,5vw,68px); }
.cta-card .eyebrow { color:color-mix(in srgb,var(--bg) 62%,transparent); }
.cta-card p { max-width:650px;color:color-mix(in srgb,var(--bg) 68%,transparent);line-height:1.62; }
.cta-actions { display:flex;flex-direction:column;align-items:flex-start;gap:15px; }
.text-link { font-size:13px;font-weight:700;color:color-mix(in srgb,var(--bg) 70%,transparent); }

.footer { padding:88px 0 32px; }
.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding-bottom:58px;
  border-bottom:1px solid var(--line);
}
.footer-brand p { max-width:320px;color:var(--muted); }
.footer-links { display:grid;grid-template-columns:1fr 1fr;gap:40px; }
.footer-links > div { display:flex;flex-direction:column;align-items:flex-start;gap:10px; }
.footer-label { margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em; }
.footer-links a,.footer-links .link-button { font-size:14px;color:var(--text); }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-top:25px;
  color:var(--muted);
  font-size:12px;
}
.footer-social a { width:38px;height:38px;border-radius:12px; }

.back-to-top {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:150;
  width:48px;height:48px;
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .2s ease,color .2s ease;
}
.back-to-top:hover { background:var(--text);color:var(--bg); }
.back-to-top.visible { opacity:1;visibility:visible;transform:none; }
.back-to-top svg {
  width:20px;height:20px;
  fill:none;stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cookie-backdrop {
  position:fixed;
  inset:0;
  z-index:400;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(5px);
}
.cookie-banner {
  position:fixed;
  z-index:410;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:min(940px,calc(100% - 28px));
  padding:28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:20px;
  align-items:start;
}
.cookie-badge {
  width:50px;height:50px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;
}
.cookie-badge svg { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.cookie-copy h2,.cookie-settings h2 { font-size:28px;letter-spacing:-.045em;margin:4px 0 9px; }
.cookie-copy p { margin:0;max-width:640px;color:var(--muted);line-height:1.52;font-size:14px; }
.cookie-copy .cookie-legal { margin-top:8px;font-size:12px; }
.cookie-copy a { text-decoration:underline;text-underline-offset:3px; }
.cookie-actions { display:flex;flex-direction:column;gap:8px;min-width:185px; }
.cookie-actions .button { width:100%;min-height:44px;font-size:12px; }
.cookie-close {
  display:none;
  position:absolute;
  top:14px;right:15px;
  border:0;background:transparent;
  font-size:26px;
  cursor:pointer;
}

.cookie-settings {
  position:fixed;
  z-index:420;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(620px,calc(100% - 28px));
  max-height:calc(100dvh - 36px);
  overflow:auto;
  padding:30px;
  border:1px solid var(--line);
  border-radius:30px;
  background:var(--surface);
  box-shadow:0 34px 100px rgba(0,0,0,.3);
}
.cookie-settings-head { display:flex;justify-content:space-between;gap:20px;align-items:flex-start; }
.cookie-settings-close {
  width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-size:24px;line-height:1;
}
.settings-intro { color:var(--muted);font-size:14px;line-height:1.55; }
.consent-list { margin-top:22px;border-top:1px solid var(--line); }
.consent-item {
  min-height:90px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.consent-item strong { font-family:"Manrope";font-size:15px; }
.consent-item p { margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.4; }
.always-on { white-space:nowrap;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.consent-toggle { position:relative;cursor:pointer; }
.consent-toggle input { position:absolute;opacity:0;pointer-events:none; }
.switch {
  flex:0 0 auto;
  width:48px;height:28px;
  border-radius:999px;
  background:var(--surface-3);
  position:relative;
  transition:.2s ease;
}
.switch::after {
  content:"";
  position:absolute;
  top:4px;left:4px;
  width:20px;height:20px;border-radius:50%;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:.2s ease;
}
.consent-toggle input:checked + .switch { background:var(--text); }
.consent-toggle input:checked + .switch::after { transform:translateX(20px); background:var(--bg); }
.settings-actions { display:flex;gap:10px;margin-top:24px; }
.settings-actions .button { flex:1; }

[hidden] { display:none !important; }

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view { opacity:1;transform:none; }
.delay-1 { transition-delay:.08s; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .menu-layout { grid-template-columns:1fr;gap:48px;padding-top:42px; }
  .menu-secondary { grid-template-columns:repeat(3,1fr);padding-top:0; }
  .hero-grid { grid-template-columns:1fr;min-height:auto;gap:46px; }
  .hero-visual { min-height:470px; }
  .layer-grid { grid-template-columns:1fr 1fr; }
  .layer-card-wide { grid-column:1/-1; }
  .statement-grid { grid-template-columns:.36fr 1fr;gap:50px; }
  .statement-number { font-size:clamp(190px,30vw,320px); }
  .split-section,.cta-card { grid-template-columns:1fr; }
  .cookie-banner { grid-template-columns:48px 1fr; }
  .cookie-actions { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width: 700px) {
  .container { width:min(100% - 24px,1180px); }
  .section { padding:84px 0; }
  .nav-wrap { height:68px; }
  .brand-name { display:none; }
  .menu-overlay { inset:69px 0 0; }
  .menu-layout { min-height:auto; }
  .menu-primary a { grid-template-columns:32px 1fr 24px; }
  .menu-primary a strong { font-size:clamp(34px,11vw,52px); }
  .menu-secondary { grid-template-columns:1fr 1fr;gap:30px; }
  .menu-social { grid-column:1/-1; }
  .menu-footer { flex-direction:column;align-items:flex-start;justify-content:center; }
  .hero { padding-top:55px; }
  h1 { font-size:clamp(47px,14.5vw,68px); }
  h2 { font-size:clamp(37px,11.5vw,54px); }
  .hero-lead { font-size:17px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-proof { grid-template-columns:1fr;gap:18px; }
  .hero-visual { min-height:375px; }
  .visual-shell { border-radius:22px; }
  .visual-content { padding:40px 17px 25px;gap:8px;min-height:265px; }
  .seven-stack { transform:scale(.78); }
  .visual-bottom { left:14px;right:14px;bottom:14px; }
  .visual-bottom span { height:50px;padding:7px;font-size:7px; }
  .status-pill { display:none; }
  .principles-row { justify-content:flex-start;overflow-x:auto;scrollbar-width:none; }
  .principles-row::-webkit-scrollbar { display:none; }
  .layer-grid { grid-template-columns:1fr; }
  .wide-copy { display:block; }
  .wide-note { display:inline-block;margin-top:24px; }
  .journey::before { left:26px; }
  .journey-step { grid-template-columns:54px 1fr;gap:16px; }
  .step-number { width:54px;height:54px;border-radius:17px; }
  .journey-step h3 { font-size:24px; }
  .statement-grid { grid-template-columns:1fr;gap:30px; }
  .statement-number { font-size:190px;line-height:.78; }
  .large-copy { font-size:25px; }
  .cta-card { padding:34px 24px;border-radius:28px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column;align-items:flex-start; }
  .cookie-banner {
    bottom:10px;
    padding:22px;
    grid-template-columns:1fr;
    gap:13px;
    border-radius:24px;
  }
  .cookie-badge { width:42px;height:42px;border-radius:13px; }
  .cookie-actions { grid-column:auto;display:flex; }
  .cookie-close { display:block; }
  .cookie-copy h2,.cookie-settings h2 { font-size:24px; }
  .cookie-settings { padding:23px;border-radius:24px; }
  .settings-actions { flex-direction:column; }
  .back-to-top { right:14px;bottom:14px; }
}

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


/* V3: clean full-screen menu */
.menu-overlay {
  z-index: 190;
}

.menu-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .55fr);
  gap: clamp(56px, 8vw, 120px);
}

.menu-secondary {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 38px;
  padding-top: 30px;
}

.menu-side-group,
.menu-social-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.menu-social-block {
  padding-top: 2px;
}

.menu-social-icons {
  margin-top: 3px;
}

.menu-social-icons a {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.menu-footer a {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 980px) {
  .menu-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .menu-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 0;
  }

  .menu-social-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .menu-secondary {
    grid-template-columns: 1fr;
  }

  .menu-social-block {
    grid-column: auto;
  }
}


/* V4 FIX: menu lives outside the sticky header so backdrop-filter cannot trap it */
.menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 180 !important;
  padding-top: 77px;
  background: var(--bg) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .32s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.menu-open .menu-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Header and its buttons remain above the open menu */
.site-header {
  z-index: 220 !important;
}

.menu-layout {
  min-height: calc(100dvh - 159px);
}

@media (max-width: 700px) {
  .menu-overlay {
    padding-top: 69px;
  }
  .menu-layout {
    min-height: auto;
  }
}


/* V5: conventional right-side burger drawer */
.menu-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: min(520px, 100vw) !important;
  padding-top: 77px !important;

  z-index: 210 !important;
  background: var(--surface) !important;
  border-left: 1px solid var(--line);

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateX(100%) !important;
  transition:
    transform .36s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    visibility .24s ease !important;

  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -28px 0 80px rgba(0,0,0,.12);
}

html[data-theme="dark"] .menu-overlay {
  box-shadow: -28px 0 90px rgba(0,0,0,.42);
}

body.menu-open .menu-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* subtle page veil while drawer is open */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 185;
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

body.menu-open::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Header stays above the drawer so the X button remains reachable */
.site-header {
  z-index: 230 !important;
}

/* Drawer content becomes a familiar vertical navigation */
.menu-layout {
  width: 100% !important;
  min-height: auto !important;
  display: block !important;
  padding: 44px 34px 32px !important;
}

.menu-primary {
  display: flex;
  flex-direction: column;
}

.menu-primary > .menu-kicker {
  margin-bottom: 15px;
}

.menu-primary > a {
  grid-template-columns: 32px 1fr 24px !important;
  gap: 10px !important;
  padding: 17px 0 !important;
}

.menu-primary a strong {
  font-size: 32px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

.menu-primary a i {
  font-size: 19px !important;
}

.menu-secondary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 30px 24px !important;
  padding-top: 34px !important;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.menu-social-block {
  grid-column: 1 / -1 !important;
  padding-top: 4px;
}

.menu-social-icons {
  margin-top: 5px;
}

.menu-footer {
  width: calc(100% - 68px) !important;
  min-height: 72px !important;
  margin: 0 34px !important;
  padding: 0 !important;
  border-top: 1px solid var(--line);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px;
  font-size: 12px;
}

.menu-footer a {
  font-weight: 700;
}

@media (max-width: 700px) {
  .menu-overlay {
    width: min(92vw, 430px) !important;
    padding-top: 69px !important;
  }

  .menu-layout {
    padding: 32px 24px 28px !important;
  }

  .menu-primary a strong {
    font-size: 29px !important;
  }

  .menu-secondary {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .menu-social-block {
    grid-column: auto !important;
  }

  .menu-footer {
    width: calc(100% - 48px) !important;
    margin: 0 24px !important;
  }
}


/* V6: simplified drawer hierarchy */
.menu-secondary {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 30px !important;
  padding-top: 34px !important;
  margin-top: 16px !important;
  border-top: 1px solid var(--line);
}

.menu-side-group,
.menu-social-block {
  width: 100%;
}

.menu-social-block {
  order: 99;
  grid-column: auto !important;
  padding-top: 4px;
}

/* old footer intentionally removed */
.menu-footer {
  display: none !important;
}

@media (max-width: 700px) {
  .menu-secondary {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
  }
}


/* V7: bottom-aligned secondary menu content */
.menu-overlay {
  display: flex !important;
  flex-direction: column !important;
}

.menu-layout {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100dvh - 77px) !important;
  padding-bottom: 30px !important;
}

/* Main navigation remains at the top */
.menu-primary {
  flex: 0 0 auto;
}

/* Push supplementary navigation to the bottom */
.menu-secondary {
  margin-top: auto !important;
  padding-top: 34px !important;
  border-top: 1px solid var(--line);

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px 24px !important;
  align-items: start;
}

/* Direkt zu + Rechtliches sit next to each other */
.menu-side-group {
  width: 100%;
}

/* Socials always underneath both columns */
.menu-social-block {
  grid-column: 1 / -1 !important;
  margin-top: 2px;
}

/* slightly more breathing room between main links and bottom area */
.menu-primary {
  padding-bottom: 48px;
}

@media (max-height: 760px) and (min-width: 701px) {
  .menu-primary > a {
    padding: 13px 0 !important;
  }

  .menu-primary a strong {
    font-size: 28px !important;
  }

  .menu-primary {
    padding-bottom: 30px;
  }

  .menu-secondary {
    padding-top: 26px !important;
    gap: 22px 20px !important;
  }
}

@media (max-width: 700px) {
  .menu-layout {
    min-height: calc(100dvh - 69px) !important;
  }

  .menu-primary {
    padding-bottom: 36px;
  }

  .menu-secondary {
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
  }

  .menu-social-block {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 470px) {
  .menu-secondary {
    grid-template-columns: 1fr !important;
  }

  .menu-social-block {
    grid-column: auto !important;
  }
}


/* V8: compact lower drawer area */
.menu-secondary {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.menu-primary {
  padding-bottom: 34px !important;
}

@media (max-height: 820px) {
  .menu-primary > a {
    padding: 14px 0 !important;
  }

  .menu-secondary {
    gap: 22px 18px !important;
  }

  .menu-social-block {
    margin-top: 0 !important;
  }

  .menu-layout {
    padding-bottom: 18px !important;
  }
}


/* V9: final LayerSeven vector logo */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}

.brand-logo {
  display: block;
  width: 184px;
  height: auto;
  overflow: visible;
  color: currentColor;
}

.brand-symbol path {
  stroke: none;
}

/* No old boxed L7 mark anymore */
.brand-mark,
.brand-name {
  display: none !important;
}

.footer .brand-logo {
  width: 190px;
}

/* On small screens keep the complete logo visible, only slightly smaller */
@media (max-width: 700px) {
  .brand-logo {
    width: 158px;
  }

  .footer .brand-logo {
    width: 174px;
  }
}


/* V10: user-replaceable 1:1 PNG logo slot */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text);
}

.brand-image-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: block;
}

.brand-image {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.brand-image-white {
  opacity: 0;
}

html[data-theme="dark"] .brand-image-black {
  opacity: 0;
}

html[data-theme="dark"] .brand-image-white {
  opacity: 1;
}

.brand-name-visible {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
}

/* Disable previous generated logo */
.brand-logo {
  display: none !important;
}

.footer .brand-image-wrap,
.footer .brand-image {
  width: 40px;
  height: 40px;
}

.footer .brand-name-visible {
  font-size: 18px;
}

@media (max-width: 700px) {
  .brand-image-wrap,
  .brand-image {
    width: 36px;
    height: 36px;
  }

  .brand-name-visible {
    display: inline-block !important;
    font-size: 16px;
  }
}


/* V11: refined navigation, icons, CTA overlap and social buttons */

/* Slightly heavier header controls */
.theme-icon svg {
  stroke-width: 2.15 !important;
}

.menu-toggle span {
  height: 2.4px !important;
  width: 18px !important;
  left: 12.5px !important;
}

/* Card layout: remove corner letter chips and introduce centered line icons */
.layer-card {
  position: relative;
  min-height: 300px;
}

.layer-card .card-top {
  min-height: 18px;
}

.layer-card .card-index {
  display: none !important;
}

.layer-card .card-mark {
  display: none !important;
}

.service-icon {
  width: 72px;
  height: 72px;
  margin: 14px auto 28px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-2) 94%, var(--text) 6%),
      color-mix(in srgb, var(--surface) 98%, transparent));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 12px 32px rgba(0,0,0,.045);
}

.service-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layer-card > div:last-child {
  margin-top: auto;
}

.layer-card h3,
.layer-card p {
  text-align: left;
}

.layer-card-wide {
  min-height: 270px;
}

.layer-card-wide .service-icon {
  margin-left: 0;
  margin-right: 0;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  border-color: color-mix(in srgb, var(--bg) 14%, transparent);
  box-shadow: none;
}

.layer-card-wide .service-icon svg {
  stroke: var(--bg);
}

/* Give the CTA a controlled overlap into the section above */
.about-section {
  padding-bottom: 150px !important;
}

.cta-overlap {
  position: relative;
  z-index: 3;
  margin-top: -92px;
  padding-top: 0 !important;
}

.cta-overlap .cta-card {
  box-shadow: 0 26px 70px rgba(0,0,0,.10);
}

html[data-theme="dark"] .cta-overlap .cta-card {
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
}

/* Social media: icon itself is the button, no box/border */
.social-icons {
  gap: 18px !important;
}

.social-icons a,
.footer-social a,
.menu-social-icons a {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  transition: transform .2s ease, opacity .2s ease !important;
}

.social-icons a:hover,
.footer-social a:hover,
.menu-social-icons a:hover {
  transform: translateY(-2px) scale(1.06) !important;
  background: transparent !important;
  color: var(--text) !important;
  opacity: .72;
}

.social-icons svg,
.footer-social svg,
.menu-social-icons svg {
  width: 21px !important;
  height: 21px !important;
}

@media (max-width: 700px) {
  .about-section {
    padding-bottom: 125px !important;
  }

  .cta-overlap {
    margin-top: -72px;
  }

  .service-icon {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    margin-bottom: 24px;
  }

  .service-icon svg {
    width: 31px;
    height: 31px;
  }
}


/* V12: restore all service cards and use clean standalone icons */
.layer-card {
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.service-icon {
  width: 74px !important;
  height: 74px !important;
  margin: 18px auto 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

.service-icon svg {
  width: 46px !important;
  height: 46px !important;
  fill: none !important;
  stroke: var(--text) !important;
  stroke-width: 2.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.layer-card > div:last-child {
  margin-top: auto !important;
}

.layer-card-wide {
  min-height: 250px !important;
}

.layer-card-wide .service-icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 24px !important;
}

.layer-card-wide .service-icon svg {
  stroke: var(--bg) !important;
}

@media (max-width: 700px) {
  .service-icon {
    width: 66px !important;
    height: 66px !important;
    margin-bottom: 28px !important;
  }

  .service-icon svg {
    width: 42px !important;
    height: 42px !important;
  }
}


/* =========================================================
   V13 MOBILE EXPERIENCE — desktop styles remain unchanged
   ========================================================= */
.mobile-about-quote,.mobile-carousel-progress,.journey-mobile-hint{display:none}

@media (max-width:700px){
  .hero{padding-top:44px!important;padding-bottom:58px!important}
  .hero-grid{display:block!important}
  .hero-visual{display:none!important}
  .hero-copy{width:100%}
  .hero-lead{margin-top:24px!important}
  .hero-proof{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-top:34px!important;padding-top:18px!important;text-align:center;align-items:start}
  .hero-proof div{align-items:center!important;gap:3px!important}
  .hero-proof strong{font-size:18px!important}
  .hero-proof span{max-width:88px;font-size:9.5px!important;line-height:1.28}

  .principles{overflow:hidden!important}
  .principles-row{width:max-content!important;min-height:58px!important;overflow:visible!important;gap:22px!important;padding-right:22px;animation:mobilePrinciplesTicker 19s linear infinite;will-change:transform}
  .principles-row span,.principles-row i{flex:0 0 auto}
  @keyframes mobilePrinciplesTicker{from{transform:translateX(0)}to{transform:translateX(-52%)}}

  #layers{overflow:hidden}
  #layers .section-heading{margin-bottom:30px!important}
  .layer-grid{display:flex!important;gap:14px!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 12px 8px 0;margin-right:-12px}
  .layer-grid::-webkit-scrollbar{display:none}
  .layer-card,.layer-card-wide{flex:0 0 84%!important;min-height:286px!important;width:auto!important;scroll-snap-align:center;scroll-snap-stop:always;border-radius:24px!important}
  .layer-card-wide{background:var(--surface)!important;color:var(--text)!important}
  .layer-card-wide p{color:var(--muted)!important}
  .layer-card-wide .service-icon svg{stroke:var(--text)!important}
  .layer-card-wide .wide-copy{display:block!important}
  .layer-card-wide .wide-note{color:var(--muted)!important}
  .service-icon{margin-top:10px!important}
  .mobile-carousel-progress{display:flex;justify-content:center;gap:6px;margin-top:18px}
  .mobile-carousel-progress span{display:block;width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .25s ease,background .25s ease}
  .mobile-carousel-progress span.active{width:22px;background:var(--text)}

  .journey-section{overflow:hidden}
  .journey-section .section-heading{margin-bottom:26px!important}
  .journey{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 12px 8px 0;margin-right:-12px}
  .journey::-webkit-scrollbar{display:none}
  .journey::before{display:none!important}
  .journey-step{flex:0 0 82%;display:block!important;min-height:248px;padding:20px!important;border:1px solid var(--line)!important;border-radius:22px;background:var(--surface);scroll-snap-align:center}
  .journey-focus,.journey-final{background:var(--text);color:var(--bg)}
  .journey-focus .step-label,.journey-focus p,.journey-final .step-label,.journey-final p{color:color-mix(in srgb,var(--bg) 65%,transparent)!important}
  .journey-focus .step-number,.journey-final .step-number{background:color-mix(in srgb,var(--bg) 10%,transparent)!important;color:var(--bg)!important;border-color:color-mix(in srgb,var(--bg) 14%,transparent)!important}
  .step-number{width:42px!important;height:42px!important;border-radius:13px!important;margin-bottom:22px;font-size:14px}
  .journey-step h3{font-size:22px!important;line-height:1.05}
  .journey-step p{margin-top:9px!important;font-size:14px;line-height:1.48}
  .step-label{font-size:9.5px!important}
  .journey-mobile-hint{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:15px;color:var(--muted);font-size:11px}

  .statement-section{padding:64px 0!important}
  .statement-grid{gap:18px!important}
  .statement-number{font-size:128px!important;line-height:.72!important}
  .statement-copy h2{font-size:34px!important}
  .statement-copy p{font-size:15px!important;line-height:1.55}

  .about-section{padding:58px 0 118px!important}
  .about-section>.container.split-section{display:none!important}
  .mobile-about-quote{display:block}
  .mobile-about-quote blockquote{margin:0 auto;max-width:520px;font-family:"Manrope",sans-serif;font-size:clamp(28px,8vw,38px);line-height:1.08;letter-spacing:-.05em;font-weight:700;text-align:center}

  .cta-overlap{margin-top:-72px!important}
  .back-to-top{right:max(18px,env(safe-area-inset-right))!important;bottom:max(18px,env(safe-area-inset-bottom))!important}
}


/* =========================================================
   V14 MOBILE SPACING & TYPOGRAPHY REFINEMENT
   Desktop remains unchanged
   ========================================================= */

@media (max-width: 700px) {

  /* Small hero kicker centered and less dominant */
  .hero .eyebrow {
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .11em !important;
    margin-bottom: 14px !important;
  }

  /* Slightly tighter hero bottom spacing */
  .hero {
    padding-bottom: 48px !important;
  }

  /* Tighten gap after scrolling principles ticker */
  .principles {
    margin-bottom: 0 !important;
  }

  #layers {
    padding-top: 72px !important;
    padding-bottom: 68px !important;
  }

  #layers .section-heading {
    margin-bottom: 24px !important;
  }

  /* Less empty air between layer carousel and next section */
  .mobile-carousel-progress {
    margin-top: 14px !important;
  }

  .journey-section {
    padding-top: 72px !important;
    padding-bottom: 68px !important;
  }

  .journey-section .section-heading {
    margin-bottom: 22px !important;
  }

  .journey-mobile-hint {
    margin-top: 12px !important;
  }

  /* Pull the large 7 block closer to the journey cards */
  .statement-section {
    padding-top: 50px !important;
    padding-bottom: 56px !important;
  }

  /* Quote section slightly more compact */
  .about-section {
    padding-top: 50px !important;
    padding-bottom: 108px !important;
  }

  /* CTA remains overlapping, but footer follows sooner */
  .cta-section {
    padding-bottom: 54px !important;
  }

  .footer {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }

  .footer-top {
    gap: 34px !important;
    padding-bottom: 34px !important;
  }

  .footer-brand p {
    margin-bottom: 0 !important;
  }

  .footer-bottom {
    padding-top: 20px !important;
    gap: 18px !important;
  }
}


/* =========================================================
   V15: unified card colors across desktop + mobile
   ========================================================= */

/* All seven "Layer" cards use the same surface */
.layer-card,
.layer-card-wide {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.layer-card-wide p,
.layer-card-wide .wide-note {
  color: var(--muted) !important;
}

.layer-card-wide .service-icon svg {
  stroke: var(--text) !important;
}

/* Remove special dark treatment from steps 4 and 7 */
.journey-focus,
.journey-final {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.journey-focus .step-label,
.journey-focus p,
.journey-final .step-label,
.journey-final p {
  color: var(--muted) !important;
}

.journey-focus .step-number,
.journey-final .step-number {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Mobile overrides: keep everything identical there too */
@media (max-width: 700px) {
  .layer-card,
  .layer-card-wide {
    background: var(--surface) !important;
    color: var(--text) !important;
  }

  .layer-card-wide p,
  .layer-card-wide .wide-note {
    color: var(--muted) !important;
  }

  .journey-step,
  .journey-focus,
  .journey-final {
    background: var(--surface) !important;
    color: var(--text) !important;
  }

  .journey-focus .step-label,
  .journey-focus p,
  .journey-final .step-label,
  .journey-final p {
    color: var(--muted) !important;
  }

  .journey-focus .step-number,
  .journey-final .step-number {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
  }
}


/* V16: no special treatment for the seventh layer card */
.layer-card-wide {
  grid-column: auto !important;
  min-height: 300px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.layer-card-wide .service-icon {
  margin: 18px auto 34px !important;
}

.layer-card-wide .service-icon svg {
  stroke: var(--text) !important;
}

.wide-copy,
.wide-note {
  all: unset;
}

/* On desktop, keep the 7th card aligned cleanly with the grid */
@media (min-width: 701px) {
  .layer-grid .layer-card:nth-child(7) {
    grid-column: 2 / 3;
  }
}

/* On mobile it remains a normal carousel card */
@media (max-width: 700px) {
  .layer-grid .layer-card:nth-child(7) {
    grid-column: auto !important;
  }
}


/* =========================================================
   V17: keep width of card 7, remove special backgrounds
   ========================================================= */

/* Zukunftssicherheit darf auf Desktop wieder breit sein */
@media (min-width: 701px) {
  .layer-grid .layer-card:nth-child(7) {
    grid-column: 1 / -1 !important;
    min-height: 250px !important;
  }
}

/* Schritt 4 und 7: exakt gleicher Hintergrund wie die übrigen Schritte */
.journey-focus,
.journey-final {
  background: transparent !important;
  color: var(--text) !important;
}

.journey-focus .step-label,
.journey-focus p,
.journey-final .step-label,
.journey-final p {
  color: var(--muted) !important;
}

/* Nummern bleiben genauso wie bei allen anderen Schritten */
.journey-focus .step-number,
.journey-final .step-number {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Mobile: alle Swipe-Karten weiterhin einheitlich */
@media (max-width: 700px) {
  .journey-step,
  .journey-focus,
  .journey-final {
    background: var(--surface) !important;
    color: var(--text) !important;
  }
}


/* =========================================================
   LEISTUNGEN PAGE
   ========================================================= */
.services-hero {
  padding: 150px 0 108px;
  border-bottom: 1px solid var(--line);
}
.services-hero-inner { max-width: 900px; }
.services-hero h1 {
  max-width: 850px;
  margin: 16px 0 24px;
  font-size: clamp(58px, 7vw, 104px);
  line-height: .91;
  letter-spacing: -.065em;
}
.services-hero-lead {
  max-width: 700px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}
.services-section-heading { max-width: 760px; margin-bottom: 50px; }
.services-section-heading h2,
.handover-copy h2 {
  margin: 13px 0 18px;
  font-size: clamp(42px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -.055em;
}
.services-section-heading p,
.handover-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.build-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.build-card {
  min-height: 540px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.build-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.build-number, .care-label, .build-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.build-icon, .care-icon {
  width: 54px; height: 54px; display: grid; place-items: center;
}
.build-icon svg, .care-icon svg {
  width: 42px; height: 42px; fill: none; stroke: var(--text);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.build-kicker { margin-top: auto; margin-bottom: 12px; color: var(--text); }
.build-card h3 { max-width: 520px; margin: 0 0 17px; font-size: 34px; line-height: 1.02; letter-spacing: -.045em; }
.build-card > p { color: var(--muted); line-height: 1.6; }
.build-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 18px; }
.build-tags span {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 11px;
}
.build-note { padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.pricing-note {
  margin-top: 18px; padding: 24px 28px; border-radius: 22px;
  background: var(--surface-2); display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center;
}
.pricing-note span { font-weight: 700; }
.pricing-note p { margin: 0; color: var(--muted); line-height: 1.55; }
.services-care { background: var(--surface-2); }
.care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.care-card {
  min-height: 340px; padding: 34px; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between;
}
.care-card h3 { margin: 10px 0 14px; font-size: 30px; line-height: 1.04; letter-spacing: -.04em; }
.care-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.handover-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.handover-options { border-top: 1px solid var(--line); }
.handover-options > div { padding: 28px 0; border-bottom: 1px solid var(--line); }
.handover-options span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.handover-options strong { display: block; font-size: 22px; letter-spacing: -.03em; }
.handover-options p { margin: 7px 0 0; color: var(--muted); }
.services-cta { padding-top: 30px; }
.services-cta .cta-card { min-height: 360px; }

@media (max-width: 700px) {
  .services-hero { padding: 72px 0 64px; text-align: center; }
  .services-hero h1 { margin: 13px auto 20px; font-size: clamp(46px, 13vw, 62px); }
  .services-hero-lead { margin: 0 auto 28px; font-size: 16px; }
  .services-section-heading { margin-bottom: 28px; }
  .services-section-heading h2, .handover-copy h2 { font-size: 38px; }
  .services-section-heading p, .handover-copy > p { font-size: 15px; }
  .services-build, .services-care, .handover-section { padding-top: 68px !important; padding-bottom: 68px !important; }
  .build-options, .care-grid, .handover-grid { grid-template-columns: 1fr; gap: 14px; }
  .build-card { min-height: auto; padding: 25px; border-radius: 24px; }
  .build-kicker { margin-top: 60px; }
  .build-card h3 { font-size: 29px; }
  .build-icon { width: 48px; height: 48px; }
  .build-icon svg { width: 38px; height: 38px; }
  .pricing-note { grid-template-columns: 1fr; gap: 8px; padding: 21px; }
  .care-card { min-height: 300px; padding: 25px; border-radius: 24px; }
  .care-card h3 { font-size: 27px; }
  .handover-grid { gap: 38px; }
  .handover-options > div { padding: 22px 0; }
  .services-cta { padding-top: 18px !important; padding-bottom: 48px !important; }
  .services-cta .cta-card { min-height: 0; }
}


/* =========================================================
   LEISTUNGEN V2 — offer first
   ========================================================= */
.offers-intro {
  padding: 118px 0 52px;
}
.offers-intro-inner {
  max-width: 880px;
}
.offers-intro h1 {
  margin: 12px 0 20px;
  max-width: 860px;
  font-size: clamp(56px, 6.5vw, 96px);
  line-height: .94;
  letter-spacing: -.065em;
}
.offers-intro p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.offers-switch-section {
  padding: 28px 0 92px;
}
.offer-category-switch {
  width: fit-content;
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.offer-category-tab {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}
.offer-category-tab span {
  margin-right: 7px;
  font-size: 10px;
  opacity: .55;
}
.offer-category-tab.active {
  background: var(--text);
  color: var(--bg);
}

.offers-carousel-wrap {
  position: relative;
}
.offers-carousel {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}
.offer-slide {
  position: absolute;
  inset: 0;
  min-height: 500px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  transform: translateX(9%);
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    opacity .35s ease,
    visibility .35s ease;
  display: flex;
  flex-direction: column;
}
.offer-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.offer-slide.is-prev {
  transform: translateX(-9%);
}
.offer-slide-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.offer-slide-content {
  margin: auto 0;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 70px;
  align-items: end;
}
.offer-slide h2 {
  max-width: 700px;
  margin: 0 0 18px;
  font-size: clamp(46px, 5vw, 76px);
  line-height: .96;
  letter-spacing: -.06em;
}
.offer-slide-content > div:first-child p {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}
.offer-points {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.offer-points span {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}
.offer-example {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.offers-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
}
.offers-arrow-prev { left: -24px; }
.offers-arrow-next { right: -24px; }
.offers-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offers-dots {
  min-height: 28px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.offers-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.offers-dots button.active {
  width: 24px;
  background: var(--text);
}
.offers-direct-cta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
}
.offers-direct-cta p { margin: 0; }
.offers-direct-cta a {
  color: var(--text);
  font-weight: 700;
}

.services-explainer {
  background: var(--surface-2);
}
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.model-card {
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}
.model-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.model-card h3 {
  margin: 90px 0 14px;
  font-size: 31px;
}
.model-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.details-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: start;
}
.details-copy h2 {
  margin: 12px 0 18px;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1;
}
.details-copy p {
  max-width: 600px;
  color: var(--muted);
  line-height: 1.65;
}
.details-list {
  border-top: 1px solid var(--line);
}
.details-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 14px;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.details-list span {
  color: var(--muted);
  font-size: 11px;
}
.details-list p {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 700px) {
  .offers-intro {
    padding: 64px 0 34px;
    text-align: center;
  }
  .offers-intro h1 {
    font-size: clamp(44px, 13vw, 60px);
  }
  .offers-intro p {
    font-size: 15px;
  }
  .offers-switch-section {
    padding-top: 18px;
    padding-bottom: 68px;
  }
  .offer-category-switch {
    width: 100%;
  }
  .offer-category-tab {
    flex: 1;
    padding: 0 10px;
    font-size: 12px;
  }
  .offers-carousel {
    min-height: 480px;
  }
  .offer-slide {
    min-height: 480px;
    padding: 24px;
    border-radius: 24px;
  }
  .offer-slide-content {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .offer-slide h2 {
    font-size: 38px;
  }
  .offer-slide-content > div:first-child p {
    font-size: 15px;
  }
  .offers-arrow {
    width: 42px;
    height: 42px;
  }
  .offers-arrow-prev { left: -8px; }
  .offers-arrow-next { right: -8px; }
  .offers-direct-cta {
    flex-direction: column;
    gap: 7px;
    text-align: center;
  }
  .model-grid,
  .details-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .model-card {
    min-height: 260px;
    padding: 24px;
  }
  .model-card h3 {
    margin-top: 60px;
    font-size: 27px;
  }
  .details-grid { gap: 36px; }
}


/* =========================================================
   LEISTUNGEN V3 — clearer model selection, centered on desktop
   ========================================================= */

.offer-model-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.offer-model-label {
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.offer-category-switch {
  margin: 0 auto !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: var(--surface-2) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--line);
}

.offer-category-tab {
  min-width: 190px;
  min-height: 46px;
  padding: 0 22px !important;
  font-size: 13px;
  letter-spacing: -.01em;
}

.offer-category-tab span {
  display: none !important;
}

@media (max-width: 700px) {
  .offer-model-picker {
    align-items: stretch;
    margin-bottom: 20px;
  }

  .offer-model-label {
    text-align: center;
  }

  .offer-category-switch {
    width: 100%;
  }

  .offer-category-tab {
    min-width: 0;
    flex: 1;
    padding: 0 10px !important;
    font-size: 12px;
  }
}


/* =========================================================
   PROJEKTE — placeholder page
   ========================================================= */
.projects-placeholder {
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  padding: 110px 0;
}

.projects-placeholder-inner {
  max-width: 880px;
}

.projects-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
}

.projects-placeholder h1 {
  max-width: 820px;
  margin: 0 0 26px;
  font-size: clamp(64px, 8vw, 116px);
  line-height: .92;
  letter-spacing: -.07em;
}

.projects-placeholder p {
  max-width: 670px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.projects-placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}

@media (max-width: 700px) {
  .projects-placeholder {
    min-height: calc(100dvh - 68px);
    padding: 72px 0 64px;
    text-align: center;
  }

  .projects-placeholder-inner {
    max-width: 100%;
  }

  .projects-status {
    margin-inline: auto;
  }

  .projects-placeholder h1 {
    font-size: clamp(50px, 15vw, 68px);
  }

  .projects-placeholder p {
    font-size: 16px;
  }

  .projects-placeholder-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .projects-placeholder-actions .button {
    width: 100%;
  }
}


/* =========================================================
   ÜBER UNS V1
   ========================================================= */
.about-hero { padding: 125px 0 100px; overflow: hidden; }
.about-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.about-hero-copy h1 {
  margin: 14px 0 24px; font-size: clamp(68px, 8vw, 118px);
  line-height: .88; letter-spacing: -.075em;
}
.about-hero-copy p { max-width: 660px; margin: 0 0 32px; color: var(--muted); font-size: 18px; line-height: 1.65; }

.about-hero-art {
  position: relative; min-height: 570px; border: 1px solid var(--line);
  border-radius: 38px; overflow: hidden; background: var(--surface-2);
}
.about-art-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 54px 54px; opacity: .65;
  mask-image: linear-gradient(to bottom,black,transparent 90%);
}
.about-art-seven {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 310px; line-height: 1; font-weight: 800; letter-spacing: -.1em;
  color: var(--text); transform: translateX(-12px);
}
.orbit {
  position: absolute; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); font-size: 11px; font-weight: 700;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.orbit-a { top: 13%; left: 10%; }
.orbit-b { top: 22%; right: 9%; }
.orbit-c { bottom: 19%; left: 8%; }
.orbit-d { bottom: 10%; right: 12%; }

.about-manifesto { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto-line { min-height: 165px; display: grid; grid-template-columns: 180px 1fr; gap: 60px; align-items: center; }
.manifesto-line > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.manifesto-line p { max-width: 940px; margin: 0; font-size: clamp(28px,3vw,44px); line-height: 1.08; letter-spacing: -.04em; font-weight: 650; }

.about-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.story-heading h2 { margin: 12px 0 0; font-size: clamp(45px,5vw,72px); line-height: .98; letter-spacing: -.055em; }
.story-copy { max-width: 720px; }
.story-copy p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.story-copy .story-lead { margin-top: 0; color: var(--text); font-size: 25px; line-height: 1.45; letter-spacing: -.025em; }

.about-principles { background: var(--surface-2); }
.about-principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.about-principle {
  min-height: 390px; padding: 29px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 28px; background: var(--surface);
}
.about-principle-icon { width: 58px; height: 58px; margin-bottom: auto; }
.about-principle-icon svg {
  width: 48px; height: 48px; fill: none; stroke: var(--text); stroke-width: 2.15;
  stroke-linecap: round; stroke-linejoin: round;
}
.about-principle > span { color: var(--muted); font-size: 10px; }
.about-principle h3 { margin: 15px 0 12px; font-size: 28px; letter-spacing: -.04em; }
.about-principle p { margin: 0; color: var(--muted); line-height: 1.6; }

.about-quote-section { padding: 125px 0; background: var(--text); color: var(--bg); }
.about-big-quote { position: relative; max-width: 1100px; margin: 0; }
.about-big-quote > span { display: block; height: 80px; font-size: 130px; line-height: .9; opacity: .25; }
.about-big-quote p { margin: 0; font-size: clamp(48px,6vw,88px); line-height: .98; letter-spacing: -.06em; font-weight: 700; }

.growth-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.growth-visual {
  position: relative; min-height: 480px; border: 1px solid var(--line);
  border-radius: 34px; background: var(--surface-2); overflow: hidden;
}
.growth-line {
  position: absolute; left: 16%; bottom: 15%; width: 70%; height: 62%;
  border-left: 2px solid var(--text); border-top: 2px solid var(--text);
  transform: skewY(-30deg); transform-origin: left bottom;
}
.growth-point { position: absolute; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.growth-point i { width: 11px; height: 11px; border: 2px solid var(--surface-2); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1px var(--text); }
.growth-point-1 { left: 13%; bottom: 12%; }
.growth-point-2 { left: 46%; bottom: 37%; }
.growth-point-3 { right: 10%; top: 15%; }
.growth-visual > strong { position: absolute; right: 8%; top: 7%; font-size: 52px; }
.growth-copy h2 { margin: 13px 0 20px; font-size: clamp(44px,5vw,72px); line-height: .98; letter-spacing: -.055em; }
.growth-copy > p { color: var(--muted); line-height: 1.7; font-size: 16px; }
.growth-values { margin-top: 35px; border-top: 1px solid var(--line); }
.growth-values div { display: grid; grid-template-columns: 42px 1fr; padding: 17px 0; border-bottom: 1px solid var(--line); }
.growth-values span { color: var(--muted); font-size: 10px; }
.growth-values strong { font-size: 15px; }

.about-small-quote { padding: 70px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-small-quote p { margin: 0; text-align: center; font-size: clamp(30px,4vw,55px); line-height: 1; letter-spacing: -.05em; font-weight: 700; }
.about-final-cta { padding-top: 90px; }

@media (max-width: 700px) {
  .about-hero { padding: 68px 0 62px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .about-hero-copy { text-align: center; }
  .about-hero-copy h1 { font-size: clamp(57px,17vw,78px); }
  .about-hero-copy p { font-size: 15px; }
  .about-hero-art { min-height: 330px; border-radius: 26px; }
  .about-art-seven { font-size: 190px; }
  .orbit { font-size: 9px; padding: 7px 9px; }
  .manifesto-line { min-height: 0; padding: 42px 0; grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .manifesto-line p { font-size: 27px; }
  .about-story { padding-top: 65px !important; padding-bottom: 65px !important; }
  .about-story-grid { grid-template-columns: 1fr; gap: 30px; }
  .story-heading h2 { font-size: 40px; }
  .story-copy .story-lead { font-size: 21px; }
  .about-principles { padding-top: 65px !important; padding-bottom: 65px !important; }
  .about-principle-grid {
    display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-right: 12px; margin-right: -12px;
  }
  .about-principle-grid::-webkit-scrollbar { display:none; }
  .about-principle { flex: 0 0 84%; min-height: 340px; scroll-snap-align: center; }
  .about-quote-section { padding: 75px 0; }
  .about-big-quote > span { height: 50px; font-size: 90px; }
  .about-big-quote p { font-size: 39px; }
  .about-growth { padding-top: 65px !important; padding-bottom: 65px !important; }
  .growth-grid { grid-template-columns: 1fr; gap: 38px; }
  .growth-visual { min-height: 300px; }
  .growth-copy h2 { font-size: 40px; }
  .about-small-quote { padding: 48px 0; }
  .about-small-quote p { font-size: 31px; }
  .about-final-cta { padding-top: 60px !important; }
}


/* =========================================================
   ÜBER UNS V2 FIXES
   ========================================================= */

/* Hero: prevent headline collisions/overlap */
.about-hero-copy h1 {
  max-width: 640px !important;
  font-size: clamp(62px, 6.6vw, 104px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

/* Principles: icons centered, larger and stronger */
.about-principle {
  align-items: stretch;
}

.about-principle-icon {
  width: 100% !important;
  height: 112px !important;
  margin: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
}

.about-principle-icon svg {
  width: 68px !important;
  height: 68px !important;
  stroke-width: 2.7 !important;
}

.about-principle > span,
.about-principle h3,
.about-principle p {
  width: 100%;
}

/* New clean growth graphic */
.growth-visual-clean {
  position: relative;
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--surface-2);
  overflow: hidden;
}

.growth-chart {
  position: absolute;
  inset: 36px;
  width: calc(100% - 72px);
  height: calc(100% - 72px);
}

.growth-chart-path,
.growth-chart-arrow {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.growth-chart-dot {
  fill: var(--text);
  stroke: var(--surface-2);
  stroke-width: 4;
}

.growth-chart-label {
  position: absolute;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.label-start {
  left: 11%;
  bottom: 10%;
}

.label-today {
  left: 47%;
  top: 48%;
  transform: translate(-50%,-50%);
}

.label-next {
  right: 8%;
  top: 10%;
}

@media (max-width: 700px) {
  .about-hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(54px, 15vw, 72px) !important;
    line-height: .94 !important;
  }

  .about-principle-icon {
    height: 96px !important;
  }

  .about-principle-icon svg {
    width: 60px !important;
    height: 60px !important;
  }

  .growth-visual-clean {
    min-height: 320px;
  }

  .growth-chart {
    inset: 24px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
  }

  .growth-chart-label {
    font-size: 10px;
    padding: 7px 9px;
  }
}


/* V4 mobile: hide the large 7 hero artwork only on phones */
@media (max-width: 700px) {
  .about-hero-art {
    display: none !important;
  }

  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .about-hero {
    padding-bottom: 58px !important;
  }
}

/* KONTAKT V1 */
.contact-hero{padding:125px 0 100px}.contact-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.contact-hero-copy h1{margin:14px 0 24px;max-width:800px;font-size:clamp(62px,7vw,106px);line-height:.91;letter-spacing:-.07em}
.contact-hero-copy>p{max-width:690px;color:var(--muted);font-size:18px;line-height:1.65}
.contact-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px;padding-top:22px;border-top:1px solid var(--line)}
.contact-benefits span{display:block;color:var(--muted);font-size:10px;margin-bottom:7px}.contact-benefits p{margin:0;font-size:13px;font-weight:600}
.contact-callout{min-height:480px;padding:36px;border-radius:34px;background:var(--text);color:var(--bg);display:flex;flex-direction:column;justify-content:flex-end}
.callout-icon{width:70px;height:70px;margin-bottom:auto}.callout-icon svg{width:62px;height:62px;fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-callout>span{color:color-mix(in srgb,var(--bg) 62%,transparent);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.contact-callout strong{display:block;margin:12px 0 16px;font-size:30px;line-height:1.12;letter-spacing:-.04em}
.contact-callout p{margin:0;color:color-mix(in srgb,var(--bg) 68%,transparent);line-height:1.6}
.booking-section{background:var(--surface-2)}.booking-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px;align-items:start}
.booking-info h2,.contact-form-heading h2{margin:12px 0 18px;font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-.055em}
.booking-info>p,.contact-form-heading>p{color:var(--muted);line-height:1.65}.booking-note{display:flex;align-items:center;gap:10px;margin-top:28px;color:var(--muted);font-size:13px}
.booking-note svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.booking-panel{padding:30px;border:1px solid var(--line);border-radius:30px;background:var(--surface)}
.booking-step+.booking-step{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.booking-step-label{display:block;margin-bottom:15px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.booking-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.booking-day{min-height:105px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.booking-day span,.booking-day small{color:var(--muted);font-size:10px}.booking-day strong{font-size:23px}.booking-day.active{background:var(--text);color:var(--bg)}
.booking-day.active span,.booking-day.active small{color:color-mix(in srgb,var(--bg) 62%,transparent)}
.booking-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.booking-time{min-height:50px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text);font-weight:700;cursor:pointer}
.booking-time.active{background:var(--text);color:var(--bg)}.booking-summary{margin-top:28px;padding:18px 20px;border-radius:17px;background:var(--surface-2)}
.booking-summary span{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.booking-summary strong{font-size:15px}
.contact-form-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:85px;align-items:start}.contact-form{padding:30px;border:1px solid var(--line);border-radius:30px;background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:block;margin-bottom:18px}.contact-form label>span:first-child{display:block;margin-bottom:8px;font-size:12px;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:15px;background:var(--bg);color:var(--text);outline:none;padding:14px 15px}
.contact-form input,.contact-form select{min-height:51px}.contact-form textarea{resize:vertical;min-height:145px}
.form-check{display:flex!important;align-items:flex-start;gap:11px}.form-check input{width:17px;min-height:17px;height:17px;margin-top:2px;accent-color:var(--text)}
.form-check span{margin:0!important;color:var(--muted);font-size:11px!important;line-height:1.5;font-weight:400!important}.form-check a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.contact-submit{margin-top:4px}.form-demo-note{margin:14px 0 0;color:var(--muted);font-size:10px}
.contact-process{background:var(--surface-2)}.contact-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.contact-process-card{min-height:335px;padding:28px;border:1px solid var(--line);border-radius:27px;background:var(--surface);display:flex;flex-direction:column}
.process-icon{width:66px;height:66px;margin:8px auto auto}.process-icon svg{width:58px;height:58px;fill:none;stroke:var(--text);stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.contact-process-card>span{color:var(--muted);font-size:10px}.contact-process-card h3{margin:13px 0 10px;font-size:26px}.contact-process-card p{margin:0;color:var(--muted);line-height:1.58}
.contact-alt{padding:70px 0;border-top:1px solid var(--line)}.contact-alt-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.contact-alt h2{margin:10px 0 0;max-width:650px;font-size:clamp(35px,4vw,55px);line-height:1}.contact-alt a{font-size:17px;font-weight:700;white-space:nowrap}
@media(max-width:700px){
.contact-hero{padding:65px 0 58px}.contact-hero-grid{grid-template-columns:1fr;gap:34px}.contact-hero-copy{text-align:center}
.contact-hero-copy h1{font-size:clamp(48px,14vw,66px)}.contact-hero-copy>p{font-size:15px}.contact-benefits{grid-template-columns:repeat(3,1fr);gap:7px;text-align:center}.contact-benefits p{font-size:10px}
.contact-callout{min-height:330px;padding:26px;border-radius:27px}.contact-callout strong{font-size:25px}.callout-icon{width:56px;height:56px}.callout-icon svg{width:50px;height:50px}
.booking-section,.contact-form-section,.contact-process{padding-top:66px!important;padding-bottom:66px!important}.booking-layout,.contact-form-grid{grid-template-columns:1fr;gap:34px}
.booking-info,.contact-form-heading{text-align:center}.booking-info h2,.contact-form-heading h2{font-size:39px}.booking-note{justify-content:center}.booking-panel{padding:20px;border-radius:24px}
.booking-days{overflow-x:auto;display:flex;scrollbar-width:none;margin-right:-20px;padding-right:20px}.booking-days::-webkit-scrollbar{display:none}.booking-day{flex:0 0 78px;min-height:96px}
.booking-times{grid-template-columns:repeat(2,1fr)}.contact-form{padding:21px;border-radius:24px}.form-row{grid-template-columns:1fr;gap:0}.contact-submit{width:100%}
.contact-process-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-12px;padding-right:12px}.contact-process-grid::-webkit-scrollbar{display:none}
.contact-process-card{flex:0 0 83%;min-height:300px;scroll-snap-align:center}.contact-alt{padding:52px 0}.contact-alt-inner{flex-direction:column;align-items:center;text-align:center;gap:24px}
.contact-alt h2{font-size:34px}.contact-alt a{font-size:15px}
}


/* =========================================================
   KONTAKT V2 — guided contact flow
   ========================================================= */
.contact-flow { padding: 95px 0 110px; }
.contact-flow-shell { max-width: 1120px; }
.contact-flow-head {
  display:grid; grid-template-columns:1fr auto; gap:60px; align-items:end; margin-bottom:34px;
}
.contact-flow-head h1 {
  margin:12px 0 18px; max-width:760px; font-size:clamp(52px,6vw,88px);
  line-height:.94; letter-spacing:-.065em;
}
.contact-flow-head p { max-width:650px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }

.flow-progress { display:flex; align-items:center; gap:12px; padding-bottom:8px; }
.flow-progress i { width:42px; height:1px; background:var(--line); }
.flow-progress-item { display:flex; align-items:center; gap:9px; color:var(--muted); }
.flow-progress-item span {
  width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; font-size:11px; font-weight:800;
}
.flow-progress-item strong { font-size:12px; white-space:nowrap; }
.flow-progress-item.active { color:var(--text); }
.flow-progress-item.active span { background:var(--text); color:var(--bg); border-color:var(--text); }

.flow-card {
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:34px;
  background:var(--surface); box-shadow:0 26px 80px rgba(0,0,0,.055);
}
.flow-step {
  display:none; padding:42px; opacity:0; transform:translateX(22px);
}
.flow-step.active {
  display:block; animation:flowStepIn .48s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes flowStepIn { to { opacity:1; transform:none; } }

.flow-step-intro { max-width:720px; margin-bottom:34px; }
.flow-step-kicker {
  display:block; margin-bottom:10px; color:var(--muted); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.flow-step-intro h2 { margin:0 0 12px; font-size:clamp(38px,4.3vw,62px); line-height:1; letter-spacing:-.055em; }
.flow-step-intro p { margin:0; color:var(--muted); line-height:1.6; }

.flow-form { max-width:900px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:block; margin-bottom:18px; }
.field > span:first-child { display:block; margin-bottom:8px; font-size:12px; font-weight:700; }
.field input,.field textarea {
  width:100%; border:1px solid var(--line); border-radius:16px; background:var(--bg); color:var(--text);
  outline:none; padding:15px 16px; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.field input { min-height:53px; }
.field textarea { min-height:135px; resize:vertical; }
.field input:focus,.field textarea:focus,.custom-select.open .custom-select-trigger {
  border-color:color-mix(in srgb,var(--text) 32%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 5%,transparent);
}
.field.has-error input,.field.has-error textarea,.custom-select-field.has-error .custom-select-trigger { border-color:#b64949; }
.field-error { display:none; margin-top:7px; color:#b64949; font-size:10px; }
.has-error .field-error { display:block; }

.custom-select { position:relative; }
.custom-select-trigger {
  width:100%; min-height:53px; padding:0 16px; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:16px; background:var(--bg); color:var(--text); cursor:pointer;
}
.custom-select-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .2s ease; }
.custom-select.open .custom-select-trigger svg { transform:rotate(180deg); }
.custom-select-value { color:var(--muted); }
.custom-select.has-value .custom-select-value { color:var(--text); }
.custom-select-menu {
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); padding:7px;
  border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:0 18px 55px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(-5px); transition:.2s ease;
}
.custom-select.open .custom-select-menu { opacity:1; visibility:visible; transform:none; }
.custom-select-menu button {
  width:100%; padding:12px 13px; border:0; border-radius:12px; background:transparent; color:var(--text);
  text-align:left; cursor:pointer; transition:background .15s ease;
}
.custom-select-menu button:hover { background:var(--surface-2); }

.consent-row { position:relative; display:flex!important; align-items:flex-start; gap:11px; margin:8px 0 24px!important; cursor:pointer; }
.consent-row input { position:absolute; opacity:0; pointer-events:none; }
.consent-box {
  flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); transition:.2s ease;
}
.consent-box svg { width:14px; height:14px; fill:none; stroke:var(--bg); stroke-width:2.1; opacity:0; }
.consent-row input:checked + .consent-box { background:var(--text); border-color:var(--text); }
.consent-row input:checked + .consent-box svg { opacity:1; }
.consent-row > span:last-child { color:var(--muted); font-size:11px; line-height:1.5; }
.consent-row a { color:var(--text); text-decoration:underline; text-underline-offset:2px; }

.flow-step-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.flow-step-actions.split { justify-content:space-between; }
.flow-step-actions .button { min-width:190px; }

.booking-picker { max-width:900px; }
.booking-month-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.booking-month-head strong { font-size:17px; }
.month-arrow {
  width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); color:var(--text); cursor:pointer;
}
.month-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

.booking-date-row { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.date-card {
  min-height:112px; border:1px solid var(--line); border-radius:20px; background:var(--surface);
  color:var(--text); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.date-card:hover { transform:translateY(-2px); }
.date-card span,.date-card small { color:var(--muted); font-size:10px; }
.date-card strong { font-size:25px; }
.date-card.active { background:var(--text); color:var(--bg); transform:translateY(-2px); }
.date-card.active span,.date-card.active small { color:color-mix(in srgb,var(--bg) 64%,transparent); }

.time-picker { margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.time-picker-label { display:block; margin-bottom:13px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.time-slot {
  min-height:50px; border:1px solid var(--line); border-radius:15px; background:var(--surface);
  color:var(--text); font-weight:700; cursor:pointer; transition:.2s ease;
}
.time-slot:hover { transform:translateY(-1px); }
.time-slot.active { background:var(--text); color:var(--bg); border-color:var(--text); }

.booking-confirmation {
  margin-top:28px; padding:20px 22px; border-radius:20px; background:var(--surface-2);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.booking-confirmation span { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.booking-confirmation strong { font-size:16px; }
.booking-duration { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }
.booking-duration svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }

.form-demo-note { margin:14px 0 0; text-align:right; color:var(--muted); font-size:10px; }

.contact-trust { padding:92px 0; background:var(--surface-2); }
.contact-trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.contact-trust-copy h2 { margin:12px 0 17px; font-size:clamp(40px,4.7vw,66px); line-height:1; letter-spacing:-.055em; }
.contact-trust-copy p { max-width:620px; margin:0; color:var(--muted); line-height:1.65; }
.contact-trust-steps { border-top:1px solid var(--line); }
.contact-trust-steps div { display:grid; grid-template-columns:45px 1fr; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-trust-steps span { color:var(--muted); font-size:10px; }
.contact-trust-steps strong { font-size:15px; }

.contact-alt { padding:70px 0; border-top:1px solid var(--line); }
.contact-alt-inner { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.contact-alt h2 { margin:10px 0 0; max-width:650px; font-size:clamp(35px,4vw,55px); line-height:1; }
.contact-alt a { font-size:17px; font-weight:700; white-space:nowrap; }

@media(max-width:700px){
  .contact-flow{padding:60px 0 70px}
  .contact-flow-head{grid-template-columns:1fr;gap:26px;text-align:center}
  .contact-flow-head h1{font-size:clamp(45px,13.5vw,62px)}
  .contact-flow-head p{font-size:15px}
  .flow-progress{justify-content:center}
  .flow-progress-item strong{display:none}
  .flow-card{border-radius:25px}
  .flow-step{padding:24px 20px}
  .flow-step-intro{text-align:center;margin-bottom:28px}
  .flow-step-intro h2{font-size:37px}
  .form-grid{grid-template-columns:1fr;gap:0}
  .custom-select-menu{position:static;margin-top:8px;display:none;box-shadow:none}
  .custom-select.open .custom-select-menu{display:block}
  .flow-step-actions,.flow-step-actions.split{flex-direction:column-reverse;align-items:stretch}
  .flow-step-actions .button{width:100%;min-width:0}
  .booking-date-row{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .booking-date-row::-webkit-scrollbar{display:none}
  .date-card{flex:0 0 76px;min-height:98px}
  .time-grid{grid-template-columns:repeat(2,1fr)}
  .booking-confirmation{flex-direction:column;align-items:flex-start}
  .form-demo-note{text-align:left}
  .contact-trust{padding:64px 0}
  .contact-trust-grid{grid-template-columns:1fr;gap:34px}
  .contact-trust-copy{text-align:center}
  .contact-trust-copy h2{font-size:38px}
  .contact-alt{padding:50px 0}
  .contact-alt-inner{flex-direction:column;align-items:center;text-align:center;gap:22px}
  .contact-alt h2{font-size:34px}
  .contact-alt a{font-size:15px}
}

/* LEGAL + 404 */
.legal-hero{padding:110px 0 72px;border-bottom:1px solid var(--line)}.legal-hero-inner{max-width:940px}.legal-hero h1{margin:12px 0 18px;font-size:clamp(66px,8vw,112px);line-height:.9;letter-spacing:-.07em}.legal-hero p{max-width:700px;margin:0;color:var(--muted);font-size:17px;line-height:1.6}
.legal-body{padding:80px 0 110px}.legal-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:90px;justify-content:center;align-items:start}.legal-nav{position:sticky;top:105px;display:flex;flex-direction:column;gap:9px}.legal-nav>span{margin-bottom:8px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.legal-nav a{padding:8px 0;color:var(--muted);font-size:13px}.legal-nav a:hover{color:var(--text)}
.legal-content section{padding:0 0 52px;margin:0 0 52px;border-bottom:1px solid var(--line);scroll-margin-top:110px}.legal-content section:last-child{border-bottom:0;margin-bottom:0}.legal-number{display:block;margin-bottom:13px;color:var(--muted);font-size:10px}.legal-content h2{margin:0 0 20px;font-size:clamp(30px,3.5vw,46px);letter-spacing:-.045em}.legal-content p{color:var(--muted);font-size:15px;line-height:1.75}.legal-content strong{color:var(--text)}.legal-content a{text-decoration:underline;text-underline-offset:3px}
.legal-contact-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.legal-contact-card>div{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}.legal-contact-card span{display:block;margin-bottom:7px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.legal-contact-card a{text-decoration:none;font-weight:700}.legal-note{font-size:12px!important}
.legal-warning{margin:22px 0;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}.legal-warning strong{display:block;margin-bottom:7px}.legal-warning p{margin:0;font-size:13px}
.legal-cookie-button{margin-top:12px;padding:13px 17px;border:1px solid var(--line);border-radius:999px;background:var(--text);color:var(--bg);font-weight:700;cursor:pointer}.legal-cookie-button span{margin-left:6px}
.error-main{min-height:calc(100vh - 80px);display:grid}.error-page{display:grid;align-items:center;padding:90px 0}.error-wrap{text-align:center}.error-code{display:flex;justify-content:center;align-items:center;gap:.02em;font-size:clamp(130px,25vw,330px);line-height:.72;font-weight:800;letter-spacing:-.11em;opacity:.1;user-select:none}.error-code strong{font-weight:800}.error-copy{position:relative;max-width:760px;margin:-25px auto 0}.error-copy h1{margin:12px 0 18px;font-size:clamp(48px,6vw,82px);line-height:.95;letter-spacing:-.06em}.error-copy p{max-width:600px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.65}.error-actions{display:flex;justify-content:center;gap:10px;margin-top:30px}
@media(max-width:700px){.legal-hero{padding:66px 0 48px;text-align:center}.legal-hero h1{font-size:clamp(54px,16vw,72px)}.legal-hero p{font-size:15px}.legal-body{padding:50px 0 70px}.legal-layout{grid-template-columns:1fr;gap:0}.legal-nav{display:none}.legal-content section{padding-bottom:38px;margin-bottom:38px}.legal-content h2{font-size:34px}.legal-contact-card{grid-template-columns:1fr}.legal-content p{font-size:14px}.error-page{padding:65px 0}.error-code{font-size:38vw}.error-copy{margin:-8px auto 0}.error-copy h1{font-size:44px}.error-actions{flex-direction:column;align-items:stretch}.error-actions .button{width:100%}}


/* =========================================================
   FINAL POLISH: resilience, accessibility, mobile safety
   ========================================================= */
html {
  overflow-x: clip;
}

body {
  min-width: 0;
}

main,
section,
.container,
[class*="grid"],
[class*="copy"],
[class*="card"],
[class*="wrap"],
[class*="inner"] {
  min-width: 0;
}

p, h1, h2, h3, strong, a, span {
  overflow-wrap: break-word;
}

a[href^="mailto:"],
a[href^="tel:"] {
  overflow-wrap: anywhere;
}

button,
a,
input,
textarea,
select {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="option"]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

input,
textarea,
button {
  max-width: 100%;
}

.security-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  min-height: 0;
  color: var(--muted);
  font-size: 11px;
}

@media (hover: none) {
  .layer-card:hover,
  .project-card:hover .project-ui,
  .date-card:hover,
  .time-slot:hover,
  .button:hover,
  .social-icons a:hover {
    transform: none !important;
  }
}

@media (max-width: 700px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  .container {
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
  }

  /* Safe header spacing on notched / narrow phones */
  .nav-wrap {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .site-header {
    width: 100%;
  }

  /* Drawer never bleeds outside a narrow viewport */
  .menu-overlay {
    width: min(92vw, 430px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  .menu-layout {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Comfortable mobile typography without horizontal collisions */
  h1 {
    text-wrap: balance;
  }

  h2, h3 {
    text-wrap: pretty;
  }

  .button {
    min-height: 50px;
  }

  /* Horizontal swipe components stay inside viewport */
  .layer-grid,
  .journey,
  .about-principle-grid,
  .contact-process-grid,
  .booking-date-row,
  .booking-days {
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  /* Contact flow */
  .contact-flow-shell {
    width: calc(100% - 24px) !important;
  }

  .flow-card {
    width: 100%;
    overflow: visible;
  }

  .flow-step {
    overflow: visible;
  }

  .field input,
  .field textarea,
  .custom-select-trigger {
    font-size: 16px; /* prevents iOS zoom */
  }

  .custom-select-menu {
    width: 100%;
    max-height: 310px;
    overflow-y: auto;
  }

  .booking-month-head {
    gap: 10px;
  }

  .booking-month-head strong {
    text-align: center;
    min-width: 0;
  }

  .booking-confirmation {
    width: 100%;
  }

  .booking-confirmation strong {
    overflow-wrap: anywhere;
  }

  /* Footer should never have large dead zones on phones */
  .footer {
    padding-top: 46px !important;
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }

  .footer-top {
    gap: 30px !important;
    padding-bottom: 30px !important;
  }

  .footer-links {
    gap: 28px 20px !important;
  }

  .footer-bottom {
    gap: 16px !important;
  }

  .back-to-top {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Legal pages */
  .legal-content {
    width: 100%;
  }

  .legal-contact-card > div,
  .legal-warning {
    min-width: 0;
  }

  /* 404 */
  .error-code {
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 22px) !important;
  }

  .brand-name-visible {
    font-size: 14px !important;
  }

  .brand-image-wrap,
  .brand-image {
    width: 32px !important;
    height: 32px !important;
  }

  .theme-toggle,
  .menu-toggle {
    width: 41px !important;
    height: 41px !important;
  }

  .hero-proof span {
    font-size: 9px !important;
  }

  .offer-category-tab {
    font-size: 11px !important;
  }

  .flow-step {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  .time-grid {
    gap: 7px;
  }

  .footer-links {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FINAL V2 — lower-friction contact flow + mobile refinement
   ========================================================= */

.project-choice-field {
  min-width: 0;
  margin: 2px 0 22px;
  padding: 0;
  border: 0;
}

.project-choice-field legend {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
}

.project-choice-field > p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.project-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-choice {
  position: relative;
  min-width: 0;
  min-height: 132px;
  margin: 0 !important;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.project-choice:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}

.project-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-choice-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
}

.project-choice-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 24px;
}

.project-choice-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.project-choice-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.project-choice-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: .2s ease;
}

.project-choice-check svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--bg);
  stroke-width: 2.2;
  opacity: 0;
}

.project-choice:has(input:checked) {
  border-color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--text);
}

.project-choice:has(input:checked) .project-choice-check {
  background: var(--text);
  border-color: var(--text);
}

.project-choice:has(input:checked) .project-choice-check svg {
  opacity: 1;
}

.project-choice-field.has-error .project-choice {
  border-color: color-mix(in srgb, #b64949 55%, var(--line));
}

.project-choice-error {
  margin-top: 8px;
}

/* Legal pages get a calmer contained mobile layout instead of edge-to-edge cards */
@media (max-width: 700px) {
  .legal-body > .container,
  .legal-hero > .container {
    width: min(calc(100% - 36px), 760px) !important;
  }

  .legal-content section {
    padding-left: 2px;
    padding-right: 2px;
  }

  .legal-contact-card {
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
  }

  .legal-contact-card > div,
  .legal-warning {
    width: 100%;
    padding: 18px 17px !important;
    border-radius: 17px !important;
  }

  .legal-content p,
  .legal-contact-card a {
    overflow-wrap: anywhere;
  }

  /* Contact process: one decision per visual block */
  .project-choice-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-choice {
    min-height: 0;
    padding: 15px 16px;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 13px;
    align-items: center;
  }

  .project-choice-icon {
    width: 42px;
    height: 42px;
    margin: 0;
  }

  .project-choice-icon svg {
    width: 34px;
    height: 34px;
  }

  .project-choice-copy {
    padding: 0;
    text-align: left;
  }

  .project-choice-check {
    position: static;
    width: 22px;
    height: 22px;
  }

  /* Give every page a consistent lower/upper rhythm */
  .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .services-hero,
  .offers-intro,
  .about-hero,
  .projects-placeholder,
  .legal-hero,
  .contact-flow {
    padding-left: 0;
    padding-right: 0;
  }

  /* Never let cards touch viewport edges */
  .layer-card,
  .journey-step,
  .about-principle,
  .contact-process-card,
  .model-card,
  .build-card,
  .care-card,
  .flow-card,
  .booking-panel,
  .cta-card {
    max-width: 100%;
  }

  /* Slightly smaller radius on compact phones feels cleaner */
  .flow-card,
  .cta-card,
  .layer-card,
  .journey-step,
  .about-principle,
  .model-card,
  .build-card,
  .care-card {
    border-radius: 22px !important;
  }

  /* Keep hero headings away from device edges */
  .hero-copy,
  .about-hero-copy,
  .contact-flow-head,
  .projects-placeholder-inner,
  .services-hero-inner,
  .offers-intro-inner {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* Better touch targets in every interactive area */
  .booking-day,
  .date-card,
  .booking-time,
  .time-slot,
  .month-arrow,
  .offer-category-tab,
  .custom-select-trigger {
    min-height: 48px;
  }

  /* Keep social icons comfortably tappable even without visible borders */
  .social-icons a,
  .footer-social a,
  .menu-social-icons a {
    min-width: 38px !important;
    min-height: 38px !important;
    display: grid !important;
    place-items: center !important;
  }

  /* Legal/mobile typography */
  .legal-content h2 {
    line-height: 1.06;
    margin-bottom: 16px;
  }

  .legal-content p {
    line-height: 1.68;
  }

  /* Footer tighter and more deliberate */
  .footer-brand {
    max-width: 100%;
  }

  .footer-brand p {
    max-width: 280px;
  }
}

@media (max-width: 430px) {
  .legal-body > .container,
  .legal-hero > .container {
    width: calc(100% - 28px) !important;
  }

  .contact-flow-shell {
    width: calc(100% - 18px) !important;
  }

  .flow-card {
    border-radius: 20px !important;
  }

  .flow-step {
    padding: 22px 16px !important;
  }

  .project-choice {
    padding: 14px;
  }

  .booking-date-row {
    margin-right: -16px !important;
    padding-right: 16px !important;
  }
}

textarea { resize: none !important; }

/* Appointment system V1 */
.date-card.no-availability{opacity:.42}
.date-card.no-availability:hover{transform:none}
.month-arrow:disabled{opacity:.28;cursor:not-allowed}
.booking-loading{grid-column:1/-1;padding:34px;text-align:center;color:var(--muted);font-size:13px}
.no-times-message{margin:8px 0 0;color:var(--muted);font-size:12px}
#appointment-submit:disabled{opacity:.38;cursor:not-allowed;transform:none}
#appointment-submit.is-loading{pointer-events:none;opacity:.6}
#appointment-status.success{color:#2d6f46}


/* =========================================================
   MOBILE FIX V1 — horizontal sliders, imprint spacing, menu
   ========================================================= */
@media (max-width: 700px) {
  /* Horizontal components are horizontal-only gestures.
     No vertical drifting/overscroll while swiping cards. */
  .layer-grid,
  .journey,
  .about-principle-grid,
  .contact-process-grid,
  .booking-date-row,
  .booking-days {
    overflow-y: hidden !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
  }

  .layer-card,
  .layer-card-wide,
  .journey-step,
  .about-principle,
  .contact-process-card,
  .date-card,
  .booking-day {
    transform: translateY(0) !important;
  }

  /* Impressum gets deliberately larger breathing room on phones. */
  .page-impressum .legal-hero > .container,
  .page-impressum .legal-body > .container {
    width: calc(100% - 48px) !important;
    max-width: 760px !important;
  }

  .page-impressum .legal-hero-inner,
  .page-impressum .legal-content,
  .page-impressum .legal-content section {
    width: 100%;
    min-width: 0;
  }

  .page-impressum .legal-content section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-impressum .legal-contact-card {
    width: 100%;
    margin: 22px 0 !important;
  }

  .page-impressum .legal-contact-card > div,
  .page-impressum .legal-warning {
    padding: 19px 18px !important;
  }
}

@media (max-width: 390px) {
  .page-impressum .legal-hero > .container,
  .page-impressum .legal-body > .container {
    width: calc(100% - 40px) !important;
  }
}


/* Burger menu: keep the original layout while hiding only the former numbers. */
.menu-number-placeholder {
  display: block;
  width: 100%;
  min-width: 0;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}


/* Burger menu alignment fix:
   Keep the original menu width and arrows, but align the menu labels
   with the "MENÜ" heading and the lower link columns. */
.menu-primary a {
  grid-template-columns: 0 minmax(0, 1fr) auto !important;
  column-gap: 0 !important;
}

.menu-primary .menu-number-placeholder {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.menu-primary a > strong {
  grid-column: 2 !important;
  justify-self: start !important;
  text-align: left !important;
  margin-left: 0 !important;
}

.menu-primary a > i {
  grid-column: 3 !important;
  justify-self: end !important;
}

@media (max-width: 700px) {
  .menu-primary a {
    grid-template-columns: 0 minmax(0, 1fr) auto !important;
  }

  .menu-primary a > strong {
    width: 100%;
    text-align: left !important;
  }
}


/* =========================================================
   BURGER MENU V4 — labels truly left-aligned
   ========================================================= */
.menu-primary > a {
  grid-template-columns: minmax(0, 1fr) 30px !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
}

.menu-primary > a > strong {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.menu-primary > a > i {
  grid-column: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .menu-primary > a {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    column-gap: 10px !important;
  }
}


/* =========================================================
   CONTACT POLISH V1
   ========================================================= */

/* Calendar cards: more legible on desktop without becoming oversized. */
.booking-date-row {
  gap: 10px;
}

.date-card {
  min-height: 118px;
  padding: 14px 10px;
  gap: 5px;
}

.date-card span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

.date-card strong {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.035em;
}

.date-card small {
  font-size: 11px;
  line-height: 1.15;
}

/* Step 2 navigation belongs to the section header, not below the form. */
.booking-step-intro {
  position: relative;
}

.booking-step-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.booking-step-topline .flow-step-kicker {
  margin: 0;
}

.booking-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}

.booking-back:hover {
  color: var(--text);
  transform: translateX(-2px);
}

.booking-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Selected appointment and primary action form one coherent final card. */
.booking-confirmation {
  margin-top: 28px;
  padding: 18px 18px 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
}

.booking-confirmation-copy {
  min-width: 0;
}

.booking-confirmation strong {
  display: block;
  line-height: 1.35;
}

.booking-submit {
  min-width: 220px;
  flex: none;
}

.booking-duration-general {
  margin-top: 12px;
  padding-left: 2px;
  font-size: 12px;
}

.booking-duration-general span {
  white-space: normal;
}

.form-demo-note {
  margin-top: 10px;
}

/* The old floating action row is no longer used in appointment step 2. */
.flow-step[data-step="2"] > .flow-step-actions {
  display: none !important;
}

@media (max-width: 700px) {
  /* Slightly wider and less tall than before: less vertically squeezed. */
  .booking-date-row {
    gap: 9px;
  }

  .date-card {
    flex: 0 0 88px !important;
    min-height: 88px !important;
    padding: 10px 8px;
    gap: 4px;
    border-radius: 17px;
  }

  .date-card span {
    font-size: 11px;
  }

  .date-card strong {
    font-size: 25px;
  }

  .date-card small {
    font-size: 10px;
  }

  .booking-month-head strong {
    font-size: 15px;
  }

  .month-arrow {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .booking-step-topline {
    margin-bottom: 10px;
  }

  .booking-back {
    font-size: 11px;
  }

  .booking-confirmation {
    padding: 17px;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: stretch;
  }

  .booking-submit {
    width: 100%;
    min-width: 0;
  }

  .booking-duration-general {
    justify-content: flex-start;
    margin-top: 11px;
  }
}

@media (max-width: 390px) {
  .date-card {
    flex-basis: 84px !important;
    min-height: 86px !important;
  }

  .date-card strong {
    font-size: 24px;
  }
}


/* =========================================================
   CONTACT POLISH V2
   ========================================================= */

/* Use the full card width for the entire booking step. */
.flow-step[data-step="2"],
.flow-step[data-step="2"] .flow-step-intro,
.flow-step[data-step="2"] .booking-picker,
.flow-step[data-step="2"] .booking-month-head,
.flow-step[data-step="2"] .booking-date-row,
.flow-step[data-step="2"] .time-picker,
.flow-step[data-step="2"] .booking-confirmation,
.flow-step[data-step="2"] .booking-duration-general,
.flow-step[data-step="2"] .form-demo-note {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}

/* Compact, stable back control on desktop and mobile. */
.booking-step-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.booking-step-topline .flow-step-kicker {
  margin: 0 !important;
}

.booking-back {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.booking-back:hover {
  color: var(--text) !important;
  transform: none !important;
}

.booking-back-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

/* Calendar proportions and legibility on desktop. */
@media (min-width: 701px) {
  .booking-date-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .date-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 15px 10px !important;
    gap: 5px !important;
  }

  .date-card span {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .date-card strong {
    font-size: 33px !important;
    line-height: 1 !important;
  }

  .date-card small {
    font-size: 12px !important;
  }
}

/* Selected appointment card remains full width and owns the primary action. */
.booking-confirmation {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
}

.booking-confirmation.no-action {
  grid-template-columns: minmax(0, 1fr) !important;
}

.booking-submit.is-hidden {
  display: none !important;
}

/* Mobile calendar: wider cards, less vertical squeezing. */
@media (max-width: 700px) {
  .booking-step-topline {
    margin-bottom: 10px !important;
  }

  .booking-back {
    font-size: 11px !important;
  }

  .booking-date-row {
    align-items: stretch !important;
    gap: 9px !important;
  }

  .date-card {
    flex: 0 0 88px !important;
    min-height: 92px !important;
    padding: 11px 9px !important;
    gap: 4px !important;
    border-radius: 17px !important;
  }

  .date-card span {
    font-size: 11px !important;
  }

  .date-card strong {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  .date-card small {
    font-size: 10px !important;
  }

  .booking-confirmation {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .booking-submit {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  .date-card {
    flex-basis: 84px !important;
    min-height: 90px !important;
  }
}