/* FINAL MOBILE STABILITY PASS — keeps the approved SRB design, removes the experimental glow/card treatment. */
@media (max-width:760px){
  /* Hero: use the real atelier image only. No extra halo, glow or moving grid. */
  body:has(.nav-center) .hero-grid,
  body:has(.nav-center) .hero:after{display:none!important;animation:none!important}
  body:has(.nav-center) .hero{min-height:538px!important;background-size:auto 72%!important;background-position:100% 57%!important}
  body:has(.nav-center) .hero:before{
    background:linear-gradient(90deg,#02050b 0%,#02050b 46%,rgba(2,5,11,.93) 60%,rgba(2,5,11,.52) 78%,rgba(2,5,11,.10) 100%),linear-gradient(180deg,rgba(2,5,11,.20),rgba(2,5,11,.06) 48%,rgba(2,5,11,.84) 100%)!important;
  }
  body:has(.nav-center) .hero-copy{max-width:61%!important;margin-top:37px!important}
  body:has(.nav-center) .hero h1{max-width:9.2ch!important;font-size:clamp(31px,8.55vw,36px)!important;line-height:.98!important}
  body:has(.nav-center) .hero-bottom p{max-width:20.5ch!important}

  /* Demo cards: original surface, no pulsing borders/glow. */
  body:has(.nav-center) .deck-card{animation:none!important;box-shadow:none!important}
  body:has(.nav-center) .deck-card:hover{transform:none!important}

  /* Services: restore the original accordion/list language on phones.
     This avoids the AI-looking swipe cards and keeps every service readable. */
  body:has(.nav-center) .services{display:block!important}
  body:has(.nav-center) .system-map{animation:none!important;transform:none!important}
  body:has(.nav-center) .system-map svg,
  body:has(.nav-center) .system-map path,
  body:has(.nav-center) .system-map circle{animation:none!important;filter:none!important;transform:none!important}
  body:has(.nav-center) .service-list{
    display:block!important;width:100%!important;margin:24px 0 0!important;padding:0!important;overflow:visible!important;border-top:1px solid var(--line)!important;
  }
  body:has(.nav-center) .service-list article.service-item{
    display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  body:has(.nav-center) .service-list article.service-item:before,
  body:has(.nav-center) .service-list article.service-item:after{display:none!important;content:none!important}
  body:has(.nav-center) .service-item>button{
    position:relative!important;z-index:auto!important;display:grid!important;grid-template-columns:30px minmax(0,1fr) 22px!important;gap:10px!important;align-items:start!important;width:100%!important;min-height:0!important;padding:20px 2px!important;pointer-events:auto!important;background:transparent!important;
  }
  body:has(.nav-center) .service-item>button span{padding-top:4px!important;font-size:9px!important}
  body:has(.nav-center) .service-item>button h3{max-width:none!important;font-size:21px!important;line-height:1.08!important}
  body:has(.nav-center) .service-item>button p{grid-column:2/3!important;max-width:27ch!important;margin:6px 0 0!important;font-size:13px!important;line-height:1.5!important}
  body:has(.nav-center) .service-item>button b{display:block!important;align-self:start!important;font-size:20px!important;line-height:1!important;color:var(--champagne)!important}
  body:has(.nav-center) .service-detail{
    display:grid!important;grid-template-columns:1fr!important;gap:14px!important;max-height:0!important;opacity:0!important;overflow:hidden!important;padding:0 12px 0 32px!important;border:0!important;transition:max-height .42s ease,opacity .28s ease,padding .42s ease!important;
  }
  body:has(.nav-center) .service-item.open .service-detail{max-height:380px!important;opacity:1!important;padding:0 12px 22px 32px!important}
  body:has(.nav-center) .service-detail:before{display:none!important;content:none!important}
  body:has(.nav-center) .service-detail p{display:block!important;margin:0!important;font-size:13px!important;line-height:1.6!important}
  body:has(.nav-center) .service-detail a{display:inline-block!important;width:max-content!important;max-width:100%!important;padding:0 0 5px!important;border:0!important;border-bottom:1px solid rgba(214,189,135,.45)!important;border-radius:0!important;background:transparent!important;font-size:10px!important}

  /* Keep motion functional but non-luminous. */
  body:has(.nav-center) .materials-stage:before,
  body:has(.nav-center) .contact-orbit,
  body:has(.nav-center) .contact-orbit:before,
  body:has(.nav-center) .contact-orbit:after,
  body:has(.nav-center) .contact-orbit i{animation:none!important;filter:none!important}

  /* Long translated text must wrap without pushing the viewport. */
  html:not([data-language="EN"]) body:has(.nav-center) .service-item>button{grid-template-columns:30px minmax(0,1fr) 22px!important}
  html:not([data-language="EN"]) body:has(.nav-center) .service-item>button h3,
  html:not([data-language="EN"]) body:has(.nav-center) .service-item>button p{overflow-wrap:anywhere!important;hyphens:auto!important}
}

@media (max-width:390px){
  body:has(.nav-center) .hero-copy{max-width:64%!important}
  body:has(.nav-center) .hero h1{font-size:32px!important}
  body:has(.nav-center) .service-item>button{grid-template-columns:28px minmax(0,1fr) 20px!important}
  body:has(.nav-center) .service-item>button h3{font-size:20px!important}
  body:has(.nav-center) .service-item>button p{font-size:12.5px!important}
}

/* DESKTOP-HERO PARITY ON PHONES — same approved atelier scene, no alternate mobile artwork. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:650px!important;
    padding:108px var(--phone-gutter,15px) 46px!important;
    background-color:#030504!important;
    background-image:url('assets/brand/srb-atelier-hero-v3.png')!important;
    background-repeat:no-repeat!important;
    background-size:auto 100%!important;
    background-position:74% 50%!important;
  }
  body:has(.nav-center) .hero-art{display:none!important}
  body:has(.nav-center) .hero:before{
    display:block!important;
    z-index:2!important;
    background:
      linear-gradient(90deg,rgba(1,3,2,.97) 0%,rgba(1,3,2,.88) 30%,rgba(1,3,2,.48) 52%,rgba(1,3,2,.12) 76%,rgba(1,3,2,.04) 100%),
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.02) 56%,rgba(0,0,0,.30) 100%)!important;
  }
  body:has(.nav-center) .hero-copy{
    position:relative!important;
    z-index:5!important;
    width:64%!important;
    max-width:64%!important;
    margin-top:38px!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    background-size:auto 100%!important;
    background-position:75% 50%!important;
  }
  body:has(.nav-center) .hero-copy{width:65%!important;max-width:65%!important}
}

/* FINAL MOBILE HERO SCALE — keep desktop untouched; fit the atelier SRB mark comfortably on phones. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    background-size:auto 88%!important;
    background-position:76% 52%!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    background-size:auto 86%!important;
    background-position:77% 52%!important;
  }
}

/* MOBILE HERO — final composition fix (2026-08-18): keep desktop untouched.
   Scale the approved desktop atelier image down enough that the full SRB wall mark fits on phone screens. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    background-size:auto 70%!important;
    background-position:88% 52%!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    background-size:auto 68%!important;
    background-position:89% 52%!important;
  }
}

/* 2026-08-18 FINAL MOBILE HERO COMPOSITION
   Keep the exact desktop atelier scene. On phones the SRB wall mark stays
   inside the right-hand architectural frame, beside the copy — never under it.
   Desktop rules are untouched. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:620px!important;
    padding:108px var(--phone-gutter,15px) 28px!important;
    background-color:#030504!important;
    background-image:url('assets/brand/srb-atelier-hero-v3.png')!important;
    background-repeat:no-repeat!important;
    background-size:auto 100%!important;
    background-position:65% 50%!important;
    overflow:hidden!important;
  }
  body:has(.nav-center) .hero-grid,
  body:has(.nav-center) .hero-art,
  body:has(.nav-center) .hero:after{display:none!important}
  body:has(.nav-center) .hero:before{
    display:block!important;
    z-index:2!important;
    background:
      linear-gradient(90deg,rgba(1,3,2,.98) 0%,rgba(1,3,2,.94) 31%,rgba(1,3,2,.76) 47%,rgba(1,3,2,.30) 62%,rgba(1,3,2,.04) 78%,rgba(1,3,2,0) 100%),
      linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.34) 100%)!important;
  }
  body:has(.nav-center) .hero-copy{
    position:relative!important;
    z-index:5!important;
    width:min(53%,214px)!important;
    max-width:min(53%,214px)!important;
    margin-top:82px!important;
  }
  body:has(.nav-center) .hero h1{
    max-width:10ch!important;
    font-size:clamp(29px,7.7vw,34px)!important;
    line-height:.97!important;
    letter-spacing:-1.25px!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    background-size:auto 100%!important;
    background-position:63% 50%!important;
  }
  body:has(.nav-center) .hero-copy{
    width:min(52%,202px)!important;
    max-width:min(52%,202px)!important;
  }
  body:has(.nav-center) .hero h1{font-size:30px!important}
}


/* APPROVED MOBILE HERO — mobile only; desktop untouched. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:790px!important;padding:0!important;background-color:#020403!important;
    background-image:url('assets/brand/srb-atelier-hero-v3.png')!important;
    background-repeat:no-repeat!important;background-size:auto 100%!important;
    background-position:58% 50%!important;overflow:hidden!important;
  }
  body:has(.nav-center) .hero-grid,body:has(.nav-center) .hero-art,body:has(.nav-center) .hero:after{display:none!important}
  body:has(.nav-center) .hero:before{
    display:block!important;z-index:2!important;
    background:linear-gradient(90deg,rgba(1,3,2,.98) 0%,rgba(1,3,2,.94) 26%,rgba(1,3,2,.68) 42%,rgba(1,3,2,.20) 58%,rgba(1,3,2,0) 75%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.06) 72%,rgba(0,0,0,.28))!important;
  }
  body:has(.nav-center) .hero-copy{
    position:absolute!important;z-index:5!important;left:clamp(20px,5vw,30px)!important;top:25%!important;
    width:43%!important;max-width:190px!important;margin:0!important;
  }
  body:has(.nav-center) .hero .eyebrow{font-size:10px!important;line-height:1.45!important;letter-spacing:2px!important;margin-bottom:25px!important;white-space:nowrap!important}
  body:has(.nav-center) .hero h1{max-width:none!important;font-size:clamp(30px,8.1vw,36px)!important;line-height:1.02!important;letter-spacing:-1.35px!important;margin:0 0 24px!important}
  body:has(.nav-center) .hero-bottom{display:block!important;max-width:100%!important}
  body:has(.nav-center) .hero-bottom p{max-width:185px!important;font-size:13px!important;line-height:1.62!important;margin-bottom:18px!important}
  body:has(.nav-center) .hero-bottom a{font-size:12px!important;white-space:nowrap!important}
}
@media (max-width:390px){
  body:has(.nav-center) .hero{min-height:760px!important;background-size:auto 98%!important;background-position:58% 50%!important}
  body:has(.nav-center) .hero-copy{left:20px!important;top:24%!important;width:44%!important;max-width:174px!important}
  body:has(.nav-center) .hero h1{font-size:30px!important}
  body:has(.nav-center) .hero-bottom p{font-size:12.5px!important;max-width:170px!important}
}


/* FINAL APPROVED MOBILE COMPOSITION — desktop untouched */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:760px!important;
    padding:0!important;
    background-color:#020403!important;
    background-image:url('assets/brand/srb-atelier-hero-mobile-approved.jpg')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
    overflow:hidden!important;
  }
  body:has(.nav-center) .hero-grid,
  body:has(.nav-center) .hero-art,
  body:has(.nav-center) .hero:after{display:none!important}
  body:has(.nav-center) .hero:before{
    display:block!important;
    z-index:2!important;
    background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.05) 72%,rgba(0,0,0,.18))!important;
  }
  body:has(.nav-center) .hero-copy{
    position:absolute!important;
    z-index:5!important;
    left:20px!important;
    top:24%!important;
    width:44%!important;
    max-width:176px!important;
    margin:0!important;
    overflow:visible!important;
  }
  body:has(.nav-center) .hero .eyebrow{
    width:176px!important;
    white-space:normal!important;
    font-size:9.5px!important;
    line-height:1.45!important;
    letter-spacing:1.8px!important;
    margin-bottom:24px!important;
  }
  body:has(.nav-center) .hero h1{
    max-width:none!important;
    font-size:31px!important;
    line-height:1.02!important;
    letter-spacing:-1.2px!important;
    margin:0 0 23px!important;
  }
  body:has(.nav-center) .hero-bottom{
    display:block!important;
    max-width:100%!important;
  }
  body:has(.nav-center) .hero-bottom p{
    max-width:174px!important;
    font-size:12.5px!important;
    line-height:1.58!important;
    margin-bottom:18px!important;
  }
  body:has(.nav-center) .hero-bottom a{
    font-size:12px!important;
    white-space:nowrap!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{min-height:748px!important}
  body:has(.nav-center) .hero-copy{left:18px!important;top:24%!important;width:45%!important;max-width:170px!important}
  body:has(.nav-center) .hero h1{font-size:30px!important}
  body:has(.nav-center) .hero .eyebrow{width:170px!important}
  body:has(.nav-center) .hero-bottom p{max-width:168px!important;font-size:12px!important}
}


/* FINAL APPROVED MOBILE SPACING — remove only the empty gap before Live Demo Concepts */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:640px!important;
  }
  body:has(.nav-center) #work,
  body:has(.nav-center) .demo-section,
  body:has(.nav-center) .work-section{
    margin-top:0!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    min-height:620px!important;
  }
}


/* FINAL MOBILE GAP FIX — 2026-08-18
   Only shortens the mobile hero; desktop remains untouched. */
@media (max-width:760px){
  body:has(.nav-center) .hero{
    min-height:520px!important;
    height:520px!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero{
    min-height:500px!important;
    height:500px!important;
  }
}


/* FINAL APPROVED MOBILE SUPPORTING COPY
   Mobile only: widen the supporting paragraph left-to-right.
   Desktop remains exactly as before. */
@media (max-width:760px){
  body:has(.nav-center) .hero-bottom{
    width:min(88vw, 560px)!important;
    max-width:none!important;
  }
  body:has(.nav-center) .hero-bottom p{
    width:min(88vw, 560px)!important;
    max-width:none!important;
    font-size:12.5px!important;
    line-height:1.5!important;
    margin-bottom:18px!important;
  }
}
@media (max-width:390px){
  body:has(.nav-center) .hero-bottom{
    width:88vw!important;
  }
  body:has(.nav-center) .hero-bottom p{
    width:88vw!important;
    max-width:none!important;
    font-size:12px!important;
    line-height:1.5!important;
  }
}


/* === USER-APPROVED FINAL PATCH — 2026-08-18 ===
   Mobile only unless noted. Keeps desktop composition untouched. */
@media (max-width:760px){
  /* Translated hero: preserve approved top start; prevent ugly mid-word breaks.
     German gets the specifically approved slightly smaller fit. */
  html:not([data-language="EN"]) body:has(.nav-center) .hero h1,
  html:not([data-language="EN"]) body:has(.nav-center) .hero h1 *{
    overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;-webkit-hyphens:none!important;
  }
  html[data-language="DE"] body:has(.nav-center) .hero-copy{
    left:clamp(20px,5vw,30px)!important;top:24%!important;width:47%!important;max-width:205px!important;margin:0!important;
  }
  html[data-language="DE"] body:has(.nav-center) .hero h1{
    max-width:none!important;font-size:clamp(27px,7.1vw,30px)!important;line-height:.99!important;letter-spacing:-1.1px!important;
  }

  /* Services: keep original individual colours; selected/open card reveals the site's moving background. */
  body:has(.nav-center) .service-list article.service-item{border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important;overflow:hidden!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(1){background:linear-gradient(145deg,rgba(25,34,43,.98),rgba(7,12,18,.99))!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(2){background:linear-gradient(145deg,rgba(24,42,39,.98),rgba(7,15,15,.99))!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(3){background:linear-gradient(145deg,rgba(28,35,46,.98),rgba(7,11,17,.99))!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(4){background:linear-gradient(145deg,rgba(39,32,25,.98),rgba(15,11,9,.99))!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(5){background:linear-gradient(145deg,rgba(24,42,39,.98),rgba(7,15,15,.99))!important}
  body:has(.nav-center) .service-list article.service-item:nth-child(6){background:linear-gradient(145deg,rgba(28,35,46,.98),rgba(7,11,17,.99))!important}
  body:has(.nav-center) .service-list article.service-item.open{background:transparent!important;backdrop-filter:none!important}
  body:has(.nav-center) .service-item>button{pointer-events:auto!important;cursor:pointer!important}

  /* Mobile motion: same two live orbit systems as desktop, but restrained for touch screens. */
  body:has(.nav-center) .system-map{animation:phoneSystemHover 5.8s ease-in-out infinite!important;transform-origin:50% 48%!important}
  body:has(.nav-center) .system-map svg{animation:phoneSystemTurn 16s linear infinite!important;transform-origin:50% 50%!important}
  body:has(.nav-center) .system-map path{animation:phoneMapDash 7.5s linear infinite!important}
  body:has(.nav-center) .system-map circle{animation:phoneMapNode 2.4s ease-in-out infinite alternate!important;filter:drop-shadow(0 0 7px rgba(200,169,107,.55))!important;transform-box:fill-box!important;transform-origin:center!important}
  body:has(.nav-center) .contact-orbit{animation:phoneContactHover 5.5s ease-in-out infinite!important}
  body:has(.nav-center) .contact-orbit:before{animation:phoneContactRingOne 7.5s linear infinite!important}
  body:has(.nav-center) .contact-orbit:after{animation:phoneContactRingTwo 6.2s linear infinite reverse!important}
  body:has(.nav-center) .contact-orbit i:first-child{animation:phoneContactRingThree 9s linear infinite!important}
  body:has(.nav-center) .contact-orbit i:last-child{animation:phoneContactDot 4.1s ease-in-out infinite alternate!important}
}


/* SRB MOBILE CONSOLIDATION — 2026-08-18 */
@media (max-width:760px){
html,body{max-width:100%;overflow-x:hidden}
.nav{left:8px!important;right:8px!important;width:auto!important;gap:8px!important}.nav-end{min-width:0!important;max-width:calc(100% - 90px)!important;gap:6px!important}.nav-end select{width:58px!important;min-width:58px!important;padding-inline:8px!important}.nav-cta{min-width:82px!important;padding-inline:11px!important;white-space:nowrap!important}
.hero{min-height:590px!important;padding:92px 15px 24px!important;background-image:url('assets/brand/srb-atelier-hero-v3.png')!important;background-size:auto 530px!important;background-position:80% 56px!important;background-repeat:no-repeat!important}.hero-copy{width:min(58%,226px)!important;max-width:min(58%,226px)!important;margin-top:88px!important;overflow:visible!important}.hero h1{white-space:normal!important;max-width:10.5ch!important;font-size:clamp(29px,7.5vw,33px)!important;line-height:.98!important}.hero-bottom,.hero-bottom p{max-width:100%!important}.hero-bottom p{font-size:12.5px!important;line-height:1.52!important}
.demo-showcase{padding-top:18px!important}.demo-intro{position:static!important;display:grid!important;gap:4px!important;margin:0 0 14px!important;padding:0!important}.demo-intro small{margin:0!important;white-space:normal!important}.hero-demo-deck{position:static!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0!important}.demo-showcase .deck-card{min-width:0!important;min-height:124px!important;padding:12px 10px!important;overflow:hidden!important}.demo-showcase .deck-card-body b,.demo-showcase .deck-card-body small{overflow-wrap:anywhere!important}.demo-showcase .deck-route{flex-wrap:wrap!important}
.restaurant-system,.services,.brand-graphics,.pricing,.contact{width:calc(100% - 30px)!important;max-width:none!important}.restaurant-system-stage,.materials-stage,.contact form{max-width:100%!important;overflow:hidden!important}.materials-layout,.price-grid,.contact{grid-template-columns:1fr!important}.service-item>button h3,.service-item>button p,.price-grid article,.contact-copy,.contact form{min-width:0!important;overflow-wrap:anywhere!important}
html[lang="de"] .hero-copy,html[lang="fr"] .hero-copy,html[lang="it"] .hero-copy,html[lang="es"] .hero-copy{width:min(61%,238px)!important;max-width:min(61%,238px)!important}html[lang="de"] .hero h1,html[lang="fr"] .hero h1,html[lang="it"] .hero h1,html[lang="es"] .hero h1{font-size:clamp(27px,7vw,31px)!important;max-width:11.5ch!important;line-height:1.02!important}html[lang="hi"] .hero-copy,html[lang="ur"] .hero-copy{width:min(62%,242px)!important;max-width:min(62%,242px)!important}html[lang="hi"] .hero h1,html[lang="ur"] .hero h1{font-size:clamp(26px,6.8vw,30px)!important;max-width:12ch!important;line-height:1.08!important}
}
@media (max-width:390px){.hero{background-position:79% 52px!important;background-size:auto 510px!important}.hero-copy{width:min(59%,218px)!important;max-width:min(59%,218px)!important;margin-top:86px!important}.hero h1{font-size:29px!important}.nav-end select{width:54px!important;min-width:54px!important}.nav-cta{min-width:76px!important;padding-inline:9px!important}}

/* FINAL MOBILE VISUAL STABILITY PASS — 2026-08-18 */
@media (max-width:760px){
  .nav{box-sizing:border-box!important;overflow:visible!important}
  .logo img{max-width:100%!important;height:auto!important}
  .hero-copy{left:18px!important;top:auto!important;box-sizing:border-box!important}
  .hero h1,.hero h1 *{overflow-wrap:normal!important;word-break:keep-all!important;hyphens:none!important}
  .hero-bottom{width:min(86vw,520px)!important;max-width:none!important}
  .hero-bottom p{width:min(86vw,520px)!important;max-width:none!important;overflow-wrap:normal!important;word-break:normal!important}
  .hero-demo-deck>*{min-width:0!important}
  .app-demo-grid,.materials-layout,.price-grid,.contact{min-width:0!important}
  .app-demo-copy,.deck-card-body,.service-detail,.material-choice,.price-grid article,.contact-copy,.contact form{min-width:0!important}
  .app-demo-copy h2,.app-demo-copy p,.service-detail p,.material-choice b,.material-choice small,.price-grid h3,.price-grid p,.contact-copy p{overflow-wrap:break-word!important;word-break:normal!important}
}
@media (max-width:390px){
  .hero-bottom,.hero-bottom p{width:86vw!important}
  .hero-demo-deck{grid-template-columns:1fr!important}
  .demo-showcase .deck-card{min-height:112px!important}
}


/* MOBILE HERO LOGO SAFE-ZONE — 2026-08-19
   Prevent translated headline from covering the SRB artwork. Desktop untouched. */
@media (max-width:760px){
  html[data-language="DE"] body:has(.nav-center) .hero-copy,
  html[lang="de"] body:has(.nav-center) .hero-copy{
    left:20px!important;
    width:46%!important;
    max-width:184px!important;
  }
  html[data-language="DE"] body:has(.nav-center) .hero h1,
  html[lang="de"] body:has(.nav-center) .hero h1{
    font-size:clamp(26px,6.7vw,29px)!important;
    max-width:9.2ch!important;
    line-height:1.01!important;
    letter-spacing:-1px!important;
  }
}
@media (max-width:390px){
  html[data-language="DE"] body:has(.nav-center) .hero-copy,
  html[lang="de"] body:has(.nav-center) .hero-copy{
    left:18px!important;
    width:45%!important;
    max-width:176px!important;
  }
  html[data-language="DE"] body:has(.nav-center) .hero h1,
  html[lang="de"] body:has(.nav-center) .hero h1{font-size:26px!important;}
}