/* ============================================
   GIVARO — Clean B/W
   ============================================ */

:root {
  /* warm near-black + warm off-white → edel, nicht klinisch */
  --bg: #0c0b09;
  --bg-2: #151310;
  --ink: #f4f0e8;
  --ink-90: rgba(244,240,232,.9);
  --ink-60: rgba(244,240,232,.6);
  --ink-40: rgba(244,240,232,.4);
  --ink-20: rgba(244,240,232,.2);
  --line: rgba(244,240,232,.1);
  --line-strong: rgba(244,240,232,.2);
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.65,0,.35,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.45,.64,1);
  /* DESIGN: warm terracotta accent (the ONE signature colour). On the dark base
     it can be vivid; the light themes use a deeper tone for AA contrast. Used
     sparingly: section numbers, kicker dash, link hover, active dot, float-CTA. */
  --accent: #d06a3f;
  --accent-glow: rgba(208,106,63,.3);
  --warm-light: rgba(255,244,225,.12);
  /* DESIGN: 8px spacing scale — consistent vertical rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px;
  --s-6: 64px; --s-7: 96px; --s-8: 140px; --s-9: 200px;
}

/* LIGHT / CREAM front page — warm, sandy cream (not white), warm dark-brown ink,
   and a deeper burnt-gold accent that reads rich on cream (the light gold washed out). */
body.light {
  /* LIGHT "Liquid Glass" theme — warm greige (not white), dark ink text, cool petrol accent.
     Glass = translucent panels + fine light borders + soft shadow + edge highlight.
     backdrop-filter stays OFF the scroll path (perf) — the glass reads via translucency. */
  --bg: #ebe7df;        /* warm greige page — a touch lighter, still not white */
  --bg-2: #f3f0e9;      /* lighter greige band for sections */
  --ink: #1a1712;       /* warm near-black ink */
  --ink-90: rgba(26,23,18,.92);
  --ink-60: rgba(26,23,18,.72);   /* AA body text on greige */
  --ink-40: rgba(26,23,18,.55);
  --ink-20: rgba(26,23,18,.14);
  --line: rgba(26,23,18,.12);
  --line-strong: rgba(26,23,18,.2);
  --accent: #1a1712;                 /* 2-TONE: the accent IS the ink — palette = greige + ink only, no third hue */
  --accent-glow: rgba(26,23,18,.16);
  --warm-light: rgba(26,23,18,.05);
  background: var(--bg);
  color: var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: var(--ink); color: var(--bg); }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  line-height: 1.4;
  width: 100%;
}

/* Restore real, semantically-correct cursors whenever the fancy one is absent.
   The reset neutralises the per-element `cursor:none` rules below; the second
   rule gives interactive elements their pointer back (higher specificity wins). */
html:not(.custom-cursor) * { cursor: auto; }
html:not(.custom-cursor) a[href],
html:not(.custom-cursor) button,
html:not(.custom-cursor) summary,
html:not(.custom-cursor) [role="button"],
html:not(.custom-cursor) label[for] { cursor: pointer; }

img, svg { display: block; max-width: 100%; }
picture { display: contents; }   /* layout-transparent: the <img> behaves as the direct child */
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

/* warm depth on the DARK pages only (404) — not the light portfolio or front page */
body:not(.port-page):not(.light) {
  background:
    radial-gradient(135% 80% at 50% -5%, #15110b 0%, rgba(21,17,11,0) 50%),
    var(--bg);
  /* PERF: dropped background-attachment:fixed (per-frame repaint of the whole bg) */
}
/* warm depth on the LIGHT front page — soft cream lift from the top */
body.light {
  background:
    radial-gradient(120% 72% at 50% -12%, rgba(255,255,255,.55) 0%, transparent 52%),
    radial-gradient(90% 60% at 86% 6%, rgba(26,23,18,.05) 0%, transparent 50%),
    var(--bg);
  /* PERF: NO background-attachment:fixed — keeps the compositor fast-scroll path. */
}
/* DEPTH behind the glass — soft tonal blobs on a FIXED composited layer (NOT
   background-attachment:fixed, so no scroll re-raster). Gives the frosted panels
   something to refract: as cards scroll over it, the blur shows gentle moving
   tone = the Apple "wallpaper-through-glass" depth. Subtle + strictly 2-tone
   (only greige-light + faint ink alpha). */
body.light::before {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 38% at 18% 24%, rgba(255,255,255,.85) 0%, transparent 60%),
    radial-gradient(46% 44% at 84% 20%, rgba(26,23,18,.16) 0%, transparent 62%),
    radial-gradient(50% 48% at 70% 78%, rgba(26,23,18,.14) 0%, transparent 60%),
    radial-gradient(44% 42% at 12% 82%, rgba(255,255,255,.7) 0%, transparent 60%);
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
/* A11y: in-page anchor targets shouldn't land hidden behind the fixed nav when focused */
section[id], header[id] { scroll-margin-top: 88px; }
/* fluid smooth-scroll for in-page anchor jumps (nav + side-nav) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================
   LOADER
   ============================================ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-logo {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
}
.loader-count {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-family: var(--font-display);
  margin: 0 auto 18px;
  color: var(--ink);
  line-height: 1;
}
.loader-count b {
  font-weight: 600;
  font-size: 46px;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.loader-count i {
  font-style: normal;
  font-size: 18px;
  color: var(--ink-40);
  transform: translateY(-2px);
}
.loader-bar {
  width: 180px; height: 1px;
  background: var(--line);
  overflow: hidden;
  margin: 0 auto;
}
.loader-bar-fill {
  height: 100%;
  width: 0;          /* driven by JS, synced with the counter */
  background: var(--ink);
}

/* ============================================
   CURSOR
   ============================================ */
/* Custom cursor removed — hide any leftover dot/ring/label DOM nodes; the standard system cursor is used. */
.cursor, .cursor-trail, .cursor-label { display: none !important; }

/* ============================================
   PROGRESS BAR
   ============================================ */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0;
  background: var(--ink);
  z-index: 9999;
  pointer-events: none;
  will-change: width;
  mix-blend-mode: difference;
}

/* ============================================
   SIDE DOT NAV
   ============================================ */
.side-nav {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column;
  gap: 14px;
  mix-blend-mode: difference;
}
.side-nav a {
  position: relative;
  display: block;
  width: 22px; height: 22px;
  cursor: none;
}
.side-nav a span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: var(--ink-40);
  border-radius: 50%;
  transition: width .35s var(--ease-bounce), height .35s var(--ease-bounce), background .25s;
}
.side-nav a:hover span {
  background: var(--ink);
  width: 8px; height: 8px;
}
.side-nav a.active span {
  background: var(--accent);
  width: 8px; height: 28px;
  border-radius: 4px;   /* PERF: removed infinite box-shadow pulse (continuous repaint on a fixed element); the petrol pill already reads as "active" */
}
.side-nav a::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--ink);
  color: var(--bg);
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
  white-space: nowrap;
}
.side-nav a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ============================================
   FLOATING CTA
   ============================================ */
.float-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease-bounce);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px var(--ink-20);
  cursor: none;
}
.float-cta.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.float-cta:hover { translate: 0 -3px; scale: 1.03; }
.float-cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.float-cta:hover svg { transform: translateX(4px); }


/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  transition: padding .35s var(--ease), background .35s var(--ease);
  /* difference blend keeps the logo/links legible over the hero only */
  mix-blend-mode: difference;
  border-bottom: 1px solid transparent;
}
/* once scrolled, drop the blend and sit on a quiet glass bar so the links
   never sink into the bright values section or busy headlines underneath */
.nav.shrunk {
  padding: 12px 40px;
  mix-blend-mode: normal;
  /* PERF: no backdrop-filter — re-blurring the area behind a fixed bar every
     scroll frame is brutally expensive. A near-opaque bar reads just as clean. */
  background: rgba(12, 11, 9, .92);
  border-bottom-color: var(--line);
}
.nav.shrunk .nav-links a { color: var(--ink-90); }
.nav.shrunk .logo { color: var(--ink); }

/* ---- LIGHT FRONT PAGE: drop the difference-blend so all fixed UI reads
   dark-on-cream (like the portfolio), not inverted/washed out ---- */
body.light .nav { mix-blend-mode: normal; }
body.light .nav.shrunk {
  /* REAL liquid glass (Apple Control-Center): frosted backdrop blur + saturation.
     One small fixed bar → cheap; reads as a true frosted pane over the content. */
  background: rgba(247,244,237,.45);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  backdrop-filter: blur(30px) saturate(1.9);
  border-bottom-color: rgba(255,255,255,.7);
}
body.light .progress { mix-blend-mode: normal; background: var(--ink); }
body.light .side-nav a span { mix-blend-mode: normal; }
body.light .float-cta { mix-blend-mode: normal; }
body.light .footer-mega { mix-blend-mode: normal; }
/* dark "ink" cards on the cream bg — high-contrast & edel, echoes the inverted
   Werte section. Solid by definition (never washed/see-through). Light text. */
body.light .stack-card {
  /* REAL Apple Control-Center frost: translucent + backdrop blur + saturation + bright rim.
     .6 fill is the balance point — clearly frosted & see-through like Control Center, yet opaque
     enough that the 5 sticky cards stacking don't force the heavy multi-layer per-frame re-blur that
     the .58/22px version did. If the CARD-SCROLL stutters on a Retina display, raise this fill toward
     .72 and/or drop the blur toward 12px — everything else (nav/featured/fields) is full-frost & safe. */
  /* near-opaque (NO backdrop-filter) — the 5 sticky cards stacking + blurring = the fast-scroll
     smear/lag; near-opaque reads as clean glass via the bright rim + stays buttery. */
  /* LIQUID glass restored at the validated-smooth setting: translucent + light blur(8px),
     NO saturate (that was the expensive smear-cause), isolation:isolate to scope compositing.
     .78 keeps the 5 stacked cards from bleeding while still reading as frosted glass. Mobile = opaque (low-end). */
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  isolation: isolate;
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 30px 60px -34px rgba(28,26,22,.3), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -1px 0 rgba(28,26,22,.09);
}
body.light .stack-card:hover { border-color: rgba(255,255,255,.92); }
body.light .stack-card h3 { color: var(--ink); }
body.light .stack-card p { color: var(--ink-60); }
body.light .stack-card .stack-num { color: var(--ink-60); }
body.light .stack-card .stack-tags { color: var(--ink-60); }
body.light .stack-card .stack-kind { color: var(--accent); }
body.light .stack-card .stack-ghost { -webkit-text-stroke-color: rgba(26,23,18,.12); }
body.light .stack-card .stack-head { border-bottom-color: var(--line); }
/* float CTA in gold → readable on cream */
body.light .float-cta { background: var(--accent); color: #faf4e6; }
body.light .float-cta svg { color: #faf4e6; }
/* values is a warm sand block now (not dark) — keeps rhythm without going black */
body.light .values { background: rgba(238,235,227,.55); color: var(--ink); }
body.light .values .kicker { color: var(--ink); }
body.light .values .kicker::before { background: var(--accent); }
body.light .values-title em { -webkit-text-stroke-color: var(--ink); }
/* warm "epic" light on the cream page: golden glow behind hero + manifest */
body.light .hero::before { background: radial-gradient(ellipse 72% 64% at 50% 42%, rgba(255,255,255,.55) 0%, rgba(26,23,18,.04) 40%, transparent 66%); }
body.light .manifesto-sticky::before { background: radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 45%); }
/* featured image: light gallery mat + clear (non-grey) photo so the dark poster
   reads against the frame instead of disappearing into it */
body.light .featured-visual {
  /* frosted-glass gallery mat around the poster — full Apple frost (single layer, safe) */
  background: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0 40px 80px -40px rgba(28,26,22,.32), inset 0 1px 0 rgba(255,255,255,.7);
}
body.light .featured-visual img { filter: none; border-radius: 12px; }

/* GLASS legibility fallback: engines without backdrop-filter get near-opaque fills
   so the glass panels stay readable instead of washing out over the page behind them. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.light .nav.shrunk { background: rgba(247,244,237,.92); }
  body.light .stack-card { background: rgba(255,255,255,.94); }
  body.light .featured-visual { background: rgba(255,255,255,.85); }
  .quote-fields input, .quote-fields textarea { background: rgba(255,255,255,.82); }
  .process-list li, .value, .faq-item { background: rgba(255,255,255,.92); }
}

/* ============================================
   LIQUID GLASS — LIVE specular glint (the Apple Control-Center "light that moves").
   A soft highlight tracks the pointer across each glass surface. Composited
   (transform + opacity ONLY), hover-only, ZERO idle cost, rect cached on enter →
   no layout thrash. .lg-glint is injected by script.js. Desktop + motion-OK only.
   ============================================ */
.value, .faq-item { position: relative; overflow: hidden; }

/* springy hover-lift + tactile press (transform-only → composited, no blur re-raster) */
.process-list li, .value { transition: box-shadow .4s var(--ease), border-color .4s var(--ease); }
.faq-item { transition: box-shadow .4s var(--ease); }
.faq-item:hover { border-color: rgba(255,255,255,.9); box-shadow: 0 22px 48px -30px rgba(28,26,22,.32), inset 0 1px 0 rgba(255,255,255,.9); }
.float-cta:active { scale: .95; }
.nav-cta:active, .chip:active { scale: .97; }

/* ============================================
   LIQUID GLASS — specular sweep ON HOVER ONLY. Zero idle/continuous cost (no lag);
   nothing animates at rest. transform-driven (composited) when it does fire.
   ============================================ */
body.light .stack-card { overflow: hidden; }
body.light .stack-card::after,
body.light .featured-visual::after,
.float-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-160%); pointer-events: none; z-index: 4; opacity: 0;
}
.float-cta { position: relative; overflow: hidden; }
.float-cta::after { width: 40%; z-index: 1; }
body.light .stack-card:hover::after,
body.light .featured-visual:hover::after,
.float-cta:hover::after { opacity: 1; animation: glassSweep 1.1s var(--ease-out); }
@keyframes glassSweep { from { transform: translateX(-160%); } to { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
  body.light .stack-card:hover::after, body.light .featured-visual:hover::after, .float-cta:hover::after { animation: none; opacity: 0; }
}
/* footer GIVARO: a slow light sheen drifting across the letters → it "shines" */
body.light .footer-mega span {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 43%, #fff7e8 50%, var(--ink) 57%, var(--ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  background-position: -135% 0;   /* rest state: highlight off-screen → plain cream letters */
}
/* PERF/BUG ("ganz unten"): the sheen used to loop `infinite` on a giant
   background-clip:text gradient → it repainted EVERY frame forever once the footer
   was on screen (the bottom-of-page drain). Now it only plays (3×) while the footer
   is visible, toggled by the .sheen-on class via an IntersectionObserver in script.js. */
body.light .footer-mega span.sheen-on { animation: givaroSheen 7s ease-in-out 3; }
@keyframes givaroSheen { 0% { background-position: 135% 0; } 100% { background-position: -135% 0; } }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.5px;
  cursor: none;
  color: var(--ink);
}
.logo-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  transition: transform .5s var(--ease-bounce);
}
.logo:hover .logo-mark { transform: rotate(-6deg); }

.nav-links { display: flex; gap: 10px; }
.nav-links a {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--ink-60);
  transition: color .25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
/* warm underline once the glass bar is active (avoids the hero difference-blend) */
.nav.shrunk .nav-links a::after { background: var(--accent); height: 2px; border-radius: 2px; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .35s var(--ease-bounce);
}
.nav-cta:hover { transform: translateY(-2px); }
.nav-cta svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.nav-cta:hover svg { transform: translateX(4px); }

/* burger — hidden on desktop, shown on tablet/mobile */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 1.6px;
  background: var(--ink);
  transition: transform .4s var(--ease-bounce), opacity .3s var(--ease);
}
.nav-burger span:nth-child(1) { top: 18px; }
.nav-burger span:nth-child(2) { bottom: 18px; }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* MOBILE MENU overlay */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px;
  gap: 8px;
  clip-path: circle(0% at calc(100% - 42px) 42px);
  /* FIX (A2): visibility:hidden takes the menu links out of the tab order +
     a11y tree while closed (clip-path alone leaves them keyboard-focusable).
     Visibility flips back only after the reveal animation finishes. */
  visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s linear .7s;
  pointer-events: none;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 42px) 42px); pointer-events: auto; visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 11vw, 64px);
  letter-spacing: -2px;
  line-height: 1.08;
  color: var(--ink);
  opacity: 0;
  transform: translateY(24px);
}
.mobile-menu.open .mobile-menu-links a {
  animation: mmIn .6s var(--ease-out) forwards;
}
.mobile-menu.open .mobile-menu-links a:nth-child(1) { animation-delay: .18s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { animation-delay: .25s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { animation-delay: .32s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { animation-delay: .39s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5) { animation-delay: .46s; }
@keyframes mmIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu-cta {
  margin-top: 36px;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 16px 28px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-weight: 600; font-size: 16px;
  opacity: 0; transform: translateY(24px);
}
.mobile-menu.open .mobile-menu-cta { animation: mmIn .6s var(--ease-out) forwards .54s; }
.mobile-menu-cta svg { width: 18px; height: 18px; }
.mobile-menu-foot {
  margin-top: 28px;
  font-size: 13px; letter-spacing: .5px;
  color: var(--ink-60);   /* AA on dark */
  opacity: 0;
}
.mobile-menu.open .mobile-menu-foot { animation: mmIn .6s var(--ease-out) forwards .62s; }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 180px 40px 120px;
  overflow: hidden;
}
/* warm ambient glow → edel depth (showroom cream light) */
.hero::before {
  content: '';
  position: absolute;
  top: -8%; left: 50%;
  width: 92vw; height: 85vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 72% 64% at 50% 42%, rgba(255,244,225,.11) 0%, rgba(255,244,225,.03) 40%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding-left: 8px;
  will-change: transform, opacity;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(54px, 12.5vw, 210px);
  line-height: 1.02;
  letter-spacing: -4px;
  margin-bottom: 44px;
}
.hero-title .line {
  display: block;
  overflow: visible;
  padding: 0 .06em .04em;
}
/* gentle, elegant fade-up — fits the edel vibe, no jumpy reveal */
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.18em);
  filter: blur(6px);
  animation: wordIn 1s var(--ease-out) forwards;
  will-change: transform, opacity;   /* PERF: drop filter layer-promotion (heaviest) */
}
.hero-title .line:nth-child(1) .word { animation-delay: .15s; }
.hero-title .line:nth-child(2) .word { animation-delay: .3s; }
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* "Marken" — italic accent word with a slow liquid SHEEN sweep (the motion).
   2-tone safe: the highlight band is just ink at lower opacity (--ink-40), so a
   soft light glides through the letters — no third hue. Adapts to dark mode via
   the token. Delayed 1.1s so the entrance blur-rise plays first. */
.hero-title .word.accent {
  font-style: italic;
  padding-right: .08em;
}
.hero-title .word.accent .sheen {
  display: inline-block;
  background-image: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 36%,
    var(--ink-40) 50%,
    var(--ink) 64%, var(--ink) 100%);
  background-size: 250% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: heroSheen 4.6s ease-in-out 1.1s infinite;
}
@keyframes heroSheen {
  0%   { background-position: 130% 0; }
  55%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* no sweep → plain ink fill, still italic */
  .hero-title .word.accent .sheen {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }
}

.hero-desc {
  font-size: 19px;
  line-height: 1.55;
  max-width: 540px;
  color: var(--ink-60);
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .8s var(--ease-out) forwards .6s;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  opacity: 0;
  animation: fadeUp .8s var(--ease-out) forwards .8s;
}

/* BUTTONS */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.2px;
  overflow: hidden;
  transition: transform .35s var(--ease-bounce), scale .18s var(--ease), color .3s, background .3s;
}
.btn:active { scale: .97; }   /* tactile press feedback (separate from the magnetic transform) */
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); position: relative; z-index: 2; }
.btn .btn-text { position: relative; z-index: 2; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(5px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: default; pointer-events: none; box-shadow: none; }
.btn-primary {
  color: var(--bg); background: var(--ink);
  /* warm spotlight glow so the primary action stands out (Von Restorff) */
  box-shadow: 0 0 0 1px rgba(255,244,225,.08), 0 10px 34px -10px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,244,225,.18), 0 16px 46px -10px var(--accent-glow); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--ink-40); }
.btn.big { padding: 20px 36px; font-size: 17px; }

/* (scroll-hint "weiter" + line removed per request — dead CSS deleted) */

/* ============================================
   PINNED MANIFESTO — clean fade transitions
   ============================================ */
.manifesto {
  /* DESIGN: shorter pin so the 4 lines step through faster (~22vh/line instead
     of ~40vh) — felt like you scrolled forever before. */
  height: 185vh;
  position: relative;
}
.manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.manifesto-sticky::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130vmax; height: 130vmax;
  background: radial-gradient(circle, rgba(255,244,225,.07) 0%, transparent 45%);
  transform: translate(-50%, -50%);
  /* PERF: removed bgDrift infinite scale/translate of this 130vmax layer (continuous re-raster of a huge surface). Static glow now. */
  pointer-events: none;
}
.manifesto-stage {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.manifesto-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 32px;
}
.manifesto-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -3px;
  position: relative;
  min-height: 1.4em;
}
.m-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  pointer-events: none;
}
.m-line.active {
  opacity: 1;
  transform: translateY(0);
}
.m-line.past {
  opacity: 0;
  transform: translateY(-20px);
}
.m-line em {
  font-style: italic;
  -webkit-text-stroke: 1.5px var(--ink);
  -webkit-text-fill-color: transparent;
}
.manifesto-progress {
  position: absolute;
  bottom: 48px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-60);
}
.manifesto-progress .bar {
  flex: 1;
  height: 1px;
  background: var(--line);
  margin: 0 32px;
  position: relative;
  overflow: hidden;
}
.manifesto-progress .bar i {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 0;
  background: var(--ink);
  transition: width .6s var(--ease-out);
}

/* MARQUEE styles removed — the section was deleted from the markup. */

/* ============================================
   SECTIONS — shared
   ============================================ */
section { padding: 140px 0; position: relative; }

.section-head { max-width: 1320px; margin: 0 auto 80px; }
.section-head.split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: end;
}
.section-head.split p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 420px;
}
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 22px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -3px;
}
.section-head h2 em {
  font-style: italic;
  -webkit-text-stroke: 1.5px var(--ink);
  -webkit-text-fill-color: transparent;
}

/* LIQUID text reveal — words rise + un-blur into place (one-shot on scroll-in,
   composited, zero idle cost). The blur-in is the "liquid" feel the cards have. */
.reveal-words .word-r {
  display: inline-block;
  opacity: 0;
  transform: translateY(58%);
  filter: blur(12px);
  transition: opacity 1s var(--ease-out), transform 1.05s var(--ease-out), filter .9s var(--ease-out);
}
.reveal-words.in .word-r { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-text {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter .85s var(--ease-out);
}
.reveal-text.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* SCROLL: staggered group reveal — children rise in one after another when the
   group enters view. .stagger-ready is added by JS, so no-JS = fully visible.
   Attribute+class selector keeps specificity above any child's own transition. */
/* OPACITY-ONLY reveal — NO transform. Critical: these staggered children are now
   backdrop-filter glass cards, and `backdrop-filter` + `transform` renders the blur
   garbled/black (Chromium/WebKit bug) and can stick on the last-delayed card. */
[data-stagger].stagger-ready > * {
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
[data-stagger].stagger-ready.in > * { opacity: 1; }
[data-stagger].stagger-ready.in > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].stagger-ready.in > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].stagger-ready.in > *:nth-child(3) { transition-delay: .20s; }
[data-stagger].stagger-ready.in > *:nth-child(4) { transition-delay: .28s; }
[data-stagger].stagger-ready.in > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].stagger-ready.in > *:nth-child(6) { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  [data-stagger].stagger-ready > * { opacity: 1; transform: none; }   /* calm fallback: just shown */
}

/* ============================================
   STACKING SERVICES
   ============================================ */
.services { padding: 140px 0 0; }
.stack-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 32px 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.stack-card {
  position: sticky;
  top: 80px;
  height: 76vh;
  margin-bottom: 40px;
  border-radius: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color .35s var(--ease);
  transform-origin: 50% 0;
  will-change: auto;   /* no per-frame transform now — one-shot .card-rise reveal only */
}
.stack-card:hover { border-color: var(--line-strong); }
/* SCROLL: mobile one-shot card entrance (.card-rise added by JS → no-JS safe).
   ONE GPU-composited transition per card, fired once on scroll-in — not per-frame
   (that was the lag). Desktop keeps the live scroll-depth effect instead. */
/* opacity-only (NO transform) — backdrop-filter + transform garbles the blur (see stagger note above) */
.stack-card.card-rise { opacity: 0; transition: opacity .75s var(--ease-out); }
.stack-card.card-rise.shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stack-card.card-rise { opacity: 1; transform: none; } }
.stack-card-inner {
  position: relative;            /* anchor for the ghost index watermark */
  height: 100%;
  padding: clamp(34px, 4.4vw, 64px) clamp(30px, 4.8vw, 72px);
  /* DESIGN: editorial, LEFT-anchored. Content packs at the top (index → heading →
     copy → service list) so it stays readable as the next card stacks over the
     bottom. Asymmetric, magazine-like — deliberately NOT a centred template card. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(16px, 1.8vw, 26px);
  border-radius: 24px;
  overflow: hidden;
  transform-origin: 50% 0;       /* PERF: scale anchors at the top, like the stacked deck did */
  will-change: auto;             /* static now — one-shot reveal only */
}
.stack-card-inner > * {
  position: relative; z-index: 1;             /* sit above the ghost number */
  transform: translateY(var(--py, 0));        /* PERF: no translateZ → no 3D context to flatten */
  transition: transform .5s var(--ease-out);
}
.stack-card-inner h3 { transform: translateY(var(--py, 0)); }
.stack-card-inner .stack-tags { transform: translateY(var(--py, 0)); }

/* Giant ghosted index number — catalogue-plate watermark (editorial signature) */
.stack-ghost {
  position: absolute;
  z-index: 0;
  top: clamp(-44px, -2.2vw, -16px);
  right: clamp(-16px, -0.5vw, 6px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(180px, 23vw, 380px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(250,244,230,.08);
  pointer-events: none; user-select: none;
}
/* Header row — index left, category right, hairline under: a catalogue plate */
.stack-head {
  align-self: stretch;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(14px, 1.4vw, 20px);
  border-bottom: 1px solid rgba(250,244,230,.16);
}
.stack-num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-60);
}
.stack-kind {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);              /* each theme's own accent applies (no hardcoded hue) */
}
.stack-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 7vw, 116px);
  line-height: .9;
  letter-spacing: -3px;
  margin-top: clamp(6px, 1vw, 18px);
}
.stack-card p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 46ch;
}
/* Service list — editorial slash-separated row, NOT rounded pills */
.stack-tags {
  align-self: stretch;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 0;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-60);
}
.stack-tags li { display: inline-flex; align-items: center; }
.stack-tags li:not(:last-child)::after {
  content: '/';
  margin: 0 14px;
  opacity: .4;
}
.stack-card[data-card="0"] { top: 90px; }
.stack-card[data-card="1"] { top: 110px; }
.stack-card[data-card="2"] { top: 130px; }
.stack-card[data-card="3"] { top: 150px; }
.stack-card[data-card="4"] { top: 170px; }

/* ============================================
   VALUES — inverted, clean
   ============================================ */
.values {
  background: var(--ink);
  color: var(--bg);
  padding: 160px 0;
}
.values .kicker { color: var(--bg); }
.values .kicker::before { background: var(--bg); }
.values-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 100px;
  max-width: 1100px;
}
.values-title em {
  font-style: italic;
  -webkit-text-stroke: 2px var(--bg);
  -webkit-text-fill-color: transparent;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.value {
  padding: 34px 30px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 20px 44px -32px rgba(28,26,22,.28), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,26,22,.09);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.value:hover { box-shadow: 0 30px 60px -32px rgba(28,26,22,.34), inset 0 1px 0 rgba(255,255,255,1); border-color: rgba(255,255,255,.92); }
.value-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 28px;
  color: var(--ink-60);
}
.value h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.1vw, 42px);   /* fits the long word "Wiedererkennung" in a 3-col card */
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  hyphens: auto;
  overflow-wrap: break-word;
}
.value p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 320px;
}

/* ============================================
   PROCESS
   ============================================ */
.process { padding: 160px 0; }
/* PROCESS steps as liquid-glass cards (Apple frost). These are normal-flow (NOT sticky/
   stacking) so a single frosted blur each is cheap — no multi-layer re-blur cost. */
.process-list { display: flex; flex-direction: column; gap: 16px; }
.process-list li {
  display: grid;
  grid-template-columns: 120px 1fr 2fr;
  gap: 40px;
  padding: 30px 34px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 20px 44px -30px rgba(28,26,22,.3), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,26,22,.09);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.process-list li:hover {
  border-color: rgba(255,255,255,1);
  box-shadow: 0 30px 60px -30px rgba(28,26,22,.36), inset 0 1px 0 rgba(255,255,255,1);
}
.process-list li > * { position: relative; z-index: 1; }
.process-list li span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -1px;
  color: var(--ink-40);
}
.process-list li h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.5px;
}
.process-list li p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-60);
}

/* ============================================
   CTA
   ============================================ */
.cta {
  padding: 180px 0;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 55% at 50% 42%, var(--warm-light) 0%, transparent 62%);
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 9vw, 150px);
  line-height: .92;
  letter-spacing: -4px;
  margin: 24px 0 32px;
}
.cta-title span { display: block; }
.cta-title .italic {
  font-style: italic;
  -webkit-text-stroke: 2px var(--ink);
  -webkit-text-fill-color: transparent;
}
.cta > .container > p {
  max-width: 560px;
  margin: 0 auto 56px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-60);
}

/* ============================================
   QUICK QUOTE — click-based questionnaire
   ============================================ */
.quick-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.quote-step {
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .8s var(--ease-out) forwards;
}
.quote-step:nth-child(1) { animation-delay: .05s; }
.quote-step:nth-child(2) { animation-delay: .15s; }
.quote-step:nth-child(3) { animation-delay: .25s; }

.quote-step-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.quote-step-head b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-60);
}
.quote-step-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.5px;
  color: var(--ink);
}
.multi-hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-40);
}

.chip-group {
  display: flex; flex-wrap: wrap;
  gap: 10px;
}
.chip {
  position: relative;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.1px;
  color: var(--ink);
  background: transparent;
  cursor: none;
  overflow: hidden;
  transition: transform .3s var(--ease-bounce), border-color .3s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.chip:hover {
  border-color: var(--ink-40);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.chip.selected {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.chip.selected:hover {
  transform: translateY(-2px) scale(1.03);
}
.chip.bounce { animation: chipBounce .45s var(--ease-bounce); }
@keyframes chipBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  60%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

.chip-ripple {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: chipRipple .7s var(--ease-out) forwards;
}
.chip:not(.selected) .chip-ripple { background: rgba(255,255,255,.4); }
@keyframes chipRipple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

.quote-tip {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-60);   /* FIX (A3): small print needs the darker token for AA */
  line-height: 1.6;
}
.quote-tip a {
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}
.quote-tip a:hover { color: var(--accent); }

/* — Contact form fields (added with the n8n form) — */
.quote-step:nth-child(4) { animation-delay: .35s; }
.quote-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
.quote-fields .field { display: flex; flex-direction: column; gap: 8px; }
.quote-fields .field-wide { grid-column: 1 / -1; }
.quote-fields label {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-60);
}
.quote-fields .req { color: var(--accent); font-weight: 700; }
.quote-fields .opt { letter-spacing: 0; text-transform: none; font-size: 11px; font-weight: 400; color: var(--ink-60); }
.quote-fields input,
.quote-fields textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;                 /* 16px = kein iOS-Zoom beim Fokus */
  color: var(--ink);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.quote-fields textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.quote-fields input:focus,
.quote-fields textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,23,18,.14), inset 0 1px 0 rgba(255,255,255,.85);
}
.quote-fields input:focus-visible,
.quote-fields textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-submit { margin-top: 6px; }
.quick-quote.sent .quote-step,
.quick-quote.sent .btn-submit { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
  .quote-fields { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer-mega {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(100px, 24vw, 420px);
  line-height: .85;
  letter-spacing: -10px;
  text-align: center;
  margin: 0 0 80px;
  cursor: none;
}
.footer-mega span {
  display: inline-block;
  -webkit-text-stroke: 1.5px var(--ink);
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color .6s var(--ease), color .6s var(--ease);
}
.footer-mega:hover span {
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer-grid > div:first-child p {
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.7;
  max-width: 360px;
}
.footer-grid h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer-grid p {
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.8;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-60);   /* AA on dark */
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-20); transition: color .25s, text-decoration-color .25s; }
/* A11y: visible focus ring for the showroom controls on their dark overlay */
.sr-back:focus-visible, .sr-detail:focus-visible, .sr-dot:focus-visible, .sr-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer-bottom a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .nav { padding: 18px 24px; }
  .nav.shrunk { padding: 12px 24px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: block; }
  .stack-card-inner { padding: 36px 32px; }
  .stack-card p { max-width: 54ch; }           /* keep a readable measure on tablet */
  .stack-card { height: 60vh; }
  .section-head.split { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 60px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process-list li { grid-template-columns: 70px 1fr; gap: 16px; }
  .process-list li p { grid-column: 1 / -1; }
  .values-grid { grid-template-columns: 1fr; gap: 14px; }
  .value { padding: 28px 22px; }
  .value p { max-width: none; }
  .port-bar { padding: 18px 24px; }
  .port-grid { gap: 48px 32px; }
  .port-hero { padding: 70px 0 50px; }
  .feat { grid-template-columns: 1fr; gap: 36px; margin-bottom: 90px; }
  .feat-canvas { aspect-ratio: 4 / 3; }
  .feat-info { padding-right: 0; }
}
@media (max-width: 640px) {
  /* PERF (mobile 60fps): kill the heaviest compositing — the fullscreen
     blend-mode grain overlay, backdrop blurs, and filter layer-promotion. */
  body::after { display: none; }                                   /* grain off (mix-blend overlay = per-frame recomposite) */
  .nav.shrunk { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20,16,8,.9); }
  body.light .nav.shrunk { background: rgba(247,244,237,.85); }
  /* mobile: the stack cards are a sticky STACK → must be fully OPAQUE so the card
     behind never bleeds through (no blur on mobile to hide it). */
  body.light .stack-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f7f5ef; }
  body.light .featured-visual { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.85); }
  .quote-fields input, .quote-fields textarea { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.85); }
  .port-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(236,233,226,.97); }
  .hero-title .word { will-change: auto; }
  body { cursor: auto; }
  * { cursor: auto !important; }
  .nav { padding: 14px 18px; }
  .nav.shrunk { padding: 10px 18px; }
  .nav-cta { padding: 9px 14px; font-size: 12px; }
  .nav-cta span { display: inline-block; }
  .logo { font-size: 18px; gap: 8px; }
  .logo-mark { width: 28px; height: 28px; font-size: 15px; }
  .container { padding: 0 20px; }

  .hero {
    padding: 104px 20px 40px;
    min-height: 100vh;
    align-items: center;
  }
  .hero-title {
    font-size: clamp(52px, 17vw, 110px);   /* min 52 so the longest accent word ("Momentum") fits ≤320px without clipping */
    letter-spacing: -2px;
    margin-bottom: 28px;
  }
  .hero-desc { font-size: 16px; margin-bottom: 32px; }
  .btn { padding: 14px 22px; font-size: 14px; }
  .scroll-hint { display: none; }

  .manifesto { height: 200vh; }   /* DESIGN: shorter pin on mobile too (~25vh/line) */
  .manifesto-sticky { padding: 24px 20px 80px; }
  .manifesto-kicker { font-size: 11px; margin-bottom: 24px; letter-spacing: 3px; }
  .manifesto-text {
    font-size: clamp(40px, 11vw, 72px);
    letter-spacing: -2px;
    min-height: 2.4em;
  }
  .m-line em { -webkit-text-stroke-width: 1px; }
  .manifesto-progress {
    padding: 0 20px;
    bottom: 36px;
    font-size: 11px;
  }
  .manifesto-progress .bar { margin: 0 14px; }

  section { padding: 40px 0; }              /* MOBILE: blocks sat too far apart → tighter rhythm */
  .services { padding: 40px 0 0; }          /* stacking section: keep 0 bottom (cards handle it) */
  .section-head { margin-bottom: 24px; }
  .section-head h2 {
    font-size: clamp(40px, 11vw, 64px);
    letter-spacing: -2px;
  }

  .stack-wrap { padding: 24px 16px 0; }
  .stack-card {
    height: 58vh;
    min-height: 380px;
    margin-bottom: 20px;
    border-radius: 18px;
    /* PERF: no per-frame JS transform on mobile → drop layer-promotion + use a
       lighter shadow (big blurred shadows are costly to composite). */
    will-change: auto;
    box-shadow: 0 16px 34px -22px rgba(40,28,10,.5);
  }
  .stack-card-inner {
    padding: 24px 20px 26px;
    gap: 12px;
    will-change: auto;
  }
  .stack-card h3 {
    font-size: clamp(34px, 11vw, 56px);
    letter-spacing: -1.5px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .stack-card p { font-size: 14px; line-height: 1.5; max-width: none; }
  .stack-num { font-size: 11px; letter-spacing: 2px; }
  .stack-kind { font-size: 10px; letter-spacing: 2px; }
  .stack-tags { font-size: 10px; letter-spacing: 1.5px; }
  .stack-tags li:not(:last-child)::after { margin: 0 10px; }
  .stack-ghost { font-size: clamp(110px, 34vw, 190px); top: -16px; right: -10px; -webkit-text-stroke-width: 1px; }
  .stack-card[data-card="0"] { top: 60px; }
  .stack-card[data-card="1"] { top: 72px; }
  .stack-card[data-card="2"] { top: 84px; }
  .stack-card[data-card="3"] { top: 96px; }
  .stack-card[data-card="4"] { top: 108px; }

  .side-nav { display: none; }
  .float-cta { right: 16px; bottom: 16px; padding: 14px 18px; font-size: 13px; }
  .float-cta svg { width: 14px; height: 14px; }

  .port-bar { padding: 14px 20px; grid-template-columns: auto 1fr; }
  .port-bar-year { display: none; }
  .port-hero { padding: 50px 0 30px; }
  .port-title { letter-spacing: -3px; }
  .port-hero-meta { gap: 32px; margin-top: 36px; }
  .port-hero-meta b { font-size: 26px; }
  .port-gallery { padding: 20px 0 80px; }
  .port-grid { grid-template-columns: 1fr; gap: 50px; }
  .tile:nth-child(even) { margin-top: 0; }
  .feat { margin-bottom: 70px; gap: 28px; }
  .feat-canvas { aspect-ratio: 3 / 4; }
  .feat-info h3 { letter-spacing: -2px; }
  .feat-info p { font-size: 16px; }
  .feat-meta { gap: 24px; }
  .port-clients-sec { padding: 60px 0; }
  .port-cta { padding: 70px 0 90px; }
  .port-back span { display: none; }
  .port-back { justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; }
  .port-bar-label { justify-self: start; margin-left: 12px; }

  /* showroom mobile */
  .showroom-bar { padding: 14px 18px; }
  .showroom-title b { font-size: 15px; }
  .showroom-close { width: 44px; height: 44px; }
  .sr-back { padding: 9px 14px 9px 11px; font-size: 12px; }
  .sr-back span { display: inline; }

  /* wall → horizontal swipe carousel on mobile (app-like, native scroll-snap) */
  .sr-wall {
    inset: 80px 0 0;
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    align-items: center;
    scrollbar-width: none;
  }
  .sr-wall::-webkit-scrollbar { display: none; }
  .sr-art {
    --rise: 0px !important; --rot: 0deg !important;
    width: 74vw; min-width: 74vw; max-width: 74vw;
    box-sizing: border-box;
    flex-shrink: 0;
    scroll-snap-align: center;
    justify-content: center;
    padding: 0 0 64px;
    gap: 18px;
  }
  /* margins = the peek gap, so the first/last slide can still centre */
  .sr-art:first-child { margin-left: 13vw; }
  .sr-art:last-child { margin-right: 13vw; }
  /* no transform/filter/opacity/overlay on the slide → image renders reliably on iOS */
  .sr-art-mat img { height: auto; width: 100%; max-width: 100%; max-height: 52vh; filter: none; }
  /* focus the active slide with a warm frame glow. box-shadow is PAINT-only —
     it never creates a compositing layer over the image, so it's iOS-safe.
     The others recede via the peek layout + no glow. */
  /* ANIM: coverflow — the centred frame is full-size & bright, neighbours recede
     + dim. transform/opacity only (images are filter-free now → iOS-safe) = 60fps.
     Scale sits on the FRAME (inner), so it never fights the entrance reveal on
     .sr-art (outer). */
  .sr-art-frame {
    transform: scale(.84);
    opacity: .5;
    transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), box-shadow .45s var(--ease);
  }
  .sr-art.is-active .sr-art-frame {
    transform: scale(1);
    opacity: 1;
    box-shadow:
      0 50px 80px -26px rgba(0,0,0,.78),
      0 0 56px -4px var(--accent-glow),
      inset 0 0 0 1px rgba(255,255,255,.1);
  }
  .sr-dots { display: flex; }

  .sr-detail { inset: 84px 0 0; padding: 0 16px 8%; gap: 18px; }
  .sr-mat { padding: 12px; }
  .sr-mat img { max-height: 56vh; }
  .sr-nav { width: 42px; height: 42px; }
  .sr-prev { left: 8px; }
  .sr-next { right: 8px; }
  .sr-nav svg { width: 18px; height: 18px; }

  .stack-card-inner h3,
  .stack-card-inner .stack-num,
  .stack-card-inner .stack-tags { transform: none; }

  .values { padding: 40px 0; }
  .values-title {
    font-size: clamp(40px, 11vw, 64px);
    letter-spacing: -2px;
    margin-bottom: 24px;
  }
  .values-title em { -webkit-text-stroke-width: 1.5px; }
  .value { padding: 24px 20px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.9); }
  .value h3 { font-size: 30px; letter-spacing: -1px; }
  .value-num { font-size: 11px; margin-bottom: 18px; }

  .process { padding: 40px 0; }
  .process-list li { grid-template-columns: 50px 1fr; gap: 12px; padding: 22px 18px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.9); }
  .process-list li:hover { padding-left: 16px; padding-right: 16px; }
  .process-list li span { font-size: 32px; }
  .process-list li h3 { font-size: 22px; }
  .process-list li p { font-size: 15px; }

  .cta { padding: 40px 0; }
  .cta-title { font-size: clamp(40px, 12vw, 80px); letter-spacing: -2px; margin: 16px 0 24px; }
  .cta-title .italic { -webkit-text-stroke-width: 1.5px; }
  .cta > .container > p { font-size: 16px; margin-bottom: 36px; }
  .quote-step { margin-bottom: 28px; }
  .quote-step-head h3 { font-size: 19px; }
  .chip { padding: 13px 16px; font-size: 14px; }

  .footer { padding: 40px 0 24px; }
  .footer-mega {
    font-size: clamp(52px, 19vw, 130px);   /* fits "GIVARO" on a phone, no cutoff */
    letter-spacing: -2px;
    margin-bottom: 40px;
    max-width: 100%;
    overflow: hidden;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; font-size: 12px; }
  .footer-bottom a { display: inline-block; padding: 0 8px; min-height: 44px; line-height: 44px; }
}

/* ============================================
   ACCESSIBILITY — respect reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .char { transform: none !important; opacity: 1 !important; }
  .sr-art-frame { animation: none !important; }
}

/* FIX (S3/A): visually-hidden utility for headings/labels kept for SR + SEO */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* FIX (A7): skip-to-content link — off-screen until keyboard-focused */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 10000;
  transform: translateY(-150%);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--bg); outline-offset: 2px; }

/* keyboard focus — visible & elegant */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================
   FILM GRAIN — kills gradient banding, adds quality
   (single static layer → cheap on mobile/old hardware)
   ============================================ */
body::after {
  /* PERF: grain disabled. A fixed full-viewport layer with mix-blend-mode:overlay
     forces the browser to RE-COMPOSITE the whole screen every scroll frame —
     a top cause of brutal scroll lag, for a barely-visible .05 texture. */
  display: none;
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ============================================
   FAQ — accordion (smooth via grid-template-rows)
   ============================================ */
.faq { padding: 140px 0; }
.faq-list {
  max-width: 1320px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.faq-item {
  border-radius: 20px;
  padding: 2px 28px;
  overflow: hidden;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 18px 40px -32px rgba(28,26,22,.26), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,26,22,.09);
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 29px);
  letter-spacing: -.5px;
  color: var(--ink-90);
  cursor: none;
  transition: color .3s var(--ease);
}
.faq-q:hover { color: var(--ink); }
.faq-icon {
  flex: none;
  width: 26px; height: 26px;
  color: var(--ink-40);
  transition: transform .45s var(--ease-out), color .3s var(--ease);
}
.faq-q[aria-expanded="true"] { color: var(--ink); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(135deg); color: var(--ink); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  min-height: 0;       /* lets the 0fr row collapse fully */
}
.faq-a-inner p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 760px;
  padding: 0 0 28px 0;
}
@media (max-width: 640px) {
  .faq { padding: 40px 0; }
  .faq-q { padding: 24px 0; }
  .faq-item { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.9); }
}

/* ============================================
   AUTOMATIC DARK THEME
   Activates on the OS-level dark preference. The whole site goes near-black
   with warm cream text and DARK Apple "liquid glass" (low-alpha light frost
   over black + faint light rims) — the exact dark analogue of the light glass.
   IMPLEMENTATION RULES (kept strictly):
   - This is a single @media (prefers-color-scheme: dark) block of OVERRIDES,
     scoped to body.light selectors. It does NOT touch any light rule above —
     light mode stays byte-identical.
   - NEVER add a transform to a backdrop-filter element (garbles the blur).
     Only colors/alphas change; the existing blur radii are untouched.
   - Mobile (<=640) keeps blur OFF; the stack-card stays OPAQUE (dark fill).
   - @supports-not(backdrop-filter) fallbacks get opaque dark fills.
   - Text stays AA: cream (#f3efe7) on near-black.
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* ---- TOKEN FLIP: greige+ink → near-black + warm cream (still 2-tone) ---- */
  body.light {
    --bg: #131210;        /* rich warm charcoal — not flat pure-black */
    --bg-2: #1b1813;
    --ink: #f3efe7;
    --ink-90: rgba(243,239,231,.92);
    --ink-60: rgba(243,239,231,.66);
    --ink-40: rgba(243,239,231,.45);
    --ink-20: rgba(243,239,231,.14);
    --line: rgba(243,239,231,.12);
    --line-strong: rgba(243,239,231,.2);
    --accent: #f3efe7;                 /* 2-TONE: accent IS the cream ink */
    --accent-glow: rgba(243,239,231,.16);
    --warm-light: rgba(243,239,231,.05);
    background: var(--bg);
    color: var(--ink);
  }

  /* page background lift — was a cream top-glow; now a faint warm lift on black */
  body.light {
    background:
      radial-gradient(120% 72% at 50% -12%, rgba(243,239,231,.06) 0%, transparent 52%),
      radial-gradient(90% 60% at 86% 6%, rgba(243,239,231,.04) 0%, transparent 50%),
      var(--bg);
  }
  /* DEPTH layer behind the glass — was white .85/.7 + ink-alpha blobs.
     Dark analogue: faint LIGHT frost blobs (low alpha) so the panels still have
     moving tone to refract, plus deeper near-black wells for contrast. */
  body.light::before {
    background:
      radial-gradient(45% 42% at 18% 22%, rgba(243,239,231,.035) 0%, transparent 62%),
      radial-gradient(46% 44% at 84% 20%, rgba(0,0,0,.4) 0%, transparent 62%),
      radial-gradient(50% 48% at 70% 80%, rgba(0,0,0,.35) 0%, transparent 60%),
      radial-gradient(44% 42% at 12% 82%, rgba(243,239,231,.025) 0%, transparent 60%);
  }

  /* ---- NAV glass bar ---- */
  body.light .nav.shrunk {
    background: rgba(18,16,13,.55);          /* dark frost (was cream .45) */
    border-bottom-color: rgba(243,239,231,.14);
  }

  /* ---- STACK CARDS: dark Apple frost (was white .6 + bright rims) ---- */
  body.light .stack-card {
    background: rgba(243,239,231,.05);       /* subtle dark glass — just-lifted, not a bright panel on black */
    border-color: rgba(243,239,231,.1);
    box-shadow:
      0 30px 60px -34px rgba(0,0,0,.8),
      inset 0 1px 0 rgba(243,239,231,.1),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
  body.light .stack-card:hover { border-color: rgba(243,239,231,.22); }
  body.light .stack-card .stack-ghost { -webkit-text-stroke-color: rgba(243,239,231,.1); }
  /* specular sweep highlight: keep light but softer on dark */
  body.light .stack-card::after,
  body.light .featured-visual::after {
    background: linear-gradient(100deg, transparent, rgba(243,239,231,.18), transparent);
  }

  /* float-CTA: accent is now CREAM, so the pill text must flip to dark */
  body.light .float-cta { background: var(--accent); color: #0c0b0a; }
  body.light .float-cta svg { color: #0c0b0a; }
  body.light .float-cta::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); }

  /* VALUES block: was a warm sand panel; now a slightly-lifted dark band */
  body.light .values { background: rgba(243,239,231,.04); color: var(--ink); }
  body.light .values .kicker { color: var(--ink); }
  body.light .values .kicker::before { background: var(--accent); }
  body.light .values-title em { -webkit-text-stroke-color: var(--ink); }

  /* hero + manifesto ambient glows: cream→faint warm light on black */
  body.light .hero::before {
    background: radial-gradient(ellipse 72% 64% at 50% 42%, rgba(243,239,231,.06) 0%, rgba(243,239,231,.02) 40%, transparent 66%);
  }
  body.light .manifesto-sticky::before {
    background: radial-gradient(circle, rgba(243,239,231,.05) 0%, transparent 45%);
  }

  /* FEATURED gallery mat: dark frosted mat (was white .4) */
  body.light .featured-visual {
    background: rgba(243,239,231,.06);
    box-shadow:
      0 40px 80px -40px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(243,239,231,.12);
  }

  /* VALUES cards — dark frost (was white .52 + bright rims) */
  body.light .value {
    background: rgba(243,239,231,.05);
    border-color: rgba(243,239,231,.1);
    box-shadow:
      0 20px 44px -32px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(243,239,231,.1),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
  body.light .value:hover {
    border-color: rgba(243,239,231,.22);
    box-shadow:
      0 30px 60px -32px rgba(0,0,0,.66),
      inset 0 1px 0 rgba(243,239,231,.2);
  }

  /* PROCESS steps — dark frost */
  body.light .process-list li {
    background: rgba(243,239,231,.05);
    border-color: rgba(243,239,231,.1);
    box-shadow:
      0 20px 44px -30px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(243,239,231,.1),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
  body.light .process-list li:hover {
    border-color: rgba(243,239,231,.24);
    box-shadow:
      0 30px 60px -30px rgba(0,0,0,.66),
      inset 0 1px 0 rgba(243,239,231,.2);
  }

  /* FAQ items — dark frost */
  body.light .faq-item {
    background: rgba(243,239,231,.05);
    border-color: rgba(243,239,231,.1);
    box-shadow:
      0 18px 40px -32px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(243,239,231,.1),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
  body.light .faq-item:hover {
    border-color: rgba(243,239,231,.22);
    box-shadow:
      0 22px 48px -30px rgba(0,0,0,.66),
      inset 0 1px 0 rgba(243,239,231,.18);
  }

  /* QUOTE form fields — dark frost; rims + focus ring flip from white→cream */
  body.light .quote-fields input,
  body.light .quote-fields textarea {
    background: rgba(243,239,231,.06);
    border-color: rgba(243,239,231,.16);
    box-shadow: inset 0 1px 0 rgba(243,239,231,.1);
  }
  body.light .quote-fields input:focus,
  body.light .quote-fields textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(243,239,231,.14), inset 0 1px 0 rgba(243,239,231,.1);
  }

  /* NOTE: no dark override for .footer-mega span — the light rule's gradient uses
     var(--ink) (auto-flips to cream) AND keeps background-clip:text. Overriding
     `background` here reset background-clip → the gradient filled the whole box
     (the "white block" bug). The light rule handles dark correctly. */

  /* ---- @supports-not(backdrop-filter): opaque dark fallbacks ---- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.light .nav.shrunk { background: rgba(18,16,13,.96); }
    body.light .stack-card { background: #1c1916; }
    body.light .featured-visual { background: #1c1916; }
    body.light .quote-fields input,
    body.light .quote-fields textarea { background: #1b1812; }
    body.light .process-list li,
    body.light .value,
    body.light .faq-item { background: #1c1916; }
  }

  /* ---- MOBILE (<=640): blur OFF; stack-card stays OPAQUE dark ---- */
  @media (max-width: 640px) {
    body.light .nav.shrunk { background: rgba(18,16,13,.92); }
    /* sticky stack → fully OPAQUE dark fill so cards never bleed through */
    body.light .stack-card { background: #1c1916; }
    body.light .featured-visual { background: #1c1916; }
    body.light .quote-fields input,
    body.light .quote-fields textarea { background: #1b1812; }
    body.light .value { background: #1c1916; }
    body.light .process-list li { background: #1c1916; }
    body.light .faq-item { background: #1c1916; }
  }

  /* === DARK = CLEAN & SHARP (NOT liquid glass): flat opaque cards, crisp 1px edges,
     NO backdrop-filter (kills the fast-scroll smear + the white-block garble), sharper
     corners. Placed last → wins over the earlier dark-glass rules. === */
  body.light::before { background: none; }
  body.light .stack-card,
  body.light .value,
  body.light .process-list li,
  body.light .faq-item,
  body.light .featured-visual {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: #1a1714;
    border: 1px solid rgba(243,239,231,.13);
    border-radius: 10px;
    box-shadow: 0 16px 34px -26px rgba(0,0,0,.7);
  }
  body.light .stack-card-inner { border-radius: 10px; }
  body.light .stack-card:hover,
  body.light .value:hover,
  body.light .process-list li:hover,
  body.light .faq-item:hover {
    border-color: rgba(243,239,231,.3);
    box-shadow: 0 22px 44px -26px rgba(0,0,0,.78);
  }
  body.light .quote-fields input,
  body.light .quote-fields textarea {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: #211d18; border-color: rgba(243,239,231,.16); border-radius: 8px;
  }
  body.light .nav.shrunk {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(19,18,16,.97); border-bottom-color: rgba(243,239,231,.1);
  }
}