/* =========================================================
   FINAL UI FIX — Header overlap + tablet/mobile responsiveness
   Loaded last to override legacy version CSS safely.
   ========================================================= */

/* Stable desktop header geometry */
.header{height:88px!important}
.header .nav-wrap{
  width:min(1360px,calc(100% - 48px))!important;
  height:88px!important;
  gap:18px!important;
  min-width:0!important;
}
.header .brand{
  flex:0 0 225px!important;
  width:225px!important;
  max-width:225px!important;
  min-width:225px!important;
  height:62px!important;
  overflow:hidden!important;
}
.header .brand img{
  width:215px!important;
  max-width:215px!important;
  height:62px!important;
  max-height:62px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.header .nav{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:17px!important;
  font-size:14px!important;
  white-space:nowrap!important;
}
.header .nav>a,.header .drop{flex:0 0 auto!important}
.header .drop>button{padding:31px 0!important}
.header .nav-search{font-size:21px!important;line-height:1!important}
.header .nav-call{font-size:13px!important;gap:6px!important}
.header .nav-call span{font-size:13px!important;font-weight:800!important}
.header .nav-cta{padding:13px 15px!important;min-width:166px!important;text-align:center!important}

/* Prevent the logo and Home link from ever visually colliding */
@media (max-width:1500px){
  .header .nav-wrap{width:min(1280px,calc(100% - 40px))!important;gap:14px!important}
  .header .brand{flex-basis:215px!important;width:215px!important;min-width:215px!important}
  .header .brand img{width:205px!important;max-width:205px!important}
  .header .nav{gap:13px!important;font-size:13.5px!important}
  .header .nav-call{display:none!important}
  .header .nav-cta{min-width:158px!important;padding:12px 14px!important}
}

@media (max-width:1280px) and (min-width:901px){
  .header .nav-wrap{width:calc(100% - 32px)!important;gap:12px!important}
  .header .brand{flex-basis:195px!important;width:195px!important;min-width:195px!important}
  .header .brand img{width:188px!important;max-width:188px!important}
  .header .nav{gap:10px!important;font-size:12.5px!important}
  .header .nav-cta{min-width:148px!important;padding:11px 12px!important}
  .header .nav-search{font-size:18px!important}
}

/* Switch to a hamburger before desktop links become cramped */
@media (max-width:1120px){
  .header{height:82px!important}
  .header .nav-wrap{height:82px!important;width:calc(100% - 32px)!important}
  .header .brand{flex:1 1 auto!important;width:auto!important;max-width:calc(100% - 76px)!important;min-width:0!important}
  .header .brand img{width:min(220px,100%)!important;max-width:100%!important;height:auto!important;max-height:58px!important}
  .header .menu-btn{display:grid!important;place-items:center!important;position:relative!important;z-index:4001!important}
  .header .nav{display:none!important}
  .header .nav.open{
    display:flex!important;
    position:fixed!important;
    top:94px!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 110px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:3px!important;
    padding:14px!important;
    white-space:normal!important;
    background:linear-gradient(180deg,#081a31 0%,#07182d 100%)!important;
    border:1px solid rgba(71,219,255,.25)!important;
    border-radius:20px!important;
    box-shadow:0 28px 70px rgba(0,0,0,.42)!important;
    z-index:4000!important;
  }
  .header .nav.open>a,
  .header .nav.open .drop>button{
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    color:#f4f9ff!important;
    padding:12px 13px!important;
    border-radius:10px!important;
    font-size:15px!important;
  }
  .header .nav.open .drop>button{justify-content:space-between!important}
  .header .nav.open .drop-menu{position:static!important;top:auto!important;left:auto!important;width:100%!important}
  .header .nav.open .nav-call{display:flex!important}
  .header .nav.open .nav-call span{display:inline!important}
  .header .nav.open .nav-cta{display:flex!important;min-width:0!important;justify-content:center!important}
}

/* Phone and small tablets */
@media (max-width:620px){
  .header{height:78px!important}
  .header .nav-wrap{height:78px!important;width:calc(100% - 28px)!important}
  .header .brand{max-width:calc(100% - 68px)!important}
  .header .brand img{width:min(205px,100%)!important;max-height:54px!important}
  .header .menu-btn{width:52px!important;height:52px!important;flex:0 0 52px!important;border-radius:15px!important}
  .header .nav.open{top:88px!important;left:10px!important;right:10px!important;max-height:calc(100dvh - 100px)!important}
}

@media (max-width:420px){
  .header .brand img{width:min(185px,100%)!important}
  .header .nav.open{left:8px!important;right:8px!important}
}

/* Hero: prevent text/art clipping on tablets and phones */
.hero-home,.hero-inner{overflow:hidden!important}
@media (max-width:900px){
  .hero-inner{padding-top:72px!important;padding-bottom:44px!important;min-height:760px!important}
  .hero-copy{position:relative!important;z-index:20!important}
  .hero-globe-art{pointer-events:none!important}
}
@media (max-width:620px){
  .hero-home{min-height:760px!important}
  .hero-inner{min-height:760px!important;padding-top:64px!important}
  .hero h1{font-size:clamp(42px,12vw,54px)!important;line-height:1.04!important;letter-spacing:-2.4px!important}
  .hero p{font-size:16px!important;line-height:1.7!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .hero-actions .btn{width:100%!important}
}

/* Home carousel cards: consistent click/hover affordance */
.project-card[data-href],.feature[data-href],.home-job-card[data-href]{cursor:pointer!important}
.project-card[data-href]:hover,.feature[data-href]:hover,.home-job-card[data-href]:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 20px 50px rgba(5,21,42,.18)!important;
}
.project-card[data-href] .card-cta,.feature[data-href] .card-cta,.home-job-card[data-href] .card-cta{font-weight:850!important}

/* Avoid horizontal page overflow from legacy carousel styles */
.carousel-shell,.carousel-viewport,.carousel-track{max-width:100%!important}
@media (max-width:620px){
  .carousel-card{width:calc(100vw - 48px)!important;min-width:calc(100vw - 48px)!important}
}