/* A clean visual break between the fixed summit navigation and the photo. */
.hero{border-top:0;background-size:100% 100%,auto calc(100% - 92px);background-position:center,left 92px;background-clip:border-box}@media(max-width:991px){.hero{background-size:100% 100%,auto calc(100% - 82px);background-position:center,left 82px}}@media(max-width:575px){.hero{background-size:100% 100%,auto calc(100% - 78px);background-position:center,left 78px}}

/* Desktop: the photograph is an inset card rather than a full-bleed block;
   the text and metrics have their own clear visual areas. */
@media (min-width:1200px){
  .hero{min-height:670px;padding-top:145px;padding-bottom:82px;overflow:visible;background:#fff;background-image:none}
  .hero:before{top:90px;right:auto;bottom:34px;left:clamp(36px,3.5vw,72px);width:min(48vw,820px);height:auto;border-radius:26px;background:linear-gradient(90deg,rgba(255,255,255,0) 54%,rgba(255,255,255,.22) 100%),url('/assets/rds-hero-v4.png');background-size:100% 100%,cover;background-position:center,left center;background-repeat:no-repeat;box-shadow:0 20px 45px rgba(32,24,55,.14);opacity:1}
  .hero:after{display:block;top:105px;right:4%;bottom:auto;left:auto;width:250px;height:250px;border:0;border-radius:50%;background:radial-gradient(circle at 48% 48%,#74d8d8 0 1px,transparent 2px),radial-gradient(circle,#5f3fc7 0 1px,transparent 2px);background-size:18px 18px,27px 27px;opacity:.18;z-index:0}
  .hero .container-xxl{z-index:1}
  .hero .hero-copy-block{flex:0 0 50%;max-width:50%;padding-left:clamp(36px,4vw,80px)}
  .hero h1{font-size:clamp(54px,5.25vw,66px)}
  .hero p.lead{max-width:100%;margin-top:20px}
  .hero .event-stamp{margin-top:48px;margin-left:calc(50% + clamp(36px,4vw,80px))}
  .stat-strip{position:relative;z-index:2;margin-top:-52px;background:transparent;border:0}
  .stat-strip .container-xxl{max-width:1080px;padding:0;overflow:hidden;border:1px solid #e4e0ec;border-radius:20px;background:#fff;box-shadow:0 16px 34px rgba(42,31,72,.12)}
  .stat-item{padding:22px 18px 21px;border-right:1px solid #e6e2ec}
  .stat-item b{font-size:30px;line-height:1.05}
  .stat-item span{margin-top:7px;font-size:11px;line-height:1.35;letter-spacing:.35px;color:#5f5b68}
}

@media (min-width:992px) and (max-width:1199.98px){
  .hero{min-height:570px;background-size:100% 100%,76% calc(100% - 80px);background-position:center,left 80px}
  .hero h1{font-size:58px}
  .hero p.lead{max-width:390px}
  .hero .event-stamp{margin-top:46px}
}

/* Tablet: reserve the right-hand side for the copy.  Bootstrap makes the
   original lg column full-width here, which used to put the heading over the
   flag. */
@media (min-width:576px) and (max-width:991.98px){
  .hero .hero-copy-block{flex:0 0 47%;max-width:47%;margin-left:53%}
  .hero h1{font-size:clamp(44px,6vw,52px)}
  .hero p.lead{max-width:100%;margin:18px 0 22px;font-size:15px;line-height:1.55}
  .hero .event-stamp{margin-top:42px;margin-left:53%;gap:10px;font-size:8px;letter-spacing:.45px}
  .hero .event-stamp i{width:46px}
}

/* Phone: keep the flag and visitors in a complete photo above the copy;
   there is no narrow text column competing with the image. */
@media (max-width:575.98px){
  .hero{min-height:650px;padding-top:338px;padding-bottom:34px;background-image:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.18) 33%,rgba(255,255,255,.92) 48%,#fff 59%),url('/assets/rds-hero-v4.png');background-size:100% 100%,100% auto;background-position:center,left 78px}
  .hero .hero-copy-block{padding:0 4px}
  .hero h1{font-size:clamp(42px,13vw,52px);letter-spacing:-1.5px}
  .hero p.lead{margin:16px 0 24px;font-size:16px;line-height:1.5}
  .hero .event-stamp{margin-top:28px;gap:10px;font-size:8px;letter-spacing:.45px}
  .hero .event-stamp i{width:42px}
}
html{scroll-behavior:smooth}.hero-vacancies-link{margin-top:3px;text-decoration:none}.hero-vacancies-link:hover{color:#fff}