/* Dynexal global header — single official logo mark + wordmark.
   IMPORTANT: the logo is rendered ONLY by .logo-mark.
   No pseudo-element creates a second copy of the logo. */

.site-header .logo,
.footer .logo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  white-space:nowrap!important;
}

.site-header .logo::before,
.site-header .logo::after,
.footer .logo::before,
.footer .logo::after{
  content:none!important;
  display:none!important;
}

.site-header .logo-mark{
  display:block!important;
  visibility:visible!important;
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  border-radius:0!important;
  background:url('/assets/dynexal-mark.svg') center/contain no-repeat!important;
  color:transparent!important;
  font-size:0!important;
}

.site-header .logo-copy,
.footer .logo-copy{
  display:flex!important;
  flex-direction:column!important;
  line-height:1.08!important;
}

.site-header .logo-copy strong{
  display:block!important;
  font-size:23px!important;
  font-weight:800!important;
  letter-spacing:-.7px!important;
  color:#fff!important;
}

.site-header .logo-copy small{
  display:block!important;
  margin-top:5px!important;
  font-size:12px!important;
  font-weight:500!important;
  color:#9eb0c7!important;
  letter-spacing:.2px!important;
}

.footer .logo-mark{
  display:block!important;
  visibility:visible!important;
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
  background:url('/assets/dynexal-mark.svg') center/contain no-repeat!important;
}

.footer .logo-copy strong{
  font-size:18px!important;
  color:#fff!important;
}

.footer .logo-copy small{
  display:block!important;
  margin-top:4px!important;
  font-size:10px!important;
  color:#91a0b6!important;
  font-weight:500!important;
}

@media(min-width:901px){
  .site-header .nav{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:30px!important;
    font-size:17px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    color:#d6deea!important;
  }

  .site-header .nav>a{
    height:82px!important;
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    color:#cbd5e1!important;
    transition:color .16s ease!important;
  }

  .site-header .nav>a:hover,
  .site-header .nav>a:focus-visible{
    color:#fff!important;
  }

  .site-header .nav>a.active:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:3px!important;
    border-radius:4px!important;
    background:#0aa5ff!important;
  }

  .site-header .nav .nav-arrow{
    display:none!important;
  }
}

@media(max-width:900px){
  .site-header .logo{
    gap:9px!important;
  }

  .site-header .logo-mark{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }

  .site-header .logo-copy strong{
    font-size:20px!important;
  }

  .site-header .logo-copy small{
    font-size:10px!important;
  }

  .site-header .nav .nav-arrow{
    display:none!important;
  }
}

/* Homepage hero fix: keep the blue value strip at the bottom, not over the hero copy. */
.hero-showcase{
  position:relative!important;
}

.hero-showcase .hero-bottom-strip{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  width:min(1320px,92%)!important;
  margin:0!important;
}

@media(max-width:900px){
  .hero-showcase .hero-bottom-strip{
    position:absolute!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    width:92%!important;
  }
}

:focus-visible{
  outline:3px solid #38bdf8!important;
  outline-offset:3px!important;
}


/* Global hover dropdowns — shared by every page. */
@media(min-width:901px){
  .site-header .nav .has-dropdown{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    height:82px!important;
  }
  .site-header .nav .has-dropdown>a{
    height:82px!important;
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    color:#cbd5e1!important;
  }
  .site-header .nav .has-dropdown>a:after{
    content:none!important;
    display:none!important;
  }
  .site-header .nav .dropdown-menu{
    position:absolute!important;
    top:calc(100% - 1px)!important;
    left:50%!important;
    transform:translate(-50%,8px)!important;
    min-width:245px!important;
    padding:8px!important;
    background:rgba(7,18,34,.99)!important;
    border:1px solid #29415f!important;
    border-radius:12px!important;
    box-shadow:0 20px 45px rgba(0,0,0,.38)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
    z-index:1000!important;
  }
  .site-header .nav .dropdown-menu:before{
    content:""!important;
    position:absolute!important;
    top:-9px!important;
    left:0!important;
    right:0!important;
    height:9px!important;
  }
  .site-header .nav .dropdown-menu a{
    display:block!important;
    height:auto!important;
    padding:11px 13px!important;
    border-radius:8px!important;
    color:#cbd8e8!important;
    font-size:14px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
  }
  .site-header .nav .dropdown-menu a:hover,
  .site-header .nav .dropdown-menu a:focus-visible{
    background:#123258!important;
    color:#fff!important;
  }
  .site-header .nav .has-dropdown:hover>.dropdown-menu,
  .site-header .nav .has-dropdown:focus-within>.dropdown-menu{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
}
@media(max-width:900px){
  .site-header .nav .has-dropdown{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    height:auto!important;
  }
  .site-header .nav .has-dropdown>a{
    width:100%!important;
    height:auto!important;
    padding:4px 0!important;
  }
  .site-header .nav .has-dropdown>a:after{
    content:none!important;
    display:none!important;
  }
  .site-header .nav .dropdown-menu{
    display:none!important;
    position:static!important;
    width:100%!important;
    padding:4px 0 4px 14px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-header .nav .has-dropdown.mobile-open>.dropdown-menu{
    display:block!important;
  }
}


/* =========================================================
   GLOBAL DARK / LIGHT MODE
   ========================================================= */
.theme-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  height:38px!important;
  min-width:76px!important;
  padding:0 12px!important;
  margin-left:2px!important;
  border:1px solid rgba(148,163,184,.35)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:#dbeafe!important;
  font:600 13px/1 system-ui,sans-serif!important;
  cursor:pointer!important;
  transition:all .2s ease!important;
}
.theme-toggle:hover{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(56,189,248,.7)!important;
  color:#fff!important;
}
.theme-icon{font-size:16px!important;line-height:1!important}
.theme-label{font-size:12px!important}

html[data-theme="dark"] body{
  background:#07111f!important;
  color:#e7eef8!important;
}
html[data-theme="dark"] .site-header{
  background:rgba(3,10,22,.98)!important;
  border-bottom-color:#20344f!important;
}
html[data-theme="dark"] .section,
html[data-theme="dark"] .topics{
  background:#07111f!important;
  color:#e7eef8!important;
}
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .topic p,
html[data-theme="dark"] .newsletter-box p{
  color:#9fb0c4!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .topic{
  background:#0d1a2b!important;
  border-color:#203550!important;
  color:#edf4ff!important;
}
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .topic h3{
  color:#f2f7ff!important;
}
html[data-theme="dark"] .project-section{
  background:#030a14!important;
}
html[data-theme="dark"] .newsletter-box{
  background:#0d1a2b!important;
  border-color:#203550!important;
}
html[data-theme="dark"] .footer{
  background:#030913!important;
}
html[data-theme="dark"] .footer a{
  color:#b8c7da!important;
}
html[data-theme="dark"] .footer a:hover{
  color:#fff!important;
}
html[data-theme="dark"] .site-header .nav>a{
  color:#c7d4e5!important;
}
html[data-theme="dark"] .site-header .nav>a:hover{
  color:#fff!important;
}

/* Keep the homepage hero intentionally dark in both themes. */
html[data-theme="dark"] .hero-showcase{
  background:#020916!important;
}
html[data-theme="dark"] .hero-showcase:before{
  opacity:.95!important;
}

/* Dropdowns follow the active theme. */
html[data-theme="dark"] .site-header .dropdown-menu{
  background:#07111f!important;
  border-color:#29415f!important;
}
html[data-theme="dark"] .site-header .dropdown-menu a{
  color:#cbd8e8!important;
}
html[data-theme="dark"] .site-header .dropdown-menu a:hover{
  background:#123258!important;
  color:#fff!important;
}

/* Light theme surfaces stay clean when explicitly selected. */
html[data-theme="light"] body{background:#f7f9fc!important;color:#172033!important}
html[data-theme="light"] .theme-toggle{
  background:rgba(7,18,34,.06)!important;
  color:#24364d!important;
  border-color:#cbd5e1!important;
}
html[data-theme="light"] .theme-toggle:hover{
  background:rgba(7,18,34,.11)!important;
  color:#07111f!important;
}
@media(max-width:900px){
  .theme-toggle{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    margin:6px 0 0!important;
  }
}


/* =========================================================
   DARK MODE — CONTENT PAGES
   ========================================================= */
html[data-theme="dark"] .article,
html[data-theme="dark"] .case-page,
html[data-theme="dark"] .legal-page,
html[data-theme="dark"] .services-page,
html[data-theme="dark"] .contact-page,
html[data-theme="dark"] .portfolio-page{
  color:#e7eef8!important;
}
html[data-theme="dark"] .article h1,
html[data-theme="dark"] .article h2,
html[data-theme="dark"] .case-page h1,
html[data-theme="dark"] .case-page h2,
html[data-theme="dark"] .legal-wrap h1,
html[data-theme="dark"] .legal-wrap h2,
html[data-theme="dark"] .services-hero h1,
html[data-theme="dark"] .services-page h2,
html[data-theme="dark"] .contact-hero h1,
html[data-theme="dark"] .contact-card h2{
  color:#f2f7ff!important;
}
html[data-theme="dark"] .article p,
html[data-theme="dark"] .article li,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .case-page p,
html[data-theme="dark"] .case-page li,
html[data-theme="dark"] .legal-wrap p,
html[data-theme="dark"] .legal-wrap li,
html[data-theme="dark"] .services-hero p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .service-card li,
html[data-theme="dark"] .contact-hero p,
html[data-theme="dark"] .contact-card>p,
html[data-theme="dark"] .contact-info p,
html[data-theme="dark"] .contact-info li{
  color:#aebdd0!important;
}
html[data-theme="dark"] .article code:not(pre code){
  background:#17263a!important;
  color:#d8e7fa!important;
}
html[data-theme="dark"] .article .note,
html[data-theme="dark"] .legal-wrap .notice{
  background:#10223a!important;
  border-color:#294667!important;
  color:#cbd9e9!important;
}
html[data-theme="dark"] .article-footer{
  border-color:#29405d!important;
}
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .contact-card{
  background:#0d1a2b!important;
  border-color:#263b55!important;
  box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .process-step{
  background:#0d1a2b!important;
  border-color:#263b55!important;
}
html[data-theme="dark"] .tech span{
  background:#17263a!important;
  color:#d4e1f0!important;
}
html[data-theme="dark"] .legal-page,
html[data-theme="dark"] .article,
html[data-theme="dark"] .case-page,
html[data-theme="dark"] .services-page,
html[data-theme="dark"] .contact-page{
  background:#07111f!important;
}
html[data-theme="dark"] .portfolio-page{
  background:#07111f!important;
}
html[data-theme="dark"] .google-form-wrap{
  background:#0d1a2b!important;
  border-color:#263b55!important;
}
html[data-theme="dark"] .updated,
html[data-theme="dark"] .meta{
  color:#8498b1!important;
}
html[data-theme="dark"] .cta{
  background:#030b17!important;
}
html[data-theme="dark"] .flow{
  background:#030b17!important;
}


/* FINAL MOBILE HEADER LOCK — 2026-09-26 */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .site-header{width:100%!important;overflow:visible!important}
  .site-header .nav{display:none!important;visibility:hidden!important;opacity:0!important}
  .site-header .menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    margin-left:auto!important;
    padding:0!important;
    border:1px solid rgba(148,163,184,.35)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .site-header .nav-wrap{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .site-header .logo{
    min-width:0!important;
    max-width:calc(100% - 54px)!important;
    overflow:hidden!important;
  }
  .site-header .logo-copy{
    min-width:0!important;
    overflow:hidden!important;
  }
  .site-header .logo-copy strong,
  .site-header .logo-copy small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}
@media (max-width:560px){
  .site-header .logo-copy strong{font-size:17px!important}
  .site-header .logo-copy small{font-size:8px!important}
  .site-header .logo-mark{width:38px!important;height:38px!important;flex-basis:38px!important}
}



/* MOBILE NAV OPEN STATE — explicit class avoids inline/CSS !important conflicts */
@media(max-width:900px){
  .site-header .nav.mobile-nav-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:20px 16px!important;
    background:#0b1220!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
    z-index:9999!important;
    border-top:1px solid rgba(56,189,248,.12)!important;
    box-shadow:0 18px 35px rgba(0,0,0,.28)!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown{
    width:100%!important;
  }
}

/* INTERVIEW PREP — subtle premium navigation highlight */
@media(min-width:901px){
  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]{
    height:44px!important;
    align-self:center!important;
    padding:0 14px!important;
    margin:0 -7px!important;
    border:1px solid rgba(56,189,248,.42)!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(37,99,235,.10))!important;
    color:#eaf6ff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 18px rgba(14,165,233,.08)!important;
    transition:all .18s ease!important;
  }

  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]::before{
    content:"✦"!important;
    margin-right:7px!important;
    color:#38bdf8!important;
    font-size:12px!important;
    line-height:1!important;
  }

  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]:hover,
  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]:focus-visible,
  .site-header .nav .has-dropdown>a[href*="interview-prep.html"].active{
    color:#fff!important;
    border-color:rgba(56,189,248,.78)!important;
    background:linear-gradient(135deg,rgba(14,165,233,.23),rgba(37,99,235,.17))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 22px rgba(14,165,233,.15)!important;
  }

  .site-header .nav .has-dropdown>a[href*="interview-prep.html"].active:after{
    display:none!important;
  }
}

@media(max-width:900px){
  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:10px 12px!important;
    border:1px solid rgba(56,189,248,.35)!important;
    border-radius:10px!important;
    background:rgba(14,165,233,.10)!important;
    color:#eaf6ff!important;
  }

  .site-header .nav .has-dropdown>a[href*="interview-prep.html"]::before{
    content:"✦"!important;
    margin-right:8px!important;
    color:#38bdf8!important;
    font-size:12px!important;
  }

  .site-header .nav .has-dropdown>a[href*="interview-prep.html"].active{
    border-color:rgba(56,189,248,.65)!important;
    background:rgba(14,165,233,.16)!important;
    color:#fff!important;
  }
}


/* MOBILE HEADER HARDENING — use 1100px breakpoint for Android/embedded browsers */
@media (max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .site-header{width:100%!important;overflow:visible!important}
  .site-header .nav{display:none!important;visibility:hidden!important;opacity:0!important}
  .site-header .menu-btn{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:42px!important;height:42px!important;flex:0 0 42px!important;
    margin-left:auto!important;padding:0!important;
    border:1px solid rgba(148,163,184,.35)!important;border-radius:10px!important;
    background:rgba(255,255,255,.06)!important;color:#fff!important;
    font-size:22px!important;line-height:1!important;visibility:visible!important;opacity:1!important;
  }
  .site-header .nav-wrap{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:0 16px!important}
  .site-header .logo{min-width:0!important;max-width:calc(100% - 54px)!important;overflow:hidden!important}
  .site-header .logo-copy{min-width:0!important;overflow:hidden!important}
  .site-header .logo-copy strong,.site-header .logo-copy small{overflow:hidden!important;text-overflow:ellipsis!important}
}
@media (max-width:700px){
  .site-header .logo-mark{width:38px!important;height:38px!important;flex-basis:38px!important}
  .site-header .logo-copy strong{font-size:17px!important}
  .site-header .logo-copy small{font-size:8px!important}
}


/* FINAL MOBILE HEADER + MENU — 1100px compatibility */
@media (max-width:1100px){
  .site-header .logo{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:calc(100% - 54px)!important;
  }
  .site-header .logo-copy{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .site-header .logo-copy strong{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
    font-size:18px!important;
  }
  .site-header .logo-copy small{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
    font-size:8px!important;
  }

  .site-header .nav.mobile-nav-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    z-index:9999!important;
    padding:14px 16px 18px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    background:#07111f!important;
    border-top:1px solid rgba(148,163,184,.18)!important;
    box-shadow:0 18px 35px rgba(0,0,0,.35)!important;
  }
  .site-header .nav.mobile-nav-open > a,
  .site-header .nav.mobile-nav-open .has-dropdown > a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    color:#e7eef8!important;
    font-size:15px!important;
    border-radius:8px!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    align-items:stretch!important;
  }
  .site-header .nav.mobile-nav-open .dropdown-menu{
    position:static!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    padding:2px 0 6px 14px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown.mobile-open > .dropdown-menu{
    display:block!important;
  }
  .site-header .nav.mobile-nav-open .dropdown-menu a{
    display:block!important;
    min-height:38px!important;
    padding:9px 12px!important;
    color:#aebdd0!important;
    font-size:13px!important;
  }
}


/* FINAL MOBILE HEADER — prevent logo clipping and guarantee menu visibility */
@media (max-width:1100px){
  .site-header .nav-wrap{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
  }
  .site-header .logo{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100% - 52px)!important;
    width:auto!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .site-header .logo-mark{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .site-header .logo-copy{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .site-header .logo-copy strong{
    font-size:17px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .site-header .logo-copy small{
    font-size:8px!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .site-header .menu-btn{
    position:relative!important;
    z-index:10001!important;
    display:flex!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    margin-left:8px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .site-header .nav.mobile-nav-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:10000!important;
  }
}


/* =========================================================
   FINAL MOBILE HEADER — STABLE PANEL + NO CLIPPING
   ========================================================= */
@media(max-width:1100px){
  html,body{overflow-x:hidden!important}
  .site-header{position:sticky!important;top:0!important;z-index:10000!important}
  .site-header .nav-wrap{
    position:relative!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:0 16px!important;
  }
  .site-header .logo{
    min-width:0!important;
    max-width:calc(100% - 58px)!important;
    flex:1 1 auto!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .site-header .logo-mark{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
  }
  .site-header .logo-copy{
    min-width:0!important;
    overflow:visible!important;
  }
  .site-header .logo-copy strong{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    font-size:20px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .site-header .logo-copy small{
    display:block!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .site-header .menu-btn{
    position:relative!important;
    z-index:10002!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(148,163,184,.38)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-size:25px!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .site-header .menu-btn[aria-expanded="true"]{
    background:#0d8fe9!important;
    border-color:#39b9ff!important;
  }
  .site-header .nav{
    position:absolute!important;
    top:calc(100% + 1px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(100vh - 73px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    margin:0!important;
    padding:14px 18px 20px!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    background:rgba(4,14,29,.99)!important;
    border-top:1px solid #29415f!important;
    border-bottom:1px solid #29415f!important;
    box-shadow:0 18px 40px rgba(0,0,0,.4)!important;
    white-space:normal!important;
    z-index:10001!important;
  }
  .site-header .nav.mobile-nav-open{
    display:flex!important;
  }
  .site-header .nav>a,
  .site-header .nav>.has-dropdown>a{
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    padding:13px 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    color:#dbe7f5!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important;
    font-size:16px!important;
  }
  .site-header .nav>a.active:after,
  .site-header .nav>.has-dropdown>a.active:after{
    display:none!important;
  }
  .site-header .nav>.has-dropdown{
    width:100%!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    position:static!important;
  }
  .site-header .nav>.has-dropdown>.dropdown-menu{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 0 5px 14px!important;
    display:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-header .nav>.has-dropdown.mobile-open>.dropdown-menu{
    display:flex!important;
    flex-direction:column!important;
  }
  .site-header .nav>.has-dropdown>.dropdown-menu a{
    width:100%!important;
    min-height:40px!important;
    padding:10px 8px!important;
    color:#aebfd3!important;
    font-size:14px!important;
    border-bottom:1px solid rgba(148,163,184,.08)!important;
    white-space:normal!important;
  }
  .site-header .nav .theme-toggle{
    width:100%!important;
    min-height:44px!important;
    margin:14px 0 0!important;
    border-radius:10px!important;
  }
}

@media(max-width:560px){
  .site-header .nav-wrap{height:68px!important;min-height:68px!important;padding:0 13px!important}
  .site-header .logo{max-width:calc(100% - 52px)!important}
  .site-header .logo-mark{width:36px!important;height:36px!important;flex-basis:36px!important}
  .site-header .logo-copy strong{font-size:18px!important}
  .site-header .logo-copy small{font-size:8px!important}
  .site-header .menu-btn{width:40px!important;height:40px!important;flex-basis:40px!important;font-size:23px!important}
}




/* MOBILE MENU — hide page layer completely while navigation is open */
@media (max-width:1100px){
  body:has(.site-header .nav.mobile-nav-open){
    overflow:hidden!important;
  }
  body:has(.site-header .nav.mobile-nav-open) main,
  body:has(.site-header .nav.mobile-nav-open) footer{
    display:none!important;
  }
  .site-header .nav.mobile-nav-open{
    position:fixed!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    height:calc(100vh - 72px)!important;
    max-height:none!important;
    overflow-y:auto!important;
    background:#07111f!important;
    z-index:10001!important;
  }
}
@media (max-width:560px){
  .site-header .nav.mobile-nav-open{
    top:68px!important;
    height:calc(100vh - 68px)!important;
  }
}


/* FINAL MOBILE MENU STATE — body class is the source of truth */
@media (max-width:1100px){
  body.mobile-menu-open{
    overflow:hidden!important;
  }
  body.mobile-menu-open > *:not(.site-header){
    display:none!important;
  }
  body.mobile-menu-open .site-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:2147483647!important;
  }
  body.mobile-menu-open .site-header .nav.mobile-nav-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:fixed!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:calc(100vh - 72px)!important;
    max-height:none!important;
    margin:0!important;
    padding:14px 18px 20px!important;
    box-sizing:border-box!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    overflow-y:auto!important;
    background:#07111f!important;
    border-top:1px solid #29415f!important;
    border-bottom:0!important;
    box-shadow:none!important;
    z-index:2147483646!important;
  }
  body.mobile-menu-open .site-header .nav.mobile-nav-open > *,
  body.mobile-menu-open .site-header .nav.mobile-nav-open .has-dropdown{
    visibility:visible!important;
    opacity:1!important;
  }
}
@media (max-width:560px){
  body.mobile-menu-open .site-header .nav.mobile-nav-open{
    top:68px!important;
    height:calc(100vh - 68px)!important;
  }
}

/* Mobile browser Desktop Site mode: keep the desktop composition intact */
@media (min-width:700px) and (max-width:1100px){
  html.desktop-site-mode,
  body.desktop-site-mode{
    min-width:1100px!important;
  }
  body.desktop-site-mode .site-header,
  body.desktop-site-mode .hero-showcase,
  body.desktop-site-mode .section,
  body.desktop-site-mode .footer{
    min-width:1100px!important;
  }
  body.desktop-site-mode .menu-btn{
    display:none!important;
  }
  body.desktop-site-mode .nav{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.desktop-site-mode .nav-wrap{
    height:82px!important;
  }
}

/* FINAL: Chrome Desktop Site on phones must use the real desktop navigation/layout.
   The browser may report a ~980px CSS viewport, so max-width mobile rules still match;
   these explicit overrides intentionally win for .desktop-site-mode. */
@media (min-width:700px) and (max-width:1100px){
  html.desktop-site-mode body.desktop-site-mode{
    min-width:1100px!important;
    overflow-x:auto!important;
  }
  body.desktop-site-mode .site-header{
    min-width:1100px!important;
  }
  body.desktop-site-mode .site-header .nav-wrap{
    width:100%!important;
    max-width:1320px!important;
    height:82px!important;
    padding:0 28px!important;
    box-sizing:border-box!important;
  }
  body.desktop-site-mode .site-header .logo-mark{
    width:52px!important;height:52px!important;flex:0 0 52px!important;
  }
  body.desktop-site-mode .site-header .logo-copy strong{font-size:23px!important}
  body.desktop-site-mode .site-header .logo-copy small{font-size:12px!important;display:block!important}
  body.desktop-site-mode .site-header .menu-btn{display:none!important}
  body.desktop-site-mode .site-header .nav,
  body.desktop-site-mode .site-header .nav.mobile-nav-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:static!important;
    width:auto!important;
    max-width:none!important;
    height:82px!important;
    padding:0!important;
    margin-left:auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:30px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    z-index:auto!important;
  }
  body.desktop-site-mode .site-header .nav>a{
    display:flex!important;
    width:auto!important;
    height:82px!important;
    min-height:0!important;
    padding:0!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
    font-size:17px!important;
    color:#cbd5e1!important;
  }
  body.desktop-site-mode .site-header .nav .has-dropdown{
    width:auto!important;
    height:82px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
  }
  body.desktop-site-mode .site-header .nav .has-dropdown>a{
    height:82px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.desktop-site-mode .site-header .nav .dropdown-menu{
    position:absolute!important;
  }
  body.desktop-site-mode .hero-showcase{
    min-width:1100px!important;
    min-height:760px!important;
    height:auto!important;
  }
  body.desktop-site-mode .hero-showcase-inner{
    min-height:668px!important;
    display:grid!important;
    grid-template-columns:minmax(0,52%) minmax(0,48%)!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  body.desktop-site-mode .hero-copy{
    padding:42px 0 110px!important;
  }
  body.desktop-site-mode .hero-copy h1{
    font-size:clamp(58px,5.5vw,82px)!important;
  }
  body.desktop-site-mode .hero-copy>p{font-size:18px!important}
  body.desktop-site-mode .hero-actions{flex-wrap:nowrap!important}
  body.desktop-site-mode .hero-feature-row{
    display:grid!important;
    grid-template-columns:repeat(6,1fr)!important;
  }
  body.desktop-site-mode .hero-slide-full:after{
    display:block!important;
  }
  body.desktop-site-mode .hero-bottom-strip{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    min-height:86px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
  }
  body.desktop-site-mode .hero-bottom-strip>div{
    min-height:58px!important;
    border-right:1px solid rgba(255,255,255,.2)!important;
    border-bottom:0!important;
  }
}


/* MOBILE NAV ACCORDION — one submenu at a time */
@media(max-width:900px){
  .site-header .nav.mobile-nav-open .has-dropdown>a{
    position:relative!important;
    padding-right:34px!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown>a:after{
    content:"⌄"!important;
    display:block!important;
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#8fa5bf!important;
    font-size:18px!important;
    line-height:1!important;
    transition:transform .18s ease,color .18s ease!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown.mobile-open>a:after{
    transform:translateY(-50%) rotate(180deg)!important;
    color:#38bdf8!important;
  }
}


/* Mobile submenu native hidden state must override all menu display rules */
@media(max-width:900px){
  .site-header .nav.mobile-nav-open .has-dropdown > .dropdown-menu[hidden]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .site-header .nav.mobile-nav-open .has-dropdown.mobile-open > .dropdown-menu:not([hidden]){
    display:flex!important;
    flex-direction:column!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}