/* ————————————————————————————————
   FONTS
———————————————————————————————— */
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Light.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Light.woff') format('woff');
}
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Regular.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Italic.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Demi.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Demi.woff') format('woff');
}
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Bold.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Avenir Next Cyr';
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AvenirNextCyr-Heavy.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Heavy.woff') format('woff');
}

/* ————————————————————————————————
   TOKENS
———————————————————————————————— */
:root{
  --blk:  #090909;
  --wh:   #F0EDE8;
  --cyan: #43b4e6;
  --neon: #C6E94A;
  --pk:   #FF2D87;
  --bl:   #5DD39E;
  --rd:   #8B5CF6;
  --muted: rgba(240,237,232,0.42);
  --line:  rgba(240,237,232,0.12);
  --ff: 'Avenir Next Cyr',system-ui,sans-serif;
}

/* ————————————————————————————————
   RESET
———————————————————————————————— */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--blk,#090909); color:var(--wh,#F0EDE8); font-family:var(--ff,'Avenir Next Cyr',system-ui,sans-serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
html{ scroll-behavior:auto; overflow-x:clip; }
body{ overflow-x:hidden; max-width:100%; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; background:none; border:0; outline:none; }

::selection{ background:var(--neon); color:var(--blk); }

/* ————————————————————————————————
   TYPE
———————————————————————————————— */
.h-display{
  font-weight:900;
  letter-spacing:-0.05em;
  text-transform:uppercase;
  line-height:0.88;
}
.h-xl{ font-size:clamp(3.2rem, 9.2vw, 9.6rem); }
.h-lg{ font-size:clamp(2.6rem, 6.4vw, 6.4rem); }
.h-md{ font-size:clamp(2rem, 4.4vw, 4.4rem); }
.body{ font-weight:400; line-height:1.7; font-size:clamp(1rem,1.1vw,1.15rem); }
.label{ font-weight:700; font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; }

/* Line reveal wrappers (SplitType will inject .line elements) */
.reveal .line{ overflow:initial; display:block; }
.reveal .line > *{ display:block; transform:translateY(108%); will-change:transform; }

/* ————————————————————————————————
   CURSOR
———————————————————————————————— */
.cursor-dot, .cursor-ring{ display:none !important; }

@media (hover:none), (pointer:coarse){
  body{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none; }
  button, a{ cursor:pointer; }
}

/* ————————————————————————————————
   PRELOADER
———————————————————————————————— */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--blk);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:48px;
}
.preloader .pl-logo{
  width:120px; height:120px; background:transparent;
  display:grid; place-items:center;
}
.preloader .pl-logo img{ width:100%; }
.pl-track{
  width:min(360px, 62vw); height:2px; background:var(--line); overflow:hidden; position:relative;
}
.pl-bar{ position:absolute; inset:0; width:0%; background:var(--neon); }
.pl-meta{
  display:flex; gap:24px; align-items:center; color:var(--muted);
}
.pl-meta .pct{ font-weight:900; font-size:2.4rem; letter-spacing:-0.03em; color:var(--wh); font-variant-numeric:tabular-nums; }
.pl-meta .lab{ font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; }

/* ————————————————————————————————
   NAV (hamburger + overlay)
———————————————————————————————— */
.nav-hamb{
  position:fixed; top:22px; left:clamp(20px,4vw,56px); z-index:600;
  width:44px; height:44px; padding:0;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  background:transparent; border:0; cursor:pointer;
  opacity:0; transform: translateY(-16px);
  will-change: opacity, transform;
}
.nav-hamb span{
  display:block; width:28px; height:2px; background:var(--wh);
  border-radius:2px;
  transition: transform .4s cubic-bezier(.7,.2,.2,1), opacity .3s, background-color .3s;
  transform-origin:center;
}
.nav-hamb.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); background:var(--neon); }
.nav-hamb.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-hamb.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); background:var(--neon); }

.nav-overlay{
  position:fixed; inset:0; z-index:550;
  background: rgba(9,9,9,0.94);
  opacity:0; pointer-events:none;
  transition: opacity .5s cubic-bezier(.7,.2,.2,1);
  display:grid; place-items:center;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .nav-overlay{
    background: rgba(9,9,9,0.82);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }
.nav-overlay-inner{
  display:flex; flex-direction:column; gap: clamp(10px, 2vh, 18px);
  padding: 40px;
}
.nav-over-link{
  display:flex; align-items:baseline; gap:clamp(16px, 2.4vw, 32px);
  font-weight:900; letter-spacing:-0.03em; text-transform:uppercase;
  font-size:clamp(2.4rem, 7vw, 6rem); line-height:0.95;
  color:var(--wh);
  opacity:0; transform: translateY(24px);
  transition: color .3s;
  position:relative;
}
.nav-overlay.is-open .nav-over-link{
  animation: navIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(1) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(1){ animation-delay:0.08s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(2) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(2){ animation-delay:0.14s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(3) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(3){ animation-delay:0.20s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(4) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(4){ animation-delay:0.26s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(5) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(5){ animation-delay:0.32s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(6) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(6){ animation-delay:0.38s; }
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(7) .nav-over-link,
.nav-overlay.is-open .nav-overlay-inner > *:nth-child(7){ animation-delay:0.44s; }
@keyframes navIn{ to { opacity:1; transform: translateY(0); } }
.nav-over-link .nr{
  font-size:clamp(0.7rem,1vw,0.88rem); letter-spacing:0.24em;
  font-weight:700; color:var(--muted); min-width:38px;
  align-self:center; text-transform:uppercase;
}
.nav-over-link .tx{ transition: color .3s, transform .4s cubic-bezier(.7,.2,.2,1); display:inline-block; }
.nav-over-link:hover .tx{ color: var(--neon); transform: translateX(12px); }

/* Units submenu */
.nav-over-group{
  display:flex; flex-direction:column;
}
.nav-over-link--has-sub{
  cursor:pointer;
  user-select:none;
}
.nav-sub-caret{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left: 14px;
  width: clamp(22px, 2.2vw, 34px);
  height: clamp(22px, 2.2vw, 34px);
  color: var(--muted);
  transition: transform .35s cubic-bezier(.7,.2,.2,1), color .3s;
  align-self:center;
}
.nav-over-group.is-open .nav-sub-caret{
  transform: rotate(180deg);
  color: var(--neon);
}
.nav-over-link--has-sub:hover .nav-sub-caret{ color: var(--neon); }

.nav-sub{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.7,.2,.2,1);
  margin-left: clamp(54px, 6.5vw, 104px);  /* indent under "Units" */
  overflow:hidden;
}
.nav-sub > *{ min-height:0; }
.nav-over-group.is-open .nav-sub{
  grid-template-rows: 1fr;
}
.nav-sub-inner{
  display:flex; flex-direction:column;
  padding: clamp(10px, 1.4vh, 18px) 0 clamp(6px, 1vh, 14px);
  gap: clamp(6px, 0.9vh, 14px);
}
.nav-sub-link{
  display:flex; align-items:baseline; gap: clamp(14px, 1.8vw, 24px);
  font-weight:700; letter-spacing:-0.01em;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height:1.1;
  color: rgba(240,237,232,0.82);
  text-transform:none;
  opacity:0; transform: translateY(8px);
  transition: opacity .4s, transform .4s cubic-bezier(.7,.2,.2,1), color .3s;
}
.nav-over-group.is-open .nav-sub-link{
  opacity:1; transform: translateY(0);
}
/* staggered reveal of sub links */
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(1){ transition-delay: 0.06s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(2){ transition-delay: 0.10s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(3){ transition-delay: 0.14s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(4){ transition-delay: 0.18s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(5){ transition-delay: 0.22s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(6){ transition-delay: 0.26s; }
.nav-over-group.is-open .nav-sub-inner .nav-sub-link:nth-child(7){ transition-delay: 0.30s; }
.nav-sub-link .nav-sub-nr{
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  letter-spacing:0.24em; font-weight:700;
  color: var(--muted); min-width: 34px;
  text-transform:uppercase;
}
.nav-sub-link .nav-sub-tx{
  transition: color .3s, transform .35s cubic-bezier(.7,.2,.2,1);
  display:inline-block;
}
.nav-sub-link:hover{ color: var(--wh); }
.nav-sub-link:hover .nav-sub-tx{
  color: var(--neon); transform: translateX(8px);
}

/* ————————————————————————————————
   SECTION SCAFFOLDING
———————————————————————————————— */
section{ position:relative; }
.container{ padding: 120px clamp(20px, 5vw, 88px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--cyan); font-weight:700; font-size:0.7rem;
  letter-spacing:0.22em; text-transform:uppercase;
  margin-bottom:28px;
}
.eyebrow::before{
  content:''; width:28px; height:1px; background:var(--cyan);
}
.sec-num{
  position:absolute; top:28px; right:clamp(20px,4vw,56px);
  color:var(--muted); font-weight:700; font-size:0.7rem; letter-spacing:0.22em;
}

/* ————————————————————————————————
   SECTION HEADINGS + MASCOTS
———————————————————————————————— */
.sec-hd{ position:relative; display:inline-block; padding-right: 210px; padding-top: 8px; }
.mascot{
  position:absolute; pointer-events:none; z-index:2;
  will-change: transform, opacity;
  overflow:visible;
}
.mascot svg{ display:block; overflow:visible; }

/* ═════════════════════════════════════════════════════════════════
   FLOATING HEART FIELD — agency headline
   Implementation: one inline <symbol id="heart"> reused via <use>.
   Motion: pure CSS transform/opacity keyframes composed across
   nested wrappers (drift × spin × scale × breathe) so each axis
   runs on its own duration → no visible periodicity.
   Performance: animates only `transform` and `opacity`. No filters,
   no shadows, no blends. Each wrapper carries `will-change` so the
   compositor lifts every heart to its own GPU layer.
   ═════════════════════════════════════════════════════════════════ */
.mascot-hearts{
  right: -40px; top: -6px; bottom: auto; left: auto;
  width: 170px; height: 1.4em;
  transform: none;
}
.mascot-hearts .heart-pos{
  position: absolute;
  width: var(--size, 120px);
  height: var(--size, 120px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mascot-hearts .heart-drift,
.mascot-hearts .heart-spin,
.mascot-hearts .heart-scale{
  width: 100%; height: 100%;
  will-change: transform;
}
.mascot-hearts .heart-drift{
  animation: heartDrift var(--drift-dur, 18s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}
.mascot-hearts .heart-spin{
  animation: heartSpin var(--spin-dur, 14s) ease-in-out var(--spin-delay, 0s) infinite alternate;
}
.mascot-hearts .heart-scale{
  animation: heartScale var(--scale-dur, 9s) ease-in-out var(--scale-delay, 0s) infinite alternate;
}
.mascot-hearts svg.heart{
  display: block;
  width: 100%; height: 100%;
  color: var(--heart-color, #FF2D87);
  fill: currentColor;
  opacity: 0;
  will-change: opacity;
  animation: heartBreathe var(--breath-dur, 12s) ease-in-out var(--breath-delay, 0s) infinite;
}
@keyframes heartDrift{
  from { transform: translate3d(var(--drift-from-x, -8px), var(--drift-from-y, 12px), 0); }
  to   { transform: translate3d(var(--drift-to-x, 10px),  var(--drift-to-y, -14px), 0); }
}
@keyframes heartSpin{
  from { transform: rotate(var(--spin-from, -6deg)); }
  to   { transform: rotate(var(--spin-to, 8deg)); }
}
@keyframes heartScale{
  from { transform: scale(var(--scale-from, 0.94)); }
  to   { transform: scale(var(--scale-to, 1.06)); }
}
@keyframes heartBreathe{
  0%   { opacity: 0; }
  30%  { opacity: var(--peak, 0.28); }
  70%  { opacity: var(--peak, 0.28); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .mascot-hearts .heart-drift,
  .mascot-hearts .heart-spin,
  .mascot-hearts .heart-scale,
  .mascot-hearts svg.heart{ animation: none; }
  .mascot-hearts svg.heart{ opacity: calc(var(--peak, 0.28) * 0.85); }
}

/* Robot welding the KI headline */
.mascot-robot{
  right: -20px; top: -6px; left: auto;
  width: 160px; height: 160px;
  transform: none;
  overflow:visible;
}
.mascot-robot svg{ width:100%; height:100%; color: var(--neon); }
.mascot-robot .spark{
  position:absolute; pointer-events:none;
  width:6px; height:6px; background:var(--neon); border-radius:999px;
  box-shadow: 0 0 10px var(--neon);
  opacity:0;
}

/* Gears for Units — sits right next to the headline */
.mascot-gears{
  right: -10px; top: -20px;
  left: auto;
  width:180px; height:140px;
  transform: none;
}
.mascot-gears svg{ width:100%; height:100%; overflow:visible; }
.mascot-gears .g1, .mascot-gears .g2, .mascot-gears .g3{ transform-box: fill-box; transform-origin:center; }

/* People bubbles for Team */
.mascot-people{
  display: none;
}

/* Handshake/ribbon for Trust */
.mascot-handshake{
  display: none;
}

/* Spark/star for contact */
.mascot-spark{
  right: 0; top: -4px; left:auto; width:76px; height:76px;
  transform: none;
}
.mascot-spark svg{ width:100%; height:100%; color: var(--neon); }

@media (max-width:820px){
  .sec-hd{ padding-right:0; padding-top:72px; }
  .mascot-robot, .mascot-gears, .mascot-people, .mascot-handshake, .mascot-spark, .mascot-hearts{
    left:0; right:auto; top:0;
  }
  /* MOBILE — center every section headline. Desktop uses
     text-align:left inside an inline-block .sec-hd (paired with
     a mascot at right:0). On mobile the mascot is repositioned
     to top:0 and the headline width nearly fills the viewport,
     so left-aligning visually pushes the lines toward the left
     edge while leaving big empty space on the right. Force
     center-alignment on everything inside .sec-hd so the page
     reads as a properly-centered single column. */
  .sec-hd{ text-align: center !important; display: block !important; }
  .sec-hd h2,
  .sec-hd h3,
  .sec-hd p{ text-align: center !important; }
  /* Sections that anchor their own headlines outside .sec-hd
     (system, agency-inner direct children, agency-sub) — center
     those too. */
  .agency-inner,
  .agency-inner h2,
  .agency-inner .agency-sub,
  .agency-inner .agency-lead,
  .system-h2,
  .system-subline,
  .system-body{
    text-align: center !important;
  }
}

.hero{
  position:relative; height:108vh; width:100%;
  /* outer scroll container; pinned inner holds the viewport */
}
.hero-pin{
  position:relative; height:100vh; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--blk);
}
.hero-media{
  position:absolute; inset:0; z-index:1;
  overflow:hidden;
  will-change: transform, opacity;
}

.hero-media img, .hero-media video{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(1);
  transform:scale(1);
  will-change: transform, filter;
}
.hero-mute-toggle{
  position:fixed;
  right:clamp(18px,3vw,38px);
  bottom:clamp(18px,3vw,38px);
  z-index:540;
  width:clamp(42px,4.2vw,56px);
  height:clamp(42px,4.2vw,56px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(240,237,232,0.42);
  border-radius:999px;
  color:var(--fg);
  background:rgba(9,9,9,0.34);
  box-shadow:0 14px 38px rgba(0,0,0,0.24);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease, opacity .2s ease;
}
.hero-mute-toggle.is-hidden{
  opacity:0;
  pointer-events:none;
}
.hero-mute-toggle:hover{
  background:rgba(240,237,232,0.16);
  border-color:rgba(240,237,232,0.68);
  transform:translateY(-1px);
}
@media (max-width: 820px){
  .hero-mute-toggle{
    right:clamp(16px,5vw,28px);
    bottom:clamp(18px,5vw,28px);
  }
}
.hero-mute-toggle:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}
.hero-mute-toggle svg{
  position:absolute;
  width:48%;
  height:48%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:opacity .18s ease, transform .18s ease;
}
.hero-mute-toggle .icon-sound,
.hero-mute-toggle.is-muted .icon-muted{
  opacity:1;
  transform:scale(1);
}
.hero-mute-toggle .icon-muted,
.hero-mute-toggle.is-muted .icon-sound{
  opacity:0;
  transform:scale(.82);
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(9,9,9,.55) 70%, rgba(9,9,9,.9) 100%);
  z-index:1;
  opacity:0;
  pointer-events:none;
  will-change: opacity;
}
/* Hero ghost overlay removed per feedback */
.hero-ghost{ display:none; }
.hero-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:56px; padding: 0 24px;
  opacity:0; /* controlled by scroll */
  will-change: opacity;
}
.hero-agency{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:center;
  padding: 80px clamp(20px,5vw,88px) 40px;
  opacity:0;
  pointer-events:none;
  will-change: opacity, transform;
  text-align:center;
}
.hero-agency .agency-single{
  max-width: 1100px;
  padding: 0;
  margin: 0 auto;
  text-align:center;
  color: var(--wh);
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.hero-agency .sec-hd{
  display:inline-block;
  /* Mascot (hearts) anchors at the top-right of this block.
     Symmetric horizontal padding keeps the TEXT visually centred on the page. */
  padding-right: 160px;
  padding-left: 160px;
  padding-top: 0;
  text-align:center;
}
.hero-agency .sec-hd h2{
  text-align:center;
  font-size: clamp(3rem, 8vw, 8rem);
  letter-spacing:-0.03em;
  line-height:0.95;
}
/* Mascot sits top-right, tightly attached to the one-line headline */
.hero-agency .mascot-hearts{
  right: -30px; top: -4px;
  width: 140px; height: 1.2em;
}
.hero-agency.is-on{ pointer-events:auto; }
.hero-logo{
  width:clamp(180px, 22vw, 280px); aspect-ratio:1; background:transparent;
  display:grid; place-items:center;
  position:absolute; inset:0; margin:auto;
  transform: scale(0.6);
  z-index:3;
  opacity:0;
  will-change: transform, opacity;
}
.hero-logo img{ width:100%; }

/* logoGroup: fixed viewport layer after hero pin releases */
#logoGroup.is-fixed{
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:500; pointer-events:none;
}
.hero-headline{
  font-size:clamp(3rem, 9vw, 9.5rem);
}
.hero-sub{
  color:var(--muted); font-size:0.86rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:700;
}
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--wh); font-size:0.68rem; letter-spacing:0.24em; text-transform:uppercase; font-weight:700;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.scroll-cue .bar{
  width:1px; height:48px; background:var(--muted); position:relative; overflow:hidden;
}
.scroll-cue .bar::after{
  content:''; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--neon);
  animation: scrollBar 1.8s cubic-bezier(.7,.2,.2,1) infinite;
}
@keyframes scrollBar{
  0%{ top:-50%; } 100%{ top:100%; }
}

/* ————————————————————————————————
   02 MARQUEE
———————————————————————————————— */
.marquee{
  background:var(--neon); color:var(--blk);
  padding:26px 0; overflow:hidden;
  border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);
}
.marquee-track{
  display:flex; gap:56px; white-space:nowrap; will-change:transform;
  font-weight:900; letter-spacing:-0.02em; text-transform:uppercase;
  font-size:clamp(1.4rem, 2.4vw, 2rem);
}
.marquee-track span{ display:inline-flex; align-items:center; gap:56px; }
.marquee-track .dot{
  width:10px; height:10px; background:var(--blk); border-radius:999px; display:inline-block;
}

/* ————————————————————————————————
   03 AGENTUR (horizontal scroll pin)
———————————————————————————————— */
.agency{
  position:relative;
}
/* ————————————————————————————————
   02 AGENTUR (Große Ideen) — standalone section
———————————————————————————————— */
.agency-sub{
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.18;
  color: var(--neon, #C6E94A);
  margin: clamp(20px, 3vh, 40px) 0 clamp(24px, 4vh, 56px);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.agency{
  position:relative;
  /* Deep editorial: ink base + warm umber bloom upper-left + cool teal plane lower-right.
     Reads as a "cinematic studio" backdrop, not a flat panel. */
  background:
    radial-gradient(ellipse 65% 50% at 12% 18%, rgba(232,123,74,0.18), transparent 65%),
    radial-gradient(ellipse 55% 45% at 88% 78%, rgba(0,155,189,0.16), transparent 65%),
    linear-gradient(178deg, #0c0c0e 0%, #0a0a0c 50%, #0d0e12 100%);
  overflow:hidden;
}
/* Hard diagonal split — a graphic editorial cut introducing the section */
.agency::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(118deg,
      transparent 0%,
      transparent 58%,
      rgba(0,155,189,0.10) 58.1%,
      rgba(0,155,189,0.07) 78%,
      transparent 100%);
  pointer-events:none; z-index:0;
}
.agency-inner{ position:relative; z-index:1; }
.agency-inner{
  padding: clamp(120px,18vh,200px) clamp(20px,5vw,88px);
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 40px;
}
.agency-inner .sec-hd{
  display:inline-block;
  padding-right: 0;
  text-align:center;
  position: relative;
  z-index: 2;
}
.agency-inner .sec-hd .mascot-hearts{
  position: absolute; right: -120px; top: -20px;
}
/* Full-bleed heart field behind the agency headline (moved out of sec-hd via JS) */
.agency-inner > .mascot-hearts{
  /* Inline-SVG sprite heart system (see #heart symbol at top of <body>
     and the keyframe stack above). Sits at z-index 0 behind the
     headline column — .agency-inner > * is position:relative so
     content layers above this field naturally. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: none;
}
.agency-inner > *{ position: relative; }
.agency-lead{
  max-width: 720px;
  color: rgba(240,237,232,0.82);
  text-align:center;
  margin: 0 auto;
}
/* .grow-word must NOT inherit the legacy `.reveal .line > *` translateY mask.
   CSS override ensures it's visible; GSAP sets the scale inline. */
.reveal .line > .grow-word,
.grow-word{
  display:inline-block;
  transform: none;
  transform-origin: center bottom;
  will-change: transform, color;
  color: var(--neon);
}
.agency-inner .agency-stats{
  margin-top: 24px;
  justify-content:center;
}

.agency-single{
  padding: clamp(100px,14vh,160px) clamp(20px,5vw,88px);
  max-width: 1100px;
  margin: 0 auto;
}
.agency-left{
  padding: clamp(80px,10vh,120px) clamp(24px,5vw,72px);
  display:flex; flex-direction:column; justify-content:center; gap:36px;
  border-right:1px solid var(--line);
  background:var(--blk);
}
.agency-left .h-display{ }
.agency-callout{
  padding:22px 24px; border:1px solid var(--neon); border-radius:14px;
  color:var(--wh); font-weight:600; line-height:1.4;
  position:relative; max-width:460px;
}
.agency-callout::before{
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px;
  background:var(--neon); border-radius:14px 0 0 14px;
}
.agency-stats{
  display:flex; gap:40px; margin-top:8px;
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat .num{
  font-weight:900; font-size:clamp(2.4rem, 4.2vw, 3.8rem); letter-spacing:-0.04em;
  color:var(--neon); line-height:1; font-variant-numeric:tabular-nums;
}
.stat .lab{ font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); font-weight:700; }

.agency-right{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
}
.cards-track{
  display:flex; gap:32px; padding: 0 clamp(40px, 8vw, 120px);
  will-change:transform;
}
.a-card{
  flex: 0 0 clamp(300px, 28vw, 440px);
  height: 64vh;
  background: #111; border:1px solid var(--line); border-radius:18px;
  padding:32px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  transition: border-color .4s;
}
.a-card:hover{ border-color: rgba(203,255,0,.4); }
.a-card .num-big{
  position:absolute; right:-12px; bottom:-40px;
  font-weight:900; font-size:16rem; line-height:0.8; color:rgba(240,237,232,0.04);
  letter-spacing:-0.06em;
}
.a-card h3{
  font-weight:900; text-transform:uppercase; letter-spacing:-0.03em;
  font-size:2rem; line-height:0.95;
}
.a-card p{
  color: var(--muted); font-weight:300; line-height:1.6; font-size:0.95rem;
}
.a-card .kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700;
}
.a-card .kicker .blip{ width:8px; height:8px; border-radius:999px; background:var(--neon); }

.scroll-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,0.06);
}
.scroll-progress .bar{
  position:absolute; top:0; left:0; bottom:0; width:0%; background:var(--neon);
}

@media (max-width: 900px){
  .agency-pin{ grid-template-columns:1fr; height:auto; }
  .agency-right{ padding:40px 0 80px; overflow-x:auto; }
  .cards-track{ flex-wrap:nowrap; }
}

/* ————————————————————————————————
   03B SYSTEM (flex setup visualisation)
———————————————————————————————— */
.system{
  position:relative;
  padding: clamp(100px,14vh,160px) clamp(20px,5vw,88px) 12vh;
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(0,155,189,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(255,45,135,0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(177,140,255,0.20), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(203,255,0,0.12), transparent 60%),
    var(--blk);
  overflow:visible;
  min-height: 80vh;
  display:flex; align-items:flex-start; justify-content:center;
}
.system-bg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity: 0.5; /* overall background intensity halved */
}
.system-bg .sys-grid{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
.system-inner{
  position:sticky; top: clamp(60px,10vh,100px); z-index:60;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 48px;
}
/* Mobile-only by default; a desktop variant is enabled further
   below at a larger size so the network reads as a system-section
   anchor on wide screens too. */
.system-network-mobile{ display: none; }

/* DESKTOP: network graphic REMOVED — user reported it as a duplicate
   bleed-over from the mobile layout. On wide screens the system
   section relies on the headline + body copy alone (the Strategie
   unit's Noise.webp bleed-in handles the visual interest above). */
@media (min-width: 821px){
  .system-network-mobile{ display: none !important; }
}

.system-h2{
  width: 100%;
  text-align:center;
  /* margin: 0 auto; */
  /* Give uppercase diacritics (Ü) vertical breathing room so the dots are visible */
  padding-top: 0.28em;
  line-height: 1.08;
}
.system-body{
  max-width: 620px;
  color: rgba(255,255,255,0.96);
  text-align:center;
}
.system-highlight{
  display:inline-flex; align-items:baseline; gap: 14px;
  font-family: var(--ff);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.06em;
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--cyan);
  font-weight: 700;
  text-transform: uppercase;
}
.system-highlight .hl-brk{
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}

/* ── System section: subline + bubbles ── */
.system-subline{
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: 0.06em;
  margin-top: 10px;
  text-transform: uppercase;
  position: relative;
  z-index: 120;
}
.system-h2,
.system-body{
  position: relative;
  z-index: 120;
}
.sys-bubbles-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 22px);
  width: 100%;
  max-width: 1020px;
  margin: 48px auto 0;
  height: clamp(180px, 26vh, 260px);
  position: relative;
}
.sys-bubble{
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  mix-blend-mode: screen;
  opacity: 0;
  cursor: default;
  width: clamp(80px, 9vw, 110px);
  height: clamp(80px, 9vw, 110px);
}
.sys-bubble-label{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(0.52rem, 0.72vw, 0.72rem);
  line-height: 1.2;
  text-align: center;
  color: rgba(255,255,255,0.92);
  padding: 0 6px;
  pointer-events: none;
  will-change: opacity;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
#sysMother{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(62vmin, 680px);
  height: min(62vmin, 680px);
  border-radius: 999px;
  background: #43b4e6;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
@media (max-width: 820px){
  .sys-bubbles-wrap{
    flex-wrap: wrap;
    height: auto;
    gap: 12px;
    margin-top: 32px;
  }
  .sys-bubble{
    width: clamp(68px, 16vw, 88px);
    height: clamp(68px, 16vw, 88px);
  }
  .sys-bubble-label{ font-size: 0.6rem; }
}

@media (max-width: 820px){
  .system-bg{ opacity: 0.35; }
}

/* ————————————————————————————————
   BUBBLE OVERLAY (fixed layer, system → units)
———————————————————————————————— */
#bubbleOverlay{
  /* Legacy System→Units bubble layer — fully replaced by the
     global-bubble-stage SVG (bubble-anim.js). Hidden so the
     residual cyan #bovMother blur doesn't paint a soft halo
     behind the agency/system content. */
  display: none !important;
}
#bovMother{
  position:absolute;
  left:50%; top:54%;
  width: min(60vmin,560px); height: min(60vmin,560px);
  border-radius:999px;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,0.4) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, #43b4e6 0%, #43b4e6 40%, transparent 80%);
  mix-blend-mode:screen;
  filter: blur(14px);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
.bov-positioner{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  will-change:transform;
}
.bov-bubble{
  position:absolute;
  border-radius:999px;
  mix-blend-mode: screen;
  display:flex; align-items:center; justify-content:center;
  will-change:transform,opacity;
  cursor:default;
  transform:translate(-50%,-50%);
  background: transparent !important;
  isolation: isolate;
}
.bov-bubble::before{
  /* Watercolour blob: dense, slightly defined core on one side that
     dissolves into a softer secondary bloom on the other — never a uniform
     soft halo. Positions are jittered per-bubble via --core-x/--core-y/
     --bloom-x/--bloom-y so each one looks hand-painted. */
  content:"";
  position:absolute; inset:-25%;
  border-radius:999px;
  background:
    /* Tiny specular highlight */
    radial-gradient(circle at 36% 30%,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0)    14%),
    /* Secondary colour bloom — soft, off-center */
    radial-gradient(circle at var(--bloom-x, 72%) var(--bloom-y, 70%),
      var(--bub-accent, rgba(255,255,255,0.35)) 0%,
      var(--bub-accent, rgba(255,255,255,0.15)) 18%,
      transparent 58%),
    /* Main colour core — denser, mid-falloff so one side reads "harder" */
    radial-gradient(circle at var(--core-x, 42%) var(--core-y, 46%),
      var(--bub-color, #43b4e6) 0%,
      var(--bub-color, #43b4e6) 26%,
      transparent 64%);
  filter: blur(3px) saturate(1.1);
  z-index:0;
}
.bov-bubble > *{ position:relative; z-index:1; }
.bov-label{
  font-family:var(--ff);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:clamp(0.6rem,0.8vw,0.85rem);
  line-height:1.25;
  text-align:center;
  color:rgba(255,255,255,0.95);
  pointer-events:none;
  padding:0 6px;
  text-shadow:none;
  position:relative;
  z-index:2;
}

/* ————————————————————————————————
   04 UNITS — horizontal pinned scroll
———————————————————————————————— */
.units-h{
  position:relative;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(177,140,255,0.10), transparent 60%),
    var(--blk);
}
.units-pin{
  position:relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
}
.uh-progress{
  position:absolute; top:0; left:0; right:0; z-index:5;
  padding: 18px clamp(20px,4vw,48px) 0;
  pointer-events:none;
}
.uh-progress-bar{
  height:2px; width:0%; background:var(--wh);
  opacity:0.85;
  transform-origin:left center;
}
.uh-progress-meta{ display:none; }
#uhCount{ color: var(--wh); }
.uh-track{
  display:flex;
  flex-wrap:nowrap;
  height: 100vh;
  will-change: transform;
}
.uh-panel{
  flex: 0 0 auto;
  height: 100vh;
  display:flex; align-items:center;
  /* Tighter horizontal padding so consecutive unit panels don't
     read as widely-spaced posters. The text-blocks now sit much
     closer to the previous panel's content edge. */
  padding: 96px clamp(0px,1vw,24px) 60px;
  position:relative;
  box-sizing:border-box;
  will-change: transform;
}
/* Diagonal cascade — each panel sits a step lower than the previous so the
   horizontal pinned scroll reads as a down-right diagonal pan. The track's
   y-tween (in JS) moves the rail up by the same total, so the active panel
   always lands flush in the viewport. Disabled on mobile (stacked layout). */
@media (min-width: 821px){
  .uh-track > .uh-panel{ --uh-diag-step: 60vh; }
  .uh-track > .uh-panel:nth-child(1){ transform: translateY(calc(0  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(2){ transform: translateY(calc(1  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(3){ transform: translateY(calc(2  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(4){ transform: translateY(calc(3  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(5){ transform: translateY(calc(4  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(6){ transform: translateY(calc(5  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(7){ transform: translateY(calc(6  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(8){ transform: translateY(calc(7  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(9){ transform: translateY(calc(8  * var(--uh-diag-step))); }
  .uh-track > .uh-panel:nth-child(10){ transform: translateY(calc(9 * var(--uh-diag-step))); }
}

/* Placeholder visuals */
.uh-ph{
  position:relative;
  width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(240,237,232,0.04) 0 18px,
      rgba(240,237,232,0.00) 18px 36px),
    linear-gradient(180deg, rgba(240,237,232,0.09), rgba(240,237,232,0.03));
  border:1px solid rgba(240,237,232,0.16);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.uh-ph::before{
  content:''; position:absolute; inset:10px;
  border:1px dashed rgba(240,237,232,0.12);
  pointer-events:none;
}
.uh-ph::after{
  content: attr(data-ph);
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(240,237,232,0.55);
  background: rgba(9,9,9,0.6);
  padding: 6px 10px;
  border:1px solid rgba(240,237,232,0.18);
  border-radius: 999px;
  position:relative;
  white-space:nowrap;
}

/* Shared typography inside panels */
.uh-num{
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight:700; letter-spacing:0.16em;
  color: var(--u-color, var(--wh));
  margin-bottom: 18px;
  display:inline-flex; align-items:center; gap:10px;
}
.uh-num::before{
  content:''; width:28px; height:1px; background: var(--u-color, var(--wh));
  display:inline-block;
}
.uh-title{
  font-family: var(--ff);
  font-weight:900; text-transform:uppercase; letter-spacing:-0.04em;
  font-size: clamp(3rem, 5.4vw, 5.6rem); line-height:0.9;
  margin:0 0 28px;
}
.uh-subline{
  color: var(--u-color, var(--wh));
  font-family: var(--ff);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 520px;
}
.uh-services{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 520px;
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,237,232,0.62);
  line-height: 1.9;
}
.uh-services li{ display: inline; }
.uh-services li + li::before{
  content: ' / ';
  color: var(--u-color, var(--wh));
  opacity: 0.7;
  margin: 0 2px;
}
.uh-callout{
  font-weight:300; color: var(--muted);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height:1.25; margin-bottom:28px;
}
.uh-callout em{ font-style:normal; color:var(--wh); font-weight:600; }
.uh-body{ color: rgba(240,237,232,0.92); max-width: 440px; }
.uh-tags{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.uh-tags li{
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform:uppercase;
  padding: 8px 12px; border:1px solid rgba(240,237,232,0.2);
  border-radius: 999px; color: rgba(240,237,232,0.8);
}
.uh-kicker{ color:var(--u-color, var(--wh)); margin-bottom:18px; }
.uh-tag{
  position:absolute; top:18px; left:18px;
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing:0.14em; text-transform:uppercase;
  padding: 8px 12px;
  background: rgba(9,9,9,0.7);
  color: var(--wh);
  border:1px solid rgba(240,237,232,0.22);
  border-radius: 999px;
  z-index:2;
}

/* Panel types */
.uh-intro{ width: 90vw; justify-content:center; }
.uh-intro-inner{ max-width: 720px; margin: 0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.uh-intro .h-display{
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: 0.86;
}
.uh-scroll-hint{
  margin-top:56px;
  display:inline-flex; align-items:center; gap:14px;
  color: var(--muted);
}
.uh-scroll-hint svg{ width:56px; height:auto; }

.uh-split, .uh-split-rev{
  width: 95vw;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: stretch;
}
/* Units 2-7 sit tighter: image hugs the text column for the
   "Bild + Text im Verbund" look the agency asked for. Unit 1
   (Strategie) keeps the wider spacing as the section opener. */
#unit-1.uh-split, #unit-1.uh-split-rev,
#unit-2.uh-split, #unit-2.uh-split-rev,
#unit-3.uh-split, #unit-3.uh-split-rev,
#unit-4.uh-split, #unit-4.uh-split-rev,
#unit-5.uh-split, #unit-5.uh-split-rev,
#unit-6.uh-split, #unit-6.uh-split-rev,
#unit-7.uh-split, #unit-7.uh-split-rev{
  width: 78vw;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vw, 24px);
}
.uh-split .uh-media, .uh-split-rev .uh-media{ min-height: 66vh; max-height: 82vh; }
.uh-media{
  position:relative;
  /* Empty anchor — image lives in .units-img-bg and mirrors this
     slot's screen rect each frame. */
}
.uh-media-portrait{ max-width: 460px; justify-self:start; }

/* ════════════════════════════════════════════════════════════
   UNIT 01 — STRATEGIE: image (noise) sits BEHIND the text as a
   large-area backdrop. Override the split grid to a single
   column so the copy spans full width; the .uh-media still
   serves as the bg-anchor for the JS-positioned motiv image
   layer, but it's promoted to position:absolute and fills the
   entire panel. .uh-copy is raised above on z-index.
   ════════════════════════════════════════════════════════════ */
#unit-1.uh-split--bgtext{
  width: 78vw;
  grid-template-columns: 1fr;
  position: relative;
}
#unit-1.uh-split--bgtext .uh-media--bg{
  position: absolute;
  inset: -2vh -2vw;            /* mild overhang only; no left-clipping */
  min-height: 0;
  max-height: none;
  z-index: 0;
  pointer-events: none;
}
#unit-1.uh-split--bgtext .uh-copy{
  position: relative;
  z-index: 2;
  max-width: 720px;
}
/* The Noise.webp asset (now showing the network/web graphic) —
   contained so it's never cropped on the sides, with subtle
   blending so it doesn't overpower the section background. */
.uh-bg-img.uh-motiv-img--noise{
  object-fit: contain;
  opacity: 0.55;
  mix-blend-mode: screen;
}
/* Strategie — Leitplanken road image. The road has a near-1.5:1
   aspect ratio; let the media slot match that so the image fills
   it fully (no letterboxing) and the motivOffsetY mapping the
   bubble timeline uses lines up with what the user sees. */
.uh-media--road{
  aspect-ratio: 966 / 647;
  min-height: 0 !important;
  max-height: none !important;
  align-self: center;
}
.uh-bg-img.uh-motiv-img--road{
  object-fit: contain;
  object-position: center bottom;
}

/* ════════════════════════════════════════════════════════════
   BACKDROP IMAGE LAYER — Units 1-7
   ─────────────────────────────────────────────────────────
   Sits BELOW .global-bubble-stage (z-index 0 < 1) so the master
   bubble paints OVER images. Each image is positioned every
   frame from JS to mirror its panel's .uh-media slot. Vertical
   parallax makes images "fly out" via top/bottom as the panel
   transitions out — no horizontal clip cuts.
   ════════════════════════════════════════════════════════════ */
.units-img-bg{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;            /* contains everything to the units section */
}
/* Foreground motiv layer — currently only the front-grid of the
   Trade & Activation cart sits here, so it can paint OVER the
   master bubble stage (z-index 1) while the bubble paints over
   the back cart layer in .units-img-bg below. Result: bubble
   reads as INSIDE the cart basket when m5Lock is active. */
.units-img-fg{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.uh-bg-fg{
  position: absolute;
  display: block;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  opacity: 0;                   /* hidden until JS writes a rect */
  will-change: transform, left, top;
}
.uh-bg-img,
.uh-bg-cell{
  position: absolute;
  left: 0; top: 0;             /* width/height/left/top set per-frame from JS */
  width: 0; height: 0;
  pointer-events: none;
  will-change: transform, left, top;
}
.uh-bg-img{
  display: block;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.uh-bg-img.uh-motiv-img--portrait{
  /* Pin the portrait phone narrower than its slot width so it
     doesn't dominate the row. JS still writes width/height
     directly; max-width clamps it down. */
  max-width: 60vh;
}
/* ════════════════════════════════════════════════════════════
   SOCIAL — responsive phone motiv (portrait on desktop, landscape
   on mobile). Both images stack absolute inside the wrapper; CSS
   media query toggles which one is visible. The JS bubble lock
   queries the visible image so the heart anchor stays correct
   regardless of viewport.
   ════════════════════════════════════════════════════════════ */
.uh-motiv-social-wrap > .uh-social-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none; -webkit-user-drag: none;
}
.uh-motiv-social-wrap > .uh-social-img--mobile{ display: none; }
@media (max-width: 820px){
  .uh-motiv-social-wrap > .uh-social-img--desktop{ display: none; }
  .uh-motiv-social-wrap > .uh-social-img--mobile{ display: block; }
}
/* ════════════════════════════════════════════════════════════
   PACKAGING — banana paint-on reveal
   ─────────────────────────────────────────────────────────
   .uh-motiv-banane wraps two absolutely-stacked banana images:
     - Banane_1 (peeled, "uh-banane-base") at the BOTTOM, always
       fully visible — that's what the user sees at the start
     - Banane_2 (yellow with peel, "uh-banane-paint") on TOP,
       clipped via clip-path. The CSS custom property
       --peel-reveal (0 → 1, driven by the master timeline) widens
       the visible window from 0 → 100% LEFT to RIGHT, so the
       yellow peel "paints onto" the peeled banana exactly where
       the bubble has just wiped.
   ════════════════════════════════════════════════════════════ */
.uh-motiv-banane{
  --peel-reveal: 0;
}
.uh-motiv-banane .uh-banane{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none; -webkit-user-drag: none;
}
.uh-motiv-banane .uh-banane-base{
  /* Fade out in lockstep with the reveal so the peeled banana
     never shows through once the yellow peel has fully painted
     on top — even if the two banana shapes don't perfectly
     overlap pixel-for-pixel. */
  opacity: calc(1 - var(--peel-reveal));
}
.uh-motiv-banane .uh-banane-paint{
  /* Vertical reveal: inset(top right bottom left). The BOTTOM
     inset shrinks from 100% (fully clipped, nothing visible) to
     0% (fully visible) as --peel-reveal goes 0 → 1, so the
     yellow peel "paints onto" the banana TOP-to-BOTTOM in
     lockstep with the bubble traveling down the same axis. */
  clip-path: inset(0 0 calc(100% - var(--peel-reveal) * 100%) 0);
  -webkit-clip-path: inset(0 0 calc(100% - var(--peel-reveal) * 100%) 0);
}
.uh-bg-cell{
  /* food plate / camera scene container — children sized by
     their own CSS (uh-food-plate-wrap / uh-cam-wrap). Position
     and box are inherited from the grouped .uh-bg-img,.uh-bg-cell
     rule above (absolute + JS-driven left/top/width/height each
     frame). Do not re-declare position/size here — it would break
     the backdrop layer pinning to each panel's anchor. */
}

/* Food Service plate — `.uh-food-plate` className kept so bubble-
   anim.js's getBoundingClientRect() target still resolves. The
   wrap is a square that fits within its parent cell (whatever
   shape the panel media slot ends up being). */
.uh-food-plate-wrap{
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.uh-food-plate{
  display:block;
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none; -webkit-user-drag:none;
  pointer-events:none;
}
/* Plates 2 + 3 are revealed by GSAP tweens in bubble-anim.js during
   the Food Service 2-hop sequence. They start hidden so plate 1
   (Teller-1.webp, the full plate with tomato) shows on first paint. */
.uh-food-plate--2,
.uh-food-plate--3{ opacity: 0; }

/* ════════════════════════════════════════════════════════════
   CAMERA / POLAROID SCENE — Unit 7 (Content & Production)
   ─────────────────────────────────────────────────────────
   Lives inside the backdrop layer's clip-wrapper. The bubble
   lands on the camera's lens, pulses 2× (each peak triggers the
   full-viewport flash), then the polaroid emerges DOWNWARD
   from the camera's bottom slot, layered IN FRONT of the
   camera body (z-index 3 vs cam-img z-index 2) so the photo
   reads as a separate plane floating over the camera.
   ════════════════════════════════════════════════════════════ */
.uh-cam-wrap{
  position: absolute;
  inset: 0;
  /* Lift the whole camera+polaroid arrangement well up in the
     slot so the camera body sits near the top and the polaroid
     emerging below stays within the readable area. Without
     this, the polaroid dangled past the bottom of the panel
     and pushed the right-side copy below the fold. */
  margin: -8% auto auto auto;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  height: auto;
  max-height: 82%;
}
.cam-stage{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;            /* polaroid extends below the camera body */
}
.cam-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Calibrated against the new Content.webp asset (1536×1024).
   The bubble anchors on the camera's central LENS (50% / 43.5%,
   diameter ≈ 9%). Invisible — purely a measurement anchor read
   by bubble-anim.js each frame. */
.cam-shutter{
  position: absolute;
  left: 50%;
  top: 43.5%;
  width: 9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}
/* Polaroid wrapper — sits IN FRONT of the camera body (higher
   z-index) but is a CLIPPING container anchored at the camera's
   bottom slot. It grows downward in HEIGHT as the photo is
   "pushed out": the inner photo is pinned to the container's
   bottom, so as the container grows, the BOTTOM edge of the
   photo emerges first and the top edge appears last — the
   real polaroid-camera motion. JS animates the container's
   height each frame (camFX.polaroid 0..1).
   ─────────────────────────────────────────────────────────
   Slot Y is tuned against Content.webp — the black slot opens
   around y≈72% of the camera image. */
.cam-polaroid{
  position: absolute;
  left: 50%;
  top: 80%;
  /* Photo card width — proportion of cam-stage width. */
  width: 40%;
  /* Container height is driven by JS (0 → natural square height).
     polaroid full height = polaroid width (1:1 photo card).
     Expressed as fraction of cam-stage height: width is 40% of
     cam-stage width, cam-stage aspect is 1536/1024 (≈1.5) so full
     photo height = 40% × 1.5 = 60% of cam-stage height. */
  height: 0;
  transform: translate(-50%, 0);
  /* IN FRONT of .cam-img (z-index 2) so the photo reads as a
     separate layer floating over the camera. */
  z-index: 3;
  pointer-events: none;
  /* Hide whatever portion of the photo hasn't been pushed out yet. */
  overflow: hidden;
  /* Drop shadow on the polaroid edge so it reads as a physical
     object emerging from the camera. */
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.35));
  will-change: height;
}
.cam-polaroid-frame{
  position: absolute;
  /* Pin photo to the container's BOTTOM edge so the bottom of
     the photo is always at the bottom of the visible container —
     as the container grows, more of the photo is revealed from
     the bottom upward. */
  left: 0; right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Full-viewport white flash — sits at the very top of the stack
   so it covers the entire visible page during a shutter pulse.
   Opacity is driven from JS each frame. */
.cam-flash{
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: opacity;
}

/* Tighten the unit-7 split so the camera sits close to its copy
   column. The split grid keeps copy on the LEFT, camera media
   on the RIGHT. */
#unit-7.uh-split{
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 60px);
  /* Start the copy at the top of the panel so the long services
     list doesn't push past the bottom of the viewport. NO panel
     translate — earlier -6vh shifted the camera off-screen. */
  align-items: start;
  /* Pull camera + copy AWAY from the panel's right edge so the
     long body text doesn't crowd the viewport-right margin.
     Padding shrinks the grid content area on the right side only,
     so both columns shift left in equal measure. */
  padding-right: clamp(40px, 6vw, 120px);
}
#unit-7 .uh-copy{
  align-self: start;
  padding-top: 1vh;
}

@media (max-width: 1024px){
  /* On mobile + narrow desktop the horizontal pin is disabled — camera scales
     down sensibly within its stacked media block. */
  /* (mobile cam-flash kept ENABLED — the full-viewport white flash
     mirrors the desktop shutter pulse, see mobileAnimContent.) */
  .uh-cam-wrap{ max-width: 380px; margin: 0 auto; }
}

/* Each unit panel is its own self-contained frame. No negative
   margins, no copy-column nudges — text + image travel together
   as the panel scrolls horizontally. */
.uh-copy{ align-self:center; }
.uh-panel{ overflow: hidden; }

.uh-statement{
  width: 100vw;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items:center;
}
.uh-stm-title{
  font-family: var(--ff);
  font-weight:900; text-transform:uppercase; letter-spacing:-0.04em;
  font-size: clamp(3.6rem, 7.8vw, 8.4rem);
  line-height:0.9; margin:0;
}
.uh-stm-title em{
  font-style:normal;
  color: var(--u-color, var(--wh));
  font-weight:900;
}
.uh-stm-media{
  display:grid; grid-template-rows: 1fr auto; gap:28px;
  height: 72vh;
}
.uh-statement .uh-stm-media .uh-ph{ height: 100%; }

.uh-bleed{
  width: 100vw; padding: 0;
}
.uh-bleed .uh-ph-full{
  position:absolute; inset:0; width:100%; height:100%;
  border:none;
}
.uh-bleed::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(9,9,9,0.82) 0%, rgba(9,9,9,0.55) 45%, rgba(9,9,9,0.2) 100%);
  pointer-events:none;
}
.uh-bleed-overlay{
  position:relative; z-index:2;
  max-width: 640px;
  margin-left: clamp(40px, 6vw, 110px);
}
.uh-bleed-title{
  font-family: var(--ff);
  font-weight:900; text-transform:uppercase; letter-spacing:-0.04em;
  font-size: clamp(3.4rem, 6.8vw, 7.2rem);
  line-height:0.9; margin: 0 0 28px;
}
.uh-bleed-title em{
  font-style:normal; color: var(--u-color); font-weight:900;
}

.uh-grid3{
  width: 105vw;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items:center;
}
.uh-grid3-copy{ max-width: 440px; }
.uh-grid3-tiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 72vh;
}
.uh-grid3-tiles .uh-ph:nth-child(1){ grid-column: 1 / -1; }

.uh-dual{
  width: 105vw;
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 5vw, 90px);
  align-items:center;
}
.uh-dual-copy{ max-width: 520px; }
.uh-dual-media{
  position:relative;
  height: 78vh;
}
.uh-dual-ph1, .uh-dual-ph2{
  position:absolute;
  width: 62%; height: 62%;
}
.uh-dual-ph1{ top:0; left:0; }
.uh-dual-ph2{ bottom:0; right:0; }

.uh-outro{
  width: 90vw;
  justify-content:flex-start;
}
.uh-outro-inner{ max-width: 820px; }
.uh-outro-title{
  font-size: clamp(3.6rem, 8vw, 9rem);
  line-height:0.86;
}
.uh-outro-neon{ color: var(--neon); }

/* Mobile + narrow desktop: fall back to regular vertical stack, no horizontal scroll.
   Threshold raised from 820 → 1024 so cramped browser windows never
   show the side-by-side text+image (which can overlap as the viewport
   narrows). Text readability has priority over the horizontal animation. */
@media (max-width: 1024px){
  .units-pin{ height:auto; overflow:visible; }
  .uh-track{
    flex-direction:column; flex-wrap:nowrap;
    height:auto; transform:none !important;
    padding-bottom: clamp(108px, 10vh, 200px);
  }

  /* Every panel becomes full-width, auto-height column */
  .uh-panel{
    width:100vw !important; height:auto; min-height:auto;
    padding: 72px clamp(20px,6vw,40px) 80px;
    flex-direction:column; gap:32px;
  }

  /* All grid layouts → single column flex */
  .uh-split,
  .uh-split-rev{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }
  .uh-split-rev{ flex-direction:column-reverse; }

  .uh-statement{
    width:100% !important;
    display:flex; flex-direction:column-reverse; gap:28px;
  }
  .uh-grid3{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }
  .uh-dual{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }

  /* Media area heights */
  .uh-split .uh-media,
  .uh-split-rev .uh-media{
    min-height:56vw; max-height:none; width:100%;
  }
  .uh-media, .uh-stm-media{
    height:56vw; min-height:200px; width:100%;
    position:relative;
  }

  /* Grid3 tiles → single column */
  .uh-grid3-tiles{
    display:flex; flex-direction:column; gap:12px;
    height:auto; width:100%;
  }
  .uh-grid3-tiles .uh-ph{
    height:48vw; min-height:180px; width:100%;
  }
  .uh-grid3-copy{ max-width:100%; }

  /* Dual images → stacked */
  .uh-dual-media{
    display:flex; flex-direction:column; gap:12px;
    height:auto; width:100%; position:relative;
  }
  .uh-dual-ph1, .uh-dual-ph2{
    position:relative; width:100%; height:44vw; min-height:160px;
    top:auto; bottom:auto; left:auto; right:auto;
  }
  .uh-dual-copy{ max-width:100%; }

  /* Bleed panel — keep bg, overlay on top */
  .uh-bleed{
    width:100vw !important;
    min-height:120vw;
    padding:72px clamp(20px,6vw,40px) 80px;
    position:relative; display:flex; align-items:flex-end;
    justify-content: center;
  }
  .uh-bleed .uh-ph-full{
    position:absolute; inset:0; width:100%; height:100%;
  }
  .uh-bleed::after{
    background: linear-gradient(0deg, rgba(9,9,9,0.9) 0%, rgba(9,9,9,0.55) 50%, rgba(9,9,9,0.2) 100%);
  }
  .uh-bleed-overlay{ margin-left:0; max-width:100%; }

  /* Statement title slightly smaller on mobile */
  .uh-stm-title{
    font-size: clamp(2.6rem, 8vw, 4.5rem);
  }

  /* Intro: hide scroll hint arrow */
  .uh-scroll-hint{ display:none; }

  /* Outro */
  .uh-outro{ width:100vw !important; justify-content:flex-start; }
  .uh-outro-title{ font-size: clamp(2.8rem, 8vw, 5rem); }

  /* Hide progress bar */
  .uh-progress{ display:none; }

  /* ── MOBILE TEXT ALIGNMENT — center every unit copy block ──
     On desktop the units sit in a horizontal grid where text is
     deliberately left-aligned alongside its media partner. On
     mobile the panels are stacked single-column, so left-aligned
     copy with a max-width creates an awkward off-centre column.
     Force centred layout across ALL unit copy variants. */
  .uh-copy,
  .uh-bleed-overlay,
  .uh-grid3-copy,
  .uh-dual-copy,
  .uh-stm-copy{
    text-align: center;
    align-items: center;
    /* Some panels set align-self:start (unit-7) or auto margins
       that nudge the column off-centre on desktop — neutralise
       so the block fills width and centres its inline content. */
    align-self: stretch;
    width: 100%;
  }
  /* Center the children that have their own max-width caps */
  .uh-copy .uh-body,
  .uh-bleed-overlay .uh-body,
  .uh-grid3-copy .uh-body,
  .uh-dual-copy .uh-body,
  .uh-copy .uh-callout,
  .uh-bleed-overlay .uh-callout,
  .uh-grid3-copy .uh-callout,
  .uh-dual-copy .uh-callout{
    margin-left: auto;
    margin-right: auto;
  }
  /* Numbered eyebrow — drop the leading dash so the inline-flex
     contents centre cleanly instead of being pushed right by the
     ::before line. */
  .uh-num{
    justify-content: center;
  }
  .uh-num::before{ display: none; }
  /* Subline + title centred (titles inherit text-align from .uh-copy
     but make sure the inline title-text wrap behaves). */
  .uh-title,
  .uh-stm-title,
  .uh-bleed-title,
  .uh-subline{
    text-align: center;
  }
  /* Tag list: centre the row of chips */
  .uh-tags{
    justify-content: center;
  }
  /* Bleed overlay was offset to the left (margin-left clamp) on
     desktop — neutralise on mobile so it centres in the column. */
  .uh-bleed-overlay{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ————————————————————————————————
   05 KI
———————————————————————————————— */
.ai{
  background:
    radial-gradient(ellipse 65% 50% at 80% 25%, rgba(44,95,246,0.22), transparent 65%),
    radial-gradient(ellipse 55% 45% at 18% 80%, rgba(177,140,255,0.16), transparent 65%),
    linear-gradient(180deg, #07080d 0%, #0a0a14 60%, #08090f 100%);
  padding: clamp(120px,16vh,180px) clamp(20px,5vw,88px);
  position:relative; overflow:hidden;
}
/* Hard diagonal accent slash — the editorial "graphic" moment */
.ai::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(112deg,
    transparent 0%,
    transparent 64%,
    rgba(44,95,246,0.16) 64.1%,
    rgba(44,95,246,0.06) 78%,
    transparent 92%);
  z-index:0;
}
.ai > *{ position:relative; z-index:1; }
.ai-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:80px; align-items:start;
}
.ai-grid.ai-solo{
  display:block; max-width: 900px; margin: 0 auto; text-align:center;
}
.ai-grid.ai-solo .ai-sec-hd{
  display:inline-block; padding-left: 180px; padding-right: 180px;
  position:relative;
}
.ai-grid.ai-solo .ai-body{ margin-left:auto; margin-right:auto; }
.ai-grid.ai-solo .ai-callout{ margin-left:auto; margin-right:auto; max-width:560px; }
.ai-grid.ai-solo .rrox-card{ margin-left:auto; margin-right:auto; max-width:640px; text-align:left; }
.ai-body{ color: rgba(240,237,232,0.78); max-width:540px; }
.ai-callout{
  margin-top:40px;
  color:var(--neon); font-weight:900; text-transform:uppercase;
  letter-spacing:-0.03em; font-size:clamp(1.4rem, 2.6vw, 2.2rem); line-height:1.05;
  max-width:480px;
}
.ai-features{
  display:flex; flex-direction:column; gap:0; margin-top:40px;
  border: 1.5px solid rgba(240,237,232,0.22);
  border-radius: 22px;
  padding: 8px 28px;
  background: rgba(255,255,255,0.015);
}
.ai-feature{
  display:grid; grid-template-columns: 80px 1fr; gap:28px; align-items:start;
  padding:28px 0; border-top:1px solid var(--line);
  will-change: transform, opacity;
}
.ai-features .ai-feature:first-child{ border-top: 0; }
.ai-feature .ai-num{
  color:var(--cyan); font-weight:900; font-size:1.1rem; letter-spacing:0.12em;
}
.ai-feature h4{
  font-weight:900; text-transform:uppercase; letter-spacing:-0.02em;
  font-size:1.25rem; line-height:1.05; margin-bottom:8px;
}
.ai-feature p{ color: rgba(240,237,232,0.6); font-size:0.95rem; line-height:1.6; }

.rrox-card{
  margin-top:48px;
  background: #111; border:1px solid var(--line); border-radius:18px;
  padding:32px; display:flex; gap:24px; align-items:center;
  position:relative; overflow:hidden;
}
.rrox-card::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 50%, rgba(0,155,189,.12), transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(203,255,0,.08), transparent 40%);
  pointer-events:none;
}
.rrox-card img{
  width:80px; height:80px; border-radius:999px; flex-shrink:0; position:relative; z-index:1;
}
.rrox-card .rrox-text{ position:relative; z-index:1; }
.rrox-card h5{
  font-weight:900; text-transform:uppercase; letter-spacing:-0.01em;
  font-size:1.1rem; margin-bottom:4px;
}
.rrox-card p{ color: rgba(240,237,232,0.6); font-size:0.88rem; }

@media (max-width: 900px){
  .ai-grid{ grid-template-columns:1fr; gap:48px; }
}

/* ————————————————————————————————
   06 TEAM
———————————————————————————————— */
.team{
  padding: clamp(72px,9vh,120px) clamp(20px,5vw,88px) clamp(96px,12vh,160px);
  position:relative;
  overflow:hidden;
  /* Cinematic warm: deep wine top → warm umber bottom + soft gold bloom.
     Reads like a film still — emotional, not rainbow. */
  background:
    radial-gradient(ellipse 70% 55% at 25% 18%, rgba(232,51,74,0.22), transparent 65%),
    radial-gradient(ellipse 75% 60% at 78% 82%, rgba(245,166,66,0.18), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(245,230,66,0.07), transparent 70%),
    linear-gradient(180deg, #100808 0%, #0c0a0e 100%);
}
/* Hard graphic edge — a thin neon "filmstrip" at the top, signalling section change */
.team::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,51,74,0.8) 18%,
    rgba(245,230,66,0.9) 50%,
    rgba(0,155,189,0.8) 82%,
    transparent 100%);
  z-index:2;
}
.team > *{ position:relative; z-index:1; }
.team-head{
  max-width:720px; margin-bottom:32px;
}
.team-stage{
  position:relative;
  /* height is set in JS — adaptive to member count + viewport width */
  width:100%;
  margin-bottom:0;
  /* Allow hovered bubbles to grow past the stage edge without being clipped */
  overflow:visible;
  /* pan-y so the page can still be scrolled vertically while the bubbles
     handle taps for catch-toggle */
  touch-action: pan-y;
}
.bubble{
  position:absolute;
  width:88px; height:88px; border-radius:999px;
  display:grid; place-items:center;
  overflow:hidden;
  cursor:pointer;
  will-change: transform;
  user-select:none;
  background: var(--b-color, var(--cyan));
  transform-origin: center center;
}
.bubble:hover{
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.bubble .b-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 35%;
  border-radius:999px;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.bubble .b-tint{
  position:absolute; inset:0;
  border-radius:999px;
  background: var(--b-color, var(--cyan));
  opacity: 0.4;
  pointer-events:none;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode: normal;
}
.bubble .b-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding: 6px 8px 12%;
  text-align:center;
  color: #fff;
  pointer-events:none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
  z-index: 2;
}
.bubble .b-name{
  display:block; font-weight:900;
  font-size: clamp(0.78rem, 0.95vw, 1rem);
  letter-spacing:-0.01em;
  line-height:1.05;
}
.bubble .b-role{
  display:block; font-weight:600;
  font-size: clamp(0.6rem, 0.7vw, 0.72rem);
  letter-spacing:0.02em;
  line-height:1.15;
  margin-top: 3px;
  opacity: 0.95;
  transition: opacity .25s cubic-bezier(.2,.7,.2,1);
}
.bubble .b-leadtag{
  display:block; font-weight:700;
  font-size: clamp(0.55rem, 0.62vw, 0.66rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 3px;
  opacity: 0.9;
  color: var(--b-color, #fff);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.45);
  transition: opacity .25s cubic-bezier(.2,.7,.2,1);
}
.bubble .b-leadtag + .b-role{
  margin-top: 1px;
}
/* Caught state: photo shines through (no tint), only first name remains —
   and it drops down into the role's spot near the bubble's bottom edge. */
.bubble.is-caught .b-tint{ opacity: 0; }
.bubble.is-caught .b-role,
.bubble.is-caught .b-leadtag{ display: none; }
.bubble.is-caught .b-label{ padding-bottom: 8%; }

/* ————————————————————————————————
   07 TRUST
———————————————————————————————— */
.trust{
  padding: clamp(80px,10vh,120px) clamp(20px,5vw,88px) 0;
  position:relative; overflow:hidden;
  /* Moody slate atmosphere — deep, contemplative. Subtle warm halo only,
     keeps quote-as-hero feel without going monotonic. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(245,166,66,0.10), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 90%, rgba(0,155,189,0.10), transparent 70%),
    linear-gradient(180deg, #0a0c12 0%, #0c0d10 100%);
  pointer-events:none;
}
.trust > *{ position:relative; z-index:1; pointer-events:auto; }
.ghost-trust{
  position:absolute; left:-4%; right:-4%; top:50%; transform:translateY(-50%);
  font-weight:900; letter-spacing:-0.06em; text-transform:uppercase;
  color:rgba(240,237,232,0.035);
  font-size:clamp(12rem, 28vw, 28rem); line-height:0.8;
  white-space:nowrap; pointer-events:none; will-change:transform;
  z-index:0;
}
.trust-inner{ position:relative; z-index:1; }
.trust-head{ max-width:960px; margin: 0 auto 32px; text-align:center; position:relative; z-index:1; }
.trust-quote{
  display:block;
  margin: 0 auto 0; padding:0;
  max-width:980px;
  text-align:center;
  position:relative; z-index:1;
  overflow:visible;
  padding-top: 0.3em;
}
.trust-quote blockquote{
  margin:0; padding:0;
  font-family: var(--ff);
  font-weight:900; font-size:clamp(5.4rem, 10.8vw, 9rem);
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing:-0.05em;
  color: var(--wh);
  text-transform: uppercase;
}
.trust-quote blockquote em{
  font-style:normal; color:var(--wh); text-decoration:none; border:0;
}
.trust-body{ color: rgba(240,237,232,0.7); max-width:640px; margin: 0 auto 64px; text-align:center; position:relative; z-index:1; }
.logo-wall{
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 8px 0;
  z-index: 1;
}
.logo-tile{
  --lsize: 1;
  --tscale: 1;
  --tburst: 0;
  position: relative;
  display:flex; align-items:center; justify-content:center;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: scale(var(--tscale));
  transform-origin: center center;
  transition: filter .4s, opacity .35s ease;
  filter: grayscale(0.15) brightness(0.95);
  will-change: transform, opacity;
}
.logo-tile img{
  max-width: 72%;
  max-height: 72%;
  width: auto; height: auto;
  object-fit: contain;
  display:block;
  pointer-events:none;
  user-select:none;
  transition: opacity .35s ease;
}
.logo-tile.is-hidden{ display:none; }
.logo-tile.is-bursting img{ opacity: 0; }
.logo-tile .burst{
  position:absolute; inset:0;
  pointer-events:none; opacity:0;
}
.logo-tile.is-bursting .burst{ opacity:1; }
.logo-tile .burst span{
  position:absolute; left:50%; top:50%;
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  transform: translate(-50%,-50%);
  opacity: 0;
}
.logo-tile:hover{ filter: grayscale(0) brightness(1.05); }
@media (max-width: 980px){
  .logo-wall{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px){
  .logo-wall{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ————————————————————————————————
   07c RÄUMLICHKEITEN — horizontal scroll gallery
   ─────────────────────────────────────────────
   Same layout on desktop and mobile: every tile shares one fixed
   pixel height; its width follows the image's natural aspect-ratio.
   The strip scrolls horizontally inside .sp-stage, and two soft
   arrow buttons signal that the user can pan through it.
———————————————————————————————— */
.spaces{
  position: relative;
  padding: clamp(40px, 6vh, 80px) 0;
  z-index: 6;
}
.sp-stage{
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.sp-track{
  display: flex;
  width: max-content;
  animation: sp-scroll 80s linear infinite;
  will-change: transform;
  touch-action: pan-y;
  pointer-events: none;
}
.sp-track:hover{
  animation-play-state: paused;
}
@keyframes sp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sp-tile{
  position: relative;
  flex: 0 0 auto;
  height: clamp(360px, 56vh, 600px);
  width: auto;
  aspect-ratio: var(--ar, 1.5);
  overflow: hidden;
  background: rgba(240,237,232,0.04);
}
.sp-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px){
  .sp-tile{ height: clamp(320px, 50vh, 460px); }
}

@media (max-width: 640px){
  .spaces{ padding: 48px 0 64px; }
  .sp-tile{ height: 52vh; max-height: 420px; }
}

/* ————————————————————————————————
   08 KONTAKT
———————————————————————————————— */
.contact{
  display:grid; grid-template-columns: 1fr 1fr; min-height:100vh;
}
.contact-left{
  background: var(--cyan); color: var(--wh);
  padding: clamp(80px,10vh,140px) clamp(24px,5vw,80px);
  display:flex; flex-direction:column; justify-content:space-between; gap:60px;
  position:relative; overflow:hidden;
}
.contact-left::before{
  content:''; position:absolute; right:-20%; top:-20%;
  width:70%; aspect-ratio:1; border-radius:999px;
  background: rgba(255,255,255,0.06); pointer-events:none;
}
/* Sparkle field — scattered decorative sparkles over both contact columns */
.sparkle-field{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.sparkle{
  position:absolute; width:18px; height:18px; opacity:0;
  will-change: transform, opacity;
}
.sparkle svg{ width:100%; height:100%; display:block; }
.sparkle.sm{ width:10px; height:10px; }
.sparkle.md{ width:16px; height:16px; }
.sparkle.lg{ width:26px; height:26px; }
.sparkle.xl{ width:34px; height:34px; }
.contact-right{ position:relative; }
.contact-right .sparkle svg{ color: var(--neon); }
.contact-left .sparkle svg{ color: #ffffff; }
.contact-left h2{ position:relative; }
.contact-left .contact-meta{
  position:relative; display:flex; flex-direction:column; gap:28px;
}
.contact-meta-row{ display:flex; flex-direction:column; gap:6px; }
.contact-meta-row .label{ color: rgba(240,237,232,0.7); }
.contact-meta-row a, .contact-meta-row .val{
  font-weight:900; font-size:clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing:-0.02em;
  position:relative; display:inline-block;
}
.contact-meta-row a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--neon);
  transform:scaleX(0); transform-origin:right; transition: transform .45s cubic-bezier(.7,.2,.2,1);
}
.contact-meta-row a:hover::after{ transform:scaleX(1); transform-origin:left; }
.contact-socials{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.contact-socials a{
  width:48px; height:48px; border-radius:999px; border:1px solid rgba(240,237,232,0.4);
  display:grid; place-items:center; color:var(--wh);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.contact-socials a svg{ width:22px; height:22px; }
.contact-socials a:hover{ background:var(--wh); color:var(--cyan); border-color:var(--wh); transform:translateY(-2px); }

.contact-right{
  background:var(--blk);
  padding: clamp(80px,10vh,140px) clamp(24px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center; gap:32px;
}
.contact-right .eyebrow{ color:var(--neon); }
.contact-right .eyebrow::before{ background:var(--neon); }
.form{ display:flex; flex-direction:column; gap:24px; max-width:520px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.field input, .field textarea{
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:1.05rem; font-weight:500; transition: border-color .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--neon); }
.field textarea{ resize:vertical; min-height:96px; }
.submit{
  margin-top:12px;
  padding:18px 28px; background:var(--neon); color:var(--blk);
  font-weight:900; text-transform:uppercase; letter-spacing:0.02em;
  border-radius:999px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:14px;
  transition: transform .3s, box-shadow .3s;
}
.submit:hover{ transform:translateY(-2px); box-shadow: 0 14px 40px -12px rgba(203,255,0,.5); }
.submit .arrow{
  width:24px; height:24px; border-radius:999px; background:var(--blk); color:var(--neon);
  display:grid; place-items:center; font-size:.7rem;
  transition: transform .3s;
}
.submit:hover .arrow{ transform: translateX(4px); }

@media (max-width: 900px){
  .contact{ grid-template-columns:1fr; }
}

/* ————————————————————————————————
   FOOTER
———————————————————————————————— */
.footer{
  background:var(--blk); padding: 64px clamp(20px,5vw,88px) 40px;
  border-top:1px solid var(--line); position:relative; overflow:hidden;
}
.footer-shout{
  font-weight:900; text-transform:uppercase; letter-spacing:-0.06em;
  font-size:clamp(4rem, 14vw, 18rem); line-height:0.85;
  color: rgba(240,237,232,0.06); margin: 40px 0 60px;
  white-space:nowrap; overflow:hidden;
}
.footer-grid{
  display:grid; grid-template-columns: auto 1fr auto; gap:40px; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted); font-size:0.74rem; letter-spacing:0.16em; font-weight:700;
}
.footer-logo{
  width:44px; height:44px; border-radius:10px; background:transparent; border:0;
  display:grid; place-items:center; overflow:hidden;
}
.footer-logo img{ width:100%; opacity:1; }
.footer-links{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.footer-links a{ color:var(--muted); transition: color .3s; }
.footer-links a:hover{ color:var(--neon); }

/* ————————————————————————————————
   GLOBAL RESPONSIVE FIXES
———————————————————————————————— */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px){
  /* Agency stats wrap on narrow screens */
  .agency-stats{ flex-wrap:wrap; gap:24px; justify-content:center; }

  /* AI solo section — drop the wide symmetric padding */
  .ai-grid.ai-solo .ai-sec-hd{ padding-left:0; padding-right:0; }

  /* TEAM — prevent heading overflow at tablet */
  .team-head{ max-width:100% !important; overflow:hidden; }
  .team-head .sec-hd h2{ font-size:clamp(2rem, 5.5vw, 4rem); text-wrap:balance; }

  /* UNITS — all grid panels to single column at tablet too */
  .uh-split,
  .uh-split-rev{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }
  .uh-split-rev{ flex-direction:column-reverse; }
  .uh-statement{
    width:100% !important;
    display:flex; flex-direction:column-reverse; gap:28px;
  }
  .uh-grid3{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }
  .uh-dual{
    width:100% !important;
    display:flex; flex-direction:column; gap:28px;
  }
  .uh-bleed{ width:100vw !important; }
  .uh-outro{ width:100vw !important; }
  .uh-split .uh-media,
  .uh-split-rev .uh-media{ min-height:50vw; max-height:none; width:100%; }
  .uh-media, .uh-stm-media{
    height:50vw; min-height:200px; width:100%; position:relative;
  }
  .uh-grid3-tiles{
    display:flex; flex-direction:column; gap:12px; height:auto; width:100%;
  }
  .uh-grid3-tiles .uh-ph{ height:44vw; min-height:160px; width:100%; }
  .uh-dual-media{
    display:flex; flex-direction:column; gap:12px;
    height:auto; width:100%; position:relative;
  }
  .uh-dual-ph1, .uh-dual-ph2{
    position:relative; width:100%; height:40vw; min-height:140px;
    top:auto; bottom:auto; left:auto; right:auto;
  }
  .uh-grid3-copy, .uh-dual-copy{ max-width:100%; }
}

/* ── Mobile (≤ 820px) ── */
@media (max-width: 820px){

  /* SECTION PADDING — desktop uses very generous vertical padding
     (clamp(120px, 18vh, 200px) etc.) which translates to 120–140px
     of empty space on phones at every section boundary. Compact it
     so the page reads as a dense narrative, not a series of huge
     vertical voids. */
  .agency-inner{ padding: 72px 22px 64px; gap: 28px; }
  .agency-sub{ margin: 14px 0 28px; }
  .agency-stats{ gap: 28px; margin-top: 4px; }

  .system{ padding: 64px 22px 72px; }
  .system-h2{ font-size: clamp(1rem, 6vw, 2.6rem); }
  .system-inner{ gap: 28px; }
  /* MOBILE NETWORK GRAPHIC — a custom SVG dot/line network
     generated by initSystemNetwork() in JS. Replaces the previous
     reuse of the Strategie unit's Noise.webp. Lives behind the
     headline + subline + body text (z-index: 0; body text sits at
     z-index 120). The container itself just hosts the SVG;
     positioning and animation are driven by JS. */
  .system-inner{ position: relative; }
  .system-network-mobile{
    display: block;
    position: absolute;
    left: 50%;
    /* Pushed further DOWN — there's empty space below the body
       copy on mobile that should hold the network as a footer
       graphic. -55 % bottom puts the majority of it below the
       section's padding edge for that "signature glyph" feel. */
    top: auto;
    bottom: -50%;
    transform: translateX(-50%);
    width: min(58vw, 260px);
    height: min(58vw, 260px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
  }
  .system-network-mobile svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .system-network-mobile .net-line{
    stroke: rgba(240, 250, 245, 0.22);
    stroke-width: 0.6;
    fill: none;
  }
  .system-network-mobile .net-dot{
    fill: rgba(255, 255, 255, 0.85);
  }

  .units-h{ padding: 0; }
  .units-pin{ padding: 0; }
  .uh-panel{ padding: 64px 22px 56px !important; gap: 24px !important; }
  .uh-intro{ padding: 88px 22px 56px !important; }

  .ai{ padding: 72px 22px 80px !important; }

  .team{ padding: 72px 22px 96px !important; }
  .team-head{ margin-bottom: 32px; }

  .trust{ padding: 72px 22px 64px !important; }
  .trust-quote{ margin-bottom: 40px !important; }
  .trust-quote blockquote{
    font-size: clamp(2.4rem, 13vw, 5.4rem);
    line-height: 1.1;
  }

  .contact{ padding: 0 !important; }
  .contact-left, .contact-right{ padding: 64px 24px 56px !important; }
  .contact-meta-row{ gap: 4px; }

  /* HERO AGENCY — remove the wide symmetric padding that breaks mobile */
  .hero-agency .sec-hd{ padding-left:0; padding-right:0; }
  .hero-agency .sec-hd h2{ font-size: clamp(2.2rem, 8vw, 4rem); }
  .hero-agency .mascot-hearts{ display:none; }

  /* NAV OVERLAY — tighter gap on small screens */
  .nav-overlay-inner{ gap:clamp(6px,1.5vh,12px); padding:28px 24px; }
  .nav-over-link{ font-size:clamp(2rem, 8.5vw, 3.5rem); }

  /* TEAM — fix heading overflow + stage height */
  .team-head{ max-width:100% !important; }
  .team-head .sec-hd h2{ font-size:clamp(2rem, 7vw, 3.5rem); text-wrap:balance; }
  .team-stage{
    /* pan-y lets the page scroll vertically while still allowing
       horizontal taps on bubbles. `touch-action: none` (old) blocked
       scroll entirely; `manipulation` also swallowed scroll on iOS
       once the stage filled the viewport. */
    touch-action: pan-y;
  }
  .bubble{
    width: 78px; height: 78px;
    /* Without `pointer-events:auto` the bubble's tap target can be
       eaten by Lenis's wheel/touch listener in some Safari builds. */
    pointer-events: auto;
    /* Bubbles themselves must also allow vertical pan, otherwise
       starting a swipe on a bubble blocks scroll. */
    touch-action: pan-y;
  }
  .bubble .b-overlay b{ font-size:0.72rem; }
  .bubble .b-overlay span{ font-size:0.58rem; }

  /* TRUST — smaller quote margin on mobile */
  .trust-quote{ margin-bottom:64px; }
  .trust-body{ padding:0 4px; }

  /* FLIP GRID — 3 columns on mobile */
  .flip-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }

  /* CONTACT — meta font-size fix */
  .contact-meta-row a,
  .contact-meta-row .val{ font-size:clamp(1.1rem,5vw,1.4rem); }
  .contact-socials{ justify-content:center; }

  /* FOOTER — stack 3-col grid */
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }
  .footer-links{ justify-content:center; }
  .footer-shout{ font-size:clamp(3.5rem,12vw,8rem); margin:24px 0 40px; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px){
  /* agency stats single row with smaller text */
  .stat .num{ font-size:clamp(2rem,8vw,2.8rem); }

  /* contact left padding */
  .contact-left, .contact-right{ padding:60px 24px; }

  /* flip grid — 2 cols on very small */
  .flip-grid{ grid-template-columns:repeat(2,1fr); }

  /* footer */
  .footer{ padding:48px 20px 32px; }
}

/* ————————————————————————————————
   UTILITIES
———————————————————————————————— */
.hidden{ display:none !important; }
[data-split]{ visibility:hidden; }
[data-split].is-ready{ visibility:visible; }

/* ————————————————————————————————
   GLOBAL TEXT CENTERING
———————————————————————————————— */
section .sec-hd,
section > .units-head,
section > .team-head,
section > .trust-head,
section > .contact-head,
section .agency-single,
section .ai-grid,
section .trust-inner{
  /* containers */
}
.agency-single,
.agency-single > *,
.ai-grid,
.ai-copy,
.team-head,
.trust-inner,
.trust-head,
.trust-quote,
.trust-logos,
.contact-left,
.contact-right{
  text-align: center;
}
.agency-single{ margin-left:auto; margin-right:auto; }
.agency-single p.body,
.ai-copy p.body,
.trust-quote{
  margin-left:auto !important;
  margin-right:auto !important;
}
.agency-stats,
.contact-socials,
.contact-meta,
.footer-links{
  justify-content:center;
}
.contact-meta-row{ justify-content:center; text-align:center; }
.sec-hd{ text-align:left; }  /* mascot layout depends on inline-block + right:0 */
.trust-head .sec-hd{ padding-left:210px; }  /* symmetric to padding-right so h2 centers */
.team-head .sec-hd{ padding-left:210px; }   /* symmetric so headline centers over body */
.team-head p.body{ margin-left:auto; margin-right:auto; }
.trust-head .sec-hd h2,
.team-head .sec-hd h2,
.ai-grid.ai-solo .ai-sec-hd h2{ text-align:center; }

/* Units rows keep their grid layout; just center the text cells that read as prose */
.u-callout{ /* stays left-aligned inside its cell */ }

/* Let the big Trust/Team headlines use the full centered width
   — the sec-hd padding is only there to reserve space for the mascot.
   Stop it from squeezing the h2 into a narrow column. */
.trust-head .sec-hd,
.team-head .sec-hd{
  padding-left: 0;
  padding-right: 0;
  display: block;
  position: relative;
  width: 100%;
}
.trust-head .sec-hd h2,
.team-head .sec-hd h2{
  max-width: none;
  margin: 0 auto;
  text-wrap: balance;
}
/* Re-anchor the mascots at the top-right of the section header */
.trust-head .mascot-handshake,
.team-head .mascot-people{
  right: 8px; top: -12px; left: auto;
}
.team-head{ max-width: 1100px; margin-left:auto; margin-right:auto; }

/* "Jahre." in pink inside the trust quote */
.trust-quote blockquote .trust-jahre{
  color: var(--pink, #FF2D87);
  font-style: normal;
}


/* Units intro subline — same size/weight as the trust section quote */
.uh-intro-subline{
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--wh);
  margin-top: 18px;
  position: relative; z-index: 2;
}

/* "Unsere Units" title + intro bubble cluster */
.uh-intro-title{ position: relative; display: inline-block; z-index: 2; }
.uh-intro-text{ position: relative; z-index: 2; }

/* Intro cluster — scoped to the first (intro) panel via JS-driven fade */
.uh-intro-cluster{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  will-change: opacity;
}
.uh-bubble-intro{
  opacity: 0;
  transform: scale(0);
}
.uh-bubble{
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) * -0.5);
  margin-top:  calc(var(--s) * -0.5);
  background: var(--c);
  border-radius: 999px;
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: transform;
  filter: blur(0.4px);
}

/* Per-panel bubble — sits behind each unit's headline */
.uh-panel-bubble{
  display: none;
}
.uh-panel-bubble--legacy{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--s, 300px);
  height: var(--s, 300px);
  transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px)));
  background: var(--c, var(--u-color));
  border-radius: 999px;
  opacity: 0.9;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.4px);
}
.uh-title, .uh-stm-title, .uh-bleed-title{ position: relative; }
.uh-title-text{ position: relative; z-index: 1; }

.units-h .uh-track{ position: relative; z-index: 1; }

/* ── FLIP-CARD LOGO GRID ── */
.flip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(100px,11vw,180px),1fr));
  gap:clamp(6px,1.2vw,18px);
  width:100%; max-width:1100px;
  margin:40px auto 0;
  padding:0;
  position:relative; z-index:1;
}
.flip-card{ aspect-ratio:1; perspective:900px; cursor:default; }
.flip-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; border-radius:12px;
  animation:logoFlip 6s ease-in-out infinite;
}
.flip-face{
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.flip-face img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
.flip-face.flip-back{ transform:rotateY(180deg); }
@keyframes logoFlip{
  0%  {transform:rotateY(0deg);}
  40% {transform:rotateY(0deg);}
  50% {transform:rotateY(90deg);}
  60% {transform:rotateY(180deg);}
  90% {transform:rotateY(180deg);}
  100%{transform:rotateY(360deg);}
}
@keyframes logoWobble{
  0%  {transform:rotate(0) scale(1);}
  20% {transform:rotate(-2.5deg) scale(1.04);}
  50% {transform:rotate(2deg) scale(1.05);}
  75% {transform:rotate(-1deg) scale(1.03);}
  100%{transform:rotate(0) scale(1);}
}

/* ═══════════════════════════════════
   HERO MOODBOARD
═══════════════════════════════════ */
#heroMoodboard{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
  opacity:0; will-change:opacity;
}
#mbStars{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.mb-frag{ position:absolute; opacity:0; will-change:opacity,transform; }

/* Tile positions */
.mb-ta{ width:54vw;height:32vh;left:-6vw;top:2vh; }
.mb-tb{ width:28vw;height:46vh;right:-3vw;top:1vh; }
.mb-tc{ width:26vw;height:26vw;left:21vw;top:24vh; }
.mb-td{ width:32vw;height:22vh;right:4vw;bottom:7vh; }
.mb-te{ width:24vw;height:24vw;left:8vw;bottom:5vh; }

/* Tile visuals */
.mb-tile .mb-tile-inner{
  width:100%;height:100%;border-radius:10px;overflow:hidden;
}
.mb-ta{ background:
    repeating-linear-gradient(45deg,transparent,transparent 18px,rgba(245,166,35,.1) 18px,rgba(245,166,35,.1) 19px),
    linear-gradient(140deg,#1a0e02,#3d1e05,#7a3810);
  border-radius:10px;}
.mb-tb{ background:
    radial-gradient(circle at 38% 42%,rgba(0,155,189,.28) 0,transparent 55%),
    radial-gradient(circle at 74% 68%,rgba(203,255,0,.12) 0,transparent 45%),
    linear-gradient(160deg,#040a14,#0a0e1c);
  border:1px solid rgba(0,155,189,.2);border-radius:10px;}
.mb-tc{ background:
    radial-gradient(circle at 40% 44%,rgba(255,45,135,.22) 0,transparent 55%),
    linear-gradient(155deg,#150010,#2a0022,#3a0030);
  border-radius:10px;}
.mb-td{ background:
    radial-gradient(circle,rgba(240,237,232,.14) 1px,transparent 1px),
    linear-gradient(135deg,#06040a,#0e0c16);
  background-size:28px 28px,100% 100%;border-radius:10px;}
.mb-te{ background:
    linear-gradient(140deg,#1c1000,#3a2a00,#5a4000);
  border-radius:10px;}

/* Headline styles */
.mb-hl{
  font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  line-height:.88;color:var(--wh);mix-blend-mode:screen;
  font-family:'Avenir Next Cyr',system-ui,sans-serif;
}
.mb-hl-1{font-size:clamp(2.8rem,6.5vw,7rem);top:15vh;left:5vw;}
.mb-hl-2{font-size:clamp(1.4rem,3.8vw,4rem);top:10vh;right:4vw;text-align:right;color:var(--neon);}
.mb-hl-3{font-size:clamp(1.8rem,4.5vw,4.8rem);top:46vh;left:12vw;color:var(--cyan);}
.mb-hl-4{font-size:clamp(1.8rem,4.8vw,5rem);bottom:14vh;right:7vw;text-align:right;color:rgba(240,237,232,.5);}

/* Quote styles */
.mb-quote{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;font-size:clamp(.9rem,1.3vw,1.18rem);
  line-height:1.45;color:rgba(240,237,232,.8);
  max-width:28vw;
  border-left:2px solid rgba(240,237,232,.18);padding-left:16px;
  top:34vh;left:36vw;
}
.mb-quote.mb-quote-r{
  left:auto;right:6vw;top:52vh;border-left:0;
  border-right:2px solid rgba(240,237,232,.18);
  padding-left:0;padding-right:16px;text-align:right;
}
.mb-quote cite{
  display:block;margin-top:8px;font-style:normal;
  font-size:.72em;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,237,232,.45);
  font-family:'Avenir Next Cyr',system-ui,sans-serif;font-weight:700;
}

/* Tag styles */
.mb-tag{
  font-size:clamp(.58rem,.82vw,.72rem);letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;
  padding:6px 13px;border-radius:999px;
  border:1px solid rgba(240,237,232,.2);color:rgba(240,237,232,.65);
  background:rgba(5,5,8,.55);backdrop-filter:blur(6px);
  white-space:nowrap;
}
.mb-tag-cy{border-color:rgba(0,155,189,.5);color:var(--cyan);}
.mb-tag-neon{border-color:rgba(203,255,0,.45);color:var(--neon);}
.mb-tag-pk{border-color:rgba(255,45,135,.45);color:var(--pk);}

/* Tag positions */
#mbT1{top:7vh;left:40vw;}
#mbT2{top:13vh;left:27vw;}
#mbT3{top:9vh;right:35vw;}
#mbT4{top:62vh;left:13vw;}
#mbT5{top:38vh;right:23vw;}
#mbT6{bottom:22vh;right:17vw;}
#mbT7{bottom:18vh;left:37vw;}

/* Line fragments */
.mb-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,237,232,.24),transparent);
}
#mbL1{width:26vw;top:44vh;left:27vw;}
#mbL2{width:18vw;top:66vh;left:53vw;}

/* ════════════════════════════════════════════════════════════
   GLOBAL FLOWING BACKGROUND
   A tall fixed gradient stack that translates with scroll, so
   colors continuously bleed from one section into the next.
   ════════════════════════════════════════════════════════════ */
#globalBg{
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: #0a0418;
}
#globalBg .bg-track{
  position: absolute;
  left: -10vw; right: -10vw; top: 0;
  width: 120vw;
  /* 9 sections * ~110vh of color territory + tail */
  height: 1100vh;
  will-change: transform;
  background:
    /* HERO neon portal */
    radial-gradient(ellipse 70% 9% at 50% 5%,  rgba(255,40,140,0.85), transparent 60%),
    radial-gradient(ellipse 55% 7% at 50% 7%,  rgba(232,40,80,0.55), transparent 65%),
    radial-gradient(ellipse 90% 8% at 50% 9%,  rgba(140,40,200,0.55), transparent 70%),

    /* AGENCY iridescent blooms */
    radial-gradient(ellipse 45% 7% at 18% 16%, rgba(150,110,255,0.85), transparent 65%),
    radial-gradient(ellipse 40% 6% at 82% 19%, rgba(40,210,235,0.70), transparent 65%),
    radial-gradient(ellipse 55% 7% at 50% 22%, rgba(255,90,180,0.55), transparent 70%),

    /* SYSTEM mint → lavender strip */
    radial-gradient(ellipse 50% 5% at 15% 28%, rgba(110,235,205,0.80), transparent 60%),
    radial-gradient(ellipse 55% 5% at 85% 31%, rgba(180,140,255,0.85), transparent 60%),

    /* UNITS deep purple plateau */
    radial-gradient(ellipse 60% 7% at 50% 38%, rgba(150,90,255,0.55), transparent 65%),
    radial-gradient(ellipse 70% 6% at 30% 44%, rgba(80,40,200,0.45), transparent 70%),

    /* AI coral + dusk */
    radial-gradient(ellipse 80% 5% at 50% 50%, rgba(255,80,110,0.65), transparent 60%),
    radial-gradient(ellipse 60% 6% at 75% 54%, rgba(120,80,220,0.65), transparent 65%),

    /* TEAM violet marquee */
    radial-gradient(ellipse 55% 6% at 20% 60%, rgba(220,80,220,0.65), transparent 65%),
    radial-gradient(ellipse 60% 7% at 80% 64%, rgba(110,70,220,0.70), transparent 65%),

    /* TRUST mint → lavender */
    radial-gradient(ellipse 50% 5% at 20% 72%, rgba(110,235,205,0.75), transparent 60%),
    radial-gradient(ellipse 55% 5% at 80% 75%, rgba(180,140,255,0.85), transparent 60%),

    /* CONTACT (CTA) pink → purple → cobalt */
    radial-gradient(ellipse 60% 5% at 20% 84%, rgba(255,110,170,0.95), transparent 60%),
    radial-gradient(ellipse 60% 5% at 55% 87%, rgba(190,90,210,0.85), transparent 60%),
    radial-gradient(ellipse 60% 5% at 85% 90%, rgba(90,90,230,0.85), transparent 60%),

    /* base spine: smooth top → bottom color trip */
    linear-gradient(180deg,
      #0a0418  0%,
      #160a30  9%,
      #1a0d40  16%,
      #2a2a55  24%,
      #1a3a3e  30%,
      #100a28  38%,
      #2a0e26  48%,
      #1d0a32  54%,
      #1c0a3a  60%,
      #220e44  66%,
      #1a3a3e  72%,
      #2c2a58  78%,
      #ff6a9a  84%,
      #c060c8  88%,
      #6260e0  92%,
      #1a0d40  97%,
      #050208 100%
    );
}
#globalBg .bg-noise{
  position:absolute; inset:-5%;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity:.35;
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — bolder accent overlays
   Sections become semi‑transparent so the global bg flows
   through, but each carries a strong local accent that
   intensifies its identity.
   ════════════════════════════════════════════════════════════ */

/* 01 HERO — strong neon portal bloom over deep midnight */
.hero-pin{
  background:
    radial-gradient(ellipse 90% 70% at 50% 70%, rgba(255,45,135,0.55), transparent 55%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(232,51,74,0.40), transparent 60%),
    radial-gradient(ellipse 95% 75% at 50% 100%, rgba(140,40,200,0.45), transparent 70%),
    radial-gradient(ellipse 80% 60% at 8% 18%,  rgba(10,4,28,0.92), transparent 70%),
    radial-gradient(ellipse 80% 60% at 92% 18%, rgba(10,4,28,0.92), transparent 70%),
    linear-gradient(180deg, rgba(10,4,24,0.55) 0%, rgba(22,10,46,0.30) 100%) !important;
}
.hero-vignette{
  background:
    radial-gradient(ellipse at 50% 55%, transparent 0%, rgba(9,4,24,.40) 60%, rgba(6,2,16,.85) 100%);
}

/* 02 AGENCY (= ABOUT) — iridescent indigo dusk, transparent base */
.agency{
  background:
    radial-gradient(ellipse 50% 45% at 15% 28%, rgba(170,130,255,0.50), transparent 65%),
    radial-gradient(ellipse 45% 40% at 85% 70%, rgba(40,210,235,0.40), transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,90,180,0.32), transparent 70%),
    linear-gradient(180deg, rgba(13,8,36,0.55) 0%, rgba(26,13,64,0.45) 100%) !important;
}
.agency::before{
  background:
    linear-gradient(118deg,
      transparent 0%, transparent 48%,
      rgba(255,255,255,0.06) 49%, rgba(255,255,255,0.06) 51%,
      transparent 52%, transparent 100%) !important;
}
.agency-left{ background: transparent !important; }

/* 03 SYSTEM — bold mint → violet horizontal flow */
.system{
  background:
    radial-gradient(ellipse 55% 45% at 12% 30%, rgba(110,235,205,0.55), transparent 65%),
    radial-gradient(ellipse 60% 50% at 88% 70%, rgba(190,140,255,0.55), transparent 65%),
    linear-gradient(96deg, rgba(26,58,62,0.55) 0%, rgba(44,42,88,0.40) 50%, rgba(58,37,112,0.45) 100%) !important;
}

/* 04 UNITS — deep purple plateau with topo lines */
.units-h{
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%,   rgba(190,140,255,0.40), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(140,70,220,0.35), transparent 70%),
    linear-gradient(180deg, rgba(12,8,32,0.55) 0%, rgba(16,10,40,0.50) 50%, rgba(10,6,24,0.55) 100%) !important;
  position: relative;
}
.units-h::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 38px,
      rgba(190,150,255,0.06) 38px, rgba(190,150,255,0.06) 39px,
      transparent 39px 78px),
    repeating-linear-gradient(65deg,
      transparent 0 60px,
      rgba(140,90,220,0.05) 60px, rgba(140,90,220,0.05) 61px,
      transparent 61px 120px);
  mix-blend-mode: screen; opacity:.8;
}
.units-h > *{ position:relative; z-index:1; }

/* 05 AI — coral panel feel with strong dusk-purple right side */
.ai{
  background:
    linear-gradient(180deg, rgba(255,90,120,0.42), rgba(255,90,120,0.10) 45%, transparent 70%),
    radial-gradient(ellipse 65% 55% at 78% 75%, rgba(140,80,230,0.55), transparent 65%),
    radial-gradient(ellipse 45% 38% at 18% 28%, rgba(255,120,150,0.40), transparent 65%),
    linear-gradient(115deg, rgba(42,14,38,0.55) 0%, rgba(29,10,50,0.50) 55%, rgba(22,10,58,0.50) 100%) !important;
}
.ai::before{
  background:
    linear-gradient(112deg,
      rgba(255,80,110,0.16) 0%,
      transparent 38%, transparent 64%,
      rgba(140,80,230,0.20) 100%) !important;
}

/* 06 TEAM — magenta/violet club-light atmosphere */
.team{
  background:
    radial-gradient(ellipse 55% 45% at 18% 25%, rgba(220,80,220,0.50), transparent 65%),
    radial-gradient(ellipse 60% 50% at 82% 80%, rgba(110,70,220,0.55), transparent 65%),
    radial-gradient(ellipse 50% 45% at 50% 55%, rgba(255,80,160,0.22), transparent 70%),
    linear-gradient(180deg, rgba(20,8,42,0.55) 0%, rgba(28,10,58,0.45) 50%, rgba(34,14,68,0.55) 100%) !important;
}
.team::before{
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,80,160,0.95) 18%,
    rgba(190,100,255,1) 50%,
    rgba(110,70,220,0.95) 82%,
    transparent 100%) !important;
}

/* 07 TRUST — bold pastel mint → lavender */
.trust{
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(110,235,205,0.55), transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 75%, rgba(190,140,255,0.60), transparent 65%),
    linear-gradient(110deg, rgba(26,58,62,0.45) 0%, rgba(44,42,88,0.40) 50%, rgba(58,37,112,0.45) 100%) !important;
}

/* 08 CONTACT (= CTA) — full-saturation pink → cobalt */
.contact-left{
  background:
    radial-gradient(ellipse 70% 80% at 0% 50%, rgba(255,110,170,0.85), transparent 60%),
    linear-gradient(95deg, rgba(255,106,154,0.95) 0%, rgba(192,96,200,0.85) 45%, rgba(98,96,224,0.85) 100%) !important;
  color: var(--wh) !important;
}
.contact-left::before{
  background: rgba(255,255,255,0.12) !important;
}
.contact-right{
  background:
    radial-gradient(ellipse 70% 80% at 100% 50%, rgba(98,96,224,0.55), transparent 65%),
    linear-gradient(95deg, rgba(98,96,224,0.55) 0%, rgba(64,48,160,0.50) 55%, rgba(26,13,64,0.55) 100%) !important;
}

/* 09 FOOTER — ink fade so the CTA glow above stays the climax */
.footer{
  background:
    linear-gradient(180deg, rgba(10,4,24,0.85) 0%, rgba(5,2,8,0.95) 100%) !important;
}

/* Body fallback */
html, body{ background: #0a0418; }

/* ════════════════════════════════════════════════════════════
   LAYERED PARALLAX TRANSITIONS
   Sections stack on increasing z-index, overlap via negative
   margins, and reveal incoming layers with soft radius lips
   or bold diagonal cuts. Box-shadows give physical elevation.
   ════════════════════════════════════════════════════════════ */
body{ background: #0a0418; }

/* every layered section sits on its own plane */
.hero,
.agency,
.system,
.units-h,
.team,
.trust,
.contact,
.footer{
  position: relative;
  isolation: isolate;
}

/* z-stack: each later section rides higher in 3D space */
.hero    { z-index: 1; }
.agency  { z-index: 2; }
.system  { z-index: 3; }
.units-h { z-index: 4; }
.team    { z-index: 5; }
.trust   { z-index: 6; }
.contact { z-index: 7; }
.footer  { z-index: 8; }

/* SOFT REVEAL — generous top radius + cast shadow on the layer below */
.agency,
.trust,
.contact{
  margin-top: clamp(-120px, -8vh, -60px);
  border-top-left-radius: clamp(28px, 4vw, 64px);
  border-top-right-radius: clamp(28px, 4vw, 64px);
  box-shadow:
    0 -50px 120px -30px rgba(0,0,0,0.55),
    0 -1px 0 rgba(255,255,255,0.06) inset;
  overflow: hidden; /* clip the radius cleanly */
}
/* Units & System are kept structurally untouched — GSAP pins live there
   (units = horizontal scroll, system = bubble overlay anchor). */

.contact{
  border-top-left-radius: clamp(40px, 6vw, 96px);
  border-top-right-radius: clamp(40px, 6vw, 96px);
  box-shadow:
    0 -70px 160px -30px rgba(0,0,0,0.65),
    0 -1px 0 rgba(255,255,255,0.10) inset;
}

/* BOLD GRAPHIC CUT — diagonal slant edges (Team only — System hosts the
   bubble overlay which can extend beyond its bounds, so no clip-path there) */
.system{
  margin-top: clamp(-100px, -7vh, -50px);
  padding-top: clamp(120px, 14vh, 180px) !important;
}
.team{
  margin-top: clamp(-100px, -7vh, -50px);
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%);
  padding-top: clamp(120px, 14vh, 180px) !important;
}

/* Hero needs a bottom transition — soft fade so agency rolls over it */
.hero::after{
  content: ""; position: absolute; left:0; right:0; bottom:-1px;
  height: 18vh; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, transparent 0%, rgba(13,8,36,0.65) 60%, rgba(13,8,36,0.95) 100%);
}

/* ════════════════════════════════════════════════════════════
   FEATHERED EDGES — kill the hard horizontal seams
   Every layered section gets a soft fade band at its TOP that
   dissolves the rounded-corner edge into the global bg below,
   plus a stronger bleed band at the BOTTOM so the next section
   visibly slides over it. The bleed sits ABOVE the radius so
   the overlap reads as intentional, not as a clipping artifact.
   ════════════════════════════════════════════════════════════ */

/* TOP feather: a soft inverse fade INSIDE the layer that smooths the edge */
.agency::after,
.system::after,
.team::after,
.trust::after{
  content:""; position:absolute; left:0; right:0; top:-1px;
  height: 14vh; pointer-events:none; z-index:0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.02) 35%,
    transparent 100%);
  mix-blend-mode: screen;
}

/* BOTTOM bleed: the section's color extends as a soft glow PAST its edge,
   so the next layer slides over a halo instead of a hard cut. Sits above
   the section so it's not clipped by overflow:hidden / radius. */
.agency,
.system,
.units-h,
.team,
.trust{
  /* allow bottom bleed to escape — keep top radius clipped via mask */
}
.agency .bleed-down,
.system .bleed-down,
.units-h .bleed-down,
.team .bleed-down,
.trust .bleed-down{ display:none; } /* placeholder if html bleeds added later */

/* Outer halo glow on each layered section's bottom — sits OUTSIDE the
   section (negative bottom) and is created via box-shadow on the section
   itself, in addition to the up-shadow from the next layer. */
.agency{ box-shadow:
  0 -50px 120px -30px rgba(0,0,0,0.55),
  0 60px 100px -30px rgba(150,110,255,0.30),
  0 -1px 0 rgba(255,255,255,0.07) inset !important; }
.system{ box-shadow:
  0 60px 100px -30px rgba(110,235,205,0.28); }
.units-h{ box-shadow:
  0 -50px 120px -30px rgba(0,0,0,0.55),
  0 60px 100px -30px rgba(190,140,255,0.30),
  0 -1px 0 rgba(255,255,255,0.07) inset !important; }
.team{ box-shadow:
  0 60px 110px -30px rgba(220,80,220,0.32); }
.trust{ box-shadow:
  0 -50px 120px -30px rgba(0,0,0,0.55),
  0 60px 100px -30px rgba(190,140,255,0.34),
  0 -1px 0 rgba(255,255,255,0.07) inset !important; }
.contact{ box-shadow:
  0 -70px 160px -30px rgba(0,0,0,0.65),
  0 60px 120px -30px rgba(255,110,170,0.40),
  0 -1px 0 rgba(255,255,255,0.10) inset !important; }

/* Bigger, unmistakably intentional overlap — push the layered sections
   higher so the radius lip clearly sits ON TOP of the previous color. */
.agency,
.trust,
.contact{
  margin-top: clamp(-280px, -22vh, -160px) !important;
  border-top-left-radius: clamp(60px, 8vw, 140px) !important;
  border-top-right-radius: clamp(60px, 8vw, 140px) !important;
}
.system, .team{
  margin-top: clamp(-220px, -18vh, -120px) !important;
}

/* ════════════════════════════════════════════════════════════
   HIGH-CONTRAST PER-SECTION PALETTE — make adjacent sections
   read as obviously different so the overlap is unmistakably
   intentional. Each section commits to a single dominant hue.
   ════════════════════════════════════════════════════════════ */

/* AGENCY — saturated indigo / violet */
.agency{
  background:
    radial-gradient(ellipse 70% 60% at 18% 30%, rgba(180,130,255,0.85), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(80,200,235,0.75), transparent 60%),
    linear-gradient(165deg, #1a0a4a 0%, #2a0e6a 55%, #1a0d40 100%) !important;
}

/* SYSTEM — bold teal / mint band — totally different from agency */
.system{
  background:
    radial-gradient(ellipse 65% 55% at 20% 40%, rgba(80,235,200,0.85), transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 65%, rgba(140,255,180,0.55), transparent 65%),
    linear-gradient(120deg, #043a3a 0%, #066a55 50%, #0a8a60 100%) !important;
}

/* UNITS — deep wine / aubergine */
.units-h{
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,90,160,0.45), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(140,40,120,0.45), transparent 70%),
    linear-gradient(180deg, #2a0828 0%, #380a3a 50%, #1a061c 100%) !important;
}

/* TEAM — saturated magenta / hot pink */
.team{
  background:
    radial-gradient(ellipse 60% 50% at 18% 25%, rgba(255,80,180,0.75), transparent 60%),
    radial-gradient(ellipse 65% 55% at 82% 80%, rgba(190,40,160,0.75), transparent 60%),
    linear-gradient(170deg, #5a0a4a 0%, #8a0e5a 55%, #3a0830 100%) !important;
}

/* TRUST — bright cyan / electric blue */
.trust{
  background:
    radial-gradient(ellipse 65% 55% at 22% 32%, rgba(40,210,235,0.55), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 75%, rgba(90,160,255,0.45), transparent 65%),
    linear-gradient(180deg, #062c4a 0%, #0a4a7a 100%) !important;
  background-attachment: fixed, fixed, fixed !important;
}

/* CONTACT — full-saturation sunset: pink → coral → cobalt */
.contact-left{
  background:
    radial-gradient(ellipse 80% 90% at 0% 50%, rgba(255,90,140,0.95), transparent 60%),
    linear-gradient(95deg, #ff4080 0%, #ff5a4a 45%, #c060c8 75%, #5040e0 100%) !important;
}
.contact-right{
  background:
    radial-gradient(ellipse 80% 90% at 100% 50%, rgba(80,80,230,0.85), transparent 60%),
    linear-gradient(95deg, #5040e0 0%, #2a1a8a 55%, #0a0628 100%) !important;
}

/* MUCH stronger colored bottom-halo on every section so the seam
   between two distinct hues reads as a deliberate dissolve. */
.agency{ box-shadow:
  0 -50px 120px -30px rgba(0,0,0,0.55),
  0 90px 140px -10px rgba(180,130,255,0.55),
  0 -1px 0 rgba(255,255,255,0.07) inset !important; }
.system{ box-shadow:
  0 90px 140px -10px rgba(80,235,200,0.55) !important; }
.units-h{ box-shadow:
  0 90px 140px -10px rgba(255,90,160,0.45) !important; }
.team{ box-shadow:
  0 90px 140px -10px rgba(255,80,180,0.55) !important; }
.trust{ box-shadow: none !important; }
.contact{ box-shadow:
  0 90px 160px -10px rgba(255,90,140,0.55),
  0 -1px 0 rgba(255,255,255,0.10) inset !important; }

/* Footer sits flush on the CTA, no overlap needed but soften the seam */
.footer{ margin-top: 0; }

/* Re-enable horizontal scroll inside units (clip-path can suppress overflow visuals) */
.units-h .units-pin{ position: relative; z-index: 1; }

/* INNER CONTENT PARALLAX — set via JS below */
.parallax-bg{
  position: absolute; inset: -10% -5%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.agency > *,
.system > *,
.units-h > *,
.team > *,
.trust > *,
.contact > *{
  position: relative; z-index: 1;
}

/* Subtle inner translate driven by --p (scroll progress, -1..+1) */
.depth-shift{
  transform: translate3d(0, calc(var(--p, 0) * -140px), 0);
  will-change: transform;
}
.depth-shift-strong{
  transform: translate3d(0, calc(var(--p, 0) * -260px), 0) scale(calc(1 + var(--p, 0) * 0.07));
  will-change: transform;
}
/* Disable inner depth-shift transforms inside units (GSAP horizontal pin) */
.units-h .depth-shift,
.units-h .depth-shift-strong,
.units-h.depth-shift,
.units-h.depth-shift-strong{ transform: none !important; }

/* 3D TILT — sections sit on a perspective stage and lean as they pass.
   NOTE: perspective is applied INSIDE each section's transform function
   (perspective(1800px)) — NOT on body. A body-level perspective creates a
   containing block for ALL fixed descendants, which breaks the nav, the
   bubble overlay, etc. Don't put perspective on body. */
.team,
.contact{
  transform-origin: 50% 50%;
  /* tilt: -1 (below viewport) leans BACK and down, +1 (above) leans FORWARD */
  transform:
    perspective(1400px)
    translate3d(0, calc(var(--p, 0) * -90px), calc(var(--p, 0) * -120px))
    rotateX(calc(var(--p, 0) * -12deg))
    scale(calc(1 - (var(--p, 0) * var(--p, 0)) * 0.06));
  will-change: transform;
}
/* Team section opts out of the perspective/parallax — the bubbles
   are their own dynamic motion and the section reads better as a flat plane. */
.team{ transform: none !important; }
.team .depth-shift,
.team .depth-shift-strong{ transform: none !important; }

/* ════════════════════════════════════════════════════════════
   VARIED, NON-STRAIGHT TOP EDGES — each section's transition is
   a different shape so it reads as deliberate composition, not
   a repeating accident. Achieved via clip-path on the section
   itself (overflow:hidden already in place from earlier rules).
   Padding-top is bumped so content clears the clipped area.
   ════════════════════════════════════════════════════════════ */

/* AGENCY — gentle asymmetric curve, dipping deeper on the right */
.agency{
  border-radius: 0 !important;
  clip-path: path('M 0 80, Q 25% 0, 50% 30, T 100% 60, L 100% 100%, L 0 100% Z') !important;
  -webkit-clip-path: path('M 0 80, Q 25% 0, 50% 30, T 100% 60, L 100% 100%, L 0 100% Z') !important;
  padding-top: clamp(140px, 18vh, 220px) !important;
}

/* TRUST — flat, no clip-path, flows seamlessly into brand showroom */
.trust{
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  padding-top: clamp(120px, 14vh, 200px) !important;
  padding-bottom: 0 !important;
}

/* CONTACT — bold soft S-curve at the top */
.contact{
  border-radius: 0 !important;
  clip-path: path('M 0 40, C 20% 140, 40% -20, 50% 60, C 60% 140, 80% -20, 100% 60, L 100% 100%, L 0 100% Z') !important;
  -webkit-clip-path: path('M 0 40, C 20% 140, 40% -20, 50% 60, C 60% 140, 80% -20, 100% 60, L 100% 100%, L 0 100% Z') !important;
  padding-top: clamp(180px, 22vh, 280px) !important;
}

/* SYSTEM — soft diagonal slant top (pointing down-right), no clip-path on
   parent (would clip bubble overlay), so we use a ::before mask layer
   that paints the section color in a triangular wedge over the previous
   section's bottom — same visual effect, no overflow risk. */
.system{
  position: relative;
  overflow: visible !important;
}
.system::before{
  content:""; position:absolute; left:0; right:0;
  /* Extend the green well ABOVE the section box so the fade actually
     dissolves into the previous section, rather than sitting flush
     with the section's own hard top edge (top:-1px did nothing —
     the section bg still painted a sharp horizontal line underneath). */
  top: clamp(-220px, -18vh, -140px);
  height: clamp(220px, 22vh, 320px);
  background: inherit;
  /* Predominantly vertical fade (transparent at the very top → opaque
     where it meets the section's own bg at the bottom) so the seam
     dissolves evenly across the whole width. A slight diagonal tilt
     (170deg) keeps a touch of asymmetric character on the left side
     without re-introducing the hard right-hand edge. */
  -webkit-mask-image: linear-gradient(170deg,
    transparent 0%,
    transparent 12%,
    rgba(0,0,0,0.25) 38%,
    rgba(0,0,0,0.65) 62%,
    #000 88%, #000 100%);
  mask-image: linear-gradient(170deg,
    transparent 0%,
    transparent 12%,
    rgba(0,0,0,0.25) 38%,
    rgba(0,0,0,0.65) 62%,
    #000 88%, #000 100%);
  z-index: 0; pointer-events:none;
}

/* TEAM — keep the existing diagonal but reverse direction so it
   contrasts with system above it (now slants down-LEFT) */
.team{
  clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%) !important;
  padding-top: clamp(140px, 16vh, 200px) !important;
}
/* Hero, Units and System stay flat — they host pinned/fixed-overlay layouts
   that break under transformed ancestors. */
.hero, .units-h, .system{ transform: none; }

/* Stronger shadow when tilted to sell the elevation */
.agency,
.units-h,
.trust,
.contact{
  box-shadow:
    0 calc(var(--p, 0) * -30px - 50px) calc(80px + (var(--p, 0) * 60px)) -20px rgba(0,0,0,0.65),
    0 -1px 0 rgba(255,255,255,0.07) inset;
}

@media (max-width: 820px){
  /* On phones, ease the overlap so layouts don't fight */
  .agency, .units-h, .trust, .contact{
    margin-top: clamp(-72px, -5vh, -32px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    /* padding-bottom: 4em; */
  }
  .system, .team{
    margin-top: -36px;
    clip-path: none;
    padding-top: 64px !important;
  }
  /* Section padding overrides — the desktop "varied top edges"
     block above sets large clamp(120-180px) !important padding-top
     values to push content past each section's decorative top
     clip-path. On phones those clip-paths are mostly disabled and
     the page reads better with tight section starts. */
  .agency{ padding-top: 72px !important; padding-bottom: 0 !important; }
  .trust{  padding-top: 72px !important; padding-bottom: 56px !important; }
  .contact{ padding-top: 0 !important; }
  .team{ padding-bottom: 96px !important; }
  /* Disable 3D tilt + heavy parallax on mobile — preserve readability */
  .agency, .system, .units-h, .team, .trust, .contact{
    transform: none !important;
  }
  .depth-shift, .depth-shift-strong{ transform: none !important; }
}

/* ════════════════════════════════════════════════════════════
   TRUSTED BY — editorial customer list (replaces .flip-grid)
   ════════════════════════════════════════════════════════════ */
.trusted-by{
  position: relative;
  margin: 64px auto 0;
  max-width: 1320px;
  padding: 0 clamp(20px, 4vw, 60px);
}
.tb-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 18px; margin-bottom: clamp(20px, 4vh, 40px);
  border-bottom: 1px solid rgba(240,237,232,0.15);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(240,237,232,0.55); font-weight: 600;
}
.tb-stage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: clamp(440px, 60vh, 640px);
}
.tb-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: clamp(2px, 0.4vh, 6px);
}
.tb-item{
  font-family: var(--ff-display, var(--ff));
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.01em;
  color: rgba(240,237,232,0.28);
  cursor: pointer;
  transition: color .55s cubic-bezier(.2,.7,.2,1),
              transform .65s cubic-bezier(.2,.7,.2,1),
              opacity .55s ease, filter .55s ease;
  padding: 4px 0;
  position: relative;
  will-change: transform, color, filter;
}
.tb-item span{ display:inline-block; }
.tb-item::before{
  content:""; position:absolute; left:-22px; top:50%;
  width:10px; height:1px; background: var(--neon, #c6e94a);
  transform: translate(-12px, -50%) scaleX(0); transform-origin:left;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  opacity: 0;
}
.tb-item:hover{ color: rgba(240,237,232,0.55); }
.tb-item.is-active{
  color: #fff;
  transform: translateX(14px);
  filter: none;
}
.tb-item.is-active::before{
  transform: translate(0, -50%) scaleX(1);
  opacity: 1;
}
.tb-item.is-dim{ filter: blur(0.4px); opacity: 0.6; }

.tb-visual{
  position: sticky; top: 18vh;
  height: clamp(320px, 46vh, 480px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
}
.tb-glow{
  position:absolute; inset:-10% -20%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.10), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
  opacity: 0.8;
}
.tb-logo-stack{
  position: relative; width: 100%; height: 60%;
  display:flex; align-items:center; justify-content:center;
}
.tb-logo{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) scale(0.94);
  max-width: 60%; max-height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: blur(14px);
  transition:
    opacity .65s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1),
    filter .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
.tb-logo.is-active{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}
.tb-line{
  font-family: var(--ff);
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.08em;
  color: rgba(240,237,232,0.7);
  font-style: italic;
  text-align: center;
  max-width: 32ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.tb-line.is-visible{ opacity: 1; transform: translateY(0); }

@media (max-width: 820px){
  .tb-stage{ grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .tb-visual{ position: relative; top: auto; order: -1; height: 220px; }
  .tb-item{ font-size: clamp(1.4rem, 7vw, 2rem); }
  .tb-item.is-active{ transform: translateX(8px); }
}

/* ════════════════════════════════════════════════════════════
   LOGO WHEEL — cinematic typographic scroll
   ════════════════════════════════════════════════════════════ */
.lw-section{
  position: relative;
  width: 100%;
  background: var(--blk);
  z-index: 2;
}
/* ===== BRAND SHOWROOM (pinned scroll) ===== */
.brand-section{
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 75% 65% at 20% 25%, var(--brand-light, rgba(255,255,255,0.25)), transparent 60%),
    radial-gradient(ellipse 80% 70% at 85% 90%, var(--brand-dark, rgba(0,0,0,0.35)), transparent 65%),
    var(--brand-bg, #0a4a7a);
  transition: background .7s cubic-bezier(.2,.7,.2,1);
  z-index: 7;
  margin-top: -14vh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14vh, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14vh, #000 100%);
}
/* Top veil disabled — using mask-image on the section itself for a true alpha fade. */
.brand-section::before{ content: none; }
.brand-section > *{ position: relative; z-index: 1; }
.brand-pin{
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
/* fade only a small sliver at the top so logos remain whole */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}
.brand-pin-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0 clamp(40px, 6vw, 88px);
  box-sizing: border-box;
}
.brand-stage{ height: 100%; }
.brand-copy{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.brand-copy-eyebrow{
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  letter-spacing: 0.04em;
  color: rgba(240,237,232,0.55);
  margin: 0 0 12px;
}
.brand-copy-body{
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.55;
  color: rgba(240,237,232,0.78);
  margin: 0 auto;
  max-width: 64ch;
}
.brand-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.brand-logo-display{
  position: relative;
  width: min(98vw, 2200px);
  height: clamp(680px, 96vh, 1300px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
/* Logo wheel item — same scroll-wheel logic the brand names used.
   Each logo is absolutely centered; JS paints translate3d + rotateX
   + scale based on its distance from the focal index. The active
   (centered) logo renders at full size below; the neighbours are
   scaled to ~1/3 by paint() — i.e. the active reads ~3× the size
   of the inactive ones around it. */
.brand-logo{
  position: absolute;
  left: 50%; top: 50%;
  width: min(98vw, 2100px);
  height: clamp(520px, 94vh, 1180px);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transform-origin: center center;
  will-change: opacity, transform;
}
.brand-logo.is-active{ /* opacity + transform are driven by JS paint() */ }

/* Mobile/tablet: smaller wheel but same centered single-column layout. */
@media (max-width: 1100px){
  .brand-pin-inner{ padding: 60px 20px; gap: 24px; }
  .brand-logo-display{
    width: min(98vw, 1100px);
    height: clamp(540px, 84vh, 900px);
  }
  .brand-logo{
    width: 96vw;
    height: clamp(420px, 72vh, 760px);
  }
}
@media (max-width: 820px){
  .brand-pin-inner{ padding: 48px 16px; }
  .brand-logo-display{
    width: 100vw;
    height: clamp(440px, 76vh, 720px);
  }
  .brand-logo{
    width: 98vw;
    height: clamp(340px, 64vh, 540px);
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE UNITS — image stage + per-panel animation layers
   ─────────────────────────────────────────────────────────
   On phones the desktop horizontal pin is disabled (see initUnits).
   In its place: each unit panel stacks vertically; the unit image
   lives INSIDE its own panel slot, slides up out of the heading as
   the user scrolls into the panel, and runs a small unit-specific
   micro-animation. The global bubble-stage (desktop) and the original
   absolute .units-img-bg layer are hidden so they don't paint twice.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  /* The desktop bubble stage stays visible on mobile too — without
     its horizontal-pin ScrollTrigger the master timeline can't run,
     but the master + satellites still render at their intro pose
     (set via gsap.set in init), so the constellation appears
     decoratively above the unit panels. Mobile-specific scroll
     anim is added in initUnitsMobile() below. */
  /* (was: .global-bubble-stage{ display: none !important; }) */

  /* MOBILE VISIBILITY: hide the bubble stage by default and only
     reveal it while the user is actively scrolling through the
     Units section. Without this, the desktop pre-entry timeline
     fades the master in during the Hero / Agency / System
     sections too — on mobile that means a giant cyan bubble
     planted on top of "Wir treffen mitten ins Herz". The
     `.bubble-active` class is toggled from initBubbleAnim's
     mobile choreography ScrollTrigger (units-h section). */
  .global-bubble-stage{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
  }
  .global-bubble-stage.bubble-active{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease-out, visibility 0s linear 0s;
  }

  /* MOBILE Z-INDEX: bubble stage paints OVER unit panel content
     (text z-index:5, images inline). Bumped to 6 so the master
     bubble + satellites are visible on top of every unit while
     the per-unit mobile choreography runs. The exception is the
     Content (Unit 7) panel, where the polaroid needs to come out
     of the camera unobstructed — initUnitsMobile() toggles the
     `.bubble-under-units` class to drop the z-index back to 1
     while the user is scrolled into that panel. */
  .global-bubble-stage.is-entry-fixed{ z-index: 6 !important; }
  /* Mobile keeps the stage ABOVE units even on the Content panel —
     the bubble must paint IN FRONT OF the camera so it can bounce
     on the shutter. Polaroid emerge happens AFTER the bubble hides,
     so the bubble-under-units drop is unnecessary on mobile. */
  .global-bubble-stage.is-entry-fixed.bubble-under-units{ z-index: 6 !important; }
  /* The original images-bg container is just a holder of absolute
     children that get reparented into .uh-media slots by JS. Once
     reparented, this wrapper has nothing left to do. */
  .units-img-bg{
    position: absolute; left: 0; top: 0;
    width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
    pointer-events: none;
  }
  /* When an image lives inside a media slot, fill it and unwind any
     inline geometry that the desktop layer wrote during init. */
  .uh-media .uh-bg-img,
  .uh-media .uh-bg-cell{
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    transform: none;
    opacity: 1;
    overflow: visible;
  }
  /* Trade & Activation cart front layer (basket grid) — kept in
     .units-img-fg at the document level (NOT re-parented), but
     repositioned every frame by mobileAnimTrade() to sit pixel-
     aligned over the back cart image inside the unit-5 media
     slot. .units-img-fg overrides to position:fixed + a z-index
     above the bubble stage so the bubble (which paints on the
     stage at z-index 6) renders BETWEEN the back and front cart
     layers — i.e. visually inside the basket. */
  .units-img-fg{
    position: fixed !important;
    inset: auto !important;
    pointer-events: none;
    z-index: 7;
  }
  .units-img-fg .uh-bg-fg{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.18s ease-out;
  }
  .units-img-fg.is-cart-visible .uh-bg-fg{ opacity: 1; }
  /* Portrait / social wrap on mobile: no max-height cap; fill the slot. */
  .uh-media .uh-bg-img.uh-motiv-img--portrait,
  .uh-media .uh-motiv-social-wrap{ max-width: none; max-height: none; }
  /* Re-flow the food plate + cam scenes so they centre in the slot. */
  .uh-media .uh-food-plate-wrap{
    position: absolute; inset: 0; margin: auto;
    /* Doubled vs. the previous 80% — the plate now fills its slot
       to roughly 160% so it reads at the right scale alongside the
       text. The wrap is allowed to overflow the slot box; .uh-media
       has overflow:visible already so the plate just paints big. */
    width: 160%; height: 160%; aspect-ratio: 1 / 1;
  }
  .uh-media .uh-food-plate{
    /* Three stacked plates inside the wrap — make sure they all
       fill the wrap, not just the active one. */
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain;
  }
  .uh-media .uh-cam-wrap{
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    aspect-ratio: auto; max-height: none;
  }
  /* Strategie (unit-1) is the only unit that put the image in the
     panel background on desktop. On mobile, treat the .uh-media--bg
     slot like every other slot — inline, sized like a normal media. */
  #unit-1.uh-split--bgtext{
    display: flex !important; flex-direction: column; gap: 28px;
  }
  #unit-1.uh-split--bgtext .uh-media--bg{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 56vw !important;
    min-height: 220px; max-height: 360px;
    z-index: 0;
  }
  #unit-1.uh-split--bgtext .uh-bg-img.uh-motiv-img--noise{
    opacity: 0.85; mix-blend-mode: normal;
  }
  /* Each media slot is the per-panel motion layer the JS positions. */
  .uh-media-mob{
    position: relative;
    overflow: visible;
    will-change: transform, opacity;
  }
  /* Pop-out hearts for the Social unit. Pure absolute positioning,
     opacity + transform driven by the per-panel ScrollTrigger. */
  .mobile-heart-burst{
    position: absolute; inset: 0;
    pointer-events: none; z-index: 3;
    overflow: visible;
  }
  .mobile-heart-burst svg{
    position: absolute;
    width: 26px; height: 26px;
    fill: #FF2D87;
    opacity: 0;
    transform-origin: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.28));
    will-change: opacity, transform;
  }
  /* Camera shutter flash for the Content unit — confined to its slot
     instead of full-viewport so it doesn't strobe the whole page. */
  .mobile-flash{
    position: absolute; inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    will-change: opacity;
    border-radius: 12px;
  }
  /* Cam polaroid sits inside the cam-stage; on mobile the stage is
     position:relative inside the slot. Keep its width proportional. */
  .uh-media .cam-polaroid{
    width: 38%;
  }

  /* ── Unit 7 (Content & Production): camera UNDER text on mobile ──
     The polaroid emerges DOWNWARD out of the camera body. On the
     stacked mobile layout we therefore need the copy ABOVE the
     camera so the polaroid can drop into the slot without
     overlapping the text. DOM order stays [media, copy] for
     desktop's left/right split — on mobile we flex-reverse.
     Extra padding-bottom lifts the camera out of the .team section's
     overlap zone (.team has isolation:isolate + z-index:5 with a
     clamp(-220px,-18vh,-120px) negative margin-top, so z-index alone
     cannot fix the stacking — we need physical space below the camera
     to clear that overlap band). */
  #unit-7.uh-split{
    flex-direction: column-reverse;
    /* padding-bottom: clamp(240px, 30vh, 280px); */
  }

  /* ── Packaging (Unit 3): banana laid HORIZONTALLY as a SMILE ──
     The bubble slides LEFT → RIGHT across the banana as the user
     scrolls, acting as a slider that reveals the yellow peel via
     the existing --peel-reveal clip-path.
     Mechanism:
       1. Rotate the banana wrapper −90° (counter-clockwise) so
          the banana lays on its side with the curve opening
          UPWARD — reads as a smile, not a frown. After this
          rotation, the local top→bottom clip-path reveal of
          .uh-banane-paint reads visually as LEFT → RIGHT —
          exactly what we want the slider bubble to drive.
       2. Bump the rotated wrapper up with scale(1.4) so the
          banana feels properly sized in the wide mobile slot
          instead of getting letterboxed too aggressively. */
  .uh-media .uh-motiv-banane{
    transform: rotate(-90deg) scale(1.4);
    transform-origin: center center;
    width: 100%;
    height: 100%;
  }
  .uh-media .uh-motiv-banane .uh-banane{
    object-fit: contain;
  }
}

/* ════════════════════════════════════════════════════════════
   TOUCH / LOW-POWER OVERRIDES (iPad, phones, coarse pointer)
   Activated by html.is-touch-perf (detection script at top of head).
   ─────────────────────────────────────────────────────────
   Goal: keep ALL animations + visuals, only switch off the very
   few things that are nuclear on iOS Safari specifically:
     • background-attachment: fixed  (the textbook iOS perf bug)
     • the 1100vh #globalBg flowing-gradient layer (massive composite)
     • the heaviest 120-160 px box-shadow blurs (paint cost)
   Everything else (3-D parallax, depth-shift, units pin, mix-blend,
   backdrop-filter, clip-paths, every JS animation) stays ON.
   ════════════════════════════════════════════════════════════ */

/* ── Kill background-attachment: fixed (forces full repaint per
       scroll frame on iOS Safari — the worst single offender) ── */
html.is-touch-perf .trust{
  background-attachment: scroll, scroll, scroll !important;
}

/* ── Drop the 1100vh flowing-gradient parallax layer. It's a huge
       composited surface with 18+ radial-gradient stops; iPad GPU
       memory chokes on it. Section backgrounds carry the look. ── */
html.is-touch-perf #globalBg{ display: none !important; }
html.is-touch-perf body{ background: #0a0418; }

/* ── Bring the box-shadow blur radii down from 90-160 px to ~50 px.
       Visually nearly identical (the sections still look "lifted"),
       but ~3× cheaper to paint. ── */
html.is-touch-perf .agency{ box-shadow:
  0 -32px 70px -20px rgba(0,0,0,0.55),
  0 50px 80px -20px rgba(180,130,255,0.45),
  0 -1px 0 rgba(255,255,255,0.07) inset !important; }
html.is-touch-perf .system{ box-shadow:
  0 50px 80px -20px rgba(80,235,200,0.45) !important; }
html.is-touch-perf .units-h{ box-shadow:
  0 -32px 70px -20px rgba(0,0,0,0.55),
  0 50px 80px -20px rgba(255,90,160,0.40),
  0 -1px 0 rgba(255,255,255,0.07) inset !important;
  padding-bottom: 2em;
}
html.is-touch-perf .team{ box-shadow:
  0 50px 80px -20px rgba(255,80,180,0.45) !important; }
html.is-touch-perf .trust{ box-shadow: none !important; }
html.is-touch-perf .contact{ box-shadow:
  0 -42px 90px -20px rgba(0,0,0,0.6),
  0 50px 90px -20px rgba(255,90,140,0.50),
  0 -1px 0 rgba(255,255,255,0.10) inset !important; }

/* ════════════════════════════════════════════════════════════
   SOFT SECTION-TO-SECTION TRANSITIONS (override)
   ─────────────────────────────────────────────────────────
   Replaces hard clip-paths / diagonal cuts / S-curves with
   gentle alpha-mask fades so each section's color dissolves
   into the next — the same soft handoff as brand-section. The
   top of each layered section is transparent and overlaps the
   previous section's bottom (which is also softened), giving a
   smooth gradient of one hue into another instead of a hard
   horizontal seam.
   ════════════════════════════════════════════════════════════ */

/* Kill the hard graphic cuts on each transitioning section. */
.agency,
.units-h,
.team,
.trust,
.contact{
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* The system ::before wedge becomes a soft symmetrical vignette
   instead of a one-sided diagonal. */
.system::before{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.85) 75%,
    #000 100%) !important;
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.85) 75%,
    #000 100%) !important;
}

/* The agency ::before diagonal slant — fade it out, the section
   itself now uses a soft mask instead. */
.agency::before{ opacity: 0 !important; }

/* Soft TOP feather on every transitioning section — the first
   ~16vh of the section's own background fades from transparent
   to opaque, revealing the previous section underneath. */
.agency,
.system,
.team,
.trust{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.25) 6vh,
    rgba(0,0,0,0.75) 12vh,
    #000 18vh,
    #000 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.25) 6vh,
    rgba(0,0,0,0.75) 12vh,
    #000 18vh,
    #000 100%);
}
.contact{
  -webkit-mask-image: none;
          mask-image: none;
}

/* Brand-section already had its own mask; keep, but match the
   easing curve so the handoff from trust feels identical. */
.brand-section{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.25) 6vh,
    rgba(0,0,0,0.75) 12vh,
    #000 18vh,
    #000 100%) !important;
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.25) 6vh,
    rgba(0,0,0,0.75) 12vh,
    #000 18vh,
    #000 100%) !important;
}

/* Bigger overlap so the transparent-top zone actually sits over
   the previous section, not over empty page background. */
.agency,
.trust,
.contact{
  margin-top: clamp(-26vh, -22vh, -16vh) !important;
}
.system,
.team{
  margin-top: clamp(-22vh, -18vh, -14vh) !important;
}
.brand-section{
  margin-top: -22vh !important;
}

/* Pull content down past the fade band so nothing important gets
   ghosted by the transparency. The clip-paths used to need this
   too — now it's the mask band that demands the breathing room. */
.agency  { padding-top: clamp(22vh, 26vh, 320px) !important; }
.system  { padding-top: clamp(22vh, 26vh, 320px) !important; }
.team    { padding-top: clamp(22vh, 26vh, 300px) !important; }
.trust   { padding-top: clamp(20vh, 24vh, 280px) !important; }
.contact { padding-top: clamp(22vh, 26vh, 300px) !important; }

/* Tone the bottom box-shadow halos down — the mask already does
   most of the blending work, so the chunky colored glows below
   each section now read as overkill. */
.agency{ box-shadow:
  0 50px 100px -30px rgba(180,130,255,0.35),
  0 -1px 0 rgba(255,255,255,0.05) inset !important; }
.system{ box-shadow:
  0 50px 100px -30px rgba(80,235,200,0.32) !important; }
.units-h{ box-shadow:
  0 50px 100px -30px rgba(255,90,160,0.30),
  0 -1px 0 rgba(255,255,255,0.05) inset !important; }
.team{ box-shadow:
  0 50px 110px -30px rgba(255,80,180,0.35) !important; }
.trust{ box-shadow:
  0 50px 100px -30px rgba(120,180,255,0.30) !important; }
.contact{ box-shadow:
  0 50px 120px -30px rgba(255,110,170,0.35),
  0 -1px 0 rgba(255,255,255,0.06) inset !important; }

/* Touch-perf (iPad / phones) — same soft mask, but a tighter
   fade band so we don't lose too much screen real estate on
   small viewports. */
html.is-touch-perf .agency,
html.is-touch-perf .system,
html.is-touch-perf .team,
html.is-touch-perf .trust,
html.is-touch-perf .contact,
html.is-touch-perf .brand-section{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 4vh,
    rgba(0,0,0,0.85) 8vh,
    #000 12vh,
    #000 100%) !important;
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 4vh,
    rgba(0,0,0,0.85) 8vh,
    #000 12vh,
    #000 100%) !important;
}
/* mask-image on a position:fixed element (ScrollTrigger pin) forces the
   browser to composite the layer on every scroll frame — very expensive
   on mobile. The section-level mask already handles the visual fade. */
html.is-touch-perf .brand-pin{
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

@media (max-width: 820px){
  .agency,
  .trust,
  .contact{
    margin-top: clamp(-14vh, -10vh, -64px) !important;
  }
  .system,
  .team{
    margin-top: clamp(-12vh, -9vh, -48px) !important;
  }
  .brand-section{ margin-top: -12vh !important; }
  .agency  { padding-top: 14vh !important; }
  .system  { padding-top: 10vh !important; }
  .team    { padding-top: 8vh !important; }
  .trust   { padding-top: 14vh !important; }
  .contact { padding-top: 14vh !important; }
}

/* ════════════════════════════════════════════════════════════
   08 KONTAKT — UNIFIED (single column, no parallax sparkles,
   one merged sunset gradient that combines the old left+right)
   ════════════════════════════════════════════════════════════ */
.contact{
  display:block !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
  color: var(--wh) !important;
  /* No 3D tilt / "wegkippen" — section sits flat on the page */
  transform: none !important;
  perspective: none !important;
  /* Stable box-shadow so the section doesn't pulse on scroll either */
  box-shadow:
    0 -42px 90px -20px rgba(0,0,0,0.55),
    0 50px 110px -30px rgba(255,110,170,0.32),
    0 -1px 0 rgba(255,255,255,0.06) inset !important;
  /* Merge the two previous halves into ONE background.
     Pink/coral on the left bleed, cobalt/purple on the right bleed,
     same horizontal sunset gradient as before — but as a single plane. */
  background:
    radial-gradient(ellipse 55% 90% at 0% 50%, rgba(255,90,140,0.55), transparent 65%),
    radial-gradient(ellipse 55% 90% at 100% 50%, rgba(80,80,230,0.55), transparent 65%),
    linear-gradient(95deg, #ff4080 0%, #ff5a4a 38%, #c060c8 72%, #5040e0 100%) !important;
  padding: clamp(96px, 14vh, 180px) clamp(24px, 6vw, 96px) clamp(80px, 10vh, 140px) !important;
}
/* Also flatten the inner depth-shift drift the scroll script adds to direct children */
.contact .depth-shift,
.contact .depth-shift-strong,
.contact.depth-shift,
.contact.depth-shift-strong{
  transform: none !important;
}
/* Kill the per-column rules so they don't fight the unified background */
.contact .contact-left,
.contact .contact-right{
  all: unset;
  display: contents;
}
.contact .contact-left::before,
.contact .contact-right::before,
.contact .sparkle-field{ display:none !important; }

/* Inner constrained column */
.contact-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vh, 96px);
}

/* Headline block */
.contact .contact-head{ position: relative; }
.contact .contact-head .sec-hd{ display:inline-block; position:relative; }
.contact .contact-head h2{
  color: var(--wh);
  position: relative;
}

/* Form on the gradient — single column, generous spacing */
.contact .contact-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  max-width: none;
}
.contact .contact-form .field{ gap: 10px; }
.contact .contact-form .field--full{ grid-column: 1 / -1; }
.contact .contact-form .field label{
  color: rgba(255,255,255,0.78);
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
}
.contact .contact-form .field input,
.contact .contact-form .field textarea{
  color: var(--wh);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.32);
  font-size: 1.05rem; font-weight: 500;
  transition: border-color .3s;
}
.contact .contact-form .field input::placeholder,
.contact .contact-form .field textarea::placeholder{
  color: rgba(255,255,255,0.45);
}
.contact .contact-form .field input:focus,
.contact .contact-form .field textarea:focus{
  border-color: var(--neon);
}
.contact .contact-form .form-actions{ margin-top: 8px; }
.contact .contact-form .submit{
  background: var(--neon); color: var(--blk);
}
.contact .contact-form .submit .arrow{
  background: var(--blk); color: var(--neon);
}

/* Meta block — address, mail, socials in a clean row */
.contact .contact-meta{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 40px 56px;
  padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.contact .contact-meta-row{ display:flex; flex-direction:column; gap: 10px; text-align:left; }
.contact .contact-meta-row .label{
  color: rgba(255,255,255,0.7);
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
}
.contact .contact-meta-row a,
.contact .contact-meta-row .val{
  color: var(--wh);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em; line-height: 1.2;
}
.contact .contact-meta-row a::after{ background: var(--neon); }
.contact .contact-socials{
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.contact .contact-socials a{
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  display: grid; place-items: center; color: var(--wh);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.contact .contact-socials a:hover{
  background: var(--wh); color: #c0408a; border-color: var(--wh);
  transform: translateY(-2px);
}

/* Responsive — collapse form + meta on narrow viewports */
@media (max-width: 820px){
  .contact{
    padding: clamp(72px, 12vh, 120px) 22px clamp(64px, 9vh, 96px) !important;
  }
  .contact-inner{ gap: clamp(40px, 6vh, 64px); }
  .contact .contact-form{ grid-template-columns: 1fr; gap: 22px; }
  .contact .contact-meta{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
  }
  .contact .contact-meta-row,
  .contact .contact-meta{ text-align: left; justify-items: start; }
  .contact .contact-socials{ justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   FIXES — Räumlichkeiten / Kontakt-Übergang
   ─────────────────────────────────────────────────────────
   • Black gap between Marken-Showroom and the photo collage is
     gone: spaces is pulled up under brand-section's hard
     bottom edge (brand z-index 7 > spaces z-index 6 so the
     overlap reads as a clean handoff, no black strip).
   • Contact section uses a TIGHT mask + much smaller pull-up,
     so the sunset gradient no longer ghosts the lower half of
     the Räumlichkeiten photos. Hard-ish horizontal edge.
   • Kontakt-Headline ("Lasst uns sprechen!") is now centered
     horizontally inside its column instead of left-anchored to
     the inline-block .sec-hd. Spark mascot stays at top-right.
   ════════════════════════════════════════════════════════════ */
.spaces{
  margin-top: clamp(-12vh, -8vh, -48px);
  padding-top: 0 !important;
  /* Original padding-bottom (40-80px) left a strip of dark page
     background under the photos, which the contact's transparent
     mask top then revealed as a dark band between images and the
     sunset gradient. Drop it so the gradient meets the photos
     directly. */
  padding-bottom: 0 !important;
}
.contact{
  /* Smaller overlap with the previous section — photos stay
     visible, gradient doesn't bleed up onto them. */
  margin-top: clamp(-8vh, -6vh, -40px) !important;
  /* Very gentle fade on BOTH ends — no hard edge, no big
     ghosting halo. Top ~2vh feather into the photos, bottom
     ~2vh feather into the footer. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 2vh,
    #000 calc(100% - 2vh),
    transparent 100%) !important;
          mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 2vh,
    #000 calc(100% - 2vh),
    transparent 100%) !important;
  /* No dark drop-shadow above — it was reading as a hard
     horizontal line. Only a soft pink underglow remains. */
  box-shadow:
    0 50px 120px -30px rgba(255,110,170,0.30),
    0 -1px 0 rgba(255,255,255,0.05) inset !important;
  padding-top: clamp(72px, 10vh, 140px) !important;
}
html.is-touch-perf .contact{
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 1.5vh,
    #000 calc(100% - 1.5vh),
    transparent 100%) !important;
          mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 1.5vh,
    #000 calc(100% - 1.5vh),
    transparent 100%) !important;
  /* Override the dark upward drop-shadow (-42px 90px rgba(0,0,0,0.6))
     set in the touch-perf block above — that's what read as a hard
     shadow bar across the top of the contact section. */
  box-shadow:
    0 50px 90px -20px rgba(255,90,140,0.45),
    0 -1px 0 rgba(255,255,255,0.06) inset !important;
}

/* Centered "Lasst uns sprechen!" headline */
.contact .contact-head{
  text-align: center;
}
.contact .contact-head .sec-hd{
  display: block;
  width: min(1180px, calc(100vw - 44px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
.contact .contact-head .sec-hd h2{
  font-size: clamp(2.1rem, 6.4vw, 6.4rem);
  text-align: center;
  margin: 0 auto;
}
.contact .contact-head .line-mask,
.contact .contact-head .line{
  width: auto !important;
  max-width: 100%;
}
.contact .contact-head .line-mask{
  overflow-x: visible !important;
}

@media (max-width: 980px){
  .spaces{
    margin-top: clamp(-8vh, -5vh, -28px);
  }
  .contact{
    margin-top: clamp(-6vh, -4vh, -24px) !important;
  }
  .contact .contact-head .sec-hd{
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 820px){
  .spaces{
    display: none;
  }
  .contact{
    margin-top: clamp(-6vh, -4vh, -24px) !important;
    padding-top: clamp(56px, 8vh, 96px) !important;
  }
}