/* Scoped hero + menu adjustment. Other sections are intentionally untouched. */

/* Thin background reveal around the hero */
html{background:#cfdad6}
#top{margin:2px;width:calc(100% - 4px)}

/* Full menu on initial page load */
html body #header:not(.compact){
  position:fixed!important;
  z-index:80!important;
  top:6px!important;
  bottom:auto!important;
  left:50%!important;
  width:min(1540px,calc(100% - 36px))!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
}

html body #header:not(.compact) .header-inner{
  min-height:58px!important;
  padding:7px 14px 7px 18px!important;
  border:1px solid rgba(12,49,46,.12)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 14px 34px rgba(10,43,39,.12)!important;
  backdrop-filter:blur(18px)!important;
}

html body #header:not(.compact) .brand b{
  color:#092729!important;
  max-width:180px!important;
  opacity:1!important;
  margin-left:0!important;
}

html body #header:not(.compact) nav a{
  color:#092729!important;
  background:transparent!important;
  border:0!important;
  padding:13px 17px!important;
  font-size:13px!important;
}

html body #header:not(.compact) .contact{
  background:#092729!important;
  color:#fff!important;
}

html body #header:not(.compact) .contact i{
  background:#239789!important;
  color:#fff!important;
}

/* Hero starts below the menu instead of hiding behind it */
html body #top.hero{
  min-height:100svh!important;
  padding-top:116px!important;
  padding-bottom:12px!important;
  overflow:hidden!important;
}

html body #top .hero-wrap{
  width:calc(100% - 28px)!important;
  min-height:calc(100svh - 128px)!important;
}

/* Do not add another frame over the supplied hero image */
html body #top .hero-art::before,
html body #top .hero-art::after{
  display:none!important;
}

/* Same original menu moves to bottom on scroll; only text logo hides */
html body #header.compact{
  position:fixed!important;
  z-index:80!important;
  top:auto!important;
  bottom:12px!important;
  left:50%!important;
  width:min(1540px,calc(100% - 46px))!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
}

html body #header.compact .header-inner{
  min-height:58px!important;
  padding:7px 14px 7px 18px!important;
  border:1px solid rgba(12,49,46,.12)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 14px 34px rgba(10,43,39,.14)!important;
  backdrop-filter:blur(18px)!important;
}

html body #header.compact .brand{
  display:flex!important;
  align-items:center!important;
}

html body #header.compact .brand b{
  display:none!important;
  width:0!important;
  max-width:0!important;
  opacity:0!important;
  margin:0!important;
}

html body #header.compact .brand>i{
  display:grid!important;
  flex:0 0 auto!important;
}

html body #header.compact nav{
  display:flex!important;
  flex:1!important;
  justify-content:center!important;
  gap:0!important;
}

html body #header.compact nav a{
  color:#092729!important;
  background:transparent!important;
  border:0!important;
  padding:13px 15px!important;
  font-size:12px!important;
}

html body #header.compact .contact{
  display:flex!important;
  background:#092729!important;
  color:#fff!important;
}

html body #header.compact .contact i{
  background:#239789!important;
  color:#fff!important;
}

/* Prevent the old theme from moving the bar in the wrong direction */
html body #header.switching{
  transform:translateX(-50%)!important;
  opacity:0!important;
  transition:opacity .22s ease!important;
}

@media(max-width:1050px){
  html body #header:not(.compact){
    top:8px!important;
    width:calc(100% - 24px)!important;
  }

  html body #header.compact{
    bottom:10px!important;
    width:calc(100% - 34px)!important;
  }

  html body #top.hero{
    padding-top:92px!important;
    padding-bottom:14px!important;
  }

  html body #top .hero-wrap{
    min-height:calc(100svh - 108px)!important;
  }
}

@media(max-width:650px){
  html body #header:not(.compact){
    top:8px!important;
    width:calc(100% - 20px)!important;
  }

  html body #header.compact{
    bottom:8px!important;
    width:calc(100% - 30px)!important;
  }

  html body #top.hero{
    padding-top:78px!important;
  }

  html body #top .hero-wrap{
    min-height:0!important;
  }
}

/* The original .wrap uses margin:auto; remove vertical auto-margin so the
   hero lands directly below the header instead of drifting downward. */
html body #top .hero-wrap{
  margin:0 auto!important;
}

/* Final vertical alignment: 20px gap below the top menu, like the reference. */
html body #top.hero{
  padding-top:98px!important;
}
@media(max-width:1050px){html body #top.hero{padding-top:82px!important}}
@media(max-width:650px){html body #top.hero{padding-top:76px!important}}

/* Compact bottom bar: keep full bar, but make the center nav visibly narrower. */
html body #header.compact .brand{
  margin-right:auto!important;
}
html body #header.compact nav{
  flex:0 1 clamp(620px,70vw,1340px)!important;
  width:clamp(620px,70vw,1340px)!important;
  max-width:calc(100% - 190px)!important;
}
html body #header.compact .contact{
  margin-left:auto!important;
}
@media(max-width:1050px){
  html body #header.compact nav{width:auto!important;flex:1!important;max-width:none!important}
}


/* Only the requested entry motion for Section Four. No layout/theme changes. */
@media (min-width:951px){
  html body .s4-why .s4-visual.s4-reveal{
    opacity:0!important;
    transform:translateX(-84px)!important;
    transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)!important;
  }
  html body .s4-why .s4-visual.s4-reveal.is-visible{
    opacity:1!important;
    transform:translateX(0)!important;
  }
  html body .s4-why .s4-copy{
    opacity:0!important;
    transform:translateX(84px)!important;
    transition:opacity .9s ease .08s,transform 1.1s cubic-bezier(.16,1,.3,1) .08s!important;
  }
  html body .s4-why .s4-copy.s4-entry-visible{
    opacity:1!important;
    transform:translateX(0)!important;
  }
  html body .s4-why .s4-copy.s4-entry-visible .s4-reveal{
    opacity:1!important;
    transform:none!important;
  }
}
@media (max-width:950px){
  html body .s4-why .s4-visual.s4-reveal,
  html body .s4-why .s4-copy{
    opacity:1!important;
    transform:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  html body .s4-why .s4-visual.s4-reveal,
  html body .s4-why .s4-copy{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* =========================================================
   RESTORE VIDEO-STYLE ACCORDION FOR SECTION SIX ONLY
   This overrides the later static 3-column rules without touching any
   other section.
   ========================================================= */
@media (min-width:1001px){
  html body section#resources.s6-video-cards .s6-accordion{
    position:relative!important;
    z-index:2!important;
    width:min(1540px,90vw)!important;
    height:540px!important;
    margin-inline:auto!important;
    display:flex!important;
    flex-direction:row!important;
    gap:14px!important;
    overflow:visible!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case,
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    display:block!important;
    position:relative!important;
    min-width:0!important;
    width:auto!important;
    height:100%!important;
    min-height:0!important;
    flex:0.68 1 0!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    flex:4.1 1 0!important;
  }
  html body section#resources.s6-video-cards .s6-case-media{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    aspect-ratio:auto!important;
  }
  html body section#resources.s6-video-cards .s6-case-content,
  html body section#resources.s6-video-cards .s6-case.active .s6-case-content{
    position:absolute!important;
    z-index:5!important;
    left:30px!important;
    right:28px!important;
    top:auto!important;
    bottom:28px!important;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:14px minmax(0,560px)!important;
    gap:13px!important;
    opacity:0!important;
    transform:translateY(28px)!important;
    pointer-events:none!important;
  }
  html body section#resources.s6-video-cards .s6-case.active .s6-case-content{
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body section#resources.s6-video-cards .s6-vertical{
    display:flex!important;
    position:absolute!important;
    z-index:6!important;
    left:50%!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%) rotate(-90deg)!important;
  }
  html body section#resources.s6-video-cards .s6-case.active .s6-vertical{
    opacity:0!important;
  }
  html body section#resources.s6-video-cards .s6-case-count{
    display:block!important;
  }
}

@media (max-width:1000px){
  html body section#resources.s6-video-cards .s6-accordion{
    display:flex!important;
    flex-direction:column!important;
    width:calc(100% - 32px)!important;
    height:650px!important;
    gap:8px!important;
    overflow:visible!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case,
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    display:block!important;
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:58px!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    height:386px!important;
  }
  html body section#resources.s6-video-cards .s6-case-media{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
  }
  html body section#resources.s6-video-cards .s6-case-content,
  html body section#resources.s6-video-cards .s6-case.active .s6-case-content{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    top:auto!important;
    bottom:22px!important;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    opacity:0!important;
    transform:translateY(20px)!important;
  }
  html body section#resources.s6-video-cards .s6-case.active .s6-case-content{
    opacity:1!important;
    transform:none!important;
  }
  html body section#resources.s6-video-cards .s6-vertical{
    display:flex!important;
    left:18px!important;
    right:55px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
  html body section#resources.s6-video-cards .s6-case.active .s6-vertical{
    display:none!important;
  }
}
@media (max-width:600px){
  html body section#resources.s6-video-cards .s6-accordion{
    height:620px!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case,
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    height:54px!important;
  }
  html body section#resources.s6-video-cards .s6-accordion .s6-case.active{
    height:372px!important;
  }
}

/* FINAL VISIBILITY PASS — keep the restored cards readable like the reference. */
@media (min-width:1001px){
  html body section#resources.s6-video-cards .s6-case-content h3{
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:clamp(30px,2.6vw,42px)!important;
    font-weight:800!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  html body section#resources.s6-video-cards .s6-case-content small{
    color:#fff!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.13em!important;
  }
  html body section#resources.s6-video-cards .s6-case-content p{
    color:rgba(255,255,255,.9)!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.55!important;
  }
  html body section#resources.s6-video-cards .s6-vertical,
  html body section#resources.s6-video-cards .s6-vertical span{
    color:#fff!important;
    font-size:16px!important;
    font-weight:800!important;
    text-shadow:0 1px 8px rgba(0,0,0,.45)!important;
  }
  html body section#resources.s6-video-cards .s6-vertical i{
    background:#4fc4ac!important;
    box-shadow:0 0 12px #4fc4ac!important;
  }
  html body section#resources.s6-video-cards .s6-case-count{
    color:#fff!important;
    font-weight:700!important;
  }
}

/* Bottom menu reference: compact white pill links, icon only at left. */
@media (min-width:1051px){
  html body #header.compact nav{
    flex:0 1 auto!important;
    width:auto!important;
    max-width:none!important;
    gap:6px!important;
  }
  html body #header.compact nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:50px!important;
    padding:11px 20px!important;
    border:1px solid rgba(12,49,46,.08)!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#092729!important;
    font-size:13px!important;
  }
  html body #header.compact nav a:hover{
    background:#e8f3f0!important;
    color:#239789!important;
  }
}
@media (max-width:1050px){
  html body section#resources.s6-video-cards .s6-case-content h3{
    color:#fff!important;
    font-weight:800!important;
  }
  html body section#resources.s6-video-cards .s6-case-content p{
    color:rgba(255,255,255,.9)!important;
  }
  html body section#resources.s6-video-cards .s6-vertical,
  html body section#resources.s6-video-cards .s6-vertical span{
    color:#fff!important;
    font-weight:800!important;
  }
}

/* Final card heading size: keep the first active card title on two lines. */
@media (min-width:1001px){
  html body section#resources.s6-video-cards .s6-case.active .s6-case-content h3{
    max-width:640px!important;
    font-size:clamp(26px,2.15vw,34px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
  }
}

/* Final hero image cleanup: show the image edge-to-edge without the old diagonal frame. */
html body #top .hero-art,
html body #top .portrait{
  clip-path:none!important;
}
html body #top .portrait{
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:14px!important;
}
html body #top .hero-art::before,
html body #top .hero-art::after,
html body #top.hero::after{
  display:none!important;
  content:none!important;
}

/* Bottom menu is 10px narrower on both sides than before. */
@media (min-width:1051px){
  html body #header.compact{
    width:min(1540px,calc(100% - 56px))!important;
  }
}

/* Scroll-scrubbed Why section motion: movement follows the scroll position. */
@media (min-width:951px){
  html body .s4-scroll-driven .s4-visual.s4-reveal{
    opacity:var(--s4-visual-opacity,0)!important;
    transform:translate3d(var(--s4-visual-x,-84px),0,0)!important;
    transition:none!important;
  }
  html body .s4-scroll-driven .s4-copy{
    opacity:var(--s4-copy-opacity,0)!important;
    transform:translate3d(var(--s4-copy-x,84px),0,0)!important;
    transition:none!important;
  }
  html body .s4-scroll-driven .s4-copy .s4-reveal{
    opacity:1!important;
    transform:none!important;
  }
}
@media (max-width:950px){
  html body .s4-scroll-driven .s4-visual.s4-reveal,
  html body .s4-scroll-driven .s4-copy{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}