/* Site-wide base */
html{scroll-behavior:smooth}body{margin:0;background:#fff}

/* Section labels ("eyebrows") on every page: 13.5px desktop, 12.5px phones */
[class$="__eyebrow"]:not(.bgx-mm__eyebrow),[class*="__eyebrow "]:not(.bgx-mm__eyebrow){font-size:13.5px !important; letter-spacing:.16em !important}
@media (max-width:600px){ [class$="__eyebrow"]:not(.bgx-mm__eyebrow),[class*="__eyebrow "]:not(.bgx-mm__eyebrow){font-size:12.5px !important; letter-spacing:.15em !important} }

/* services grid titles: one line on smaller laptops */
@media (min-width:1100px) and (max-width:1360px){ .bgx-sol__grid .bgx-sol__card h3{font-size:17.5px!important} .bgx-wl__stats span{font-size:12px!important; letter-spacing:.06em!important} }
/* main heading: 2 lines on desktop */
@media (min-width:961px){
  .bgx-sv__intro,.bgx-ab__intro,.bgx-in__intro,.bgx-pc__intro,.bgx-sp__intro,.bgx-ct__intro,.bgx-cr__intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important; column-gap:64px!important}
  .bgx-ma__intro{grid-template-columns:minmax(0,6fr) minmax(0,5fr)!important; column-gap:64px!important}
  .bgx-sv__h1,.bgx-ab__h1,.bgx-in__h1,.bgx-pc__h1,.bgx-sp__h1,.bgx-ct__h1,.bgx-cr__h1{font-size:clamp(32px,3.5vw,46px)!important}
}

/* Smooth page changes (Chrome, Edge, Safari 18+; other browsers simply load the page) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.bgx-site-hd { view-transition-name: bgx-site-hd; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Responsive polish (all pages) ---------- */
/* Long German/French words break cleanly on phones instead of pushing the page sideways */
@media (max-width:600px){
  html:is([lang="de"],[lang="fr"]) body{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
  body{overflow-wrap:break-word}
}
/* Grid columns never grow wider than the screen */
.bgx-ct__side{grid-template-columns:minmax(0,1fr)}
.bgx-fq__wrap > *,.bgx-sv__intro > *,.bgx-ct__main > *{min-width:0}
/* Smallest phones: key numbers fit their column */
@media (max-width:380px){
  .bgx-sv__stats b{font-size:31px}
  .bgx-sv__stats li{padding-left:16px; padding-right:12px}
}
/* Phones: readable labels and comfortable tap areas (layout unchanged) */
@media (max-width:480px){
  dt,.bgx-lx__badge{font-size:12px !important}
  .bgx-ft__col a,.bgx-fq__more{position:relative}
  .bgx-ft__col a::after,.bgx-fq__more::after{content:""; position:absolute; inset:-11px -6px}
}
/* Very large screens (2K/4K monitors): scale the whole layout so it fills the screen like on a laptop */
@media (min-width:2200px){ html{zoom:1.25} }
@media (min-width:3000px){ html{zoom:1.6} }
/* Buttons never spill out of their box (long German/French labels) */
.bgx-ct__assess .bgx-ct__btn,.bgx-fq__ask .bgx-fq__btn{max-width:100%; white-space:normal; text-align:left}
/* Assessment form: long German/French answer labels wrap inside their boxes */
html:is([lang="de"],[lang="fr"]) .bgx-pr{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
/* Phone menu: every item on one line */
@media (max-width:440px){ .bgx-mm .bgx-mm__nav .bgx-mm__mi{font-size:clamp(24px,7.4vw,32px)} }