*{box-sizing:border-box}html{scroll-behavior:smooth;background:#050505}body{margin:0;background:#050505;color:#f5f5f3;font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}.hero{position:relative;height:100vh;min-height:720px;overflow:hidden;background:radial-gradient(circle at 60% 48%,#29251f 0,#11100e 38%,#030303 78%)}.studio,.overlay{position:absolute;inset:0}.light{position:absolute;top:0;width:2px;height:100%;background:#ffd6ae99;box-shadow:0 0 16px #ffbe8244,0 0 65px #ff9d5522}.l1{left:6%}.l2{right:13%}.shape{position:absolute;z-index:1;left:37%;top:10%;width:36%;height:42%}.shape:before{content:"";position:absolute;left:0;bottom:0;width:78%;height:48%;background:#eee;clip-path:polygon(0 66%,58% 66%,100% 0,100% 100%,0 100%)}.shape:after{content:"";position:absolute;right:0;top:0;width:18%;height:100%;background:#f4f4f2;clip-path:polygon(100% 0,100% 100%,0 100%,0 30%)}.car{position:absolute;z-index:3;left:5%;right:6%;bottom:8%;height:69%;display:flex;align-items:flex-end;justify-content:center}.car img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:brightness(.92) contrast(1.04)}.overlay{z-index:4;pointer-events:none;background:linear-gradient(90deg,#0008 0,transparent 38%),linear-gradient(0deg,#000c 0,transparent 50%,#0005 100%)}header{position:absolute;z-index:20;top:0;left:0;right:0;height:105px;padding:0 34px;display:grid;grid-template-columns:120px 1fr 180px;align-items:center}.menu{width:28px;height:20px;display:flex;flex-direction:column;justify-content:space-between}.menu i{height:2px;background:#eee;transition:.3s}.menu i:last-child{width:65%}.menu:hover i:last-child{width:100%}.logo{justify-self:center;display:flex;align-items:center;gap:14px;font-family:Orbitron,sans-serif;font-size:32px;letter-spacing:.05em}.logo b{font-weight:400}.mark{width:44px;height:31px;position:relative;transform:skew(-18deg)}.mark:before,.mark:after{content:"";position:absolute;width:27px;height:12px;border-radius:100% 0 100% 0;background:#f1f1ef}.mark:before{left:0;bottom:2px}.mark:after{right:0;top:2px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-width:174px;padding:15px 20px;border:1px solid #ffffffa0;font-size:13px;overflow:hidden;transition:transform .3s,color .35s,border-color .35s}.btn:before{content:"";position:absolute;inset:0;background:#f2f2ef;transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:-1}.btn:hover{transform:translateY(-4px);color:#080808;border-color:#f2f2ef}.btn:hover:before{transform:none}.solid{background:#f1f1ef;color:#111;border-color:#f1f1ef}.solid:before{background:#d9ff48}.topcta{justify-self:end}.left{position:absolute;z-index:10;left:34px;bottom:82px}.left h1{margin:0 0 38px;font-family:Orbitron,sans-serif;font-size:clamp(38px,4.1vw,67px);line-height:1.05;font-weight:400;letter-spacing:-.035em}.actions{display:flex;gap:24px}.right{position:absolute;z-index:10;right:44px;bottom:82px;width:300px}.right p{margin:0;color:#ffffffdc;font-size:15px;line-height:1.55}.round{margin-top:24px;width:44px;height:44px;border-radius:50%;border:1px solid #d5e330;color:#d5e330;display:grid;place-items:center;font-size:20px;transition:.35s}.round:hover{transform:rotate(45deg) scale(1.1);background:#d5e330;color:#050505}.after{min-height:80vh;padding:130px 7vw;background:#090909;border-top:1px solid #222}.after small{color:#d5e330;letter-spacing:.18em}.after h2{font-size:clamp(55px,8vw,130px);font-weight:300;letter-spacing:-.06em;line-height:.9;margin:20px 0}.contact{background:#050505}@media(max-width:850px){.hero{min-height:700px}header{height:80px;padding:0 20px;grid-template-columns:45px 1fr auto}.logo{font-size:18px;gap:8px}.mark{width:28px;height:21px}.topcta{min-width:auto;padding:11px}.topcta{font-size:0}.topcta span{font-size:18px}.shape{left:28%;width:62%}.car{left:-10%;right:-10%;bottom:20%;height:52%}.left{left:20px;right:20px;bottom:40px}.left h1{font-size:9vw;margin-bottom:25px}.right{display:none}.actions{gap:10px}.btn{min-width:0;padding:13px 14px;gap:14px;font-size:11px}}
/* Hero image update */
.hero-photo{position:absolute;inset:0;z-index:2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero .overlay{background:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.04) 70%),linear-gradient(0deg,rgba(0,0,0,.62) 0%,transparent 48%,rgba(0,0,0,.18) 100%)}

/* Mint interaction color */
.btn.solid:before{background:#ccffcc}
.round{border-color:#ccffcc;color:#ccffcc}
.round:hover{background:#ccffcc;color:#050505}
.after small{color:#ccffcc}

@media(max-width:850px){
  .hero-photo img{object-position:58% center}
}


/* HERO V2 — Fahrzeug optisch kleiner, knackig scharf, Randlicht reduziert */
.hero{
  background:#050505;
}
.hero-photo{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  background:#050505;
}
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  /* dunkelt gezielt die beiden hellen Außenbereiche ab */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.28) 10%,
      rgba(0,0,0,0) 24%,
      rgba(0,0,0,0) 76%,
      rgba(0,0,0,.28) 90%,
      rgba(0,0,0,.62) 100%);
}
.hero-photo img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate(-50%,-50%) scale(.92);
  /* kein Blur, keine Weichzeichnung */
  filter:contrast(1.07) brightness(.92) saturate(.98);
  image-rendering:auto;
  backface-visibility:hidden;
}
.hero .overlay{
  z-index:4;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.44) 0%,
      rgba(0,0,0,.12) 30%,
      rgba(0,0,0,.02) 58%,
      rgba(0,0,0,.10) 100%),
    linear-gradient(0deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.08) 42%,
      rgba(0,0,0,.12) 100%);
}

@media(max-width:850px){
  .hero-photo img{
    object-position:center;
    transform:translate(-50%,-50%) scale(.96);
  }
  .hero-photo::before{
    background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 22%,transparent 78%,rgba(0,0,0,.42));
  }
}


/* SERVICES — directly after hero */
.services-section{
  position:relative;
  z-index:6;
  background:#070909;
  border-top:1px solid rgba(255,255,255,.12);
  padding:120px 5.5vw 0;
}
.services-intro{
  display:grid;
  grid-template-columns:.72fr 2fr;
  gap:5vw;
  align-items:start;
  padding-bottom:90px;
}
.section-kicker{
  padding-top:13px;
  font:500 10px/1.3 "IBM Plex Mono",monospace;
  letter-spacing:.18em;
  color:#ccffcc;
}
.services-title{
  display:grid;
  grid-template-columns:1.4fr .65fr;
  gap:5vw;
  align-items:end;
}
.services-title h2{
  margin:0;
  font-weight:300;
  font-size:clamp(4.2rem,7vw,8.5rem);
  line-height:.84;
  letter-spacing:-.06em;
}
.services-title h2 span{color:#92999a}
.services-title p{
  margin:0 0 7px;
  max-width:37ch;
  color:#959c9e;
  line-height:1.6;
  font-size:15px;
}
.service-list{
  border-top:1px solid rgba(255,255,255,.13);
}
.service-item{
  position:relative;
  min-height:145px;
  display:grid;
  grid-template-columns:80px minmax(280px,1.35fr) minmax(260px,.85fr) 45px;
  gap:30px;
  align-items:center;
  color:#f2f3f2;
  border-bottom:1px solid rgba(255,255,255,.13);
  text-decoration:none;
  overflow:hidden;
  transition:padding .38s cubic-bezier(.2,.8,.2,1),background .38s ease;
}
.service-item:before{
  content:"";
  position:absolute;
  inset:0;
  background:#ccffcc;
  transform:translateY(102%);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.service-item:hover:before{transform:translateY(0)}
.service-item:hover{
  color:#07100b;
  padding-left:18px;
  padding-right:18px;
}
.service-number{
  font:500 10px "IBM Plex Mono",monospace;
  letter-spacing:.12em;
  color:#7f8889;
}
.service-item:hover .service-number{color:#304538}
.service-item h3{
  margin:0;
  font-size:clamp(2.5rem,4vw,4.8rem);
  line-height:1;
  font-weight:300;
  letter-spacing:-.045em;
}
.service-item p{
  margin:0;
  max-width:44ch;
  color:#8e9698;
  line-height:1.55;
  font-size:14px;
}
.service-item:hover p{color:#26372d}
.service-arrow{
  justify-self:end;
  font-size:20px;
  transition:transform .35s ease;
}
.service-item:hover .service-arrow{transform:rotate(45deg)}
@media(max-width:850px){
  .services-section{padding:85px 20px 0}
  .services-intro{grid-template-columns:1fr;gap:28px;padding-bottom:60px}
  .services-title{grid-template-columns:1fr;gap:30px}
  .services-title h2{font-size:14vw}
  .service-item{
    min-height:auto;
    padding:28px 0;
    grid-template-columns:38px 1fr 28px;
    gap:12px;
  }
  .service-item h3{font-size:9vw}
  .service-item p{grid-column:2/4;padding-right:10px}
  .service-item:hover{padding-left:10px;padding-right:10px}
}


/* V4 — seamless hero transition + visual service hover */

/* Hero runs softly into the black services area; no hard bottom edge */
.hero:after{
  content:"";
  position:absolute;
  z-index:8;
  pointer-events:none;
  left:0;right:0;bottom:-2px;
  height:190px;
  background:linear-gradient(to bottom,rgba(7,9,9,0) 0%,rgba(7,9,9,.32) 28%,#070909 100%);
}
.services-section{
  border-top:0;
  margin-top:-2px;
}

/* Each service gets a large cinematic visual that reveals on hover */
.service-item{
  isolation:isolate;
}
.service-item:before{
  /* mint is now subtle instead of covering the whole row */
  background:linear-gradient(90deg,rgba(204,255,204,.14),rgba(204,255,204,.045) 48%,transparent 78%);
}
.service-visual{
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:46%;
  height:100%;
  overflow:hidden;
  opacity:0;
  transform:translateX(30px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.service-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#070909 0%,rgba(7,9,9,.70) 22%,rgba(7,9,9,.14) 72%,rgba(7,9,9,.34) 100%);
}
.service-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.08);
  filter:brightness(.62) saturate(.8) contrast(1.08);
  transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.service-item:hover .service-visual{
  opacity:1;
  transform:translateX(0);
}
.service-item:hover .service-visual img{
  transform:scale(1);
  filter:brightness(.72) saturate(.9) contrast(1.08);
}
.service-item:hover{
  color:#f2f3f2;
}
.service-item:hover .service-number{color:#ccffcc}
.service-item:hover p{color:#c2c8c5}
.service-item:hover .service-arrow{color:#ccffcc}

/* different crop for each service, even while dedicated images are added later */
.service-visual-01 img{object-position:57% 56%}
.service-visual-02 img{object-position:70% 43%;transform:scale(1.28)}
.service-visual-03 img{object-position:53% 50%}
.service-visual-04 img{object-position:38% 52%;filter:brightness(.58) saturate(.45) contrast(1.16)}
.service-visual-05 img{object-position:76% 48%;transform:scale(1.18)}
.service-visual-06 img{object-position:61% 62%;filter:brightness(.48) saturate(.3) contrast(1.22)}

@media(max-width:850px){
  .hero:after{height:110px}
  .service-visual{
    width:58%;
    opacity:.22;
    transform:none;
  }
  .service-visual:after{
    background:linear-gradient(90deg,#070909 0%,rgba(7,9,9,.72) 34%,rgba(7,9,9,.25) 100%);
  }
}


/* V5 — labeled hamburger + opening navigation */
.menu-trigger{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:#f1f1ef;
  width:auto;
  height:28px;
  display:flex;
  align-items:center;
  gap:13px;
  cursor:pointer;
  font:500 10px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;
}
.menu-label{display:block}
.menu-lines{width:27px;height:17px;display:flex;flex-direction:column;justify-content:space-between}
.menu-trigger .menu-lines i{display:block;height:1px;background:#f1f1ef;width:100%;transition:transform .35s ease,width .35s ease}
.menu-trigger .menu-lines i:last-child{width:66%}
.menu-trigger:hover .menu-lines i:last-child{width:100%}

.menu-overlay{
  position:fixed;
  z-index:100;
  inset:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(0,0,0,0);
  transition:visibility .55s,background .45s ease;
}
.menu-overlay.open{
  visibility:visible;
  pointer-events:auto;
  background:rgba(0,0,0,.58);
}
.menu-panel{
  position:absolute;
  left:0;top:0;bottom:0;
  width:min(720px,100%);
  padding:34px 46px 34px;
  display:flex;
  flex-direction:column;
  background:#080a0a;
  border-right:1px solid rgba(204,255,204,.18);
  transform:translateX(-102%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.menu-overlay.open .menu-panel{transform:translateX(0)}
.menu-top,.menu-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#7f8888;
  font:500 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;
}
.menu-close{
  appearance:none;border:0;background:none;color:#b7bdbc;
  cursor:pointer;font:500 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em;display:flex;align-items:center;gap:12px
}
.menu-close b{font-size:22px;font-weight:300;color:#ccffcc}
.menu-nav{
  margin:auto 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.menu-nav a{
  min-height:112px;
  display:grid;
  grid-template-columns:55px 1fr 35px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#eef0ef;
  text-decoration:none;
  transition:padding .35s ease,color .35s ease,background .35s ease;
}
.menu-nav a span{
  color:#6f7878;
  font:500 9px "IBM Plex Mono",monospace;
}
.menu-nav a strong{
  font-weight:300;
  font-size:clamp(2.3rem,4.5vw,4.5rem);
  letter-spacing:-.045em;
}
.menu-nav a i{
  font-style:normal;
  justify-self:end;
  color:#ccffcc;
  transition:transform .35s ease;
}
.menu-nav a:hover{
  padding-left:14px;
  padding-right:14px;
  color:#07100b;
  background:#ccffcc;
}
.menu-nav a:hover span,.menu-nav a:hover i{color:#24402d}
.menu-nav a:hover i{transform:rotate(45deg)}
body.menu-open{overflow:hidden}

@media(max-width:850px){
  .menu-trigger{gap:8px}
  .menu-label{font-size:9px}
  .menu-panel{padding:25px 20px}
  .menu-nav a{min-height:96px;grid-template-columns:38px 1fr 28px}
  .menu-nav a strong{font-size:11vw}
}


/* V6 SERVICES — reference-inspired expanding hover rows */
.service-accordion{
  border-top:1px solid rgba(255,255,255,.14);
  overflow:visible;
}
.service-accordion .service-item{
  position:relative;
  z-index:1;
  min-height:112px;
  padding:0 22px 0 0;
  display:grid;
  grid-template-columns:minmax(300px,1.35fr) 90px minmax(420px,1.5fr) 64px;
  gap:24px;
  align-items:center;
  overflow:visible;
  border-bottom:1px solid rgba(255,255,255,.13);
  background:#070909;
  color:#f2f3f2;
  transition:min-height .42s cubic-bezier(.2,.8,.2,1),background .32s ease,color .32s ease,padding .42s ease;
}
.service-accordion .service-item:before,
.service-accordion .service-visual{display:none!important}
.service-accordion .service-item h3{
  margin:0;
  font-size:clamp(2rem,3.25vw,4rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.045em;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.service-accordion .service-number{
  color:#a2aaaa;
  font:400 18px/1 "IBM Plex Mono",monospace;
  align-self:center;
}
.service-hover-content{
  height:0;
  opacity:0;
  visibility:hidden;
  display:grid;
  grid-template-columns:230px 1fr;
  gap:38px;
  align-items:center;
  transition:opacity .28s ease .04s;
}
.service-hover-content p{
  margin:0;
  color:#d3d7d5;
  font-size:15px;
  line-height:1.5;
  max-width:38ch;
}
.service-preview{
  position:relative;
  height:0;
  width:230px;
  overflow:hidden;
  border-radius:3px;
  background:#151919;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  transform:translateY(15px) scale(.96);
  transition:height .42s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);
}
.service-preview img{
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.08) brightness(.88);
}
.preview-01 img{object-position:42% 58%;transform:scale(1.55)}
.preview-02 img{object-position:70% 44%;transform:scale(1.35)}
.preview-03 img{object-position:53% 50%;transform:scale(1.03)}
.preview-04 img{object-position:30% 50%;transform:scale(1.42);filter:contrast(1.15) brightness(.72) saturate(.65)}
.preview-05 img{object-position:75% 48%;transform:scale(1.28)}
.preview-06 img{object-position:61% 64%;transform:scale(1.45);filter:contrast(1.2) brightness(.65) saturate(.4)}
.service-accordion .service-arrow{
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  display:grid;place-items:center;
  justify-self:end;
  font-size:19px;
  transition:background .32s ease,color .32s ease,border-color .32s ease,transform .32s ease;
}

/* Only the hovered row opens */
.service-accordion .service-item:hover{
  z-index:5;
  min-height:190px;
  padding-top:12px;
  padding-bottom:12px;
  background:#0c0f0e;
}
.service-accordion .service-item:hover h3{transform:translateX(8px)}
.service-accordion .service-item:hover .service-number{color:#ccffcc}
.service-accordion .service-item:hover .service-hover-content{
  height:auto;
  opacity:1;
  visibility:visible;
}
.service-accordion .service-item:hover .service-preview{
  height:205px;
  transform:translateY(0) scale(1);
}
.service-accordion .service-item:hover .service-arrow{
  background:#ccffcc;
  border-color:#ccffcc;
  color:#07100b;
  transform:rotate(45deg);
}

/* let the image feel slightly taller than the opened row, like the reference */
@media(min-width:1001px){
  .service-accordion .service-item:hover .service-preview{
    margin-top:-22px;
    margin-bottom:-22px;
  }
}

@media(max-width:1000px){
  .service-accordion .service-item{
    grid-template-columns:1fr 55px 52px;
    padding:25px 0;
    min-height:96px;
  }
  .service-accordion .service-item h3{font-size:clamp(2rem,7vw,3.4rem)}
  .service-hover-content{
    grid-column:1/4;
    grid-row:2;
    grid-template-columns:180px 1fr;
    gap:22px;
  }
  .service-accordion .service-item:hover{min-height:250px}
  .service-preview{width:180px}
  .service-accordion .service-item:hover .service-preview{height:150px}
}
@media(max-width:650px){
  .service-accordion .service-item{grid-template-columns:1fr 38px 45px;gap:10px}
  .service-hover-content{grid-template-columns:120px 1fr;gap:15px}
  .service-preview{width:120px}
  .service-accordion .service-item:hover .service-preview{height:125px}
  .service-hover-content p{font-size:12px}
  .service-accordion .service-arrow{width:40px;height:40px}
}


/* V7 — dedicated portrait service imagery */
.service-preview{
  width:205px;
  border-radius:2px;
}
.service-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:none;
  filter:contrast(1.04) brightness(.88) saturate(.92);
}
.service-item:hover .service-preview{
  height:245px;
}
.preview-01 img{object-position:50% 50%;transform:none}
.preview-03 img{object-position:50% 48%;transform:none}
.preview-04 img{object-position:50% 48%;transform:none}

@media(min-width:1001px){
  .service-accordion .service-item:hover{
    min-height:220px;
  }
  .service-accordion .service-item:hover .service-preview{
    height:255px;
    margin-top:-28px;
    margin-bottom:-28px;
  }
}
@media(max-width:1000px){
  .service-preview{width:160px}
  .service-accordion .service-item:hover .service-preview{height:195px}
}
@media(max-width:650px){
  .service-preview{width:112px}
  .service-accordion .service-item:hover .service-preview{height:145px}
}


/* V8 — sticky scroll-driven brand introduction */
.scroll-intro{
  position:relative;
  height:155vh;
  min-height:980px;
  margin-top:-2px;
  background:#070909;
  z-index:7;
}
.scroll-intro-sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.scroll-intro-inner{
  width:min(1500px,89vw);
  margin:0 auto;
  position:relative;
}
.scroll-intro-kicker{
  display:block;
  margin-bottom:42px;
  color:#ccffcc;
  font:500 10px/1.2 "IBM Plex Mono",monospace;
  letter-spacing:.18em;
}
.reveal-copy{
  max-width:1320px;
  margin:0;
  font-size:clamp(4.3rem,8.2vw,9.4rem);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:300;
}
.reveal-copy > span{
  --word-progress:0;
  display:inline;
  color:rgb(
    calc(58 + 190 * var(--word-progress)),
    calc(62 + 188 * var(--word-progress)),
    calc(62 + 187 * var(--word-progress))
  );
  transition:color .08s linear;
}
.reveal-copy > .accent-word{
  color:rgb(
    calc(58 + 146 * var(--word-progress)),
    calc(62 + 193 * var(--word-progress)),
    calc(62 + 142 * var(--word-progress))
  );
}
.scroll-intro-sub{
  width:min(510px,100%);
  margin:54px 0 0 auto;
  color:#a6adab;
  font-size:15px;
  line-height:1.65;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .08s linear,transform .08s linear;
}
.scroll-progress{
  position:absolute;
  left:0;
  bottom:-54px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.scroll-progress i{
  display:block;
  width:100%;
  height:100%;
  background:#ccffcc;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* blend hero naturally into the intro */
.hero:after{
  height:230px;
  background:linear-gradient(to bottom,rgba(7,9,9,0),rgba(7,9,9,.38) 34%,#070909 100%);
}
.services-section{
  position:relative;
  z-index:8;
}

@media(max-width:850px){
  .scroll-intro{height:145vh;min-height:850px}
  .scroll-intro-sticky{min-height:620px}
  .scroll-intro-inner{width:calc(100% - 40px)}
  .scroll-intro-kicker{margin-bottom:28px}
  .reveal-copy{
    font-size:clamp(3.1rem,13.2vw,6rem);
    line-height:.92;
  }
  .scroll-intro-sub{
    margin-top:38px;
    margin-left:0;
    max-width:420px;
    font-size:13px;
  }
  .scroll-progress{bottom:-35px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-intro{height:auto;min-height:0;padding:120px 0}
  .scroll-intro-sticky{position:relative;height:auto;min-height:0}
  .reveal-copy>span{--word-progress:1!important}
  .scroll-intro-sub{opacity:1!important;transform:none!important}
}


/* V9 — cinematic images crossing the sticky intro while scrolling */
.flying-gallery{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.scroll-intro-inner{
  z-index:3;
}
.fly-card{
  position:absolute;
  left:0;
  top:0;
  margin:0;
  width:clamp(150px,15vw,255px);
  aspect-ratio:2/3;
  opacity:0;
  overflow:hidden;
  border-radius:2px;
  background:#111;
  box-shadow:0 25px 70px rgba(0,0,0,.48);
  will-change:transform,opacity;
}
.fly-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.76) contrast(1.08) saturate(.88);
}
.fly-2{width:clamp(175px,18vw,310px)}
.fly-3{width:clamp(145px,14vw,235px)}
.fly-4{width:clamp(125px,12vw,205px)}
.fly-5{width:clamp(120px,11vw,190px)}

/* Keep copy legible while imagery moves behind/around it */
.scroll-intro-sticky:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(7,9,9,.18) 0%,rgba(7,9,9,.03) 45%,rgba(7,9,9,.28) 100%);
}
.reveal-copy{
  position:relative;
  text-shadow:0 2px 28px rgba(0,0,0,.34);
}

@media(max-width:850px){
  .fly-card{width:120px}
  .fly-2{width:145px}
  .fly-3{width:110px}
  .fly-4,.fly-5{width:95px}
  .flying-gallery{opacity:.78}
}
@media(prefers-reduced-motion:reduce){
  .flying-gallery{display:none}
}


/* V10 — remove dividing lines around intro + continuous brand marquee */
.scroll-progress{display:none!important}
.scroll-intro,
.scroll-intro-sticky,
.services-section{
  border-top:0!important;
  border-bottom:0!important;
}
.services-section{padding-top:105px}

/* continuous text strip */
.brand-marquee{
  position:relative;
  z-index:9;
  overflow:hidden;
  width:100%;
  padding:27px 0 30px;
  background:#070909;
  border:0;
  white-space:nowrap;
}
.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:wrapwerkMarquee 24s linear infinite;
}
.marquee-set{
  display:flex;
  flex:none;
  align-items:center;
  gap:34px;
  padding-right:34px;
  color:#ecefed;
  font:300 clamp(2.1rem,4.5vw,5.3rem)/1 Outfit,Arial,sans-serif;
  letter-spacing:-.045em;
}
.marquee-set i{
  color:#ccffcc;
  font-style:normal;
  font-size:.52em;
}
.marquee-set span:nth-of-type(2){
  color:#ccffcc;
}
@keyframes wrapwerkMarquee{
  to{transform:translateX(-50%)}
}
.brand-marquee:before,
.brand-marquee:after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;bottom:0;
  width:10vw;
  pointer-events:none;
}
.brand-marquee:before{
  left:0;
  background:linear-gradient(90deg,#070909,transparent);
}
.brand-marquee:after{
  right:0;
  background:linear-gradient(-90deg,#070909,transparent);
}
@media(max-width:850px){
  .brand-marquee{padding:22px 0}
  .marquee-set{gap:22px;padding-right:22px;font-size:2.3rem}
  .marquee-track{animation-duration:18s}
  .services-section{padding-top:75px}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}


/* V11 — references carousel */
.references{padding:130px 0 110px;background:#070909;overflow:hidden}
.ref-head{padding:0 5.5vw 55px;display:flex;align-items:end;justify-content:space-between}
.ref-head h2,.faq-intro h2,.site-footer h2{margin:18px 0 0;font-size:clamp(4rem,7vw,8rem);font-weight:300;line-height:.88;letter-spacing:-.06em}
.ref-head h2 em,.faq-intro h2 em,.site-footer h2 em{font-style:normal;color:#8f9796}
.ref-controls{display:flex;gap:8px}.ref-controls button{width:52px;height:52px;border:1px solid #ffffff32;border-radius:50%;background:transparent;color:#fff;font-size:20px;cursor:pointer;transition:.3s}.ref-controls button:hover{background:#ccffcc;color:#07100b;border-color:#ccffcc}
.ref-viewport{overflow:hidden;padding-left:5.5vw;cursor:grab}.ref-viewport:active{cursor:grabbing}
.ref-track{display:flex;gap:18px;width:max-content;transition:transform .65s cubic-bezier(.2,.8,.2,1);will-change:transform}
.ref-card{width:min(58vw,760px);flex:none;margin:0}.ref-card img{width:100%;height:min(62vh,650px);object-fit:cover;display:block;filter:brightness(.84);transition:transform .7s,filter .5s}.ref-card:hover img{filter:brightness(.96)}.ref-card>div{padding:20px 2px;display:grid;grid-template-columns:1fr auto;gap:7px}.ref-card span,.ref-card p{font:9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#8e9694}.ref-card h3{grid-column:1;margin:0;font-size:clamp(1.8rem,3vw,3.5rem);font-weight:300;letter-spacing:-.04em}.ref-card p{grid-column:2;grid-row:2;margin:10px 0 0}.ref-drag{padding:15px 5.5vw 0;color:#707876;font:9px "IBM Plex Mono",monospace;letter-spacing:.15em}.ref-drag span{color:#ccffcc;margin-left:10px}

/* FAQ */
.faq{padding:140px 5.5vw;background:#090b0b;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}.faq-intro{position:sticky;top:120px;align-self:start}.faq-intro p{max-width:38ch;color:#919997;line-height:1.6;margin-top:35px}.faq-list{border-top:1px solid #ffffff1c}.faq details{border-bottom:1px solid #ffffff1c}.faq summary{min-height:105px;display:grid;grid-template-columns:48px 1fr 30px;align-items:center;gap:20px;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary span{font:9px "IBM Plex Mono",monospace;color:#68706f}.faq summary strong{font-size:clamp(1.2rem,2vw,2rem);font-weight:300}.faq summary i{font-style:normal;font-size:23px;color:#ccffcc;transition:transform .35s}.faq details[open] summary i{transform:rotate(45deg)}.faq details p{margin:0;padding:0 45px 35px 68px;color:#9da5a3;line-height:1.65;max-width:65ch}

/* floating contact */
.floating-contact{position:fixed;z-index:90;right:26px;bottom:25px}.contact-bubble{position:relative;width:72px;height:72px;border:0;border-radius:50%;background:#ccffcc;padding:5px;cursor:pointer;box-shadow:0 15px 45px #0008;transition:transform .3s}.contact-bubble:hover{transform:scale(1.07)}.person-avatar{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#343b38,#111513 70%);color:#fff;font-size:17px;font-weight:500}.contact-bubble i{position:absolute;right:2px;bottom:5px;width:15px;height:15px;border-radius:50%;background:#50ed93;border:3px solid #070909}.contact-popover{position:absolute;right:0;bottom:88px;width:340px;padding:30px;background:#101413;border:1px solid #ffffff20;box-shadow:0 25px 80px #000a;opacity:0;visibility:hidden;transform:translateY(15px) scale(.97);transition:.35s cubic-bezier(.2,.8,.2,1)}.floating-contact.open .contact-popover{opacity:1;visibility:visible;transform:none}.popover-close{position:absolute;right:16px;top:13px;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}.contact-popover h3{font-size:36px;font-weight:300;letter-spacing:-.04em;margin:16px 0}.contact-popover p{color:#969e9c;line-height:1.55}.contact-popover>a{display:block;padding:8px 0;color:#e9ecea}.contact-popover .contact-mini-cta{margin-top:18px;padding:14px 16px;background:#ccffcc;color:#07100b;text-align:center}

/* footer */
.site-footer{background:#050606;padding:100px 5.5vw 28px;border-top:1px solid #ffffff16}.footer-main{display:grid;grid-template-columns:.55fr 1.5fr .55fr;gap:40px;align-items:end;padding-bottom:90px}.footer-brand{align-self:start;display:flex;align-items:center;gap:12px}.footer-brand strong{font-size:13px;font-weight:400;letter-spacing:.12em}.footer-cta{justify-self:end;width:170px;height:170px;border-radius:50%;background:#ccffcc;color:#07100b;display:flex;align-items:center;justify-content:center;gap:16px;transition:transform .3s}.footer-cta:hover{transform:scale(1.05)}.footer-grid{padding:35px 0 70px;border-top:1px solid #ffffff1b;display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.footer-grid>div{display:flex;flex-direction:column;gap:10px}.footer-grid span{margin-bottom:12px;color:#626b69;font:9px "IBM Plex Mono",monospace;letter-spacing:.14em}.footer-grid a{color:#a8afad;font-size:13px}.footer-grid a:hover{color:#ccffcc}.footer-bottom{padding-top:25px;border-top:1px solid #ffffff1b;display:flex;justify-content:space-between;color:#626b69;font:9px "IBM Plex Mono",monospace;letter-spacing:.12em}.footer-bottom a{color:#8d9593}

@media(max-width:850px){.references{padding:90px 0}.ref-head{padding:0 20px 35px}.ref-card{width:82vw}.ref-card img{height:58vh}.faq{padding:100px 20px;grid-template-columns:1fr;gap:55px}.faq-intro{position:relative;top:auto}.faq summary{min-height:90px;grid-template-columns:30px 1fr 25px}.faq details p{padding:0 20px 30px 50px}.floating-contact{right:16px;bottom:16px}.contact-bubble{width:62px;height:62px}.contact-popover{width:min(340px,calc(100vw - 32px));right:0}.site-footer{padding:80px 20px 25px}.footer-main{grid-template-columns:1fr;padding-bottom:65px}.footer-brand{margin-bottom:20px}.footer-cta{justify-self:end;width:145px;height:145px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:12px}}

.contact-address{display:block;margin-top:9px;color:#858e8b;font-size:12px;line-height:1.5}
.footer-address{margin-top:7px!important;color:#858e8b!important;font:400 12px/1.5 Inter,Arial,sans-serif!important;letter-spacing:0!important}


/* V13 — consistent section rhythm + refined scroll reveals */
:root{
  --section-space: clamp(100px, 9vw, 150px);
  --section-space-mobile: 82px;
}

/* consistent vertical rhythm */
.services-section,
.references,
.faq,
.after.contact,
.site-footer{
  padding-top:var(--section-space)!important;
  padding-bottom:var(--section-space)!important;
}
.brand-marquee{
  margin:0!important;
}
.scroll-intro{
  margin-bottom:0!important;
}

/* Selected Work: remove oversized title block */
.ref-head.ref-head-compact{
  padding:0 5.5vw 34px;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ref-head.ref-head-compact .section-kicker{
  margin:0;
}
.references .ref-viewport{
  margin-top:0;
}

/* premium viewport entrance animation */
.reveal-section{
  opacity:0;
  transform:translate3d(0,42px,0);
  filter:blur(5px);
  transition:
    opacity .9s cubic-bezier(.2,.75,.2,1),
    transform 1.05s cubic-bezier(.2,.75,.2,1),
    filter .9s ease;
  will-change:opacity,transform,filter;
}
.reveal-section.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.reveal-item{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.99);
  transition:
    opacity .72s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms),
    transform .9s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal-item.is-visible{
  opacity:1;
  transform:none;
}

/* Keep the custom scroll-intro reveal itself in control */
.scroll-intro.reveal-section{
  filter:none;
}
.scroll-intro.reveal-section.is-visible{
  transform:none;
}

/* slightly smoother visual handoff between all dark sections */
.services-section,
.references,
.faq,
.after.contact,
.site-footer{
  margin:0!important;
  border-top:0!important;
}
.references{background:#070909}
.faq{background:#090b0b}

@media(max-width:850px){
  .services-section,
  .references,
  .faq,
  .after.contact,
  .site-footer{
    padding-top:var(--section-space-mobile)!important;
    padding-bottom:var(--section-space-mobile)!important;
  }
  .ref-head.ref-head-compact{padding:0 20px 28px}
  .reveal-section{transform:translate3d(0,28px,0);filter:blur(3px)}
}
@media(prefers-reduced-motion:reduce){
  .reveal-section,.reveal-item{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}

/* V14 — responsibility / trust */
.responsibility,.testimonials{padding:var(--section-space) 5.5vw;background:#070909}
.responsibility-head{display:grid;grid-template-columns:1.4fr .6fr;gap:8vw;align-items:start}
.responsibility-head h2,.testimonial-head h2{margin:18px 0 0;font-size:clamp(4rem,7vw,8rem);font-weight:300;line-height:.88;letter-spacing:-.06em}
.responsibility-head h2 em,.testimonial-head h2 em{font-style:normal;color:#9da5a3}
.responsibility-head>p{margin:8px 0 0;max-width:38ch;color:#b5bbb9;line-height:1.65}
.responsibility-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:90px;align-items:start}
.trust-card{position:relative;min-height:420px;padding:34px;background:#f0f1ef;color:#111;display:flex;flex-direction:column;justify-content:space-between}
.trust-card:nth-child(2){margin-top:105px}.trust-card:nth-child(3){margin-top:210px}
.trust-no{position:absolute;right:30px;top:27px;color:#8fd8a8;font-size:42px;font-weight:600;font-style:italic}
.trust-icon{font-size:30px}.trust-card h3{font-size:25px;font-weight:400;margin:0 0 20px}.trust-card p{font-size:15px;line-height:1.5;max-width:30ch;margin:0;color:#333}

/* testimonials */
.testimonials{background:#090b0b}
.testimonial-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:65px}.testimonial-head .section-kicker{align-self:start}
.testimonial-track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial-card{min-height:360px;padding:34px;border:1px solid #ffffff1a;background:#0d1010;display:flex;flex-direction:column}
.stars{color:#ccffcc;letter-spacing:.16em;font-size:13px}
.testimonial-card blockquote{margin:auto 0;font-size:clamp(1.35rem,2vw,2rem);line-height:1.25;font-weight:300;letter-spacing:-.025em}
.testimonial-card>div:last-child{display:flex;justify-content:space-between;align-items:end}.testimonial-card strong{font-size:12px;font-weight:500}.testimonial-card span{font:9px "IBM Plex Mono",monospace;color:#737b79;letter-spacing:.1em}
.review-note{margin:18px 0 0;color:#5f6765;font:9px "IBM Plex Mono",monospace;letter-spacing:.08em}

@media(max-width:850px){
 .responsibility,.testimonials{padding:var(--section-space-mobile) 20px}
 .responsibility-head{grid-template-columns:1fr;gap:35px}
 .responsibility-cards{grid-template-columns:1fr;margin-top:55px}
 .trust-card,.trust-card:nth-child(2),.trust-card:nth-child(3){margin-top:0;min-height:310px}
 .testimonial-head{display:block}.testimonial-track{grid-template-columns:1fr}.testimonial-card{min-height:300px}
}

/* V16 — infinite customer review carousel */
.testimonials{padding-left:0!important;padding-right:0!important;overflow:hidden}
.testimonial-head{padding:0 5.5vw;margin-bottom:60px}
.review-meta{color:#7d8683;font:9px "IBM Plex Mono",monospace;letter-spacing:.13em}
.review-marquee{width:100%;overflow:hidden}
.review-marquee-track{display:flex;width:max-content;animation:reviewLoop 52s linear infinite;will-change:transform}
.review-marquee:hover .review-marquee-track{animation-play-state:paused}
.review-set{display:flex;gap:18px;padding-right:18px;flex:none}
.review-set .testimonial-card{width:min(31vw,470px);min-height:355px;flex:none}
@keyframes reviewLoop{to{transform:translateX(-50%)}}

/* Project contact form */
.project-contact{padding:var(--section-space) 5.5vw;background:#070909;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:start}
.project-contact-head{position:sticky;top:110px}
.project-contact-head h2{margin:20px 0 35px;font-size:clamp(4rem,6.8vw,8rem);font-weight:300;line-height:.88;letter-spacing:-.065em}
.project-contact-head h2 em{font-style:normal;color:#939b99}
.project-contact-head p{max-width:40ch;color:#959d9a;line-height:1.65}
.project-form{border-top:1px solid #ffffff22}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.project-form label{display:block}
.form-row label,.message-field{padding:28px 0 18px;border-bottom:1px solid #ffffff20}
.project-form label>span,.project-form legend{display:block;margin-bottom:17px;color:#69716f;font:9px "IBM Plex Mono",monospace;letter-spacing:.14em}
.project-form input[type=text],.project-form input[type=email],.project-form input[type=tel],.project-form textarea{width:100%;border:0;outline:0;background:transparent;color:#f0f2f1;font:300 22px/1.4 Outfit,Arial,sans-serif;resize:none}
.project-form input::placeholder,.project-form textarea::placeholder{color:#4f5755}
.project-form fieldset{border:0;margin:0;padding:32px 0;border-bottom:1px solid #ffffff20}
.service-pills{display:flex;flex-wrap:wrap;gap:9px}
.service-pills label input{position:absolute;opacity:0;pointer-events:none}
.service-pills label span{display:block;margin:0;padding:12px 16px;border:1px solid #ffffff26;border-radius:100px;color:#a8afad;font:400 11px Outfit,Arial,sans-serif;cursor:pointer;transition:.25s}
.service-pills label input:checked+span,.service-pills label span:hover{background:#ccffcc;border-color:#ccffcc;color:#07100b}
.form-bottom{display:grid;grid-template-columns:1fr auto;gap:35px;align-items:end;padding-top:28px}
.privacy{display:flex!important;gap:12px;max-width:440px;align-items:flex-start}.privacy input{margin-top:3px;accent-color:#ccffcc}.privacy span{margin:0!important;color:#69716f!important;font:10px/1.5 Outfit,Arial,sans-serif!important;letter-spacing:0!important}
.form-bottom button{width:175px;height:175px;border:0;border-radius:50%;background:#ccffcc;color:#07100b;cursor:pointer;font:500 11px Outfit,Arial,sans-serif;transition:transform .3s}.form-bottom button b{display:block;margin-top:12px;font-size:21px}.form-bottom button:hover{transform:scale(1.055)}

@media(max-width:850px){
 .testimonial-head{padding:0 20px}.review-set .testimonial-card{width:78vw;min-height:310px}.review-marquee-track{animation-duration:40s}
 .project-contact{padding:var(--section-space-mobile) 20px;grid-template-columns:1fr;gap:60px}.project-contact-head{position:relative;top:auto}.form-row{grid-template-columns:1fr;gap:0}.form-bottom{grid-template-columns:1fr}.form-bottom button{justify-self:end;width:145px;height:145px}
}
@media(prefers-reduced-motion:reduce){.review-marquee-track{animation:none}}

/* =========================================================
   PRODUCTION OVERRIDES — V20
   One source of truth for spacing, headings, trust, footer.
   ========================================================= */
:root{
  --page-x:5.5vw;
  --section-y:clamp(105px,8vw,145px);
  --mint:#ccffcc;
  --bg:#070909;
}

/* consistent rhythm */
.services-section,
.responsibility,
.references,
.testimonials,
.faq,
.project-contact{
  padding-top:var(--section-y)!important;
  padding-bottom:var(--section-y)!important;
  margin:0!important;
  border:0!important;
}

/* requested extra air around marquee */
.brand-marquee{
  margin:clamp(95px,7vw,135px) 0!important;
}

/* Oberfläche neu gedacht — deliberately left aligned */
.scroll-intro{
  padding-left:var(--page-x)!important;
  padding-right:var(--page-x)!important;
  text-align:left!important;
}
.scroll-intro-inner{
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important;
}
.scroll-intro h2,
.scroll-intro p{
  text-align:left!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* restrained heading scale */
.responsibility-head h2,
.ref-title h2,
.testimonial-head h2,
.faq-intro h2,
.project-contact-head h2{
  font-size:clamp(3.3rem,5.5vw,6.35rem)!important;
  line-height:.92!important;
}

/* IMPORTANT: color experiment reverted completely.
   Trust section is a clean dark section again. */
.responsibility{
  position:relative;
  background:var(--bg)!important;
  color:#f2f4f3!important;
  overflow:hidden;
}
.responsibility::before,
.responsibility::after{
  content:none!important;
  display:none!important;
}
.responsibility-head h2{color:#f2f4f3!important}
.responsibility-head h2 em{color:#929a98!important}
.responsibility-head>p{color:#a8b0ad!important}

/* soften section handoffs with spacing, not gradients */
.services-section,
.responsibility,
.references,
.testimonials,
.faq,
.project-contact,
.site-footer{
  box-shadow:none!important;
}

/* proper reference heading */
.ref-head.ref-head-compact{
  display:flex;
  align-items:flex-end!important;
  justify-content:space-between;
  padding:0 var(--page-x) 48px!important;
}
.ref-title h2{
  margin:18px 0 0;
  font-weight:300;
  letter-spacing:-.055em;
}
.ref-title h2 em{font-style:normal;color:#929a98}

/* direct contact details in form section */
.project-direct-contact{
  margin-top:46px;
  padding-top:25px;
  border-top:1px solid #ffffff1e;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.project-direct-contact>span{
  margin-bottom:8px;
  color:#68716e;
  font:9px "IBM Plex Mono",monospace;
  letter-spacing:.14em;
}
.project-direct-contact a{
  color:#e9ecea;
  font-size:clamp(1.05rem,1.45vw,1.45rem);
  font-weight:300;
}
.project-direct-contact a:hover{color:var(--mint)}
.project-direct-contact p{
  margin:8px 0 0!important;
  color:#707976!important;
  font-size:12px;
}

/* compact footer only — no duplicate CTA */
.site-footer{
  padding:58px var(--page-x) 28px!important;
  margin:0!important;
  background:#050606!important;
}
.footer-main{display:none!important}
.footer-grid{
  padding:0 0 52px!important;
  border-top:0!important;
}
.footer-bottom span a{
  color:#7f8986;
  transition:color .25s ease;
}
.footer-bottom span a:hover{color:var(--mint)}

/* animation performance */
.reveal-section,
.reveal-item{
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
@media(prefers-reduced-motion:reduce){
  .review-marquee-track{animation:none!important}
}

@media(max-width:850px){
  :root{--page-x:20px;--section-y:82px}
  .brand-marquee{margin:78px 0!important}
  .scroll-intro{padding-left:20px!important;padding-right:20px!important}
  .ref-head.ref-head-compact{padding:0 20px 34px!important}
  .project-direct-contact{margin-top:34px}
  .site-footer{padding-top:48px!important}
}

/* V21 — hero typography aligned with content headlines */
.hero h1{
  font-family:inherit!important;
  font-size:clamp(4.2rem,7.2vw,8.2rem)!important;
  font-weight:300!important;
  line-height:.88!important;
  letter-spacing:-.06em!important;
  text-transform:none!important;
}
.hero h1 span{
  font-family:inherit!important;
  font-style:normal!important;
  font-weight:300!important;
  color:#a2aaa7!important;
}
@media(max-width:850px){
  .hero h1{
    font-size:clamp(3.35rem,14vw,5.7rem)!important;
    line-height:.9!important;
  }
}

/* V22 — typography scale + responsive polish + German UI */
:root{
  --display-xl:clamp(3.05rem,5.0vw,5.75rem);
  --display-lg:clamp(2.8rem,4.55vw,5.15rem);
}

/* all major content headlines slightly smaller */
.services-title h2,
.responsibility-head h2,
.ref-title h2,
.testimonial-head h2,
.faq-intro h2,
.project-contact-head h2{
  font-size:var(--display-lg)!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
}
.scroll-intro h2,
.scroll-intro .reveal-copy{
  font-size:var(--display-xl)!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
}
.hero h1{
  font-size:clamp(3.65rem,6.25vw,7.15rem)!important;
  line-height:.9!important;
}

/* button labels: prevent awkward wrapping */
.btn,.form-bottom button,.contact-mini-cta{
  white-space:nowrap;
}
.topcta{min-width:190px}

/* responsive audit fixes */
@media(max-width:1100px){
  header{grid-template-columns:120px 1fr 190px}
  .hero .right{width:260px;right:28px}
  .ref-card{width:min(66vw,700px)}
  .responsibility-cards{gap:16px}
  .trust-card{padding:28px}
}
@media(max-width:850px){
  :root{
    --display-xl:clamp(2.75rem,11.5vw,4.6rem);
    --display-lg:clamp(2.55rem,10.5vw,4.15rem);
  }
  .hero{height:100svh;min-height:650px}
  header{height:78px}
  .topcta{
    min-width:auto!important;
    font-size:10px!important;
    padding:10px 12px!important;
  }
  .topcta span{font-size:14px!important}
  .hero h1{
    font-size:clamp(3rem,12vw,5rem)!important;
    max-width:8.5ch;
    margin-bottom:22px!important;
  }
  .left{bottom:34px}
  .actions{flex-wrap:wrap}
  .actions .btn{font-size:10px;min-height:43px}
  .services-title h2{font-size:var(--display-lg)!important}
  .responsibility-head h2,
  .ref-title h2,
  .testimonial-head h2,
  .faq-intro h2,
  .project-contact-head h2{font-size:var(--display-lg)!important}
  .testimonial-head{gap:25px}
  .review-meta{display:block;margin-top:18px}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:38px 20px}
}
@media(max-width:560px){
  header{grid-template-columns:42px 1fr auto;padding:0 16px}
  .logo b{font-size:12px;letter-spacing:.08em}
  .topcta{font-size:0!important;width:42px;height:42px;padding:0!important;min-width:42px!important}
  .topcta span{font-size:19px!important;margin:auto}
  .hero h1{font-size:clamp(2.8rem,13vw,4.2rem)!important}
  .actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:8px!important}
  .actions .btn{padding:12px 11px!important;gap:8px!important;justify-content:space-between}
  .responsibility-cards{gap:12px}
  .trust-card{min-height:280px!important;padding:24px!important}
  .ref-head.ref-head-compact{display:grid!important;grid-template-columns:1fr auto;gap:18px}
  .ref-controls button{width:44px;height:44px}
  .project-form input[type=text],
  .project-form input[type=email],
  .project-form input[type=tel],
  .project-form textarea{font-size:18px}
  .footer-grid{grid-template-columns:1fr!important}
  .footer-bottom{font-size:8px!important}
  .floating-contact{right:12px!important;bottom:12px!important}
}

/* V23 corrections */
.scroll-intro h2,.scroll-intro .reveal-copy{
  font-size:clamp(4.6rem,7.15vw,8.4rem)!important;
  line-height:.91!important;letter-spacing:-.058em!important;
  max-width:15ch!important;
}
.responsibility-head h2{
  font-size:clamp(4.15rem,6.35vw,7.25rem)!important;
  line-height:.91!important;letter-spacing:-.057em!important;
}
.site-header{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  z-index:9999!important;transform:translateY(0);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),background .25s ease!important;
  will-change:transform;
}
.site-header.header-hidden{transform:translateY(-110%)!important}
.site-header.header-visible{transform:translateY(0)!important}
.site-header.header-scrolled{
  background:rgba(5,7,6,.88)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.site-header .menu-trigger,.site-header .topcta{pointer-events:auto!important}
.trust-card h3{font-size:clamp(1.35rem,1.65vw,1.75rem)!important}
.trust-card p{font-size:clamp(.92rem,1vw,1.05rem)!important;line-height:1.45!important}
@media(max-width:850px){
 .scroll-intro h2,.scroll-intro .reveal-copy{font-size:clamp(3.5rem,14vw,6rem)!important;max-width:10ch!important}
 .responsibility-head h2{font-size:clamp(3.25rem,12.5vw,5.4rem)!important}
 .site-header.header-scrolled{background:rgba(5,7,6,.94)!important}
}

/* V24 exact sticky-header behavior */
.site-header.header-scrolled.header-hidden{
  transform:translateY(-110%)!important;
}
.site-header.header-scrolled.header-visible{
  transform:translateY(0)!important;
}

/* =========================================================
   V26 MOBILE REBUILD — final mobile source of truth
   ========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
img,video,svg{max-width:100%;height:auto}
section,main,footer,.site-footer{max-width:100vw;overflow-x:clip}

/* unified simple line icon language */
.trust-icon{
  width:34px!important;height:34px!important;
  display:grid!important;place-items:center!important;
  font-size:0!important;border:1px solid currentColor!important;
  border-radius:50%!important;color:#111!important;
}
.trust-card:nth-child(1) .trust-icon::before{content:"✓";font-size:17px}
.trust-card:nth-child(2) .trust-icon::before{content:"+";font-size:20px;font-weight:300}
.trust-card:nth-child(3) .trust-icon::before{content:"↗";font-size:17px}

@media(max-width:850px){
  /* NAV: tiny, clean, no CTA button */
  .site-header{
    height:62px!important;
    padding:0 16px!important;
    grid-template-columns:auto 1fr!important;
    gap:14px!important;
    background:transparent!important;
  }
  .site-header.header-scrolled{
    background:rgba(5,7,6,.92)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .site-header .topcta{display:none!important}
  .site-header .logo{
    justify-self:end!important;
    font-size:13px!important;
    gap:7px!important;
    min-width:0!important;
  }
  .site-header .logo b{
    font-size:11px!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }
  .site-header .mark{width:24px!important;height:17px!important}
  .site-header .mark:before,.site-header .mark:after{
    width:15px!important;height:7px!important;
  }
  .menu-trigger{
    justify-self:start!important;
    width:auto!important;height:38px!important;
    padding:0!important;gap:8px!important;
    font-size:10px!important;
    letter-spacing:.1em!important;
  }
  .menu-trigger .menu-lines{width:20px!important}
  .menu-trigger .menu-lines i{height:1px!important}

  /* full screen menu sized for phone */
  .menu-panel{padding:82px 20px 28px!important}
  .menu-panel a{font-size:clamp(2rem,10vw,3.3rem)!important}
  .menu-panel .menu-meta{font-size:10px!important}

  /* HERO */
  .hero{
    width:100%!important;
    min-height:680px!important;
    height:100svh!important;
    overflow:hidden!important;
  }
  .hero .car{left:-16%!important;right:-16%!important;width:auto!important}
  .hero .left{left:18px!important;right:18px!important;bottom:30px!important;width:auto!important}
  .hero h1{max-width:9ch!important}
  .hero .actions{width:100%!important;grid-template-columns:1fr 1fr!important}
  .hero .actions .btn{
    width:100%!important;min-width:0!important;
    font-size:9px!important;padding:12px 10px!important;
  }

  /* all content constrained to viewport */
  .scroll-intro,.services-section,.responsibility,.faq,.project-contact{
    width:100%!important;max-width:100%!important;
    padding-left:20px!important;padding-right:20px!important;
  }
  .scroll-intro h2,.scroll-intro .reveal-copy{overflow-wrap:normal!important;word-break:normal!important}

  /* services rows don't push viewport */
  .service-row{min-width:0!important;width:100%!important}
  .service-row>*{min-width:0!important}
  .service-preview{max-width:34vw!important}

  /* responsibility: stack cards instead of staggered wide layout */
  .responsibility-head{
    grid-template-columns:1fr!important;
    gap:25px!important;
  }
  .responsibility-cards{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding-top:45px!important;
  }
  .trust-card{
    width:100%!important;max-width:none!important;
    min-height:0!important;height:auto!important;
    margin:0!important;transform:none!important;
    padding:26px!important;
  }
  .trust-card h3{margin-top:55px!important}

  /* references */
  .ref-head.ref-head-compact{
    grid-template-columns:1fr!important;
    padding-left:20px!important;padding-right:20px!important;
  }
  .ref-controls{justify-self:start!important}
  .ref-viewport{padding-left:20px!important}
  .ref-card{width:84vw!important;max-width:84vw!important}
  .ref-card img{height:52svh!important;max-height:560px!important}

  /* reviews */
  .testimonial-head{padding-left:20px!important;padding-right:20px!important}
  .review-card{width:82vw!important;max-width:360px!important}

  /* form */
  .project-contact{grid-template-columns:1fr!important;gap:55px!important}
  .project-form{width:100%!important;min-width:0!important}
  .form-grid{grid-template-columns:1fr!important}
  .project-form input,.project-form textarea{width:100%!important;max-width:100%!important}

  /* floating contact less intrusive */
  .floating-contact{right:12px!important;bottom:12px!important}
  .contact-bubble{width:52px!important;height:52px!important;padding:3px!important}
  .person-avatar{font-size:12px!important}
  .contact-popover{
    position:fixed!important;
    left:12px!important;right:12px!important;bottom:76px!important;
    width:auto!important;max-width:none!important;
  }

  /* footer */
  .site-footer{padding-left:20px!important;padding-right:20px!important}
  .footer-grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .site-header{padding:0 14px!important}
  .site-header .logo b{font-size:10px!important}
  .hero .actions{grid-template-columns:1fr!important}
  .hero .actions .btn{justify-content:space-between!important}
  .service-preview{display:none!important}
  .service-row{grid-template-columns:1fr auto!important}
  .ref-card{width:88vw!important;max-width:88vw!important}
  .review-card{width:86vw!important}
}

/* ==========================================================
   V27 — iPhone/Safari mobile rebuild
   ========================================================== */

/* CSS-drawn arrow: never becomes an emoji on iOS */
.ui-arrow,.inline-arrow{
  position:relative!important;
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  font-size:0!important;
  line-height:0!important;
  color:currentColor!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
}
.ui-arrow::before,.inline-arrow::before{
  content:""!important;
  position:absolute!important;
  width:9px!important;height:9px!important;
  right:2px!important;top:2px!important;
  border-top:1.5px solid currentColor!important;
  border-right:1.5px solid currentColor!important;
}
.ui-arrow::after,.inline-arrow::after{
  content:""!important;
  position:absolute!important;
  width:13px!important;height:1.5px!important;
  left:2px!important;bottom:5px!important;
  background:currentColor!important;
  transform:rotate(-45deg)!important;
  transform-origin:center!important;
}
.menu-nav a i.ui-arrow{color:#ccffcc!important}

/* menu overlay must have its OWN scroll container */
.menu-overlay{
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
.menu-panel{
  height:100dvh!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
}

/* body lock only while menu is open; restore reliably */
body.menu-open{
  overflow:hidden!important;
  touch-action:none;
}
body:not(.menu-open){
  overflow-y:auto!important;
  touch-action:auto!important;
}

@media(max-width:850px){
  .menu-panel{
    width:100%!important;
    padding:
      calc(env(safe-area-inset-top,0px) + 22px)
      20px
      calc(env(safe-area-inset-bottom,0px) + 24px)!important;
    display:block!important;
  }
  .menu-top{
    min-height:54px!important;
    position:relative!important;
  }
  .menu-nav{
    margin:clamp(42px,8vh,72px) 0 32px!important;
  }
  .menu-nav a{
    min-height:88px!important;
    grid-template-columns:38px minmax(0,1fr) 26px!important;
  }
  .menu-nav a strong{
    font-size:clamp(2.3rem,10vw,3.4rem)!important;
    line-height:.95!important;
    white-space:nowrap!important;
  }
  .menu-nav a i.ui-arrow{
    width:17px!important;height:17px!important;
    justify-self:end!important;
  }
  .menu-foot{
    position:static!important;
    margin-top:42px!important;
    padding:22px 0 4px!important;
    min-height:0!important;
    gap:20px!important;
    flex-wrap:wrap!important;
  }
  .menu-foot span{
    font-size:8px!important;
    white-space:normal!important;
  }
  .menu-close b{
    font-family:Arial,sans-serif!important;
    font-size:0!important;
    width:18px!important;height:18px!important;
    position:relative!important;
  }
  .menu-close b::before,.menu-close b::after{
    content:""!important;
    position:absolute!important;
    left:8px!important;top:0!important;
    width:1.5px!important;height:18px!important;
    background:#ccffcc!important;
  }
  .menu-close b::before{transform:rotate(45deg)!important}
  .menu-close b::after{transform:rotate(-45deg)!important}

  /* Service arrows also clean line icons */
  .service-arrow.ui-arrow{
    width:30px!important;height:30px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:50%!important;
  }
  .service-arrow.ui-arrow::before{right:8px!important;top:7px!important}
  .service-arrow.ui-arrow::after{left:7px!important;bottom:9px!important}

  /* Do not create sideways drag on iPhone */
  .flying-gallery{overflow:hidden!important}
  .scroll-intro-sticky,.scroll-intro-inner,
  .services-section,.responsibility,.references,
  .testimonials,.faq,.project-contact,.site-footer{
    max-width:100%!important;
  }
}

@media(max-width:390px){
  .menu-nav a strong{font-size:clamp(2.05rem,9.5vw,2.75rem)!important}
  .menu-nav a{min-height:80px!important}
}

/* =========================================================
   V28 FINAL RESPONSIVE FOUNDATION
   Mobile-first stability layer — iOS / Android / Desktop
   ========================================================= */
:root{
 --mobile-gutter:18px;
 --header-mobile:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{
 width:100%;
 max-width:100%;
 overflow-x:hidden;
 scroll-behavior:smooth;
 -webkit-text-size-adjust:100%;
}
body{
 width:100%;
 min-width:0;
 max-width:100%;
 margin:0;
 overflow-x:hidden!important;
 overflow-y:visible!important;
 touch-action:pan-y!important;
 overscroll-behavior-y:auto;
}
body.menu-open{
 overflow:hidden!important;
 touch-action:auto!important; /* do NOT kill iOS touch scrolling */
}
main{display:block;width:100%;min-width:0;overflow:visible}
img,picture,video,canvas,svg{max-width:100%;height:auto}
button,a,input,textarea,select{font:inherit}
section{min-width:0}

/* Header */
.site-header{
 width:100%!important;
 max-width:100vw!important;
}

/* Menu: fixed shell + independently scrollable content */
.menu-overlay{
 position:fixed!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 min-height:0!important;
 max-height:none!important;
 overflow:hidden!important;
 z-index:10000!important;
}
.menu-panel{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 min-height:0!important;
 max-height:none!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 -webkit-overflow-scrolling:touch!important;
 overscroll-behavior-y:contain!important;
 touch-action:pan-y!important;
 scrollbar-width:none;
}
.menu-panel::-webkit-scrollbar{display:none}

/* No Unicode/emoji arrows anywhere in navigation */
.menu-nav i,.service-arrow,.ui-arrow,.inline-arrow{
 font-family:Arial,sans-serif!important;
 font-variant-emoji:text!important;
}

/* -------- PHONE / TABLET -------- */
@media(max-width:850px){
 body{font-size:16px}

 .site-header{
   height:var(--header-mobile)!important;
   min-height:var(--header-mobile)!important;
   padding:0 var(--mobile-gutter)!important;
   display:flex!important;
   align-items:center!important;
   justify-content:space-between!important;
   gap:12px!important;
 }
 .site-header .topcta{display:none!important}
 .site-header .logo{margin-left:auto!important;max-width:58vw!important}
 .site-header .logo b{overflow:hidden;text-overflow:ellipsis}
 .menu-trigger{flex:0 0 auto!important}

 .menu-panel{
   padding:
     calc(env(safe-area-inset-top,0px) + 18px)
     var(--mobile-gutter)
     calc(env(safe-area-inset-bottom,0px) + 30px)!important;
 }
 .menu-top{
   display:flex!important;
   align-items:center!important;
   justify-content:space-between!important;
   gap:14px!important;
 }
 .menu-nav{
   width:100%!important;
   margin:clamp(34px,7vh,62px) 0 0!important;
 }
 .menu-nav a{
   width:100%!important;
   min-height:82px!important;
   padding:18px 0!important;
   display:grid!important;
   grid-template-columns:36px minmax(0,1fr) 24px!important;
   align-items:center!important;
   gap:10px!important;
 }
 .menu-nav a strong{
   min-width:0!important;
   font-size:clamp(2.15rem,9.2vw,3.2rem)!important;
   line-height:.98!important;
   letter-spacing:-.045em!important;
   white-space:normal!important;
   overflow-wrap:normal!important;
 }
 .menu-foot{
   position:static!important;
   width:100%!important;
   margin-top:38px!important;
   padding:24px 0 12px!important;
 }

 /* Every normal section uses same mobile gutter */
 .scroll-intro,
 .services-section,
 .responsibility,
 .faq,
 .project-contact,
 .site-footer{
   width:100%!important;
   max-width:100%!important;
   padding-left:var(--mobile-gutter)!important;
   padding-right:var(--mobile-gutter)!important;
 }

 /* Hero stays visually equivalent but cannot overflow */
 .hero{
   width:100%!important;
   max-width:100vw!important;
   min-height:700px!important;
   height:min(900px,100svh)!important;
   overflow:hidden!important;
 }
 .hero .left{
   left:var(--mobile-gutter)!important;
   right:var(--mobile-gutter)!important;
   width:auto!important;
   max-width:none!important;
 }
 .hero h1{
   font-size:clamp(3.15rem,13vw,5.6rem)!important;
   line-height:.91!important;
 }
 .hero .car{
   max-width:none!important;
 }

 /* Intro: remove sticky behavior on mobile.
    Sticky scroll scenes are a common source of "page won't scroll" on iOS. */
 .scroll-intro{
   height:auto!important;
   min-height:0!important;
   overflow:hidden!important;
 }
 .scroll-intro-sticky{
   position:relative!important;
   top:auto!important;
   height:auto!important;
   min-height:0!important;
   overflow:visible!important;
 }
 .scroll-intro-inner{
   position:relative!important;
   min-height:620px!important;
   padding-top:90px!important;
   padding-bottom:90px!important;
 }
 .scroll-intro h2,.scroll-intro .reveal-copy{
   font-size:clamp(3.3rem,13vw,5.7rem)!important;
   line-height:.91!important;
 }
 .flying-gallery{
   position:relative!important;
   inset:auto!important;
   width:100%!important;
   height:300px!important;
   margin-top:42px!important;
   overflow:hidden!important;
   pointer-events:none!important;
 }
 .flying-card{
   max-width:44vw!important;
 }

 /* Services */
 .services-section{overflow:hidden!important}
 .service-row{
   width:100%!important;
   max-width:100%!important;
   min-width:0!important;
 }
 .service-row>*{min-width:0!important}
 .service-preview{pointer-events:none!important}

 /* Responsibility */
 .responsibility{overflow:hidden!important}
 .responsibility-head{
   display:grid!important;
   grid-template-columns:1fr!important;
 }
 .responsibility-cards{
   width:100%!important;
   display:grid!important;
   grid-template-columns:1fr!important;
   gap:14px!important;
 }
 .trust-card{
   position:relative!important;
   inset:auto!important;
   width:100%!important;
   max-width:100%!important;
   height:auto!important;
   min-height:300px!important;
   margin:0!important;
   transform:none!important;
 }

 /* Carousels may scroll horizontally themselves without hijacking vertical page scroll */
 .ref-viewport,.reviews-track-wrap{
   width:100%!important;
   overflow-x:auto!important;
   overflow-y:hidden!important;
   -webkit-overflow-scrolling:touch!important;
   touch-action:pan-x pan-y!important;
   overscroll-behavior-x:contain;
   scrollbar-width:none;
 }
 .ref-viewport::-webkit-scrollbar,.reviews-track-wrap::-webkit-scrollbar{display:none}
 .ref-track,.reviews-track{width:max-content!important;max-width:none!important}
 .ref-card{width:min(84vw,390px)!important;flex:0 0 min(84vw,390px)!important}
 .review-card{width:min(82vw,360px)!important;flex:0 0 min(82vw,360px)!important}

 /* FAQ / form */
 .faq-item,.faq-question,.faq-answer{max-width:100%!important}
 .project-contact{
   display:grid!important;
   grid-template-columns:1fr!important;
 }
 .project-form,.form-grid,.form-field{width:100%!important;min-width:0!important}
 .project-form input,.project-form textarea,.project-form select{
   width:100%!important;max-width:100%!important;min-width:0!important;
 }

 /* Floating contact */
 .floating-contact{position:fixed!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
 .contact-popover{
   max-height:calc(100dvh - 100px)!important;
   overflow-y:auto!important;
   -webkit-overflow-scrolling:touch!important;
 }

 .site-footer{overflow:hidden!important}
}

/* Small iPhones */
@media(max-width:430px){
 :root{--mobile-gutter:16px}
 .hero h1{font-size:clamp(3rem,12.6vw,4.7rem)!important}
 .menu-nav a{min-height:76px!important}
 .menu-nav a strong{font-size:clamp(2rem,9vw,2.85rem)!important}
 .responsibility-head h2{font-size:clamp(3rem,12vw,4.7rem)!important}
}

/* Landscape phone: don't trap content in viewport */
@media(max-width:850px) and (orientation:landscape){
 .hero{height:auto!important;min-height:620px!important}
 .menu-panel{padding-top:18px!important}
 .menu-nav{margin-top:20px!important}
 .menu-nav a{min-height:62px!important}
 .menu-nav a strong{font-size:2rem!important}
}

/* =========================================================
   V30 — RESTORED ANIMATED INTRO, FIXED SCROLL GEOMETRY
   One controlled sticky scene, no blank spacer / no scroll trap
   ========================================================= */

/* DESKTOP + TABLET: sticky scene remains animated */
.scroll-intro{
  position:relative!important;
  height:150vh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:clip!important;
  background:#070909!important;
}
.scroll-intro-sticky{
  display:block!important;
  position:sticky!important;
  top:0!important;
  width:100%!important;
  height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
}
.scroll-intro-inner{
  position:relative!important;
  width:min(1500px,89vw)!important;
  height:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(80px,8vh,115px) 0 0!important;
  overflow:visible!important;
}
.scroll-intro h2,
.scroll-intro .reveal-copy{
  position:relative!important;
  z-index:4!important;
  max-width:14ch!important;
  margin:0!important;
  font-size:clamp(4.5rem,7.1vw,8.2rem)!important;
  line-height:.9!important;
  letter-spacing:-.06em!important;
}
.flying-gallery{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:2!important;
}
.fly-card{
  display:block!important;
  position:absolute!important;
  will-change:transform,opacity!important;
}
.scroll-progress{
  display:block!important;
}

/* no artificial gap after the sticky scene */
.scroll-intro + .brand-marquee{
  margin-top:0!important;
}
.brand-marquee{
  position:relative!important;
  z-index:5!important;
}

/* PHONE: keep the SAME animation, but shorten it and use dynamic viewport units.
   The page gets only 35dvh of scroll travel beyond the pinned viewport. */
@media(max-width:850px){
  .scroll-intro{
    height:135dvh!important;
    min-height:0!important;
    padding:0!important;
    overflow:clip!important;
  }
  .scroll-intro-sticky{
    display:block!important;
    position:sticky!important;
    top:0!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .scroll-intro-inner{
    width:calc(100% - 36px)!important;
    height:100%!important;
    min-height:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 76px) 0 0!important;
  }
  .scroll-intro h2,
  .scroll-intro .reveal-copy{
    font-size:clamp(3.15rem,12.2vw,5.3rem)!important;
    line-height:.91!important;
    max-width:10ch!important;
  }
  .flying-gallery{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    pointer-events:none!important;
  }
  .fly-card{
    display:block!important;
    max-width:none!important;
  }
}

/* Small iPhone: slightly shorter pinning */
@media(max-width:480px){
  .scroll-intro{
    height:130dvh!important;
  }
  .scroll-intro-inner{
    width:calc(100% - 32px)!important;
    padding-top:calc(env(safe-area-inset-top,0px) + 68px)!important;
  }
  .scroll-intro h2,
  .scroll-intro .reveal-copy{
    font-size:clamp(2.9rem,11.8vw,4.35rem)!important;
  }
}

/* Landscape phones must never be trapped in a 100vh scene */
@media(max-width:850px) and (orientation:landscape){
  .scroll-intro{height:145dvh!important}
  .scroll-intro-sticky{height:100dvh!important}
  .scroll-intro-inner{padding-top:42px!important}
  .scroll-intro h2,.scroll-intro .reveal-copy{
    font-size:clamp(2.8rem,7.5vw,4.2rem)!important;
    max-width:15ch!important;
  }
}