/* ─────────────────────────────────────────────────────────────────
   LoomLytic · Color + Type System
   Cool-dark / electric blue · independent rebuild
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── COLOR ─────────────────────────────────────────────── */

  /* Cool-dark stage (primary background family) */
  --dark-deep:       #04060B;   /* stage / outer background          */
  --dark:            #0A0E16;   /* primary card / surface background */
  --dark-raised:     #0E131D;   /* raised tile / inner card          */
  --dark-edge:       #151B27;   /* hairline · 1px borders            */

  /* Ice paper (primary foreground family) */
  --cream:           #E9EFF8;   /* primary text on dark · surface    */
  --cream-muted:     #A7B4C6;   /* secondary text                    */
  --cream-dim:       #6C7A8C;   /* tertiary / metadata               */
  --paper:           #EEF3FA;   /* light surface · cards on light    */

  /* Electric blue accent (the one cool color) */
  --accent:          #2D6BFF;   /* primary accent · CTAs             */
  --accent-glow:     #5E92FF;   /* highlight · hover · label color   */
  --accent-deep:     #17357F;   /* atmosphere · borders · radial glow */
  --accent-ember:    #08122E;   /* deepest blue · embers             */

  /* Semantic foreground / background tokens */
  --fg1:             var(--cream);
  --fg2:             var(--cream-muted);
  --fg3:             var(--cream-dim);
  --fg-accent:       var(--accent-glow);

  --bg-stage:        var(--dark-deep);
  --bg-surface:      var(--dark);
  --bg-raised:       var(--dark-raised);

  --border:          color-mix(in srgb, var(--accent-deep) 55%, transparent);
  --border-strong:   var(--accent-deep);
  --divider:         color-mix(in srgb, var(--accent-deep) 34%, transparent);

  /* Semantic state (cool-shifted) */
  --positive:        #3FA97A;
  --warning:         #D9A24E;
  --danger:          #E0524A;

  /* ── TYPE ──────────────────────────────────────────────── */
  --font-display:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  --tracking-tight-xl: -0.05em;
  --tracking-tight-lg: -0.035em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-allcaps:   0.32em;

  /* ── RADII ──────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-card:    0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.45);
  --shadow-raised:  0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10);

  /* Signature ATMOSPHERIC glow — bottom-anchored blue radial */
  --glow-accent:     radial-gradient(60% 80% at 50% 110%,
                       color-mix(in srgb, var(--accent-deep) 45%, transparent) 0%,
                       transparent 65%);

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease-out-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
}

/* ─────────────────────────────────────────────────────────────────
   Base reset · Body
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-stage);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--dark-deep); }
:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 3px; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────
   Type ramp
   ───────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; color: var(--fg1); font-family: var(--font-display); }
p { margin: 0 0 1em; color: var(--fg2); }
.lead { font: var(--w-regular) 19px/1.55 var(--font-body); color: var(--fg2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Layout grid
   ───────────────────────────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px clamp(24px, 5vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
  transition: padding var(--duration-base) var(--ease-out-soft), background var(--duration-base);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav.scrolled {
  padding: 12px clamp(24px, 5vw, 80px);
  background: color-mix(in srgb, var(--dark-deep) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--divider);
}
.nav-mark {
  display: flex; align-items: center; gap: 10px;
  color: var(--cream); text-decoration: none;
}
.nav-mark svg { height: 22px; width: auto; color: var(--accent-glow); }
.nav-mark .wm {
  font: var(--w-bold) 16px/1 var(--font-display);
  letter-spacing: var(--tracking-tight-lg);
  white-space: nowrap;
}
.nav-mark .wm sup { font-size: 0.55em; opacity: 0.7; margin-left: 2px; vertical-align: super; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 20px;
  background: var(--accent);
  color: var(--dark-deep);
  font: var(--w-semibold) 13px/1 var(--font-body);
  letter-spacing: -0.005em;
  border: none; cursor: pointer;
  border-radius: var(--r-pill);
  transition: background var(--duration-fast) var(--ease-out-soft), transform var(--duration-fast);
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent-glow); }
.nav-cta:active { transform: scale(0.98); }
.nav-cta .arrow { font-size: 14px; line-height: 1; }

/* ─────────────────────────────────────────────────────────────────
   HERO — Desktop & Mobile
   ───────────────────────────────────────────────────────────────── */
.hero--desktop { display: flex; }
.hero--mobile  { display: none; }
@media (max-width: 860px) {
  .hero--desktop { display: none; }
  .hero--mobile  { display: flex; }
}

.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  flex-direction: column; justify-content: flex-end;
  padding: clamp(80px, 10vh, 140px) clamp(24px, 3vw, 48px) clamp(40px, 6vh, 80px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--glow-accent);
  pointer-events: none; z-index: 0;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--cream) 3%, transparent) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  opacity: 0.7; pointer-events: none; z-index: 0;
}
.hero-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.57 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; pointer-events: none; z-index: 1; opacity: 0.5;
}
.hero .hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: clamp(28px, 4vh, 56px);
}
.hero-headline {
  font: var(--w-bold) min(clamp(72px, 15vw, 260px), 23vh) / 0.92 var(--font-display);
  letter-spacing: var(--tracking-tight-xl);
  color: var(--cream);
}
.hero-headline .line { display: block; position: relative; }
.hero-headline .mp { color: var(--accent-glow); display: inline; margin-left: 0.02em; }

.hero-sub {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.hero-sub p {
  font: var(--w-regular) clamp(15px, 1.3vw, 18px)/1.55 var(--font-body);
  color: var(--cream-muted);
  max-width: 520px; margin: 0;
  text-wrap: pretty;
}
.hero-sub p b { color: var(--cream); font-weight: var(--w-medium); }
.hero-sub .actions {
  display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 860px) {
  .hero-sub { grid-template-columns: 1fr; gap: 24px; }
  .hero-sub .actions { justify-content: flex-start; }
}

/* Hero object — woven core, top-right, mirrored toward headline */
.hero-object {
  position: absolute;
  right: clamp(-220px, -5vw, -80px);
  top: clamp(24px, 3vh, 64px);
  height: clamp(380px, 78vh, 1200px);
  width: auto;
  max-width: 56vw;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 40px 100px rgba(23, 53, 127, 0.55));
  transform: scaleX(-1);
  animation: float-slow 12s ease-in-out infinite;
}
@keyframes float-slow {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-12px); }
}

/* ── Mobile Hero ─────────────────────────────────────────────── */
.hero--mobile {
  position: relative;
  min-height: 100svh;
  flex-direction: column; justify-content: flex-end;
  padding: clamp(96px, 14vh, 132px) 22px clamp(36px, 6vh, 56px);
  overflow: hidden;
}
.hero-m-object {
  position: absolute;
  right: -6vw; top: clamp(40px, 7vh, 90px);
  width: 92vw; max-width: 520px; height: auto;
  transform: scaleX(-1);
  filter: drop-shadow(0 30px 80px rgba(23, 53, 127, 0.55));
  pointer-events: none; z-index: 1;
  opacity: 0.9;
  animation: float-slow 12s ease-in-out infinite;
}
.hero-m-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 28px); }
.hero-m-headline {
  font: var(--w-bold) clamp(56px, 15.5vw, 96px)/0.94 var(--font-display);
  letter-spacing: var(--tracking-tight-xl);
  color: var(--cream);
}
.hero-m-headline .mp { color: var(--accent-glow); }
.hero-m-sub {
  font: var(--w-regular) 15.5px/1.55 var(--font-body);
  color: var(--cream-muted); margin: 0; max-width: 92%; text-wrap: pretty;
}
.hero-m-sub b { color: var(--cream); font-weight: var(--w-medium); }
.hero-m-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  font: var(--w-semibold) 14px/1 var(--font-body);
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-soft),
              color var(--duration-fast), border-color var(--duration-fast), transform 80ms;
}
.btn:hover { background: rgba(233,239,248,0.05); }
.btn:active { transform: scale(0.98); }
.btn.btn-primary {
  background: var(--accent); color: var(--dark-deep); border-color: var(--accent);
}
.btn.btn-primary:hover { background: var(--accent-glow); border-color: var(--accent-glow); }
.btn .arrow { display: inline-block; transition: transform var(--duration-fast); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-block { width: 100%; justify-content: center; padding: 18px 22px; font-size: 15px; }

/* ─────────────────────────────────────────────────────────────────
   MARQUEE
   ───────────────────────────────────────────────────────────────── */
.marquee {
  position: relative;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
  background: var(--dark);
  padding: 22px 0;
}
.marquee-track {
  display: flex; gap: 64px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.marquee-item {
  font: var(--w-semibold) clamp(28px, 4vw, 56px)/1 var(--font-display);
  letter-spacing: var(--tracking-tight-lg);
  color: var(--cream);
  display: inline-flex; align-items: center; gap: 64px;
}
.marquee-item .mp { color: var(--accent-glow); font-weight: var(--w-regular); font-size: 0.7em; }
.marquee-item .ghost {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--cream) 25%, transparent);
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION SHELL
   ───────────────────────────────────────────────────────────────── */
.section { position: relative; padding: clamp(120px, 18vh, 220px) 0; }

.section-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: var(--w-medium) 11px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
  color: var(--accent-glow);
  margin-bottom: 32px;
}
.section-eyebrow .num {
  font: var(--w-regular) 11px/1 var(--font-mono);
  color: var(--cream-dim); letter-spacing: 0.04em; white-space: nowrap;
}
.section-eyebrow .line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border) 0%, transparent 60%);
}
.section-title {
  font: var(--w-bold) clamp(48px, 9vw, 160px)/0.94 var(--font-display);
  letter-spacing: var(--tracking-tight-xl);
  color: var(--cream);
  margin: 0 0 24px;
  text-wrap: balance;
}
.section-title .accent { color: var(--accent-glow); font-style: italic; font-weight: var(--w-regular); }
.section-title .mp { color: var(--accent-glow); font-weight: var(--w-regular); }
.section-sub {
  font: var(--w-regular) clamp(17px, 1.5vw, 21px)/1.55 var(--font-body);
  color: var(--cream-muted);
  max-width: 580px; margin: 0; text-wrap: pretty;
}

/* Reveal on intersection */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 800ms var(--ease-out-soft), transform 800ms var(--ease-out-soft);
  transition-delay: var(--rev-delay, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   APPROACH · sticky-pin · 4 acts cross-fade
   ───────────────────────────────────────────────────────────────── */
.approach-track {
  position: relative;
  margin-top: 80px;
  height: 500vh;
}
.approach-pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: clamp(80px, 11vh, 120px) clamp(24px, 5vw, 80px) clamp(48px, 7vh, 80px);
  max-width: 1480px; margin: 0 auto;
  overflow: hidden;
}
.approach-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: center;
  gap: clamp(32px, 4vw, 80px);
  min-height: 0;
}
.approach-acts { position: relative; height: 100%; display: flex; align-items: center; }
.approach-act {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 2.5vh, 28px);
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
  pointer-events: none;
}
.approach-act.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.aa-num {
  font: var(--w-regular) 11px/1 var(--font-mono);
  letter-spacing: 0.12em; color: var(--accent-glow); text-transform: uppercase;
}
.aa-title {
  font: var(--w-bold) clamp(56px, 7.6vw, 120px)/0.92 var(--font-display);
  letter-spacing: var(--tracking-tight-xl);
  color: var(--cream); margin: 0; text-wrap: balance;
}
.aa-title .accent { color: var(--accent-glow); font-style: italic; font-weight: var(--w-regular); }
.aa-title .mp { color: var(--accent-glow); font-weight: var(--w-regular); }
.aa-desc {
  font: var(--w-regular) clamp(15px, 1.4vw, 19px)/1.55 var(--font-body);
  color: var(--cream-muted); margin: 0; max-width: 480px; text-wrap: pretty;
}
.approach-objects {
  position: relative;
  height: 76vh; max-height: 800px;
  display: flex; align-items: center; justify-content: center;
}
.approach-objects::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 55%,
                color-mix(in srgb, var(--accent-deep) 40%, transparent) 0%,
                transparent 70%);
  pointer-events: none;
}
.ao {
  position: absolute;
  max-height: 90%;
  filter: drop-shadow(0 40px 80px rgba(23, 53, 127, 0.55));
  opacity: 0;
  transition: opacity 700ms var(--ease-out-soft), transform 900ms var(--ease-out-soft),
              left 900ms var(--ease-out-soft), top 900ms var(--ease-out-soft),
              width 900ms var(--ease-out-soft), filter 700ms var(--ease-out-soft);
  pointer-events: none;
}
.ao-brain    { left: 50%; top: 50%; width: 100%; max-height: 100%; transform: translate(-50%, -50%) scale(0.94); }
.ao-voice    { left: 50%; top: 50%; width: 95%;  max-height: 100%; transform: translate(-50%, -50%) scale(0.94); }
.ao-hand     { left: 50%; top: 50%; width: 95%;  max-height: 100%; transform: translate(-50%, -50%) scale(0.94); }
.ao-employee { left: 50%; top: 50%; width: 100%; max-height: 100%; transform: translate(-50%, -50%) scale(0.94); }

.approach-objects[data-stage="1"] .ao-brain {
  left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="2"] .ao-brain {
  left: 28%; top: 50%; width: 78%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="2"] .ao-voice {
  left: 76%; top: 50%; width: 76%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="3"] .ao-brain {
  left: 26%; top: 32%; width: 58%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="3"] .ao-voice {
  left: 74%; top: 30%; width: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="3"] .ao-hand {
  left: 50%; top: 75%; width: 56%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.approach-objects[data-stage="4"] .ao-brain,
.approach-objects[data-stage="4"] .ao-voice,
.approach-objects[data-stage="4"] .ao-hand {
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.45);
  filter: drop-shadow(0 30px 60px rgba(23, 53, 127, 0.5)) blur(14px); opacity: 0;
}
.approach-objects[data-stage="4"] .ao-employee {
  left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%) scale(1); opacity: 1;
}

@media (max-width: 960px) {
  .approach-track { height: 580vh; }
  .approach-pin { padding: 76px 22px 32px; align-items: stretch; }
  .approach-grid {
    grid-template-columns: 1fr; grid-template-rows: 1fr auto;
    gap: clamp(12px, 1.5vh, 24px); height: 100%; width: 100%;
  }
  .approach-objects { order: -1; height: 100%; min-height: 0; max-height: none; align-self: stretch; }
  .approach-objects .ao { max-width: 100%; max-height: 100%; }
  .approach-acts { align-self: end; padding-bottom: 0; min-height: 190px; display: block; }
  .approach-act { position: absolute; inset: 0; justify-content: flex-start; gap: 6px; }
  .approach-act .aa-desc { margin: 0; }
  .aa-num { font-size: 10.5px; letter-spacing: 0.14em; }
  .aa-title { font-size: clamp(36px, 10vw, 64px); margin-bottom: 4px; }
  .aa-desc { font-size: 13.5px; line-height: 1.45; }

  .approach-objects[data-stage="1"] .ao-brain       { top: 36%; width: 100%; }
  .approach-objects[data-stage="2"] .ao-brain       { top: 36%; left: 32%; width: 80%; }
  .approach-objects[data-stage="2"] .ao-voice       { top: 36%; left: 80%; width: 48%; }
  .approach-objects[data-stage="3"] .ao-brain       { top: 22%; left: 30%; width: 68%; }
  .approach-objects[data-stage="3"] .ao-voice       { top: 20%; left: 80%; width: 40%; }
  .approach-objects[data-stage="3"] .ao-hand        { top: 64%; left: 50%; width: 58%; }
  .approach-objects[data-stage="4"] .ao-employee    { top: 38%; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   CASE STUDIES
   ───────────────────────────────────────────────────────────────── */
.cases-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 8vh, 80px);
}
.case-card {
  display: flex; flex-direction: column;
  flex: 0 1 calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3);
}

.case-quote {
  font: var(--w-medium) clamp(16px, 1.3vw, 19px)/1.5 var(--font-display);
  letter-spacing: var(--tracking-snug);
  color: var(--cream); margin: 0 0 20px; text-wrap: pretty;
  quotes: "„" """;
}
.case-quote::before { content: open-quote; color: var(--accent-glow); }
.case-quote::after  { content: close-quote; color: var(--accent-glow); }

.case-author {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 18px; margin-top: auto;
  border-top: 1px solid var(--divider);
}
.case-author:not(:has(.link)) { padding-bottom: 23px; }
.case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.case-author .name {
  font: var(--w-semibold) 16px/1.3 var(--font-display);
  letter-spacing: var(--tracking-snug); color: var(--cream);
}
.case-author .role { font: var(--w-regular) 13.5px/1.4 var(--font-body); color: var(--cream-muted); }
.case-author .link {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--w-regular) 11px/1 var(--font-mono);
  letter-spacing: 0.06em; color: var(--accent-glow);
  text-decoration: none; margin-top: 8px;
  transition: color var(--duration-fast);
}
.case-author .link:hover { color: var(--cream); }
.case-author .link .arrow { transition: transform 220ms var(--ease-out-soft); }
.case-author .link:hover .arrow { transform: translateX(3px); }
.case-author .rating {
  display: inline-flex; align-items: baseline; gap: 5px;
  font: var(--w-medium) 12px/1 var(--font-body);
  color: var(--accent-glow); white-space: nowrap; flex: none;
}
.case-author .rating .s { font-size: 13px; line-height: 1; letter-spacing: 0.08em; }

.cases-rating { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cases-rating .stars { font-size: clamp(15px, 1.3vw, 18px); letter-spacing: 0.2em; color: var(--accent-glow); }
.cases-rating .value {
  font: var(--w-semibold) clamp(16px, 1.4vw, 19px)/1 var(--font-display);
  letter-spacing: var(--tracking-snug); color: var(--cream);
}
.cases-rating .meta { font: var(--w-regular) 13.5px/1.5 var(--font-body); color: var(--cream-muted); }

/* ─────────────────────────────────────────────────────────────────
   TEAM
   ───────────────────────────────────────────────────────────────── */
.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(48px, 7vh, 72px);
}
.team-card {
  display: flex; flex-direction: column; gap: 16px;
  flex: 0 1 calc((100% - 2 * clamp(20px, 3vw, 36px)) / 3);
  min-width: 0;
}
.team-photo {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent-deep) 26%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--dark-raised) 0%, var(--dark) 100%);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.4);
}
.team-photo::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: var(--w-bold) clamp(54px, 7vw, 96px)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--accent-glow); opacity: 0.45;
}
.team-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-glow) 6%, transparent) 0 1px, transparent 1px 40px);
  opacity: 0.5;
}
.team-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.team-meta .name {
  font: var(--w-semibold) clamp(16px, 1.3vw, 19px)/1.25 var(--font-display);
  letter-spacing: var(--tracking-snug); color: var(--cream);
}
.team-meta .role { font: var(--w-regular) 13.5px/1.4 var(--font-body); color: var(--cream-muted); }
.team-socials { display: flex; gap: 14px; margin-top: 8px; }
.team-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--cream-muted); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft), transform 220ms var(--ease-out-soft);
}
.team-social:hover { color: var(--accent-glow); transform: translateY(-2px); }
.team-social svg { width: 100%; height: 100%; display: block; }

/* ─────────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────────── */
.faq-list { max-width: 840px; margin-top: 8px; border-top: 1px solid var(--divider); }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 28px 0;
  font: var(--w-medium) clamp(19px, 2vw, 25px)/1.3 var(--font-display);
  letter-spacing: var(--tracking-snug); color: var(--cream);
  transition: color 200ms var(--ease-out-soft);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent-glow); }
.faq-q::after {
  content: "+"; flex: none;
  font: var(--w-light) 30px/1 var(--font-display);
  color: var(--accent-glow);
  transition: transform 240ms var(--ease-out-soft);
}
.faq-item[open] .faq-q::after { content: "−"; }
.faq-a { padding: 0 0 30px; max-width: 700px; }
.faq-a p { font: var(--w-regular) clamp(16px, 1.4vw, 18px)/1.65 var(--font-body); color: var(--cream-muted); margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   CTA
   ───────────────────────────────────────────────────────────────── */
.cta { position: relative; padding: clamp(140px, 20vh, 240px) 0; text-align: center; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: auto 0 -20% 0; height: 90%;
  background: var(--glow-accent); pointer-events: none;
}
.cta .page { position: relative; z-index: 1; }
.cta-eyebrow {
  font: var(--w-medium) 11px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--tracking-allcaps);
  color: var(--accent-glow); margin-bottom: 28px;
}
.cta-title {
  font: var(--w-bold) clamp(56px, 11vw, 180px)/0.9 var(--font-display);
  letter-spacing: var(--tracking-tight-xl); color: var(--cream);
  margin: 0 0 36px; text-wrap: balance;
}
.cta-title .accent { color: var(--accent-glow); font-style: italic; font-weight: var(--w-regular); }
.cta-title .mp { color: var(--accent-glow); font-weight: var(--w-regular); }
.cta-sub {
  font: var(--w-regular) 18px/1.55 var(--font-body);
  color: var(--cream-muted); max-width: 560px; margin: 0 auto 44px; text-wrap: pretty;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Slot rotator */
.slot-rotator { display: inline-block; position: relative; vertical-align: top; text-align: center; }
.slot-spacer { visibility: hidden; white-space: nowrap; }
.slot-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; opacity: 0;
  animation: slot-fade 18s linear infinite;
  will-change: opacity;
}
.slot-word:nth-of-type(1) { animation-delay: 0s;    }
.slot-word:nth-of-type(2) { animation-delay: -15s;  }
.slot-word:nth-of-type(3) { animation-delay: -12s;  }
.slot-word:nth-of-type(4) { animation-delay: -9s;   }
.slot-word:nth-of-type(5) { animation-delay: -6s;   }
.slot-word:nth-of-type(6) { animation-delay: -3s;   }
@keyframes slot-fade {
  0%    { opacity: 0; }
  1.5%  { opacity: 1; }
  15%   { opacity: 1; }
  16.5% { opacity: 0; }
  100%  { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--divider); padding: 48px 0 36px; background: var(--dark-deep); }
.footer-top {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: start; gap: 48px; margin-bottom: 80px;
}
.footer-top .footer-col { text-align: right; justify-self: end; }
.footer-top .footer-col ul { align-items: flex-end; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 340px; }
.footer-brand .wm {
  display: flex; align-items: center; gap: 12px; color: var(--cream);
  font: var(--w-bold) 22px/1 var(--font-display); letter-spacing: var(--tracking-tight-lg);
}
.footer-brand .wm svg { height: 26px; width: auto; color: var(--accent-glow); }
.footer-brand .wm sup { font-size: 0.5em; opacity: 0.7; vertical-align: super; }
.footer-brand p { font: var(--w-regular) 13.5px/1.55 var(--font-body); color: var(--cream-muted); margin: 0; }
.footer-col h4 {
  font: var(--w-medium) 11px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--tracking-allcaps);
  color: var(--accent-glow); margin: 0 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font: var(--w-regular) 13.5px/1 var(--font-body);
  color: var(--cream-muted); text-decoration: none; transition: color var(--duration-fast);
}
.footer-col a:hover { color: var(--cream); }
.footer-wordmark-massive {
  font: var(--w-bold) clamp(40px, 14vw, 220px)/1 var(--font-display);
  letter-spacing: var(--tracking-tight-xl);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cream) 22%, transparent);
  text-align: center; margin: 0 0 36px;
  white-space: nowrap; overflow: hidden; user-select: none; position: relative;
}
.footer-wordmark-massive .mp { -webkit-text-stroke: 1.5px var(--accent-glow); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font: var(--w-regular) 11px/1.4 var(--font-mono);
  color: var(--fg3); letter-spacing: 0.04em; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--divider);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav { padding: 14px 20px; }
  .nav.scrolled { padding: 10px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-top .footer-col { text-align: left; justify-self: start; }
  .footer-top .footer-col ul { align-items: flex-start; }
  .cases-grid { gap: clamp(36px, 5vh, 56px); }
  .case-card { flex-basis: 100%; }
  .team-grid { gap: clamp(20px, 3vh, 32px); }
  .team-card { flex-basis: 100%; }
  .team-photo { aspect-ratio: 4 / 3; }
  .cta-title { font-size: clamp(48px, 13vw, 96px) !important; margin-bottom: 24px; }
  .cta-sub { font-size: 15.5px; margin-bottom: 32px; }
  .cta-eyebrow { margin-bottom: 20px; }
  .cta-actions { gap: 10px; flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
  .footer-wordmark-massive { font-size: clamp(36px, 16vw, 96px); margin-bottom: 24px; }
}
@media (max-width: 420px) {
  .cta-title { font-size: clamp(44px, 12.5vw, 80px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track,
  .hero-object, .hero-m-object,
  .slot-word { animation: none !important; }
  .slot-word:nth-of-type(1) { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   LEGAL / SIMPLE CONTENT PAGES
   ───────────────────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(140px, 20vh, 200px) clamp(24px, 5vw, 40px) clamp(80px, 12vh, 140px);
}
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-glow); text-decoration: none;
  font: var(--w-medium) 13px/1 var(--font-body); margin-bottom: 32px;
}
.legal-back:hover { color: var(--cream); }
.legal-wrap h1 {
  font: var(--w-bold) clamp(40px, 7vw, 88px)/0.96 var(--font-display);
  letter-spacing: var(--tracking-tight-xl); margin: 0 0 20px;
}
.legal-wrap h2 {
  font: var(--w-semibold) clamp(20px, 2.4vw, 28px)/1.2 var(--font-display);
  letter-spacing: var(--tracking-tight); margin: 44px 0 12px;
}
.legal-wrap p, .legal-wrap li {
  font: var(--w-regular) clamp(15px, 1.4vw, 17px)/1.7 var(--font-body);
  color: var(--cream-muted); margin: 0 0 14px;
}
.legal-wrap ul { margin: 0 0 18px; padding-left: 20px; }
.legal-wrap a { color: var(--accent-glow); }
.legal-note {
  display: block; margin-bottom: 40px; padding: 14px 16px;
  border: 1px solid var(--divider); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-deep) 14%, transparent);
  font: var(--w-regular) 13px/1.5 var(--font-body); color: var(--cream-dim);
}

/* ─────────────────────────────────────────────────────────────────
   TESTIMONIAL CARDS (text-only, no media)
   ───────────────────────────────────────────────────────────────── */
.case-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.case-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  font: 700 18px/1 var(--font-display); letter-spacing: -0.02em; color: var(--accent-glow);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent-deep) 42%, transparent), transparent 70%),
    var(--dark-raised);
  border: 1px solid var(--border);
}
.case-stars { color: var(--accent-glow); letter-spacing: 0.18em; font-size: 14px; }
.case-card .case-quote { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────
   BOOKING (Call buchen)
   ───────────────────────────────────────────────────────────────── */
.booking { background: linear-gradient(to bottom, var(--dark-deep), color-mix(in srgb, var(--dark) 70%, var(--dark-deep)) 45%, var(--dark-deep)); }
.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.booking-intro .section-title { margin-bottom: 22px; }
.booking-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.booking-points li { display: flex; align-items: center; gap: 12px; color: var(--cream-muted); font: 400 15px/1.4 var(--font-body); }
.bp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-glow); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); flex: none; }

.booking-card {
  background: var(--dark); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-raised);
  position: relative; overflow: hidden;
}
.booking-card::before { content: ""; position: absolute; inset: auto 0 -30% 0; height: 70%; background: var(--glow-accent); pointer-events: none; }
.booking-card > * { position: relative; }

.bw { display: flex; flex-direction: column; }
.bw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bw-steps { display: flex; gap: 16px; flex-wrap: wrap; }
.bw-step { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-body); color: var(--cream-dim); }
.bw-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); font: 600 12px/1 var(--font-body); color: var(--cream-muted); }
.bw-step.active { color: var(--cream); }
.bw-step.active b { background: var(--accent); border-color: var(--accent); color: var(--dark-deep); }
.bw-step.done b { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent-deep); color: var(--accent-glow); }
.bw-dur { font: 500 12px/1 var(--font-mono); color: var(--cream-dim); }

.bw-body { min-height: 316px; }
.bw-pane { display: none; }
.bw-pane.active { display: block; animation: bwIn .25s ease; }
@keyframes bwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bw-label { font: 500 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--cream-dim); margin: 0 0 12px; display: flex; justify-content: space-between; gap: 10px; }
.bw-label span { text-transform: none; letter-spacing: 0; }

.bw-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; }
.bw-days::-webkit-scrollbar { height: 6px; }
.bw-days::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.bw-day { flex: none; width: 66px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--cream-muted); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.bw-day b { display: block; font: 600 18px/1.15 var(--font-display); color: var(--cream); }
.bw-day small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.bw-day:hover:not(:disabled) { border-color: var(--accent-deep); }
.bw-day.selected { background: var(--accent); border-color: var(--accent); }
.bw-day.selected b, .bw-day.selected small { color: var(--dark-deep); }
.bw-day:disabled { opacity: 0.34; cursor: not-allowed; }

.bw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.bw-slot { padding: 11px 6px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--cream); font: 500 14px/1 var(--font-body); cursor: pointer; transition: border-color .15s, background .15s; }
.bw-slot:hover { border-color: var(--accent); }
.bw-slot.selected { background: var(--accent); border-color: var(--accent); color: var(--dark-deep); }
.bw-empty { color: var(--cream-dim); font: 400 14px/1.5 var(--font-body); padding: 12px 0; }

.bw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .bw-grid { grid-template-columns: 1fr; } }
.bw-field { display: flex; flex-direction: column; gap: 6px; }
.bw-field.full { grid-column: 1 / -1; }
.bw-field label { font: 500 12px/1 var(--font-body); color: var(--cream-muted); }
.bw-field label .req, .bw-check .req { color: var(--accent-glow); }
.bw-field input, .bw-field select, .bw-field textarea {
  width: 100%; background: var(--dark-raised); border: 1px solid var(--border); color: var(--cream);
  border-radius: 10px; padding: 12px 13px; font: 400 14.5px/1.3 var(--font-body); outline: none;
  transition: border-color .15s;
}
.bw-field textarea { min-height: 84px; resize: vertical; }
.bw-field input:focus, .bw-field select:focus, .bw-field textarea:focus { border-color: var(--accent); }
.bw-field .err { color: var(--danger); font-size: 12px; min-height: 14px; }
.bw-field input.invalid, .bw-field textarea.invalid, .bw-field select.invalid { border-color: var(--danger); }
.bw-check { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; font: 400 13px/1.5 var(--font-body); color: var(--cream-muted); }
.bw-check input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.bw-check a { color: var(--accent-glow); }

.bw-foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.bw-status { flex: 1; font: 400 13px/1.4 var(--font-body); color: var(--cream-dim); }
.bw-status.err { color: var(--danger); }
.bw-next { margin-left: auto; }
.bw-back { background: transparent; border: none; color: var(--cream-dim); cursor: pointer; font: 500 14px/1 var(--font-body); padding: 12px 4px; }
.bw-back:hover { color: var(--cream); }
.bw-back.hidden { visibility: hidden; }

.bw-success { text-align: center; padding: 6px 4px 0; }
.bw-success .ok-ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid var(--accent-deep); color: var(--accent-glow); font-size: 28px; }
.bw-success h3 { font: 700 clamp(22px, 3vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 10px; }
.bw-success p { color: var(--cream-muted); margin: 0 auto 4px; max-width: 380px; }
.bw-success .summary { display: inline-flex; flex-direction: column; gap: 6px; margin: 20px 0 22px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--dark-raised); text-align: left; }
.bw-success .summary b { color: var(--cream); }
.bw-success .summary small { color: var(--cream-dim); }
.bw-success .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bw-dl { text-decoration: none; }

@media (max-width: 960px) {
  .booking-layout { grid-template-columns: 1fr; }
  .booking .section-title { font-size: clamp(38px, 9vw, 64px); }
}