:root{
  --so27-orange:#F28C28;
  --so27-navy:#1F2A44;
  --so27-navy-dark:#102334;
  --so27-ivory:#F7F5F2;
  --so27-white:#FFFFFF;
  --so-copy:#343B45;
  --so-head:var(--font-headline,"brando-sans",Arial,Helvetica,sans-serif);
  --so-body:var(--font-body,"elza",Arial,Helvetica,sans-serif);
  --so-side:clamp(38px,5.05vw,96px)
}

html{scroll-behavior:smooth}
body.so27-site{
  margin:0;
  background:var(--so27-ivory);
  color:var(--so27-navy);
  font-family:var(--so-body)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
body.so27-site *,body.so27-site *:before,body.so27-site *:after{box-sizing:border-box}
body.so27-site #breadcrumb,
body.so27-site #slider.empty{display:none!important}

/* IMPORTANT: #top-wrapper contains #header in Eclipse.
   Do not hide it. The dedicated SO27 page template suppresses only the old topbar. */
body.so27-site #top-wrapper{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important
}

/* Dedicated SO27 template hosts.
   Legacy Eclipse header/footer parts are removed server-side in fe_page_spritzopen_2027.html5. */
body.so27-site #stickyheader{display:none!important}

body.so27-site #header{
  display:block!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}
body.so27-site #header>.inside{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important
}
body.so27-site #header .so27-header{
  display:block!important;
  width:100%!important
}

body.so27-site #footer{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important
}
body.so27-site #footer>.inside{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important
}
body.so27-site #footer .so27-footer{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important
}
body.so27-site #bottom{display:none!important}

/* Remove Eclipse article/container spacing. */
body.so27-home #main>.inside>br{display:none!important}
body.so27-home .so27-article{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}
body.so27-home .so27-article>.container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}
body.so27-home .so27-article .ce_text{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}

.so27-section{position:relative;width:100%;overflow:hidden}
.so27-section h1,.so27-section h2,.so27-section h3{margin:0;font-family:var(--so-head)!important}
.so27-section p{margin:0;font-family:var(--so-body)!important}
.so27-dot{color:var(--so27-orange)}
.so27-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
.so27-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--so27-navy);
  font:600 clamp(8px,1.05vw,13px)/1 var(--so-body)!important;
  letter-spacing:.24em;
  text-transform:uppercase
}
.so27-kicker:after{
  content:"";
  display:block;
  width:clamp(60px,10vw,145px);
  height:1px;
  background:currentColor;
  opacity:.38
}
.so27-kicker--light{color:rgba(247,245,242,.76)}
.so27-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(32px,4vw,48px);padding:0 clamp(14px,2vw,25px);
  border:1px solid currentColor;border-radius:999px;
  font:600 clamp(8px,.9vw,11px)/1 var(--so-body)!important;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none!important
}
.so27-btn--ghost{color:var(--so27-ivory)!important;border-color:rgba(247,245,242,.70)}
.so27-btn--orange{background:var(--so27-orange);border-color:var(--so27-orange);color:#fff!important}

/* ==========================================================================
   HEADER — screenshot ratio: ~64px at 754px reference
   ========================================================================== */
.so27-header{
  position:relative;
  z-index:2;
  background:var(--so27-ivory);
  border-bottom:1px solid rgba(31,42,68,.05)
}
.so27-header__inner{
  width:100%;
  height:clamp(64px,7.4vw,92px);
  padding:0 var(--so-side);
  display:grid;
  grid-template-columns:clamp(105px,15vw,210px) 1fr auto;
  align-items:center;
  gap:20px
}
.so27-header__brand{
  display:inline-block;
  color:var(--so27-navy)!important;
  font:700 clamp(23px,3.5vw,45px)/.76 var(--so-head)!important;
  letter-spacing:-.06em;text-decoration:none!important
}
.so27-header__brand>span{display:block}
.so27-header__nav{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3.1vw,48px)
}
.so27-header__nav a{
  position:relative;
  color:var(--so27-navy)!important;
  font:600 clamp(8px,.8vw,11px)/1 var(--so-body)!important;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none!important
}
.so27-header__nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:-12px;height:2px;
  background:var(--so27-orange);transition:right .2s ease
}
.so27-header__nav a:hover:after,.so27-header__nav a.is-active:after{right:0}
.so27-header__cta{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  min-height:clamp(34px,4.2vw,50px);
  padding:0 clamp(16px,2.4vw,28px);
  border-radius:999px;background:var(--so27-orange);color:#fff!important;
  font:600 clamp(8px,.9vw,11px)/1 var(--so-body)!important;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none!important
}
.so27-header__menu,.so27-mobile-nav{display:none}

/* ==========================================================================
   HERO — exact supplied artwork, 760:407 like screenshot
   ========================================================================== */
.so27-hero{background:#182636}
.so27-hero__poster{display:block;width:100%;margin:0;line-height:0}
.so27-hero__poster img{display:block;width:100%;height:auto;max-width:none!important}
.so27-hero__poster-link{
  position:absolute;z-index:5;left:4.3%;top:84%;width:18.6%;height:9.2%;border-radius:999px
}
.so27-hero__mobile{display:none}

/* ==========================================================================
   COUNTDOWN — 64/36 split, screenshot-like proportions
   ========================================================================== */
.so27-countdown{
  display:grid;
  grid-template-columns:64.1% 35.9%;
  height:clamp(238px,31.7vw,510px);
  background:
    radial-gradient(circle at 21% 18%,rgba(31,42,68,.025),transparent 22%),
    linear-gradient(90deg,#f8f5f0,#f4f0e9)
}
.so27-countdown__main{
  position:relative;
  padding:clamp(34px,4.7vw,70px) clamp(36px,5.2vw,80px) clamp(28px,4vw,62px)
}
.so27-countdown__main:after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 10% 20%,transparent 0 55%,rgba(31,42,68,.025) 56%,transparent 57%),
    radial-gradient(ellipse at 24% 12%,transparent 0 59%,rgba(31,42,68,.018) 60%,transparent 61%);
  pointer-events:none
}
.so27-countdown .so27-kicker{margin-bottom:clamp(14px,2vw,28px)}
.so27-countdown h2{
  position:relative;z-index:1;
  color:var(--so27-navy);
  font:400 clamp(24px,3.8vw,55px)/1.02 var(--so-body)!important;
  letter-spacing:.03em;text-transform:uppercase
}
.so27-countdown__grid{
  position:absolute;z-index:1;
  left:clamp(35px,5.2vw,80px);right:clamp(28px,4vw,62px);bottom:clamp(26px,3.7vw,56px);
  display:grid;grid-template-columns:repeat(4,1fr)
}
.so27-countdown__item{
  text-align:center;padding:0 clamp(8px,1vw,18px)
}
.so27-countdown__item+.so27-countdown__item{border-left:1px solid rgba(31,42,68,.25)}
.so27-countdown__item strong{
  display:block;color:#ff6f27;
  font:700 clamp(42px,6vw,88px)/.86 var(--so-head)!important;
  letter-spacing:-.055em
}
.so27-countdown__item span{
  display:block;margin-top:clamp(7px,1.1vw,14px);
  color:var(--so27-navy);
  font:600 clamp(7px,.75vw,10px)/1 var(--so-body)!important;
  letter-spacing:.20em;text-transform:uppercase
}
.so27-countdown__aside{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(24px,3.8vw,58px);
  color:#fff;background:linear-gradient(140deg,#ff7a29,#f45f21)
}
.so27-countdown__circle{
  position:absolute;
  width:84%;aspect-ratio:1;
  left:-36%;top:50%;transform:translateY(-50%);
  border-radius:50%;
  background:
    linear-gradient(rgba(242,140,40,.10),rgba(242,140,40,.10)),
    url('/files/cto_itlh/SPO2026-Imp/DSC06461.jpg') 55% center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)
}
.so27-countdown__date{position:relative;z-index:2;text-align:center}
.so27-countdown__date strong{
  display:block;
  color:#fff;
  font:300 clamp(34px,4.6vw,68px)/.86 var(--so-body)!important;
  letter-spacing:-.04em
}
.so27-countdown__date i{
  display:block;width:28px;height:1px;margin:clamp(16px,2.3vw,30px) auto;
  background:rgba(255,255,255,.60)
}
.so27-countdown__date span{
  display:block;color:#fff;
  font:600 clamp(7px,.8vw,10px)/1.5 var(--so-body)!important;
  letter-spacing:.22em;text-transform:uppercase
}

/* ==========================================================================
   SPIRIT — left B/W image + navy manifesto block
   ========================================================================== */
.so27-spirit{
  display:grid;grid-template-columns:42.8% 57.2%;
  height:clamp(344px,45.8vw,710px);
  background:var(--so27-navy-dark);color:var(--so27-ivory)
}
.so27-spirit__visual{
  position:relative;
  background:
    linear-gradient(90deg,#102334 0 14%,transparent 14%),
    linear-gradient(rgba(13,28,42,.08),rgba(13,28,42,.08)),
    url('/files/cto_itlh/SPO2026-Imp/DSC06320.jpg') center/cover no-repeat;
  filter:grayscale(1) contrast(1.08)
}
.so27-spirit__visual:before{
  content:"";position:absolute;left:3%;top:0;bottom:0;width:1px;background:rgba(247,245,242,.12)
}
.so27-spirit__rail{
  position:absolute;left:3.1%;top:50%;transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;color:rgba(247,245,242,.68);
  font:600 clamp(7px,.75vw,9px)/1 var(--so-body)!important;
  letter-spacing:.28em;text-transform:uppercase
}
.so27-spirit__content{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4.5vw,70px) clamp(42px,6vw,92px) clamp(30px,4vw,62px) clamp(48px,6.6vw,100px)
}
.so27-spirit__content:after{
  content:"";position:absolute;right:-7%;top:23%;width:18%;aspect-ratio:1;border:1px solid rgba(247,245,242,.20);border-radius:50%
}
.so27-spirit .so27-kicker{margin-bottom:clamp(12px,1.8vw,24px)}
.so27-spirit h2{
  color:var(--so27-ivory);
  font:700 clamp(38px,5.4vw,82px)/.86 var(--so-head)!important;
  letter-spacing:-.04em;text-transform:uppercase
}
.so27-spirit__summary{
  max-width:720px;margin-top:clamp(18px,2.4vw,32px)!important;
  color:rgba(247,245,242,.83);
  font:300 clamp(11px,1.35vw,19px)/1.45 var(--so-body)!important
}
.so27-spirit .so27-btn{align-self:flex-start;margin-top:clamp(18px,2.4vw,30px)}

/* ==========================================================================
   MOMENTS — white header + exact editorial mosaic
   ========================================================================== */
.so27-moments{background:var(--so27-ivory)}
.so27-moments__head{
  height:clamp(102px,13.8vw,205px);
  padding:clamp(25px,3.7vw,54px) var(--so-side) clamp(18px,2.8vw,42px);
  display:grid;
  grid-template-columns:1.35fr .72fr auto;
  align-items:center;
  gap:clamp(24px,4vw,62px)
}
.so27-moments__title .so27-kicker{margin-bottom:clamp(8px,1.1vw,13px)}
.so27-moments h2{
  color:var(--so27-navy);
  font:700 clamp(28px,4.2vw,64px)/.9 var(--so-head)!important;
  letter-spacing:-.04em;text-transform:uppercase
}
.so27-moments__head>p{
  max-width:330px;color:#303942;
  font:300 clamp(10px,1.25vw,16px)/1.45 var(--so-body)!important
}
.so27-moments__arrows{display:flex;gap:10px}
.so27-moments__arrows span{
  width:clamp(28px,3.6vw,44px);aspect-ratio:1;border:1px solid rgba(31,42,68,.55);
  border-radius:50%;display:grid;place-items:center;color:var(--so27-navy);
  font:400 clamp(14px,1.8vw,22px)/1 var(--so-body)!important
}
.so27-moments__grid{
  position:relative;height:clamp(304px,40.6vw,630px);
  background:#1a2633;overflow:hidden
}
.so27-moments__item{position:absolute;margin:0!important;overflow:hidden;border:0}
.so27-moments__item img{display:block;width:100%;height:100%;object-fit:cover}
.so27-moments__item--1{left:0;top:0;width:30.6%;height:100%}
.so27-moments__item--2{left:30.6%;top:0;width:39.3%;height:54.5%;border-left:3px solid var(--so27-ivory);border-bottom:3px solid var(--so27-ivory)}
.so27-moments__item--3{left:69.9%;top:0;width:30.1%;height:54.5%;border-left:3px solid var(--so27-ivory);border-bottom:3px solid var(--so27-ivory)}
.so27-moments__item--4{left:30.6%;top:54.5%;width:18.9%;height:45.5%;border-left:3px solid var(--so27-ivory)}
.so27-moments__item--5{left:49.5%;top:54.5%;width:27.8%;height:45.5%;border-left:3px solid var(--so27-ivory)}
.so27-moments__item--6{left:77.3%;top:54.5%;width:22.7%;height:45.5%;border-left:3px solid var(--so27-ivory)}

/* ==========================================================================
   PARTNERS — headline + text + five-logo row
   ========================================================================== */
.so27-partners{
  min-height:clamp(188px,25.1vw,390px);
  padding:clamp(28px,4.2vw,62px) var(--so-side) clamp(26px,3.5vw,54px);
  background:var(--so27-ivory)
}
.so27-partners__head{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:60px;align-items:end
}
.so27-partners .so27-kicker{margin-bottom:clamp(8px,1.2vw,15px)}
.so27-partners h2{
  color:var(--so27-navy);
  font:700 clamp(32px,4.8vw,72px)/.88 var(--so-head)!important;
  letter-spacing:-.045em;text-transform:uppercase
}
.so27-partners__head>p{
  max-width:390px;color:#303942;
  font:300 clamp(10px,1.25vw,16px)/1.45 var(--so-body)!important
}
.so27-partners__logos{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:clamp(22px,3.1vw,46px)
}
.so27-partner{
  min-height:clamp(55px,7.5vw,110px);
  display:grid;place-items:center;padding:clamp(10px,1.8vw,24px);
  border-left:1px solid rgba(31,42,68,.12);
  text-decoration:none!important
}
.so27-partner:first-child{border-left:0}
.so27-partner img{
  max-width:78%;max-height:58px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.15) sepia(.15) hue-rotate(170deg) saturate(2);
  opacity:.90
}

/* ==========================================================================
   CTA — dark left text, photo/background, orange pill right
   ========================================================================== */
.so27-cta{
  position:relative;
  height:clamp(202px,27.1vw,420px);
  display:flex;align-items:center;
  color:var(--so27-ivory);
  background:
    linear-gradient(90deg,rgba(7,18,29,.94) 0%,rgba(7,18,29,.82) 31%,rgba(7,18,29,.42) 53%,rgba(7,18,29,.09) 100%),
    url('/files/cto_itlh/SPO2026-Imp/DSC06485.jpg') center/cover no-repeat
}
.so27-cta__content{
  width:54%;padding-left:var(--so-side);padding-right:4vw
}
.so27-cta .so27-kicker{margin-bottom:clamp(10px,1.4vw,18px)}
.so27-cta h2{
  color:var(--so27-ivory);
  font:700 clamp(31px,4.6vw,70px)/.88 var(--so-head)!important;
  letter-spacing:-.04em;text-transform:uppercase
}
.so27-cta__content p{
  max-width:520px;margin-top:clamp(14px,1.8vw,22px)!important;
  color:rgba(247,245,242,.82);
  font:300 clamp(10px,1.2vw,16px)/1.46 var(--so-body)!important
}
.so27-cta__button{
  position:absolute;right:var(--so-side);bottom:clamp(28px,4vw,60px);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(38px,4.5vw,56px);padding:0 clamp(22px,3.5vw,44px);
  border-radius:999px;background:#ff6f27;color:#fff!important;
  font:600 clamp(8px,.95vw,12px)/1 var(--so-body)!important;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none!important
}

/* ==========================================================================
   FOOTER — screenshot structure
   ========================================================================== */
.so27-footer{
  position:relative;
  min-height:clamp(194px,25.9vw,405px);
  padding:clamp(30px,4.4vw,68px) var(--so-side) clamp(20px,2.8vw,42px);
  background:linear-gradient(135deg,#102334,#0d1c2b);
  color:var(--so27-ivory);font-family:var(--so-body)!important;
  overflow:hidden
}
.so27-footer:after{
  content:"";position:absolute;right:-7%;bottom:-42%;width:24%;aspect-ratio:1;
  border:1px solid rgba(247,245,242,.13);border-radius:50%
}
.so27-footer__main{
  display:grid;grid-template-columns:1.35fr .85fr 1.2fr .65fr;
  gap:clamp(30px,5vw,80px)
}
.so27-footer__logo{
  color:var(--so27-ivory);
  font:700 clamp(31px,4.4vw,68px)/.76 var(--so-head)!important;
  letter-spacing:-.055em
}
.so27-footer__claim{
  margin-top:clamp(12px,1.8vw,22px);
  color:rgba(247,245,242,.58);
  font:600 clamp(7px,.72vw,9px)/1 var(--so-body)!important;
  letter-spacing:.25em;text-transform:uppercase
}
.so27-footer h3{
  margin:0 0 clamp(10px,1.5vw,18px);
  color:var(--so27-ivory);
  font:600 clamp(9px,.95vw,12px)/1 var(--so-body)!important
}
.so27-footer__col{display:flex;flex-direction:column;gap:clamp(5px,.6vw,8px)}
.so27-footer__col a,.so27-footer__col span{
  color:rgba(247,245,242,.75)!important;
  font:300 clamp(8px,.85vw,11px)/1.3 var(--so-body)!important;
  text-decoration:none!important
}
.so27-footer__social a{
  width:clamp(28px,3.2vw,40px);aspect-ratio:1;border:1px solid rgba(247,245,242,.55);
  border-radius:8px;display:grid;place-items:center;font-size:clamp(14px,1.8vw,22px)!important
}
.so27-footer__bottom{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(25px,3.4vw,50px);
  color:rgba(247,245,242,.45);
  font:300 clamp(7px,.75vw,9px)/1 var(--so-body)!important
}
.so27-footer__bottom a{color:rgba(247,245,242,.58)!important;text-decoration:none!important}
.so27-footer__bottom a+a:before,.so27-footer__bottom>a:first-of-type:before{
  content:"|";margin-right:14px;color:rgba(247,245,242,.25)
}

/* ==========================================================================
   MOBILE — same visual language, reflowed
   ========================================================================== */
@media(max-width:700px){
  :root{--so-side:20px}

  .so27-header__inner{height:64px;padding:0 18px;grid-template-columns:1fr auto auto;gap:10px}
  .so27-header__brand{font-size:24px!important}
  .so27-header__nav{display:none}
  .so27-header__cta{min-height:36px;padding:0 14px;font-size:8px!important}
  .so27-header__menu{
    width:36px;height:36px;border:0;background:transparent;padding:0;
    display:grid;place-content:center;gap:5px
  }
  .so27-header__menu span{display:block;width:23px;height:2px;background:var(--so27-navy)}
  .so27-mobile-nav{
    position:absolute;left:0;right:0;top:64px;z-index:20;
    display:grid;padding:14px 20px 24px;background:var(--so27-ivory);
    box-shadow:0 14px 30px rgba(20,33,51,.12)
  }
  .so27-mobile-nav[hidden]{display:none!important}
  .so27-mobile-nav a{
    padding:13px 0;border-bottom:1px solid rgba(31,42,68,.09);
    color:var(--so27-navy)!important;font:600 11px/1 var(--so-body)!important;
    letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important
  }

  .so27-hero__poster,.so27-hero__poster-link{display:none}
  .so27-hero__mobile{position:relative;display:block;min-height:650px}
  .so27-hero__mobile-bg{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(9,18,28,.91),rgba(9,18,28,.62) 54%,rgba(9,18,28,.15)),
      url('/files/cto_itlh/spritzopen-2027-v3-screenshot-match/assets/img/hero-spritzopen-2027.png') 65% center/auto 100% no-repeat;
    filter:saturate(.95) brightness(.82)
  }
  .so27-hero__mobile-content{
    position:relative;z-index:2;padding:130px 24px 58px;color:var(--so27-ivory)
  }
  .so27-hero__mobile h1{
    color:var(--so27-ivory);font:700 78px/.78 var(--so-head)!important;letter-spacing:-.06em
  }
  .so27-hero__claim{margin-top:24px;font:600 13px/1.2 var(--so-body)!important;letter-spacing:.16em;text-transform:uppercase}
  .so27-hero__mobile p{margin:20px 0 26px!important;color:rgba(247,245,242,.86);font-size:15px;line-height:1.45}

  .so27-countdown{height:auto;grid-template-columns:1fr}
  .so27-countdown__main{min-height:355px;padding:48px 20px 40px}
  .so27-countdown h2{font-size:34px!important}
  .so27-countdown__grid{left:20px;right:20px;bottom:42px}
  .so27-countdown__item strong{font-size:47px!important}
  .so27-countdown__aside{min-height:250px;padding:30px}
  .so27-countdown__circle{width:340px;left:-170px}
  .so27-countdown__date strong{font-size:43px!important}

  .so27-spirit{height:auto;grid-template-columns:1fr}
  .so27-spirit__visual{min-height:390px}
  .so27-spirit__content{padding:64px 24px 70px}
  .so27-spirit h2{font-size:52px!important}
  .so27-spirit__summary{font-size:15px!important;line-height:1.55}

  .so27-moments__head{
    height:auto;padding:50px 20px 28px;grid-template-columns:1fr;gap:18px
  }
  .so27-moments h2{font-size:38px!important}
  .so27-moments__arrows{display:none}
  .so27-moments__grid{
    height:auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:210px;gap:3px
  }
  .so27-moments__item{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;border:0!important}
  .so27-moments__item--1{grid-column:1/-1;grid-row:span 2}
  .so27-moments__item--6{display:none}

  .so27-partners{padding:58px 20px 54px}
  .so27-partners__head{grid-template-columns:1fr;gap:20px}
  .so27-partners h2{font-size:43px!important}
  .so27-partners__logos{grid-template-columns:1fr 1fr;margin-top:28px}
  .so27-partner{min-height:105px;border-top:1px solid rgba(31,42,68,.10)}
  .so27-partner:nth-child(odd){border-left:0}

  .so27-cta{height:auto;min-height:500px;align-items:flex-end;background-position:66% center}
  .so27-cta__content{width:100%;padding:70px 24px 130px}
  .so27-cta h2{font-size:52px!important}
  .so27-cta__content p{font-size:15px!important}
  .so27-cta__button{left:24px;right:auto;bottom:58px}

  .so27-footer{padding:56px 24px 28px}
  .so27-footer__main{grid-template-columns:1fr;gap:36px}
  .so27-footer__logo{font-size:50px!important}
  .so27-footer__bottom{justify-content:flex-start;flex-wrap:wrap}
}


/* ==========================================================================
   V3.1 CURRENT-SOURCE COMPATIBILITY
   ========================================================================== */

/* Eclipse/Contao emits spacer BRs between content elements and modules. */
body.so27-home #main>.inside>br,
body.so27-site #footer>.inside>br,
body.so27-site #header>.inside>br{
  display:none!important
}

/* Prevent Eclipse defaults from leaking into custom footer. */
body.so27-home .so27-footer .inside,
body.so27-home .so27-footer .container{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}

/* TinyMCE flattens the arrow spans in the moments header.
   JS rebuilds them; this gives a safe pre-JS appearance. */
.so27-moments__arrows{
  min-width:76px
}

/* Ensure custom section hooks win over old article background/padding helpers. */
body.so27-home .so27-article.fullwidth-boxed,
body.so27-home .so27-article.article-pt,
body.so27-home .so27-article.article-pb{
  padding-top:0!important;
  padding-bottom:0!important
}

/* The custom footer lives inside the semantic Eclipse footer element. */
body.so27-site #footer .so27-footer{
  position:relative!important;
  inset:auto!important
}


/* ==========================================================================
   V3.2 — CI FONT COMPATIBILITY
   The site already loads Adobe Fonts and global font rules.
   Rebrand components inherit those variables instead of redefining the family.
   ========================================================================== */

.so27-section,
.so27-header,
.so27-footer{
  --so-head:var(--font-headline,"brando-sans",Arial,Helvetica,sans-serif);
  --so-body:var(--font-body,"elza",Arial,Helvetica,sans-serif);
}

/* Global CI rule sets strong/b to 700. In kickers, keep the visual rhythm. */
.so27-kicker strong,
.so27-kicker b{
  font-family:var(--so-body)!important;
  font-size:inherit!important;
  font-weight:600!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
}

/* Make sure CTA/nav/button weight from the component wins over the global rules. */
.so27-header__nav a,
.so27-header__cta,
.so27-btn,
.so27-cta__button,
.so27-mobile-nav a{
  font-family:var(--so-body)!important;
}

/* Headline components always use the CI headline variable. */
.so27-section h1,
.so27-section h2,
.so27-section h3,
.so27-header__brand,
.so27-footer__logo{
  font-family:var(--so-head)!important;
}


/* ==========================================================================
   V3.4 HEADER / FOOTER VISIBILITY GUARD
   ========================================================================== */
body.so27-site #top-wrapper,
body.so27-site #header,
body.so27-site #footer,
body.so27-site .so27-header,
body.so27-site .so27-footer{
  visibility:visible!important;
  opacity:1!important
}
body.so27-site #top-wrapper{
  display:block!important
}
body.so27-site .so27-header,
body.so27-site .so27-footer{
  transform:none!important
}


/* ==========================================================================
   V3.4 — STABILITY + EPIC POLISH
   Uses only the existing CI palette and CI typography.
   ========================================================================== */

:root{
  --so27-breathe:clamp(76px,6.2vw,118px);
  --so27-breathe-sm:clamp(48px,4.3vw,78px);
  --so27-shadow:0 18px 55px rgba(16,35,52,.10);
  --so27-shadow-soft:0 12px 34px rgba(16,35,52,.08);
}

/* --------------------------------------------------------------------------
   Robustness: on the dedicated homepage all main articles are SO27 articles.
   This removes the visual dependency on JS adding .so27-article first.
   -------------------------------------------------------------------------- */
body.so27-site #main>.inside{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}
body.so27-home #main>.inside>.mod_article{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}
body.so27-home #main>.inside>.mod_article>.container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}
body.so27-home #main>.inside>.mod_article .ce_text{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}

/* --------------------------------------------------------------------------
   White-section rhythm.
   The current page felt visually compressed where the gallery meets Partners.
   Add more breathing space without introducing a new color or typography.
   -------------------------------------------------------------------------- */
.so27-moments__head{
  height:auto!important;
  min-height:clamp(150px,14vw,225px);
  padding-top:clamp(44px,4.8vw,82px)!important;
  padding-bottom:clamp(34px,3.9vw,66px)!important
}

.so27-partners{
  position:relative;
  min-height:0!important;
  padding-top:var(--so27-breathe)!important;
  padding-bottom:var(--so27-breathe)!important
}
.so27-partners:before{
  content:"";
  position:absolute;
  top:clamp(28px,2.4vw,42px);
  left:var(--so-side);
  right:var(--so-side);
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(31,42,68,0),
    rgba(31,42,68,.16) 16%,
    rgba(31,42,68,.16) 84%,
    rgba(31,42,68,0)
  )
}
.so27-partners__logos{
  margin-top:clamp(40px,4.2vw,68px)!important
}

/* --------------------------------------------------------------------------
   More cinematic hierarchy while staying inside the CI.
   -------------------------------------------------------------------------- */
.so27-header{
  transition:
    box-shadow .32s ease,
    background-color .32s ease,
    backdrop-filter .32s ease
}
.so27-header.is-scrolled{
  background:rgba(247,245,242,.94);
  box-shadow:0 12px 38px rgba(16,35,52,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}

.so27-header__brand,
.so27-header__nav a,
.so27-header__cta,
.so27-btn,
.so27-cta__button{
  transition:
    transform .28s cubic-bezier(.2,.75,.2,1),
    color .28s ease,
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .28s ease
}
.so27-header__cta:hover,
.so27-cta__button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(242,140,40,.24)
}
.so27-btn:hover{
  transform:translateY(-2px)
}

.so27-kicker:after{
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .4s ease
}
.so27-section:hover .so27-kicker:after{
  transform:scaleX(1.08);
  opacity:.55
}

/* Hero: subtle cinematic entrance only; artwork itself stays untouched. */
.so27-hero__poster{
  overflow:hidden
}
.so27-hero__poster img{
  transform-origin:center center;
  animation:so27HeroArrival 1.15s cubic-bezier(.2,.75,.2,1) both
}
@keyframes so27HeroArrival{
  from{opacity:.80;transform:scale(1.018)}
  to{opacity:1;transform:scale(1)}
}

/* Countdown values get more depth without changing the CI color. */
.so27-countdown__item strong{
  text-shadow:0 8px 28px rgba(242,140,40,.10)
}

/* Spirit photo gets a restrained cinematic hover/depth effect. */
.so27-spirit__visual{
  transition:filter .8s ease,background-position .9s cubic-bezier(.2,.75,.2,1)
}
.so27-spirit:hover .so27-spirit__visual{
  filter:grayscale(1) contrast(1.10) brightness(.96);
  background-position:51% center
}

/* Editorial image wall. */
.so27-moments__item{
  background:var(--so27-navy-dark)
}
.so27-moments__item img{
  transform:scale(1.002);
  filter:saturate(.98) contrast(1.015);
  transition:
    transform .9s cubic-bezier(.2,.75,.2,1),
    filter .65s ease
}
.so27-moments__item:hover img{
  transform:scale(1.035);
  filter:saturate(1.08) contrast(1.025)
}

/* Partners remain calm; the hover is the "reward", not a new visual language. */
.so27-partner{
  transition:background-color .28s ease
}
.so27-partner:hover{
  background:rgba(255,255,255,.44)
}
.so27-partner img{
  transition:
    transform .35s cubic-bezier(.2,.75,.2,1),
    filter .35s ease,
    opacity .35s ease
}
.so27-partner:hover img{
  transform:translateY(-4px) scale(1.025);
  filter:grayscale(0) contrast(1.05);
  opacity:1
}

/* CTA gets a subtle depth cue. */
.so27-cta{
  background-size:106% auto;
  background-position:center;
  transition:background-size 1.3s cubic-bezier(.2,.75,.2,1)
}
.so27-cta.so27-inview{
  background-size:102% auto
}

/* Footer boundary: distinct from the preceding white/CTA blocks. */
.so27-footer{
  box-shadow:inset 0 1px 0 rgba(247,245,242,.06)
}

/* --------------------------------------------------------------------------
   Scroll reveal — enabled only after JS adds .so27-motion-ready.
   No layout jump if JS is blocked.
   -------------------------------------------------------------------------- */
body.so27-motion-ready .so27-reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(3px);
  transition:
    opacity .72s cubic-bezier(.2,.75,.2,1),
    transform .72s cubic-bezier(.2,.75,.2,1),
    filter .72s ease
}
body.so27-motion-ready .so27-reveal.so27-reveal--image{
  transform:scale(.985);
  filter:blur(2px) saturate(.96)
}
body.so27-motion-ready .so27-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none
}

/* Staggered timing set by JS custom property. */
body.so27-motion-ready .so27-reveal{
  transition-delay:var(--so27-delay,0ms)
}

/* --------------------------------------------------------------------------
   Tablet robustness: avoid navigation collisions before the mobile breakpoint.
   -------------------------------------------------------------------------- */
@media(max-width:1100px) and (min-width:701px){
  .so27-header__inner{
    grid-template-columns:150px 1fr auto;
    gap:14px
  }
  .so27-header__nav{
    gap:clamp(12px,1.7vw,22px)
  }
  .so27-header__nav a{
    font-size:8px!important
  }
  .so27-header__cta{
    padding-inline:16px
  }
  .so27-moments__head{
    grid-template-columns:1.2fr .8fr auto
  }
  .so27-partners__logos{
    gap:0
  }
}

/* On smaller tablets, switch to our own menu before Eclipse would collide. */
@media(max-width:900px) and (min-width:701px){
  .so27-header__inner{
    grid-template-columns:1fr auto auto
  }
  .so27-header__nav{display:none}
  .so27-header__menu{
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    padding:0;
    display:grid;
    place-content:center;
    gap:6px
  }
  .so27-header__menu span{
    display:block;
    width:24px;
    height:2px;
    background:var(--so27-navy)
  }
  .so27-mobile-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:30;
    display:grid;
    padding:18px var(--so-side) 28px;
    background:rgba(247,245,242,.98);
    box-shadow:var(--so27-shadow-soft)
  }
  .so27-mobile-nav[hidden]{display:none!important}
  .so27-mobile-nav a{
    padding:14px 0;
    border-bottom:1px solid rgba(31,42,68,.08);
    color:var(--so27-navy)!important;
    font:600 10px/1 var(--so-body)!important;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none!important
  }
}

@media(max-width:700px){
  .so27-moments__head{
    min-height:0;
    padding-top:58px!important;
    padding-bottom:32px!important
  }
  .so27-partners{
    padding-top:82px!important;
    padding-bottom:72px!important
  }
  .so27-partners:before{
    top:30px;
    left:20px;
    right:20px
  }
  .so27-cta{
    background-size:cover!important
  }
}

/* Accessibility / reduced motion. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .so27-hero__poster img{animation:none!important}
  .so27-header,
  .so27-header__brand,
  .so27-header__nav a,
  .so27-header__cta,
  .so27-btn,
  .so27-cta__button,
  .so27-spirit__visual,
  .so27-moments__item img,
  .so27-partner img,
  .so27-cta,
  body.so27-motion-ready .so27-reveal{
    transition:none!important;
    animation:none!important
  }
  body.so27-motion-ready .so27-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important
  }
}


/* ========================================================================== 
   V3.5 — PREMIUM FINISHING
   Epic through scale, rhythm, depth and motion — without leaving the CI.
   ========================================================================== */
:root{
  --so27-flow-xl:clamp(92px,7.6vw,146px);
  --so27-flow-lg:clamp(70px,6vw,116px);
  --so27-flow-md:clamp(46px,4.2vw,78px);
  --so27-orange-soft:rgba(242,140,40,.14);
  --so27-navy-soft:rgba(31,42,68,.10)
}
body.so27-site #main{overflow:clip}
.so27-section{isolation:isolate}
.so27-countdown,.so27-moments,.so27-partners{box-shadow:inset 0 1px 0 rgba(31,42,68,.055)}
.so27-spirit,.so27-cta{box-shadow:inset 0 1px 0 rgba(247,245,242,.055),inset 0 -1px 0 rgba(247,245,242,.035)}

.so27-scroll-progress{position:fixed;z-index:1600;left:0;top:0;width:100%;height:2px;pointer-events:none;transform:scaleX(var(--so27-scroll,0));transform-origin:left center;background:var(--so27-orange);opacity:.92;will-change:transform}

.so27-header__inner{transition:min-height .28s ease,height .28s ease,padding .28s ease}
.so27-header.is-scrolled .so27-header__inner{height:clamp(58px,6.5vw,80px)}
.so27-header.is-scrolled .so27-header__brand{transform:scale(.95);transform-origin:left center}

.so27-hero:after{content:"";position:absolute;z-index:4;left:0;right:0;bottom:0;height:clamp(24px,3.2vw,52px);pointer-events:none;background:linear-gradient(180deg,rgba(16,35,52,0),rgba(16,35,52,.16));opacity:.48}
.so27-hero__poster img{will-change:transform}
body.so27-motion-ready .so27-hero__poster img{transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter 1.1s ease}
.so27-hero:hover .so27-hero__poster img{transform:scale(1.006)}

.so27-countdown{overflow:hidden}
.so27-countdown__main{position:relative}
.so27-countdown__main:before{content:"";position:absolute;width:clamp(180px,22vw,420px);aspect-ratio:1;right:8%;top:-44%;border:1px solid rgba(31,42,68,.055);border-radius:50%;pointer-events:none}
.so27-countdown__grid{align-items:end}
.so27-countdown__item{position:relative}
.so27-countdown__item strong{position:relative}
.so27-countdown__item strong:after{content:"";position:absolute;left:50%;bottom:-11px;width:18px;height:2px;border-radius:999px;background:var(--so27-orange);transform:translateX(-50%) scaleX(0);opacity:.42;transition:transform .32s ease}
.so27-countdown__item:hover strong:after{transform:translateX(-50%) scaleX(1)}
.so27-countdown__aside:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 34%),linear-gradient(315deg,rgba(16,35,52,.08),transparent 32%)}

.so27-spirit__content{overflow:hidden}
.so27-spirit__content:before{content:"";position:absolute;width:clamp(220px,28vw,520px);aspect-ratio:1;right:-19%;bottom:-42%;border-radius:50%;border:1px solid rgba(247,245,242,.055);pointer-events:none}
.so27-spirit h2{text-wrap:balance}
.so27-spirit__summary{max-width:690px}

/* More breathing room between the white editorial blocks. */
.so27-moments{padding-bottom:clamp(42px,4.5vw,78px)}
.so27-moments__head{min-height:clamp(176px,15vw,248px)!important}
.so27-moments__grid{box-shadow:0 16px 40px rgba(16,35,52,.08)}
.so27-moments__grid:after{content:"";position:absolute;z-index:8;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(247,245,242,.20)}
.so27-moments__item:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,35,52,0) 52%,rgba(16,35,52,.08) 100%);opacity:0;transition:opacity .45s ease}
.so27-moments__item:hover:after{opacity:1}

.so27-partners{padding-top:var(--so27-flow-lg)!important;padding-bottom:var(--so27-flow-lg)!important}
.so27-partners:before{top:clamp(34px,3vw,50px)!important}
.so27-partners__head{align-items:start}
.so27-partners__head>p{padding-top:clamp(20px,2.1vw,34px)}
.so27-partners__logos{margin-top:clamp(54px,5.2vw,82px)!important;border-top:1px solid rgba(31,42,68,.10);border-bottom:1px solid rgba(31,42,68,.10)}
.so27-partner{min-height:clamp(92px,8.6vw,134px)!important}
.so27-partner img{max-width:72%!important;max-height:68px!important}

.so27-cta{min-height:clamp(320px,32vw,520px)}
.so27-cta:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 50%,rgba(242,140,40,.10),transparent 24%),linear-gradient(180deg,transparent 62%,rgba(6,15,24,.11))}
.so27-cta__content,.so27-cta__button{z-index:2}
.so27-cta__content p{max-width:570px}

.so27-footer{padding-top:clamp(52px,5.2vw,84px)}
.so27-footer__main{align-items:start}
.so27-moments h2,.so27-partners h2,.so27-cta h2,.so27-spirit h2{text-wrap:balance}

body.so27-motion-ready .so27-reveal{transform:translateY(22px)}
body.so27-motion-ready .so27-reveal.is-visible{transform:none}

@media(max-width:1100px){.so27-partners__head>p{padding-top:12px}}
@media(max-width:900px){.so27-moments{padding-bottom:54px}.so27-partners{padding-top:84px!important;padding-bottom:78px!important}.so27-partners__logos{margin-top:38px!important}}
@media(max-width:700px){.so27-scroll-progress{height:2px}.so27-hero:hover .so27-hero__poster img{transform:none}.so27-moments{padding-bottom:36px}.so27-moments__head{min-height:0!important}.so27-partners{padding-top:82px!important;padding-bottom:74px!important}.so27-partners__head>p{padding-top:0}.so27-partners__logos{border-bottom:0}.so27-cta{min-height:540px}}
@media(prefers-reduced-motion:reduce){.so27-scroll-progress{display:none!important}.so27-hero:hover .so27-hero__poster img{transform:none!important}}


/* ==========================================================================
   UNIVERSAL CMS SYSTEM
   One stylesheet for Home, standard subpages, forms and 404.
   ========================================================================== */

body.root_206,
body.so27-site{
  --so27-content-max:1180px;
  --so27-wide-max:1460px;
  --so27-reading-max:780px;
  background:var(--so27-ivory);
  color:var(--so27-navy)
}

body.root_206 #wrapper,
body.root_206 #container,
body.root_206 #main,
body.so27-site #wrapper,
body.so27-site #container,
body.so27-site #main{
  width:100%;
  max-width:none;
  margin:0;
  padding:0
}

/* --- Generic subpage shell ---------------------------------------------- */
body.so27-subpage #main>.inside{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}

body.so27-subpage #main>.inside>br{
  display:none!important
}

body.so27-subpage .so27-content-article{
  position:relative;
  margin:0!important;
  padding:var(--so27-flow-lg,clamp(70px,6vw,116px)) var(--so-side)!important;
  background:var(--so27-ivory)
}

body.so27-subpage .so27-content-article>.container{
  width:min(100%,var(--so27-content-max))!important;
  max-width:var(--so27-content-max)!important;
  margin:0 auto!important;
  padding:0!important
}

body.so27-subpage .so27-content-article + .so27-content-article{
  border-top:1px solid rgba(31,42,68,.085)
}

/* First article automatically becomes the page intro/hero. */
body.so27-subpage .so27-page-intro{
  min-height:clamp(360px,38vw,590px);
  display:flex;
  align-items:flex-end;
  padding-top:clamp(120px,12vw,190px)!important;
  padding-bottom:clamp(72px,7vw,112px)!important;
  background:
    radial-gradient(circle at 82% 22%,rgba(242,140,40,.13),transparent 22%),
    linear-gradient(135deg,var(--so27-navy-dark),var(--so27-navy));
  color:var(--so27-ivory)
}

body.so27-subpage .so27-page-intro>.container{
  width:min(100%,var(--so27-wide-max))!important;
  max-width:var(--so27-wide-max)!important
}

body.so27-subpage .so27-page-intro>.container:before{
  content:"SPRITZ OPEN 2027";
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(20px,2.2vw,34px);
  color:rgba(247,245,242,.64);
  font:600 clamp(8px,.72vw,10px)/1 var(--so-body)!important;
  letter-spacing:.24em;
  text-transform:uppercase
}

body.so27-subpage .so27-page-intro h1,
body.so27-subpage .so27-page-intro .ce_headline{
  max-width:1050px;
  margin:0;
  color:var(--so27-ivory)!important;
  font:700 clamp(52px,7vw,108px)/.88 var(--so-head)!important;
  letter-spacing:-.052em!important;
  text-transform:uppercase;
  text-wrap:balance
}

body.so27-subpage .so27-page-intro p{
  max-width:720px;
  margin-top:clamp(24px,2.7vw,40px);
  color:rgba(247,245,242,.78);
  font-size:clamp(15px,1.08vw,19px);
  line-height:1.6
}

/* Optional article modes: set as normal Contao article CSS classes. */
body.so27-subpage .so27-content-article.so27-dark{
  background:var(--so27-navy-dark);
  color:var(--so27-ivory)
}
body.so27-subpage .so27-content-article.so27-dark h2,
body.so27-subpage .so27-content-article.so27-dark h3,
body.so27-subpage .so27-content-article.so27-dark p,
body.so27-subpage .so27-content-article.so27-dark li{
  color:inherit!important
}
body.so27-subpage .so27-content-article.so27-accent{
  background:var(--so27-orange);
  color:#fff
}

/* --- Content typography ------------------------------------------------- */
body.so27-subpage .so27-content-article h2{
  max-width:980px;
  margin:0 0 clamp(24px,2.6vw,38px);
  color:var(--so27-navy);
  font:700 clamp(38px,4.6vw,70px)/.94 var(--so-head)!important;
  letter-spacing:-.04em!important;
  text-transform:uppercase;
  text-wrap:balance
}

body.so27-subpage .so27-content-article h3{
  margin:clamp(36px,4vw,60px) 0 16px;
  color:var(--so27-navy);
  font:700 clamp(25px,2.7vw,38px)/1 var(--so-head)!important;
  letter-spacing:-.025em!important
}

body.so27-subpage .so27-content-article h4{
  margin:30px 0 12px;
  color:var(--so27-navy);
  font:600 clamp(18px,1.6vw,24px)/1.1 var(--so-head)!important
}

body.so27-subpage .so27-content-article p,
body.so27-subpage .so27-content-article li{
  color:var(--so-copy);
  font-size:clamp(15px,1.02vw,18px);
  line-height:1.72
}

body.so27-subpage .so27-content-article .ce_text>p,
body.so27-subpage .so27-content-article .ce_text>ul,
body.so27-subpage .so27-content-article .ce_text>ol{
  max-width:var(--so27-reading-max)
}

body.so27-subpage .so27-content-article p+p{
  margin-top:1.1em
}

body.so27-subpage .so27-content-article ul,
body.so27-subpage .so27-content-article ol{
  padding-left:1.25em
}

body.so27-subpage .so27-content-article a:not(.so27-btn):not(.button):not(.btn){
  color:var(--so27-navy);
  text-decoration-color:rgba(242,140,40,.70);
  text-decoration-thickness:2px;
  text-underline-offset:4px
}

/* --- Images / galleries ------------------------------------------------- */
body.so27-subpage .ce_image,
body.so27-subpage .ce_gallery{
  margin:clamp(40px,4vw,68px) 0
}

body.so27-subpage .ce_image img,
body.so27-subpage .ce_gallery img{
  display:block;
  width:100%;
  height:auto
}

body.so27-subpage .ce_image figure{
  margin:0
}

body.so27-subpage figcaption{
  margin-top:10px;
  color:rgba(31,42,68,.58);
  font-size:12px;
  line-height:1.5
}

/* --- Buttons / hyperlinks ---------------------------------------------- */
body.so27-subpage .ce_hyperlink a,
body.so27-subpage a.button,
body.so27-subpage .button,
body.so27-subpage .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border:1px solid var(--so27-orange);
  border-radius:999px;
  background:var(--so27-orange);
  color:#fff!important;
  font:600 10px/1 var(--so-body)!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none!important;
  transition:transform .25s ease,box-shadow .25s ease
}

body.so27-subpage .ce_hyperlink a:hover,
body.so27-subpage a.button:hover,
body.so27-subpage .button:hover,
body.so27-subpage .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(242,140,40,.22)
}

/* --- Forms -------------------------------------------------------------- */
body.so27-subpage .ce_form,
body.so27-subpage form{
  max-width:920px
}

body.so27-subpage input[type="text"],
body.so27-subpage input[type="email"],
body.so27-subpage input[type="tel"],
body.so27-subpage input[type="search"],
body.so27-subpage input[type="number"],
body.so27-subpage input[type="date"],
body.so27-subpage select,
body.so27-subpage textarea{
  width:100%;
  min-height:52px;
  padding:13px 15px;
  border:1px solid rgba(31,42,68,.18);
  border-radius:0;
  background:rgba(255,255,255,.58);
  color:var(--so27-navy);
  font:300 16px/1.4 var(--so-body)!important;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

body.so27-subpage textarea{
  min-height:150px;
  resize:vertical
}

body.so27-subpage input:focus,
body.so27-subpage select:focus,
body.so27-subpage textarea:focus{
  border-color:var(--so27-orange);
  background:#fff;
  box-shadow:0 0 0 3px rgba(242,140,40,.10)
}

body.so27-subpage label{
  display:block;
  margin-bottom:8px;
  color:var(--so27-navy);
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em
}

body.so27-subpage input[type="submit"],
body.so27-subpage button[type="submit"]{
  min-height:50px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:var(--so27-orange);
  color:#fff;
  font:600 10px/1 var(--so-body)!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer
}

/* --- Tables ------------------------------------------------------------- */
body.so27-subpage .ce_table{
  overflow-x:auto;
  margin:clamp(34px,3vw,54px) 0
}
body.so27-subpage table{
  width:100%;
  border-collapse:collapse;
  background:rgba(255,255,255,.44)
}
body.so27-subpage th,
body.so27-subpage td{
  padding:15px 16px;
  border-bottom:1px solid rgba(31,42,68,.10);
  text-align:left
}
body.so27-subpage th{
  background:var(--so27-navy);
  color:var(--so27-ivory);
  font-weight:600
}

/* --- Accordion / common Contao toggles --------------------------------- */
body.so27-subpage .ce_accordion{
  border-top:1px solid rgba(31,42,68,.14)
}
body.so27-subpage .toggler{
  position:relative;
  padding:20px 48px 20px 0;
  border-bottom:1px solid rgba(31,42,68,.14);
  color:var(--so27-navy);
  font:600 clamp(17px,1.4vw,21px)/1.3 var(--so-head)!important;
  cursor:pointer
}
body.so27-subpage .accordion{
  padding:22px 0 30px
}

/* --- Standard callout --------------------------------------------------- */
body.so27-subpage blockquote{
  max-width:900px;
  margin:clamp(40px,4vw,68px) 0;
  padding:clamp(26px,3vw,44px);
  border-left:4px solid var(--so27-orange);
  background:rgba(31,42,68,.045);
  color:var(--so27-navy);
  font:400 clamp(20px,2vw,30px)/1.45 var(--so-head)!important
}

/* ==========================================================================
   404 — integrated in the same global CSS
   ========================================================================== */
.so27-error{
  position:relative;
  min-height:clamp(660px,calc(100svh - 72px),980px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--so27-navy-dark);
  color:var(--so27-ivory)
}

.so27-error__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(8,18,28,.95) 0%,rgba(8,18,28,.82) 39%,rgba(8,18,28,.45) 68%,rgba(8,18,28,.62) 100%),
    linear-gradient(180deg,rgba(8,18,28,.08),rgba(8,18,28,.38)),
    url('/files/cto_itlh/SPO2026-Imp/DSC06459.jpg') center/cover no-repeat;
  filter:saturate(.82) contrast(1.04);
  transform:scale(1.02)
}

.so27-error__glow{
  position:absolute;
  z-index:-2;
  width:min(42vw,720px);
  aspect-ratio:1;
  right:-12vw;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(247,245,242,.12);
  box-shadow:
    0 0 0 90px rgba(247,245,242,.025),
    0 0 0 180px rgba(247,245,242,.018)
}

.so27-error__content{
  position:relative;
  width:min(980px,calc(100% - (var(--so-side)*2)));
  margin-left:var(--so-side);
  padding:clamp(86px,9vw,150px) 0 clamp(72px,8vw,120px)
}

.so27-error__code{
  margin-bottom:clamp(6px,1vw,12px);
  color:rgba(247,245,242,.10);
  font:700 clamp(92px,16vw,245px)/.72 var(--so-head)!important;
  letter-spacing:-.075em;
  user-select:none
}

.so27-error h1{
  max-width:900px;
  margin:0;
  color:var(--so27-ivory);
  font:700 clamp(54px,7.6vw,116px)/.86 var(--so-head)!important;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-wrap:balance
}

.so27-error__content>p{
  max-width:650px;
  margin-top:clamp(26px,3vw,42px)!important;
  color:rgba(247,245,242,.82);
  font:300 clamp(15px,1.15vw,19px)/1.58 var(--so-body)!important
}

.so27-error__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(30px,3.5vw,50px)
}

.so27-error__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:clamp(46px,5vw,72px);
  color:rgba(247,245,242,.46);
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.24em;
  text-transform:uppercase
}

.so27-error__side{
  position:absolute;
  right:clamp(20px,2.4vw,40px);
  top:50%;
  display:flex;
  align-items:center;
  gap:18px;
  color:rgba(247,245,242,.40);
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.26em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg)
}

.so27-error__side i{
  width:1px;
  height:70px;
  background:rgba(247,245,242,.20)
}

/* --- Responsive universal pages ---------------------------------------- */
@media(max-width:900px){
  body.so27-subpage .so27-content-article{
    padding-left:24px!important;
    padding-right:24px!important
  }
  .so27-error__content{
    width:calc(100% - 48px);
    margin-left:24px;
    margin-right:24px
  }
  .so27-error__side{display:none}
}

@media(max-width:700px){
  body.so27-subpage .so27-page-intro{
    min-height:360px;
    padding-top:100px!important;
    padding-bottom:64px!important
  }
  body.so27-subpage .so27-page-intro h1,
  body.so27-subpage .so27-page-intro .ce_headline{
    font-size:clamp(44px,13vw,66px)!important
  }
  body.so27-subpage .so27-content-article{
    padding-top:62px!important;
    padding-bottom:62px!important;
    padding-left:20px!important;
    padding-right:20px!important
  }
  body.so27-subpage .so27-content-article h2{
    font-size:clamp(34px,10vw,48px)!important
  }
  .so27-error{
    min-height:calc(100svh - 64px)
  }
  .so27-error__content{
    width:calc(100% - 40px);
    margin:0 20px;
    padding:88px 0 64px
  }
  .so27-error__code{
    font-size:clamp(88px,34vw,150px)!important
  }
  .so27-error h1{
    font-size:clamp(46px,14vw,68px)!important
  }
  .so27-error__actions{
    align-items:flex-start;
    flex-direction:column
  }
}


/* ==========================================================================
   UNIVERSAL CMS HOTFIX — 404
   The CMS/TinyMCE preserves data-so27-error but may drop the outer class.
   Therefore the 404 layout must not depend on `.so27-error` being present.
   ========================================================================== */

body.so27-error-page #main>.inside,
body.so27-error-page #main>.inside>.mod_article,
body.so27-error-page #main>.inside>.mod_article>.container,
body.so27-error-page #main>.inside>.mod_article .ce_text{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important
}

body.so27-error-page #main>.inside>br{
  display:none!important
}

body.so27-error-page #main>.inside>.mod_article{
  background:transparent!important
}

/* Direct data-attribute selector makes the 404 work even before JS adds class. */
[data-so27-error]{
  position:relative;
  min-height:clamp(660px,calc(100svh - 72px),980px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--so27-navy-dark);
  color:var(--so27-ivory)
}

[data-so27-error] .so27-error__bg,
.so27-error .so27-error__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(8,18,28,.95) 0%,rgba(8,18,28,.82) 39%,rgba(8,18,28,.45) 68%,rgba(8,18,28,.62) 100%),
    linear-gradient(180deg,rgba(8,18,28,.08),rgba(8,18,28,.38)),
    url('/files/cto_itlh/SPO2026-Imp/DSC06459.jpg') center/cover no-repeat;
  filter:saturate(.82) contrast(1.04);
  transform:scale(1.02)
}

[data-so27-error] .so27-error__glow,
.so27-error .so27-error__glow{
  position:absolute;
  z-index:-2;
  width:min(42vw,720px);
  aspect-ratio:1;
  right:-12vw;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(247,245,242,.12);
  box-shadow:
    0 0 0 90px rgba(247,245,242,.025),
    0 0 0 180px rgba(247,245,242,.018)
}

[data-so27-error] .so27-error__content{
  position:relative;
  width:min(980px,calc(100% - (var(--so-side)*2)));
  margin-left:var(--so-side);
  padding:clamp(86px,9vw,150px) 0 clamp(72px,8vw,120px)
}

[data-so27-error] .so27-error__code{
  margin-bottom:clamp(6px,1vw,12px);
  color:rgba(247,245,242,.10);
  font:700 clamp(92px,16vw,245px)/.72 var(--so-head)!important;
  letter-spacing:-.075em;
  user-select:none
}

[data-so27-error] h1{
  max-width:900px;
  margin:0;
  color:var(--so27-ivory)!important;
  font:700 clamp(54px,7.6vw,116px)/.86 var(--so-head)!important;
  letter-spacing:-.055em!important;
  text-transform:uppercase;
  text-wrap:balance
}

[data-so27-error] .so27-error__content>p{
  max-width:650px;
  margin-top:clamp(26px,3vw,42px)!important;
  color:rgba(247,245,242,.82);
  font:300 clamp(15px,1.15vw,19px)/1.58 var(--so-body)!important
}

[data-so27-error] .so27-error__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(30px,3.5vw,50px)
}

[data-so27-error] .so27-error__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:clamp(46px,5vw,72px);
  color:rgba(247,245,242,.46);
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.24em;
  text-transform:uppercase
}

[data-so27-error] .so27-error__side{
  position:absolute;
  right:clamp(20px,2.4vw,40px);
  top:50%;
  color:rgba(247,245,242,.40);
  font:600 8px/1.6 var(--so-body)!important;
  letter-spacing:.24em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg)
}

/* The current ce_text output flattens helper spans/i elements.
   These styles intentionally support that flattened markup. */
[data-so27-error] .so27-error__meta,
[data-so27-error] .so27-error__side{
  white-space:normal
}

@media(max-width:900px){
  [data-so27-error] .so27-error__content{
    width:calc(100% - 48px);
    margin-left:24px;
    margin-right:24px
  }
  [data-so27-error] .so27-error__side{
    display:none
  }
}

@media(max-width:700px){
  [data-so27-error]{
    min-height:calc(100svh - 64px)
  }
  [data-so27-error] .so27-error__content{
    width:calc(100% - 40px);
    margin:0 20px;
    padding:88px 0 64px
  }
  [data-so27-error] .so27-error__code{
    font-size:clamp(88px,34vw,150px)!important
  }
  [data-so27-error] h1{
    font-size:clamp(46px,14vw,68px)!important
  }
  [data-so27-error] .so27-error__actions{
    align-items:flex-start;
    flex-direction:column
  }
}


/* ==========================================================================
   UNIVERSAL CMS V4 — REAL SUBPAGES
   ========================================================================== */

.so27-subhero{
  position:relative;
  min-height:clamp(390px,39vw,610px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(118px,11vw,178px) var(--so-side) clamp(68px,6.8vw,108px);
  background:
    radial-gradient(circle at 83% 22%,rgba(242,140,40,.13),transparent 24%),
    linear-gradient(132deg,var(--so27-navy-dark) 0%,var(--so27-navy) 72%,#243653 100%);
  color:var(--so27-ivory)
}
.so27-subhero:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(44vw,720px);
  aspect-ratio:1;
  right:-12vw;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(247,245,242,.08);
  border-radius:50%;
  box-shadow:0 0 0 92px rgba(247,245,242,.018),0 0 0 184px rgba(247,245,242,.012);
  pointer-events:none
}
.so27-subhero:after{
  content:"";
  position:absolute;
  right:var(--so-side);
  bottom:clamp(58px,6vw,94px);
  width:clamp(34px,3.5vw,56px);
  height:2px;
  background:var(--so27-orange);
  opacity:.86
}
.so27-subhero__inner{
  width:min(100%,var(--so27-wide-max,1460px));
  margin:0 auto
}
.so27-subhero__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(22px,2.5vw,36px);
  color:rgba(247,245,242,.62);
  font:600 clamp(8px,.72vw,10px)/1 var(--so27-body,var(--so-body))!important;
  letter-spacing:.23em;
  text-transform:uppercase
}
.so27-subhero__kicker:before{
  content:"";
  width:34px;
  height:1px;
  background:var(--so27-orange)
}
.so27-subhero h1{
  max-width:1120px;
  margin:0;
  color:var(--so27-ivory)!important;
  font:700 clamp(52px,7vw,108px)/.88 var(--so27-head,var(--so-head))!important;
  letter-spacing:-.052em!important;
  text-transform:uppercase;
  text-wrap:balance
}
.so27-subhero__lead{
  max-width:760px;
  margin:clamp(26px,2.8vw,42px) 0 0!important;
  color:rgba(247,245,242,.78)!important;
  font:300 clamp(15px,1.08vw,19px)/1.62 var(--so27-body,var(--so-body))!important
}
.so27-subhero__rail{
  position:absolute;
  right:clamp(18px,2.2vw,36px);
  top:50%;
  color:rgba(247,245,242,.35);
  font:600 8px/1 var(--so27-body,var(--so-body))!important;
  letter-spacing:.24em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg)
}

body.so27-subpage .so27-page-intro{
  min-height:0!important;
  display:block!important;
  padding-top:var(--so27-flow-lg)!important;
  padding-bottom:var(--so27-flow-lg)!important;
  background:var(--so27-ivory)!important;
  color:var(--so27-navy)!important
}
body.so27-subpage .so27-page-intro>.container:before{content:none!important}
body.so27-subpage .so27-page-intro h1,
body.so27-subpage .so27-page-intro .ce_headline{color:var(--so27-navy)!important}

body.so27-subpage .so27-content-article{overflow:hidden}
body.so27-subpage .so27-content-article.fullwidth-boxed,
body.so27-subpage .so27-content-article.fullwidth-boxed-medium,
body.so27-subpage .so27-content-article.article-pt-xl,
body.so27-subpage .so27-content-article.article-pb-xl,
body.so27-subpage .so27-content-article.article-pt-l,
body.so27-subpage .so27-content-article.article-pb-l,
body.so27-subpage .so27-content-article.article-pt-s,
body.so27-subpage .so27-content-article.article-pb-s{
  padding-top:var(--so27-flow-lg)!important;
  padding-bottom:var(--so27-flow-lg)!important
}
body.so27-subpage .so27-content-article.bg-customColor2{background:var(--so27-ivory)!important}
body.so27-subpage .so27-content-article>.container,
body.so27-subpage .so27-content-article.fullwidth-boxed-medium>.container{
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-content-max))!important;
  max-width:var(--so27-content-max)!important;
  margin:0 auto!important;
  padding:0!important
}

body.so27-subpage .ce_text_extented{max-width:var(--so27-reading-max)}
body.so27-subpage .ce_text_extented.uppercase:first-child p,
body.so27-subpage .attributes>.ce_text_extented.uppercase:first-child p{
  margin:0 0 14px!important;
  color:var(--so27-orange)!important;
  font:600 10px/1.15 var(--so27-body,var(--so-body))!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important
}
body.so27-subpage .ce_text_extented p{
  color:var(--so27-copy)!important;
  font:300 clamp(15px,1.02vw,18px)/1.72 var(--so27-body,var(--so-body))!important;
  letter-spacing:0!important;
  text-transform:none!important
}
body.so27-subpage .ce_text_extented p+p{margin-top:1.15em}
body.so27-subpage .ce_text_extented strong{color:var(--so27-navy);font-weight:700}

body.so27-subpage .ce_divider_extended.version5{
  position:relative;
  width:92px;
  height:2px;
  margin:18px 0 30px!important
}
body.so27-subpage .ce_divider_extended.version5 span{display:none!important}
body.so27-subpage .ce_divider_extended.version5:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--so27-orange) 0 36%,rgba(31,42,68,.18) 36% 100%)
}

body.so27-subpage .ce_vertical_spacer{height:clamp(20px,2vw,34px)!important}
body.so27-subpage .ce_vertical_spacer.sp-xs{height:16px!important}
body.so27-subpage .ce_vertical_spacer.sp-m{height:28px!important}

body.so27-subpage .so27-profile-section>.container{
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max))!important;
  max-width:var(--so27-wide-max)!important
}
body.so27-subpage .so27-profile-section .autogrid_row,
body.so27-subpage .so27-profile-section .column,
body.so27-subpage .so27-profile-section .attributes{
  width:100%!important;
  max-width:none!important;
  margin:0!important
}
body.so27-subpage .so27-profile-section .attributes{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  column-gap:clamp(56px,7vw,120px);
  align-items:center
}
body.so27-subpage .so27-profile-section .attributes>.ce_text_extented,
body.so27-subpage .so27-profile-section .attributes>.ce_divider_extended,
body.so27-subpage .so27-profile-section .attributes>.ce_hyperlink{grid-column:1}
body.so27-subpage .so27-profile-section .attributes>.ce_image_extended{
  grid-column:2;
  grid-row:1 / span 6;
  align-self:center;
  margin:0!important
}
body.so27-subpage .so27-profile-section .attributes>.ce_vertical_spacer{display:none!important}
body.so27-subpage .so27-profile-section .ce_image_extended img{
  display:block;
  width:auto!important;
  max-width:min(100%,360px)!important;
  max-height:360px!important;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(16,35,52,.08))
}

body.so27-subpage .ce_hyperlink-extended{margin-top:clamp(26px,2.8vw,42px)}
body.so27-subpage .ce_hyperlink-extended a{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 26px!important;
  border:1px solid var(--so27-orange)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--so27-navy)!important;
  font:600 10px/1 var(--so27-body,var(--so-body))!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  transition:transform .26s ease,background .26s ease,color .26s ease,box-shadow .26s ease
}
body.so27-subpage .ce_hyperlink-extended a:hover{
  transform:translateY(-2px);
  background:var(--so27-orange)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(242,140,40,.18)
}

body.so27-subpage .so27-media-section{
  position:relative;
  isolation:isolate;
  background-color:var(--so27-navy-dark)!important;
  background-size:cover!important;
  background-position:center!important;
  color:var(--so27-ivory)!important
}
body.so27-subpage .so27-media-section:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,18,28,.88),rgba(8,18,28,.58)),
    linear-gradient(180deg,rgba(8,18,28,.14),rgba(8,18,28,.42))
}
body.so27-subpage .so27-media-section>.container{
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max))!important;
  max-width:var(--so27-wide-max)!important
}
body.so27-subpage .so27-media-section .ce_text_extented{
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important
}
body.so27-subpage .so27-media-section .ce_text_extented p,
body.so27-subpage .so27-media-section .ce_text_extented strong{
  color:rgba(247,245,242,.88)!important
}
body.so27-subpage .so27-media-section .ce_text_extented.uppercase:first-child p{
  color:var(--so27-orange)!important
}
body.so27-subpage .so27-media-section .ce_divider_extended.version5{
  margin-left:auto!important;
  margin-right:auto!important
}
body.so27-subpage .so27-media-section .ce_divider_extended.version5:before{
  background:linear-gradient(90deg,rgba(247,245,242,.20),var(--so27-orange),rgba(247,245,242,.20))
}

body.so27-subpage .ce_gallery ul{
  list-style:none!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,16px);
  margin:clamp(44px,4vw,68px) 0 0!important;
  padding:0!important
}
body.so27-subpage .ce_gallery li{margin:0!important;padding:0!important}
body.so27-subpage .ce_gallery figure{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  margin:0!important;
  background:var(--so27-navy-dark)
}
body.so27-subpage .ce_gallery img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .6s ease
}
body.so27-subpage .ce_gallery figure:hover img{
  transform:scale(1.035);
  filter:saturate(1.06)
}

body.so27-subpage .so27-logo-section{background:var(--so27-ivory)!important}
body.so27-subpage .so27-logo-section>.container{
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max))!important;
  max-width:var(--so27-wide-max)!important
}
body.so27-subpage .so27-logo-section .ce_text_extented{max-width:900px}
body.so27-subpage .so27-logo-section .ce_bgimage{
  margin-top:clamp(44px,4.6vw,76px)!important;
  padding:0!important;
  background:none!important
}
body.so27-subpage .so27-logo-section .ce_bgimage-outer,
body.so27-subpage .so27-logo-section .ce_bgimage-inside{
  padding:0!important;
  background:none!important
}
body.so27-subpage .so27-logo-section .autogrid_grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(31,42,68,.10);
  border-bottom:1px solid rgba(31,42,68,.10)
}
body.so27-subpage .so27-logo-section .autogrid_grid>.column{
  display:grid!important;
  place-items:center;
  min-height:clamp(106px,9vw,142px);
  padding:24px!important;
  border-right:1px solid rgba(31,42,68,.08)
}
body.so27-subpage .so27-logo-section .autogrid_grid>.column:last-child{border-right:0}
body.so27-subpage .so27-logo-section .ce_image_extended{margin:0!important}
body.so27-subpage .so27-logo-section .ce_image_extended img{
  width:auto!important;
  max-width:82%!important;
  max-height:72px!important;
  object-fit:contain!important;
  filter:grayscale(1) contrast(.9);
  opacity:.72;
  transition:transform .35s ease,filter .35s ease,opacity .35s ease
}
body.so27-subpage .so27-logo-section .column:hover img{
  transform:translateY(-4px);
  filter:grayscale(0) contrast(1);
  opacity:1
}

body.so27-subpage .shadow_style1{box-shadow:none!important}
body.so27-subpage .ce_bgimage.boxed-content{max-width:none!important}

@media(max-width:900px){
  .so27-subhero{min-height:360px;padding-left:24px;padding-right:24px}
  .so27-subhero__rail{display:none}
  body.so27-subpage .so27-profile-section .attributes{
    grid-template-columns:1fr;
    row-gap:28px
  }
  body.so27-subpage .so27-profile-section .attributes>.ce_text_extented,
  body.so27-subpage .so27-profile-section .attributes>.ce_divider_extended,
  body.so27-subpage .so27-profile-section .attributes>.ce_hyperlink,
  body.so27-subpage .so27-profile-section .attributes>.ce_image_extended{
    grid-column:1
  }
  body.so27-subpage .so27-profile-section .attributes>.ce_image_extended{
    grid-row:auto;
    margin-top:18px!important
  }
  body.so27-subpage .ce_gallery ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.so27-subpage .so27-logo-section .autogrid_grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  body.so27-subpage .so27-logo-section .autogrid_grid>.column{
    border-bottom:1px solid rgba(31,42,68,.08)
  }
}

@media(max-width:700px){
  .so27-subhero{min-height:340px;padding:96px 20px 58px}
  .so27-subhero h1{font-size:clamp(44px,13vw,66px)!important}
  .so27-subhero__lead{font-size:15px!important}
  body.so27-subpage .so27-content-article>.container,
  body.so27-subpage .so27-content-article.fullwidth-boxed-medium>.container,
  body.so27-subpage .so27-profile-section>.container,
  body.so27-subpage .so27-media-section>.container,
  body.so27-subpage .so27-logo-section>.container{
    width:calc(100% - 40px)!important
  }
  body.so27-subpage .ce_gallery ul{grid-template-columns:1fr 1fr}
  body.so27-subpage .so27-logo-section .autogrid_grid{grid-template-columns:1fr!important}
  body.so27-subpage .so27-logo-section .autogrid_grid>.column{
    min-height:100px;
    border-right:0
  }
}


/* ==========================================================================
   V4.1 — EPIC FOOTER
   Same CI, stronger closing moment.
   ========================================================================== */

.so27-footer{
  --footer-line:rgba(247,245,242,.12);
  --footer-copy:rgba(247,245,242,.68);
  --footer-muted:rgba(247,245,242,.44);
  position:relative;
  min-height:0!important;
  padding:0!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(242,140,40,.08),transparent 21%),
    linear-gradient(145deg,#102334 0%,#0b1b2b 58%,#08151f 100%)!important;
  color:var(--so27-ivory)
}

/* Ambient graphic layer */
.so27-footer__ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}

.so27-footer__ball{
  position:absolute;
  width:clamp(260px,32vw,620px);
  aspect-ratio:1;
  right:clamp(-170px,-8vw,-70px);
  top:clamp(-140px,-7vw,-60px);
  border:1px solid rgba(247,245,242,.09);
  border-radius:50%;
  opacity:.9
}

.so27-footer__ball:before,
.so27-footer__ball:after{
  content:"";
  position:absolute;
  inset:11%;
  border:1px solid rgba(247,245,242,.055);
  border-radius:50%
}

.so27-footer__ball:before{
  transform:translateX(-34%) rotate(16deg);
  border-left-color:transparent;
  border-right-color:transparent
}

.so27-footer__ball:after{
  transform:translateX(34%) rotate(-16deg);
  border-left-color:transparent;
  border-right-color:transparent
}

.so27-footer__wordmark{
  position:absolute;
  left:50%;
  bottom:clamp(-30px,-2vw,-8px);
  transform:translateX(-50%);
  width:max-content;
  color:rgba(247,245,242,.022);
  font:700 clamp(108px,18vw,340px)/.70 var(--so-head)!important;
  letter-spacing:-.07em;
  white-space:nowrap;
  text-transform:uppercase;
  user-select:none
}

/* Hero closing statement */
.so27-footer__hero{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:clamp(50px,8vw,150px);
  align-items:end;
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max,1460px));
  margin:0 auto;
  padding:clamp(86px,8vw,140px) 0 clamp(64px,6vw,96px)
}

.so27-footer__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(24px,2.6vw,38px);
  color:rgba(247,245,242,.58);
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.22em;
  text-transform:uppercase
}

.so27-footer__eyebrow i{
  display:block;
  width:40px;
  height:1px;
  background:var(--so27-orange)
}

.so27-footer__hero h2{
  max-width:950px;
  margin:0;
  color:var(--so27-ivory)!important;
  font:700 clamp(58px,8.2vw,132px)/.82 var(--so-head)!important;
  letter-spacing:-.06em!important;
  text-transform:uppercase;
  text-wrap:balance
}

.so27-footer__hero-copy>p{
  max-width:600px;
  margin:clamp(28px,3vw,44px) 0 0!important;
  color:var(--footer-copy);
  font:300 clamp(15px,1.02vw,18px)/1.62 var(--so-body)!important
}

.so27-footer__hero-action{
  justify-self:end;
  width:min(100%,350px)
}

.so27-footer__event{
  display:grid;
  gap:8px;
  padding:0 0 clamp(28px,3vw,42px);
  border-bottom:1px solid var(--footer-line)
}

.so27-footer__event-label{
  color:var(--so27-orange);
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.19em;
  text-transform:uppercase
}

.so27-footer__event strong{
  color:var(--so27-ivory);
  font:700 clamp(48px,5.2vw,82px)/.85 var(--so-head)!important;
  letter-spacing:-.05em
}

.so27-footer__event>span:last-child{
  color:var(--footer-copy);
  font:300 clamp(12px,.9vw,15px)/1.4 var(--so-body)!important
}

.so27-footer__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:62px;
  margin-top:clamp(24px,2.5vw,34px);
  padding:0 26px;
  border-radius:999px;
  background:var(--so27-orange);
  color:#fff!important;
  font:600 10px/1 var(--so-body)!important;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none!important;
  transition:transform .28s ease,box-shadow .28s ease
}

.so27-footer__cta>span:last-child{
  font-size:18px!important;
  transition:transform .28s ease
}

.so27-footer__cta:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(242,140,40,.20)
}

.so27-footer__cta:hover>span:last-child{
  transform:translateX(5px)
}

.so27-footer__rule{
  position:relative;
  z-index:2;
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max,1460px));
  height:1px;
  margin:0 auto;
  background:linear-gradient(
    90deg,
    var(--so27-orange) 0 64px,
    var(--footer-line) 64px 100%
  )
}

/* Main footer navigation */
.so27-footer__main{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:1.45fr .8fr 1fr .75fr!important;
  gap:clamp(34px,5vw,84px)!important;
  align-items:start!important;
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max,1460px));
  margin:0 auto;
  padding:clamp(48px,5vw,78px) 0 clamp(42px,4.5vw,68px)
}

.so27-footer__brand{
  max-width:390px
}

.so27-footer__logo{
  display:inline-block;
  color:var(--so27-ivory)!important;
  font:700 clamp(42px,4.6vw,72px)/.74 var(--so-head)!important;
  letter-spacing:-.06em;
  text-decoration:none!important;
  transition:opacity .25s ease
}

.so27-footer__logo:hover{
  opacity:.78
}

.so27-footer__claim{
  margin-top:clamp(14px,1.6vw,22px)!important;
  color:rgba(247,245,242,.56)!important;
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.23em!important;
  text-transform:uppercase
}

.so27-footer__brandtext{
  max-width:330px;
  margin:24px 0 0!important;
  color:var(--footer-muted)!important;
  font:300 13px/1.55 var(--so-body)!important
}

.so27-footer h3{
  position:relative;
  margin:0 0 24px!important;
  padding-bottom:13px;
  color:rgba(247,245,242,.52)!important;
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.18em;
  text-transform:uppercase
}

.so27-footer h3:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:24px;
  height:1px;
  background:var(--so27-orange)
}

.so27-footer__col{
  gap:10px!important
}

.so27-footer__col>a,
.so27-footer__col>span{
  position:relative;
  width:max-content;
  max-width:100%;
  color:rgba(247,245,242,.72)!important;
  font:300 clamp(11px,.85vw,14px)/1.35 var(--so-body)!important;
  text-decoration:none!important
}

.so27-footer__col>a{
  transition:color .24s ease,transform .24s ease
}

.so27-footer__col>a:not(.so27-footer__cta):hover{
  color:var(--so27-ivory)!important;
  transform:translateX(4px)
}

/* Social is now a proper text button */
.so27-footer__social>a{
  display:inline-flex!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:auto!important;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important
}

.so27-footer__social>a i{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(247,245,242,.22);
  border-radius:50%;
  font-size:17px!important
}

.so27-footer__social>a span{
  font:300 13px/1 var(--so-body)!important
}

/* Bottom/legal row */
.so27-footer__bottom{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px!important;
  width:min(calc(100% - (var(--so-side)*2)),var(--so27-wide-max,1460px));
  margin:0 auto!important;
  padding:24px 0 32px;
  border-top:1px solid var(--footer-line);
  color:var(--footer-muted)!important;
  font:300 10px/1.35 var(--so-body)!important
}

.so27-footer__legal{
  display:flex;
  gap:20px
}

.so27-footer__bottom a{
  color:rgba(247,245,242,.55)!important;
  text-decoration:none!important
}

.so27-footer__bottom a+a:before,
.so27-footer__bottom>a:first-of-type:before{
  content:none!important
}

.so27-footer__top{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .24s ease
}

.so27-footer__top>span:last-child{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(247,245,242,.18);
  border-radius:50%;
  transition:transform .24s ease,border-color .24s ease
}

.so27-footer__top:hover{
  color:var(--so27-ivory)!important
}

.so27-footer__top:hover>span:last-child{
  transform:translateY(-3px);
  border-color:rgba(247,245,242,.46)
}

/* Subtle reveal support for the new first footer block */
body.so27-motion-ready .so27-footer__hero.so27-reveal{
  transform:translateY(28px)
}

body.so27-motion-ready .so27-footer__hero.so27-reveal.is-visible{
  transform:none
}

@media(max-width:1000px){
  .so27-footer__hero{
    grid-template-columns:1fr minmax(250px,.48fr);
    gap:48px
  }

  .so27-footer__main{
    grid-template-columns:1.25fr .75fr .95fr!important;
  }

  .so27-footer__social{
    grid-column:2 / 4
  }
}

@media(max-width:700px){
  .so27-footer__wordmark{
    font-size:34vw!important;
    bottom:16px
  }

  .so27-footer__ball{
    width:78vw;
    right:-46vw;
    top:-10vw
  }

  .so27-footer__hero{
    grid-template-columns:1fr;
    gap:54px;
    width:calc(100% - 40px);
    padding:76px 0 58px
  }

  .so27-footer__hero h2{
    font-size:clamp(54px,17vw,78px)!important
  }

  .so27-footer__hero-action{
    justify-self:stretch;
    width:100%
  }

  .so27-footer__rule{
    width:calc(100% - 40px)
  }

  .so27-footer__main{
    grid-template-columns:1fr!important;
    gap:38px!important;
    width:calc(100% - 40px);
    padding:48px 0 44px!important
  }

  .so27-footer__brand{
    max-width:none
  }

  .so27-footer__social{
    grid-column:auto
  }

  .so27-footer__bottom{
    grid-template-columns:1fr auto!important;
    width:calc(100% - 40px);
    padding:24px 0 30px!important
  }

  .so27-footer__legal{
    grid-column:1;
    grid-row:2;
    flex-wrap:wrap;
    gap:14px
  }

  .so27-footer__top{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center
  }

  .so27-footer__top>span:first-child{
    display:none
  }
}

@media(prefers-reduced-motion:reduce){
  .so27-footer__cta,
  .so27-footer__cta>span:last-child,
  .so27-footer__col>a,
  .so27-footer__top,
  .so27-footer__top>span:last-child{
    transition:none!important
  }
}


/* ==========================================================================
   V4.2 — NAVIGATION + HERO
   Premium floating navigation + live editorial hero.
   No new colors / no new fonts / no page-specific template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL FLOATING NAVIGATION
   -------------------------------------------------------------------------- */

/* The header floats above the first visual section instead of consuming
   a full-width white strip. */
body.so27-site #top-wrapper{
  position:relative!important;
  z-index:1500!important;
  width:100%!important;
  height:0!important;
  min-height:0!important;
  overflow:visible!important
}

body.so27-site #header{
  position:fixed!important;
  z-index:1500!important;
  top:16px!important;
  left:50%!important;
  right:auto!important;
  width:min(calc(100% - 32px),1660px)!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:20px!important;
  background:rgba(247,245,242,.86)!important;
  box-shadow:
    0 18px 55px rgba(8,18,28,.11),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  overflow:visible!important;
  transition:
    top .32s cubic-bezier(.2,.75,.2,1),
    width .32s cubic-bezier(.2,.75,.2,1),
    border-radius .32s ease,
    background-color .32s ease,
    box-shadow .32s ease!important
}

body.so27-site #header>.inside{
  overflow:visible!important
}

body.so27-site #header:has(.so27-header.is-scrolled){
  top:9px!important;
  width:min(calc(100% - 24px),1580px)!important;
  border-radius:16px!important;
  background:rgba(247,245,242,.95)!important;
  box-shadow:
    0 16px 44px rgba(8,18,28,.13),
    inset 0 1px 0 rgba(255,255,255,.70)!important
}

.so27-header{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important
}

.so27-header__inner{
  width:100%!important;
  height:74px!important;
  padding:0 14px 0 24px!important;
  display:grid!important;
  grid-template-columns:minmax(142px,190px) 1fr auto!important;
  align-items:center!important;
  gap:clamp(14px,2vw,28px)!important;
  transition:height .30s cubic-bezier(.2,.75,.2,1)!important
}

.so27-header.is-scrolled .so27-header__inner{
  height:64px!important
}

.so27-header__brand{
  position:relative;
  z-index:2;
  width:max-content;
  color:var(--so27-navy)!important;
  font:700 clamp(27px,2.4vw,36px)/.73 var(--so-head)!important;
  letter-spacing:-.065em!important;
  transition:transform .28s cubic-bezier(.2,.75,.2,1),opacity .28s ease!important
}

.so27-header__brand:after{
  content:"2027";
  position:absolute;
  left:calc(100% + 8px);
  bottom:1px;
  color:rgba(31,42,68,.38);
  font:600 7px/1 var(--so-body)!important;
  letter-spacing:.16em
}

.so27-header__nav{
  justify-self:center;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  padding:5px!important;
  border:1px solid rgba(31,42,68,.075);
  border-radius:999px;
  background:rgba(31,42,68,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50)
}

.so27-header__nav a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 clamp(11px,1.3vw,19px);
  border-radius:999px;
  color:rgba(31,42,68,.76)!important;
  font:600 clamp(8px,.70vw,10px)/1 var(--so-body)!important;
  letter-spacing:.10em!important;
  text-transform:uppercase;
  text-decoration:none!important;
  transition:
    color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.2,.75,.2,1)!important
}

.so27-header__nav a:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:4px!important;
  width:18px!important;
  height:2px!important;
  border-radius:999px;
  background:var(--so27-orange)!important;
  opacity:0;
  transform:translateX(-50%) scaleX(.4);
  transition:opacity .24s ease,transform .24s ease!important
}

.so27-header__nav a:hover{
  color:var(--so27-navy)!important;
  background:rgba(255,255,255,.62);
  transform:translateY(-1px)
}

.so27-header__nav a.is-active{
  color:var(--so27-navy)!important;
  background:rgba(255,255,255,.84);
  box-shadow:
    0 6px 16px rgba(16,35,52,.07),
    inset 0 1px 0 rgba(255,255,255,.82)
}

.so27-header__nav a:hover:after,
.so27-header__nav a.is-active:after{
  opacity:1;
  transform:translateX(-50%) scaleX(1)
}

.so27-header__cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:48px!important;
  padding:0 10px 0 20px!important;
  border-radius:999px!important;
  background:var(--so27-orange)!important;
  color:#fff!important;
  font:600 9px/1 var(--so-body)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(242,140,40,.16);
  transition:transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .28s ease!important
}

.so27-header__cta>span{
  display:grid!important;
  place-items:center!important;
  width:29px!important;
  height:29px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.18)!important;
  font-size:14px!important;
  line-height:1!important;
  transition:transform .28s cubic-bezier(.2,.75,.2,1),background .28s ease!important
}

.so27-header__cta:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 13px 30px rgba(242,140,40,.25)!important
}

.so27-header__cta:hover>span{
  transform:translateX(3px);
  background:rgba(255,255,255,.25)!important
}

/* --------------------------------------------------------------------------
   HOME HERO — use the current image as the scene and live HTML as typography.
   The desktop no longer depends on text being baked into the hero image.
   -------------------------------------------------------------------------- */

.so27-hero,
section[data-so27="hero"]{
  position:relative!important;
  isolation:isolate;
  width:100%!important;
  height:clamp(720px,100svh,980px)!important;
  min-height:720px!important;
  overflow:hidden!important;
  background:var(--so27-navy-dark)!important
}

/* Cinematic readability layer, keeping the woman / sunlight visible. */
.so27-hero:before,
section[data-so27="hero"]:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(7,16,24,.78) 0%,
      rgba(7,16,24,.61) 25%,
      rgba(7,16,24,.34) 45%,
      rgba(7,16,24,.09) 68%,
      rgba(7,16,24,.03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,24,.08) 0%,
      rgba(7,16,24,0) 48%,
      rgba(7,16,24,.36) 100%
    )!important
}

.so27-hero:after,
section[data-so27="hero"]:after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:32%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,16,24,.24))!important;
  opacity:1!important
}

.so27-hero__poster{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow:hidden!important;
  line-height:0!important
}

.so27-hero__poster img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:58% 50%!important;
  filter:saturate(.98) contrast(1.025) brightness(.94);
  transform:scale(1.012);
  transform-origin:center center;
  animation:so27HeroArrivalV42 1.25s cubic-bezier(.2,.75,.2,1) both!important;
  transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter 1.1s ease!important
}

@keyframes so27HeroArrivalV42{
  from{opacity:.55;transform:scale(1.045)}
  to{opacity:1;transform:scale(1.012)}
}

.so27-hero:hover .so27-hero__poster img{
  transform:scale(1.020)!important
}

/* Old screenshot hotspot is no longer needed; use the real live button. */
.so27-hero__poster-link{
  display:none!important
}

/* Repurpose the existing mobile content as the universal live hero overlay. */
.so27-hero__mobile{
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  display:block!important;
  min-height:0!important;
  pointer-events:none
}

.so27-hero__mobile-bg{
  display:none!important
}

.so27-hero__mobile-content{
  position:absolute!important;
  left:var(--so-side)!important;
  bottom:clamp(70px,8.4vw,132px)!important;
  z-index:5!important;
  width:min(760px,calc(100% - (var(--so-side)*2)))!important;
  max-width:760px!important;
  padding:0!important;
  color:var(--so27-ivory)!important;
  pointer-events:none
}

.so27-hero__mobile-content>*{
  pointer-events:auto
}

.so27-hero .so27-kicker,
section[data-so27="hero"] .so27-kicker{
  margin-bottom:clamp(24px,2.4vw,36px)!important;
  color:rgba(247,245,242,.72)!important;
  font-size:clamp(9px,.78vw,11px)!important;
  letter-spacing:.18em!important
}

.so27-hero .so27-kicker:after,
section[data-so27="hero"] .so27-kicker:after{
  width:clamp(45px,4vw,68px)!important;
  background:var(--so27-orange)!important;
  opacity:.95!important
}

.so27-hero__mobile h1{
  margin:0!important;
  color:var(--so27-ivory)!important;
  font:700 clamp(82px,9.5vw,158px)/.74 var(--so-head)!important;
  letter-spacing:-.07em!important;
  text-transform:uppercase;
  text-shadow:0 12px 40px rgba(6,14,22,.22)
}

.so27-hero__claim{
  margin-top:clamp(26px,2.6vw,40px)!important;
  color:var(--so27-ivory)!important;
  font:600 clamp(11px,1.05vw,15px)/1.1 var(--so-body)!important;
  letter-spacing:.19em!important;
  text-transform:uppercase
}

.so27-hero__mobile p{
  max-width:520px!important;
  margin:clamp(17px,1.8vw,26px) 0 clamp(26px,2.8vw,40px)!important;
  color:rgba(247,245,242,.80)!important;
  font:300 clamp(14px,1.05vw,18px)/1.55 var(--so-body)!important
}

.so27-hero .so27-btn--ghost{
  min-height:50px!important;
  padding:0 24px!important;
  border-color:rgba(247,245,242,.66)!important;
  background:rgba(10,22,32,.10)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  color:#fff!important
}

.so27-hero .so27-btn--ghost:hover{
  border-color:var(--so27-orange)!important;
  background:var(--so27-orange)!important
}

/* Secondary event information on the open right side of the hero. */
.so27-hero__meta{
  position:absolute;
  z-index:6;
  right:var(--so-side);
  bottom:clamp(76px,8.5vw,132px);
  display:grid;
  justify-items:end;
  gap:8px;
  pointer-events:none;
  text-align:right;
  color:var(--so27-ivory)
}

.so27-hero__meta-label{
  color:rgba(247,245,242,.55);
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.22em;
  text-transform:uppercase
}

.so27-hero__meta strong{
  color:var(--so27-ivory);
  font:700 clamp(34px,4vw,64px)/.82 var(--so-head)!important;
  letter-spacing:-.05em
}

.so27-hero__meta small{
  color:rgba(247,245,242,.66);
  font:300 clamp(10px,.75vw,12px)/1.3 var(--so-body)!important;
  letter-spacing:.08em;
  text-transform:uppercase
}

.so27-hero__scroll{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:26px;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(247,245,242,.42);
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.20em;
  text-transform:uppercase;
  transform:translateX(-50%);
  pointer-events:none
}

.so27-hero__scroll:after{
  content:"";
  width:34px;
  height:1px;
  background:rgba(247,245,242,.38)
}

/* --------------------------------------------------------------------------
   SUBPAGES / 404:
   the same floating navigation should feel intentional above the dark hero.
   -------------------------------------------------------------------------- */
body.so27-subpage .so27-subhero,
body.so27-error-page [data-so27-error]{
  padding-top:max(clamp(118px,11vw,178px),132px)!important
}

/* --------------------------------------------------------------------------
   TABLET / MOBILE
   -------------------------------------------------------------------------- */
@media(max-width:1100px) and (min-width:901px){
  .so27-header__inner{
    grid-template-columns:145px 1fr auto!important;
    padding-left:20px!important
  }

  .so27-header__nav a{
    padding:0 10px!important;
    font-size:8px!important
  }

  .so27-header__cta{
    padding-left:16px!important
  }

  .so27-hero__mobile-content{
    width:min(650px,60vw)!important
  }
}

@media(max-width:900px){
  body.so27-site #header{
    top:10px!important;
    width:calc(100% - 20px)!important;
    border-radius:16px!important
  }

  .so27-header__inner{
    height:64px!important;
    padding:0 10px 0 18px!important;
    grid-template-columns:1fr auto auto!important;
    gap:9px!important
  }

  .so27-header__brand{
    font-size:25px!important
  }

  .so27-header__brand:after{
    display:none
  }

  .so27-header__nav{
    display:none!important
  }

  .so27-header__cta{
    min-height:40px!important;
    padding:0 8px 0 14px!important;
    font-size:8px!important
  }

  .so27-header__cta>span{
    width:25px!important;
    height:25px!important;
    font-size:12px!important
  }

  .so27-header__menu{
    display:grid!important;
    width:40px!important;
    height:40px!important;
    border:1px solid rgba(31,42,68,.10)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.55)!important;
    place-content:center!important;
    gap:5px!important
  }

  .so27-header__menu span{
    width:19px!important;
    height:1.5px!important;
    background:var(--so27-navy)!important
  }

  .so27-mobile-nav{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:0!important;
    right:0!important;
    display:grid!important;
    padding:12px 18px 18px!important;
    border:1px solid rgba(255,255,255,.60);
    border-radius:16px!important;
    background:rgba(247,245,242,.97)!important;
    box-shadow:0 18px 45px rgba(8,18,28,.14)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important
  }

  .so27-mobile-nav[hidden]{
    display:none!important
  }

  .so27-mobile-nav a{
    padding:14px 4px!important;
    border-bottom:1px solid rgba(31,42,68,.075)!important;
    color:var(--so27-navy)!important;
    font:600 10px/1 var(--so-body)!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important
  }

  .so27-hero,
  section[data-so27="hero"]{
    height:100svh!important;
    min-height:700px!important;
    max-height:none!important
  }

  .so27-hero__poster{
    display:block!important
  }

  .so27-hero__poster img{
    object-position:64% 50%!important
  }

  .so27-hero__mobile{
    display:block!important;
    min-height:0!important
  }

  .so27-hero__mobile-content{
    left:24px!important;
    bottom:74px!important;
    width:min(620px,calc(100% - 48px))!important
  }

  .so27-hero__mobile h1{
    font-size:clamp(66px,13vw,102px)!important
  }

  .so27-hero__meta{
    display:none
  }

  .so27-hero__scroll{
    left:auto;
    right:24px;
    transform:none
  }
}

@media(max-width:700px){
  body.so27-site #header{
    top:8px!important;
    width:calc(100% - 16px)!important;
    border-radius:14px!important
  }

  .so27-header__inner{
    height:60px!important;
    padding-left:14px!important;
    padding-right:8px!important
  }

  .so27-header__brand{
    font-size:23px!important
  }

  .so27-header__cta{
    min-height:36px!important;
    padding-left:12px!important
  }

  .so27-header__cta>span{
    width:23px!important;
    height:23px!important
  }

  .so27-hero,
  section[data-so27="hero"]{
    min-height:720px!important
  }

  .so27-hero:before,
  section[data-so27="hero"]:before{
    background:
      linear-gradient(
        90deg,
        rgba(7,16,24,.79) 0%,
        rgba(7,16,24,.57) 54%,
        rgba(7,16,24,.17) 100%
      ),
      linear-gradient(
        180deg,
        rgba(7,16,24,.09) 0%,
        rgba(7,16,24,.02) 44%,
        rgba(7,16,24,.52) 100%
      )!important
  }

  .so27-hero__poster img{
    object-position:67% center!important;
    transform:scale(1.04)!important
  }

  .so27-hero__mobile-content{
    left:20px!important;
    bottom:66px!important;
    width:calc(100% - 40px)!important
  }

  .so27-hero__mobile h1{
    font-size:clamp(60px,18vw,84px)!important;
    line-height:.76!important
  }

  .so27-hero__claim{
    margin-top:22px!important;
    font-size:11px!important
  }

  .so27-hero__mobile p{
    max-width:430px!important;
    margin:16px 0 24px!important;
    font-size:14px!important
  }

  .so27-hero .so27-btn--ghost{
    min-height:44px!important;
    padding:0 18px!important
  }

  .so27-hero__scroll{
    display:none
  }
}

@media(prefers-reduced-motion:reduce){
  .so27-hero__poster img{
    animation:none!important;
    transition:none!important
  }

  .so27-header__nav a,
  .so27-header__cta,
  .so27-header__cta>span{
    transition:none!important
  }
}


/* ==========================================================================
   V4.3 — COUNTDOWN TRANSITION
   Editorial right side with breathing room instead of a hard orange wall.
   Existing markup stays unchanged.
   ========================================================================== */

/* Softer transition directly below the cinematic hero. */
.so27-countdown{
  position:relative!important;
  overflow:hidden!important;
  background:var(--so27-ivory)!important;
  box-shadow:none!important
}

.so27-countdown:before{
  content:"";
  position:absolute;
  z-index:2;
  left:var(--so-side);
  right:var(--so-side);
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(31,42,68,.10),
    rgba(31,42,68,.04) 58%,
    rgba(242,140,40,.24)
  );
  pointer-events:none
}

/* Keep the editorial 64/36 relation, but let the right side breathe. */
.so27-countdown{
  grid-template-columns:65.5% 34.5%!important
}

.so27-countdown__main{
  position:relative!important;
  z-index:3!important;
  padding-top:clamp(58px,5.4vw,92px)!important;
  padding-bottom:clamp(54px,5.2vw,88px)!important;
  background:
    radial-gradient(circle at 94% 18%,rgba(31,42,68,.025),transparent 26%),
    var(--so27-ivory)!important
}

/* The orange no longer touches the hero edge.
   It becomes an inset event card with a more intentional transition. */
.so27-countdown__aside{
  position:relative!important;
  z-index:2!important;
  min-height:100%!important;
  overflow:visible!important;
  display:block!important;
  background:transparent!important;
  isolation:isolate
}

.so27-countdown__aside:before{
  content:"";
  position:absolute;
  z-index:-2;
  top:clamp(34px,3.2vw,54px);
  right:0;
  bottom:clamp(34px,3.2vw,54px);
  left:clamp(66px,6.5vw,116px);
  border-radius:clamp(28px,2.8vw,46px) 0 0 clamp(28px,2.8vw,46px);
  background:
    radial-gradient(circle at 86% 18%,rgba(255,255,255,.10),transparent 22%),
    linear-gradient(145deg,#F28C28 0%,#F47C20 100%);
  box-shadow:
    0 22px 56px rgba(242,140,40,.12),
    inset 0 1px 0 rgba(255,255,255,.22)
}

/* Subtle oversized tennis-line motif, still pure CI. */
.so27-countdown__aside:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(250px,28vw,500px);
  aspect-ratio:1;
  right:clamp(-180px,-9vw,-90px);
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 68px rgba(255,255,255,.025),
    0 0 0 136px rgba(255,255,255,.018);
  pointer-events:none
}

/* The photo becomes the visual bridge between off-white and orange. */
.so27-countdown__circle{
  position:absolute!important;
  z-index:3!important;
  left:clamp(-165px,-9.5vw,-110px)!important;
  top:50%!important;
  width:clamp(300px,30vw,520px)!important;
  height:auto!important;
  aspect-ratio:1!important;
  margin:0!important;
  border-radius:50%!important;
  border:clamp(8px,.8vw,13px) solid var(--so27-ivory)!important;
  box-shadow:
    0 24px 65px rgba(16,35,52,.16),
    0 0 0 1px rgba(31,42,68,.06)!important;
  transform:translateY(-50%)!important;
  overflow:hidden!important;
  background-position:center!important;
  background-size:cover!important
}

/* Date becomes a refined "match card" rather than floating text. */
.so27-countdown__date{
  position:absolute!important;
  z-index:4!important;
  right:clamp(34px,3.4vw,62px)!important;
  top:50%!important;
  width:min(190px,38%)!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  justify-items:end!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  text-align:right!important
}

.so27-countdown__date:before{
  content:"MATCHDAY";
  color:rgba(255,255,255,.60);
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.23em;
  text-transform:uppercase
}

.so27-countdown__date strong{
  display:block!important;
  color:#fff!important;
  font:700 clamp(52px,5.3vw,88px)/.76 var(--so-head)!important;
  letter-spacing:-.055em!important;
  text-align:right!important
}

/* The JS reconstructs an <i> and a span. Both are used intentionally here. */
.so27-countdown__date>i{
  display:block!important;
  width:42px!important;
  height:2px!important;
  margin:4px 0 1px auto!important;
  background:rgba(255,255,255,.66)!important
}

.so27-countdown__date>span{
  max-width:150px;
  color:rgba(255,255,255,.80)!important;
  font:600 9px/1.45 var(--so-body)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important
}

/* Countdown numbers: align the visual weight with the new right side. */
.so27-countdown__grid{
  margin-top:clamp(64px,7vw,112px)!important
}

.so27-countdown__item{
  padding-inline:clamp(8px,1.5vw,24px)!important
}

.so27-countdown__item:first-child{
  padding-left:0!important
}

.so27-countdown__item strong{
  color:#FF6F24!important;
  font-size:clamp(50px,5.4vw,90px)!important;
  line-height:.86!important
}

.so27-countdown__item span{
  margin-top:10px!important;
  color:rgba(31,42,68,.66)!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important
}

/* A small intentional bridge from hero into countdown. */
.so27-article--countdown{
  position:relative!important
}

.so27-article--countdown:before{
  content:"";
  position:absolute;
  z-index:8;
  top:0;
  right:0;
  width:clamp(120px,10vw,180px);
  height:4px;
  background:var(--so27-orange);
  pointer-events:none
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */
@media(max-width:1100px) and (min-width:701px){
  .so27-countdown{
    grid-template-columns:61% 39%!important
  }

  .so27-countdown__aside:before{
    left:54px
  }

  .so27-countdown__circle{
    left:-105px!important;
    width:clamp(270px,32vw,390px)!important
  }

  .so27-countdown__date{
    right:26px!important;
    width:42%!important
  }

  .so27-countdown__date strong{
    font-size:clamp(46px,6vw,72px)!important
  }
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .so27-countdown{
    display:block!important;
    min-height:0!important
  }

  .so27-countdown:before{
    left:20px;
    right:20px
  }

  .so27-countdown__main{
    padding:64px 20px 84px!important
  }

  .so27-countdown__grid{
    margin-top:48px!important
  }

  .so27-countdown__aside{
    min-height:380px!important;
    padding:0!important;
    background:var(--so27-ivory)!important
  }

  .so27-countdown__aside:before{
    top:24px;
    left:20px;
    right:20px;
    bottom:28px;
    border-radius:28px
  }

  .so27-countdown__aside:after{
    right:-180px;
    width:380px
  }

  .so27-countdown__circle{
    left:34px!important;
    top:52%!important;
    width:clamp(190px,51vw,260px)!important;
    border-width:7px!important
  }

  .so27-countdown__date{
    right:38px!important;
    top:51%!important;
    width:38%!important
  }

  .so27-countdown__date strong{
    font-size:clamp(42px,13vw,62px)!important
  }

  .so27-countdown__date>span{
    max-width:110px;
    font-size:7px!important
  }

  .so27-article--countdown:before{
    width:74px
  }
}

@media(max-width:480px){
  .so27-countdown__aside{
    min-height:420px!important
  }

  .so27-countdown__circle{
    left:50%!important;
    top:38%!important;
    width:210px!important;
    transform:translate(-50%,-50%)!important
  }

  .so27-countdown__date{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:56px!important;
    width:calc(100% - 80px)!important;
    transform:translateX(-50%)!important;
    justify-items:center!important;
    text-align:center!important
  }

  .so27-countdown__date strong{
    text-align:center!important
  }

  .so27-countdown__date>i{
    margin-left:auto!important;
    margin-right:auto!important
  }

  .so27-countdown__date>span{
    max-width:none;
    text-align:center!important
  }
}


/* ==========================================================================
   V4.4 — APPROVED RENDERED COUNTDOWN
   Implements the approved mockup:
   cream editorial field + overlapping circular photo + diagonal orange matchday.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Real uploaded logo in the floating header.
   The source image is not edited; CSS clips its original whitespace.
   -------------------------------------------------------------------------- */
.so27-header__brand.so27-header__brand--logo{
  position:relative!important;
  display:block!important;
  width:64px!important;
  height:58px!important;
  min-width:64px!important;
  overflow:hidden!important;
  transform:none!important
}

.so27-header__brand-logo{
  position:absolute!important;
  left:-44px!important;
  top:-11px!important;
  width:141px!important;
  height:94px!important;
  max-width:none!important;
  object-fit:fill!important;
  display:block!important
}

.so27-header.is-scrolled .so27-header__brand.so27-header__brand--logo{
  transform:scale(.90)!important;
  transform-origin:left center!important
}

/* Remove the tiny generated 2027 suffix when the real brand mark is active. */
.so27-header__brand.so27-header__brand--logo:after{
  display:none!important
}

/* --------------------------------------------------------------------------
   Countdown overall stage
   -------------------------------------------------------------------------- */
.so27-countdown{
  position:relative!important;
  display:grid!important;
  grid-template-columns:58% 42%!important;
  min-height:clamp(430px,40vw,650px)!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 48% 22%,rgba(31,42,68,.025),transparent 25%),
    var(--so27-ivory)!important;
  box-shadow:none!important
}

/* Remove the previous V4.3 top rule/card visual. */
.so27-countdown:before{
  content:"";
  position:absolute!important;
  z-index:7!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  width:clamp(110px,10vw,180px)!important;
  height:3px!important;
  background:var(--so27-orange)!important;
  opacity:.82!important
}

/* Main copy remains open, editorial and calm. */
.so27-countdown__main{
  position:relative!important;
  z-index:4!important;
  padding:
    clamp(66px,6.4vw,108px)
    clamp(64px,6.2vw,112px)
    clamp(58px,5.8vw,98px)
    var(--so-side)!important;
  background:transparent!important
}

/* Very subtle decorative tennis arc behind the heading. */
.so27-countdown__main:before{
  content:"";
  position:absolute!important;
  z-index:-1!important;
  width:clamp(260px,29vw,520px)!important;
  aspect-ratio:1!important;
  right:-7%!important;
  top:-38%!important;
  border:1px solid rgba(31,42,68,.045)!important;
  border-radius:50%!important;
  pointer-events:none!important
}

.so27-countdown__main:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(180px,20vw,340px);
  height:1px;
  right:4%;
  bottom:17%;
  background:linear-gradient(90deg,rgba(31,42,68,0),rgba(31,42,68,.055),rgba(31,42,68,0));
  transform:rotate(-18deg);
  pointer-events:none
}

.so27-countdown .so27-kicker{
  margin-bottom:clamp(24px,2.5vw,38px)!important
}

.so27-countdown h2{
  max-width:690px!important;
  margin:0!important;
  color:var(--so27-navy)!important;
  font-size:clamp(46px,4.8vw,78px)!important;
  line-height:.98!important;
  letter-spacing:-.04em!important
}

/* Countdown row from the approved render. */
.so27-countdown__grid{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:end!important;
  width:min(100%,820px)!important;
  margin-top:clamp(72px,8vw,126px)!important
}

.so27-countdown__item{
  min-width:0!important;
  padding:0 clamp(15px,2vw,30px)!important;
  text-align:center!important
}

.so27-countdown__item:first-child{
  padding-left:0!important
}

.so27-countdown__item:last-child{
  padding-right:0!important
}

.so27-countdown__item+.so27-countdown__item{
  border-left:1px solid rgba(31,42,68,.16)!important
}

.so27-countdown__item strong{
  display:block!important;
  color:#FF6F24!important;
  font:700 clamp(46px,4.8vw,78px)/.82 var(--so-head)!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important
}

.so27-countdown__item strong:after{
  display:none!important
}

.so27-countdown__item span{
  display:block!important;
  margin-top:10px!important;
  color:rgba(31,42,68,.72)!important;
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important
}

/* --------------------------------------------------------------------------
   Right side — diagonal orange field from the approved image
   -------------------------------------------------------------------------- */
.so27-countdown__aside{
  position:relative!important;
  z-index:2!important;
  min-height:100%!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  isolation:isolate!important
}

/* Main orange shape extends into the cream side, creating the diagonal bridge. */
.so27-countdown__aside:before{
  content:"";
  position:absolute!important;
  z-index:-3!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:-31%!important;
  border-radius:0!important;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.10),transparent 19%),
    linear-gradient(142deg,#FF7626 0%,#F56322 100%)!important;
  clip-path:polygon(28% 0,100% 0,100% 100%,8% 100%,17% 62%,0 31%)!important;
  box-shadow:none!important
}

/* Orange brush/slash accent at the seam. */
.so27-countdown__aside:after{
  content:"";
  position:absolute!important;
  z-index:-1!important;
  left:-24%!important;
  top:5%!important;
  width:clamp(170px,19vw,330px)!important;
  height:clamp(8px,.8vw,13px)!important;
  background:
    linear-gradient(
      90deg,
      rgba(242,140,40,0),
      rgba(242,140,40,.90) 18%,
      rgba(242,140,40,.90) 82%,
      rgba(242,140,40,0)
    )!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  transform:rotate(-28deg)!important;
  transform-origin:left center!important;
  opacity:.75!important;
  pointer-events:none!important
}

/* --------------------------------------------------------------------------
   Circular event photo — the bridge between both halves
   -------------------------------------------------------------------------- */
.so27-countdown__circle{
  position:absolute!important;
  z-index:4!important;
  left:clamp(-170px,-9.1vw,-112px)!important;
  top:50%!important;
  width:clamp(360px,33vw,580px)!important;
  height:auto!important;
  aspect-ratio:1!important;
  margin:0!important;
  border:clamp(5px,.5vw,8px) solid var(--so27-ivory)!important;
  border-radius:50%!important;
  background:
    linear-gradient(rgba(242,140,40,.03),rgba(242,140,40,.03)),
    url('/files/cto_itlh/SPO2026-Imp/DSC06461.jpg') 53% center/cover no-repeat!important;
  box-shadow:
    0 28px 75px rgba(16,35,52,.18),
    0 0 0 1px rgba(255,255,255,.35)!important;
  transform:translateY(-50%)!important;
  overflow:hidden!important
}

/* Thin inner ring gives the circle the poster-like finish from the render. */
.so27-countdown__circle:after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(255,255,255,.40);
  border-radius:50%;
  pointer-events:none
}

/* --------------------------------------------------------------------------
   Matchday typography
   -------------------------------------------------------------------------- */
.so27-countdown__date{
  position:absolute!important;
  z-index:5!important;
  top:50%!important;
  right:clamp(42px,4.4vw,78px)!important;
  width:min(210px,37%)!important;
  display:grid!important;
  justify-items:start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  text-align:left!important;
  transform:translateY(-50%)!important
}

.so27-countdown__date:before{
  content:"MATCHDAY"!important;
  color:rgba(255,255,255,.68)!important;
  font:600 8px/1 var(--so-body)!important;
  letter-spacing:.23em!important;
  text-transform:uppercase!important
}

.so27-countdown__date strong{
  display:block!important;
  color:#fff!important;
  font:700 clamp(50px,5vw,82px)/.74 var(--so-head)!important;
  letter-spacing:-.055em!important;
  text-align:left!important
}

.so27-countdown__date>i{
  display:block!important;
  width:34px!important;
  height:1px!important;
  margin:5px 0 2px!important;
  background:rgba(255,255,255,.62)!important
}

.so27-countdown__date>span{
  max-width:150px!important;
  color:rgba(255,255,255,.84)!important;
  font:600 8px/1.5 var(--so-body)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  text-align:left!important
}

/* Subtle tennis-ball contour in the far right background. */
.so27-countdown__date:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(210px,20vw,350px);
  aspect-ratio:1;
  right:clamp(-210px,-12vw,-120px);
  top:50%;
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
  box-shadow:
    0 0 0 56px rgba(255,255,255,.018),
    0 0 0 112px rgba(255,255,255,.010);
  transform:translateY(-50%);
  pointer-events:none
}

/* Remove older V4.3 article cap; the new diagonal is enough. */
.so27-article--countdown:before{
  display:none!important
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media(max-width:1180px) and (min-width:701px){
  .so27-countdown{
    grid-template-columns:56% 44%!important
  }

  .so27-countdown__main{
    padding-right:70px!important
  }

  .so27-countdown__aside:before{
    left:-25%!important;
    clip-path:polygon(24% 0,100% 0,100% 100%,5% 100%,14% 60%,0 30%)!important
  }

  .so27-countdown__circle{
    left:-128px!important;
    width:clamp(320px,36vw,470px)!important
  }

  .so27-countdown__date{
    right:26px!important;
    width:38%!important
  }

  .so27-countdown__date strong{
    font-size:clamp(44px,5.5vw,67px)!important
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .so27-countdown{
    display:block!important;
    min-height:0!important
  }

  .so27-countdown:before{
    width:76px!important
  }

  .so27-countdown__main{
    padding:62px 20px 76px!important
  }

  .so27-countdown h2{
    font-size:clamp(38px,10.5vw,54px)!important
  }

  .so27-countdown__grid{
    grid-template-columns:1fr 1fr!important;
    row-gap:34px!important;
    margin-top:48px!important
  }

  .so27-countdown__item{
    padding:0 14px!important
  }

  .so27-countdown__item:nth-child(3){
    border-left:0!important
  }

  .so27-countdown__aside{
    min-height:510px!important;
    background:var(--so27-ivory)!important
  }

  .so27-countdown__aside:before{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)!important
  }

  .so27-countdown__aside:after{
    left:8%!important;
    top:12%!important;
    width:160px!important;
    transform:rotate(-11deg)!important
  }

  .so27-countdown__circle{
    left:50%!important;
    top:31%!important;
    width:clamp(220px,62vw,300px)!important;
    transform:translate(-50%,-50%)!important
  }

  .so27-countdown__date{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:56px!important;
    width:calc(100% - 80px)!important;
    justify-items:center!important;
    text-align:center!important;
    transform:translateX(-50%)!important
  }

  .so27-countdown__date strong,
  .so27-countdown__date>span{
    text-align:center!important
  }

  .so27-countdown__date>i{
    margin-left:auto!important;
    margin-right:auto!important
  }

  .so27-countdown__date:after{
    right:-175px;
    top:40%
  }
}