/* Standard SkyVTU responsive navigation.
   Desktop = horizontal navigation. Mobile = hamburger + off-canvas drawer.
   The menu is hidden in HTML by default and does not depend on Alpine state. */

[hidden]{display:none!important}
body.mobile-nav-open{overflow:hidden;touch-action:none}

.site-header{will-change:transform;transition:background .35s ease,border .35s ease}
.full-site-nav{gap:clamp(12px,1.45vw,24px)}
.full-site-nav>a:not(.nav-cta){white-space:nowrap}
.nav-contact-link{color:#8be9f7}

.menu-button{display:none;position:relative;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.menu-button span{display:block;width:19px;height:1px;margin:0;background:#e2e8f0;transition:transform .2s ease,opacity .2s ease}

.mobile-nav-backdrop,.mobile-nav-drawer{display:none}

@media(max-width:1180px){
  .full-site-nav{gap:13px;font-size:11px}
  .nav-cta{padding:10px 12px}
}

@media(max-width:900px){
  .desktop-nav{display:none!important}
  .menu-button{display:flex!important;z-index:72}

  .mobile-nav-backdrop{
    display:block;position:fixed;z-index:69;inset:0;background:rgba(2,6,23,.68);
    backdrop-filter:blur(4px);opacity:0;transition:opacity .22s ease;
  }
  .mobile-nav-backdrop.is-open{opacity:1}

  .mobile-nav-drawer{
    display:flex;position:fixed;z-index:70;top:0;right:0;bottom:0;width:min(88vw,380px);
    flex-direction:column;background:rgba(3,8,24,.99);border-left:1px solid rgba(148,163,184,.15);
    box-shadow:-30px 0 80px rgba(0,0,0,.38);transform:translateX(102%);transition:transform .22s ease;
    padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));overflow-y:auto;
  }
  .mobile-nav-drawer.is-open{transform:translateX(0)}

  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(148,163,184,.13)}
  .mobile-nav-brand{display:flex;align-items:center;gap:10px;min-width:0}
  .mobile-nav-brand img{width:24px;height:24px;object-fit:contain}
  .mobile-nav-brand span{display:flex;min-width:0;flex-direction:column;gap:2px}
  .mobile-nav-brand b{font-size:11px;letter-spacing:.06em}
  .mobile-nav-brand small{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;font:600 7px/1.2 ui-monospace,monospace;letter-spacing:.1em}
  .mobile-menu-close{display:grid!important;place-items:center;flex:0 0 auto;width:40px;height:40px;padding:0!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:50%;background:#071120!important;color:#e2e8f0!important;font-size:22px!important;line-height:1!important}

  .mobile-nav-links{display:flex;flex-direction:column;padding:18px 0}
  .mobile-nav-links a{display:flex;align-items:center;min-height:48px;padding:10px 2px;border-bottom:1px solid rgba(148,163,184,.09);color:#f8fafc;font-size:19px;font-weight:650;letter-spacing:-.02em}
  .mobile-nav-links a:hover,.mobile-nav-links a:focus-visible{color:#8be9f7}

  .mobile-nav-foot{margin-top:auto;padding-top:18px;border-top:1px solid rgba(148,163,184,.13)}
  .mobile-nav-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:14px 16px;border:1px solid rgba(34,211,238,.30);border-radius:9px;background:linear-gradient(135deg,rgba(8,145,178,.78),rgba(37,99,235,.72));font-size:13px;font-weight:750}
  .mobile-nav-legal{display:flex;justify-content:space-between;gap:18px;padding-top:15px;color:#71849a;font-size:11px}
}

/* Existing public-page responsiveness from this checkpoint. */
@media(max-width:700px){
  .site-header{height:66px;padding-inline:16px}
  .brand-logo{width:24px;height:24px}.brand-copy b{font-size:11px}.brand-copy small{display:none}
  .menu-button{width:42px;height:42px}

  .page-hero,.compact-page-hero,.about-hero{min-height:auto!important;padding:112px 20px 64px!important;align-items:flex-end}
  .page-hero-copy{width:100%!important}
  .page-hero h1,.project-hero h1,.contact-copy h1,.error-page h1{font-size:clamp(42px,13vw,64px)!important;line-height:.96}
  .page-section{padding:64px 20px!important}
  .project-hero{min-height:auto!important;padding:110px 20px 64px!important;gap:34px!important}
  .project-hero-copy h1{font-size:clamp(44px,13vw,66px)!important}
  .project-hero-media{padding:9px!important;border-radius:17px!important}
  .case-study{gap:48px!important}
  .project-gallery{grid-template-columns:1fr!important}
  .capability-grid{grid-template-columns:1fr!important}
  .capability-card{min-height:auto!important;padding:25px!important}
  .about-layout,.values-grid,.related-grid,.contact-page{grid-template-columns:1fr!important}
  .contact-page{min-height:auto!important;padding:112px 20px 64px!important;gap:42px!important}
  .contact-form-card{padding:20px!important}
  .site-footer{padding:38px 20px!important;gap:28px!important}
  .site-footer nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px!important}
  .work-reference-intro,.work-system-list,.process-reference-layout{width:calc(100% - 32px)!important}
  .work-reference-intro{padding-top:92px!important;padding-bottom:42px!important}
  .work-reference-intro h1{font-size:clamp(43px,12vw,58px)!important}
  .work-system-row{border-radius:13px!important;min-height:auto!important}
  .work-system-copy{padding:30px 23px!important}
  .work-system-copy h2{font-size:clamp(37px,11vw,52px)!important;margin-top:24px!important}
  .work-system-visual{min-height:280px!important}
  .process-reference-layout{padding-top:92px!important;gap:24px!important}
  .process-reference-sticky>h1{font-size:clamp(44px,12vw,58px)!important}
  .process-orbit{width:100%!important;max-width:360px!important;margin-inline:auto}
  .process-reference-steps li{grid-template-columns:30px 1fr 18px!important;gap:10px!important;padding-bottom:45px!important}
  .process-reference-steps h2{font-size:clamp(34px,10vw,46px)!important}
}

/* --------------------------------------------------------------------------
   Desktop navigation reliability
   The original storytelling stylesheet hides .desktop-nav > a below 980px.
   This checkpoint uses 900px as the desktop/mobile switch, so restore the
   normal horizontal links for every desktop width above that breakpoint.
   -------------------------------------------------------------------------- */
@media(min-width:901px){
  .site-header{padding-inline:clamp(18px,3.2vw,52px)}
  .desktop-nav.full-site-nav{display:flex!important;align-items:center;justify-content:flex-end;gap:clamp(8px,1.1vw,20px);min-width:0;pointer-events:auto}
  .desktop-nav.full-site-nav>a{display:inline-flex!important;align-items:center;position:relative;white-space:nowrap;pointer-events:auto;font-size:clamp(10px,.82vw,12px)}
  .desktop-nav.full-site-nav>a:not(.nav-cta){padding:29px 0 27px}
  .desktop-nav.full-site-nav>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;background:#67e8f9;transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
  .desktop-nav.full-site-nav>a:not(.nav-cta):hover::after,
  .desktop-nav.full-site-nav>a:not(.nav-cta):focus-visible::after,
  .desktop-nav.full-site-nav>a.is-active::after{transform:scaleX(1)}
  .desktop-nav.full-site-nav>a.is-active{color:#f8fafc}
  .menu-button{display:none!important}
}

@media(min-width:901px) and (max-width:1080px){
  .site-header{padding-inline:16px}
  .brand{gap:8px}.brand-logo{width:23px;height:23px}.brand-copy b{font-size:10px}.brand-copy small{display:none}
  .desktop-nav.full-site-nav{gap:8px}
  .desktop-nav.full-site-nav>a{font-size:9.5px}
  .nav-cta{padding:9px 10px;font-size:9.5px}
}

/* Active state in the mobile drawer. */
.mobile-nav-links a.is-active{color:#8be9f7}
.mobile-nav-links a.is-active::after{content:"CURRENT";margin-left:auto;color:#3d6072;font:700 7px/1 ui-monospace,monospace;letter-spacing:.11em}

/* --------------------------------------------------------------------------
   Shared page responsiveness guardrails
   -------------------------------------------------------------------------- */
.page-shell,.app-shell{max-width:100%;overflow-x:clip}
.page-shell main,.page-shell section,.page-shell article,.page-shell div{min-width:0}
.page-shell img,.page-shell video,.page-shell canvas{max-width:100%}
.rich-content,.page-shell p,.page-shell h1,.page-shell h2,.page-shell h3{overflow-wrap:anywhere}
.rich-content pre{max-width:100%;overflow:auto;padding:16px;border:1px solid rgba(148,163,184,.14);border-radius:12px;background:#030817}
.rich-content table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.inquiry-form input,.inquiry-form textarea,.inquiry-form select,.contact-form-card input,.contact-form-card textarea,.contact-form-card select{width:100%;max-width:100%;min-width:0}

@media(max-width:700px){
  .page-shell{font-size:15px}
  .page-hero,.compact-page-hero,.about-hero{padding-top:100px!important;padding-bottom:54px!important}
  .page-hero-copy{max-width:none!important}
  .page-hero-copy>p:not(.eyebrow),.project-hero-copy>p:not(.eyebrow),.contact-copy>p:not(.eyebrow),.insight-detail-copy>p:not(.eyebrow){font-size:15px!important;line-height:1.65!important}
  .page-section{padding-top:56px!important;padding-bottom:56px!important}
  .page-cta{min-height:auto!important;padding:72px 20px!important}
  .page-cta h2{font-size:clamp(42px,13vw,62px)!important;line-height:.98}
  .capability-card h2{font-size:clamp(33px,10vw,46px)!important}
  .case-main{font-size:18px!important}
  .case-side{gap:26px!important}
  .legal-copy{font-size:16px!important}
  .values-grid article{padding:22px!important}.values-grid h2{font-size:27px!important}
  .about-system{padding:20px!important}.about-system span{font-size:9px!important}
  .project-gallery figure{padding:9px!important;border-radius:15px!important}
  .related-grid a{padding:10px!important}
  .insight-featured h2{font-size:clamp(36px,11vw,52px)!important}
  .insight-card>div{padding:20px!important}
  .insight-card h3{font-size:30px!important}
  .insight-detail-media{padding:8px!important;border-radius:17px!important}
  .insight-article{font-size:17px!important}
  .content-hub-card{grid-template-columns:24px minmax(0,1fr) 18px!important;gap:12px!important}
  .content-hub-card h2{font-size:clamp(32px,10vw,43px)!important}
  .custom-page-grid>a{grid-template-columns:24px minmax(0,1fr) 16px!important;gap:12px!important}
  .work-reference-intro>p{font-size:14px!important}
  .work-system-meta{align-items:flex-start}.work-system-meta small{text-align:right;max-width:72%}
  .work-system-tags{gap:6px!important}.work-system-tags span{font-size:7px!important}
  .process-orbit>small{left:13px!important;right:13px!important;bottom:13px!important}
  .process-reference-steps p{font-size:14px!important}
}

@media(max-width:420px){
  .site-header{padding-inline:12px!important}.brand{gap:7px}.brand-logo{width:22px;height:22px}.brand-copy b{font-size:10px}
  .mobile-nav-drawer{width:92vw;padding-left:17px;padding-right:17px}
  .mobile-nav-links a{font-size:18px;min-height:46px}
  .page-hero,.compact-page-hero,.about-hero,.project-hero,.contact-page,.insight-detail-hero{padding-left:16px!important;padding-right:16px!important}
  .page-section{padding-left:16px!important;padding-right:16px!important}
  .work-reference-intro,.work-system-list,.process-reference-layout{width:calc(100% - 24px)!important}
  .work-system-copy{padding:26px 18px!important}.work-system-visual{min-height:255px!important}
  .content-hub-card,.custom-page-grid>a{padding:18px!important}
}

/* --------------------------------------------------------------------------
   Production footer: online-first, no postal address.
   -------------------------------------------------------------------------- */
.site-footer{display:block!important;padding:0!important;background:linear-gradient(180deg,#020617,#030817)!important;color:#7d90a8;border-top:1px solid rgba(148,163,184,.14)}
.footer-main{display:grid;grid-template-columns:minmax(220px,1.3fr) .8fr 1.15fr .7fr;gap:clamp(28px,5vw,76px);padding:64px clamp(24px,7vw,112px) 54px}
.footer-brand{align-content:start;gap:8px!important}.footer-brand strong{font-size:13px!important;letter-spacing:.1em!important}.footer-brand span{color:#8be9f7;font:650 9px/1.4 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}.footer-brand p{max-width:330px;margin:10px 0 0;color:#7f91a8;font-size:13px;line-height:1.7}
.footer-column{min-width:0}.footer-label{margin:0 0 16px;color:#52677f;font:700 8px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.footer-link-list{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;font-size:12px!important}.footer-link-list a,.footer-social-links a{width:max-content;max-width:100%;color:#a9b6c9;transition:color .2s ease}.footer-link-list a:hover,.footer-social-links a:hover,.footer-contact-link:hover b{color:#f8fafc}
.footer-contact{display:grid;align-content:start;gap:13px}.footer-contact-link{display:grid;gap:4px;min-width:0}.footer-contact-link span{color:#52677f;font:650 8px/1 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase}.footer-contact-link b{min-width:0;color:#c8d4e2;font-size:12px;font-weight:650;line-height:1.45;overflow-wrap:anywhere;transition:color .2s ease}
.footer-social-links{display:grid;gap:10px;font-size:12px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(24px,7vw,112px);border-top:1px solid rgba(148,163,184,.1)}.footer-bottom small{font-size:10px!important;color:#53657b}.footer-bottom>div{display:flex;gap:18px;font-size:10px}.footer-bottom a:hover{color:#f8fafc}

@media(max-width:900px){
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 26px;padding:52px 22px 42px}
  .footer-bottom{padding:20px 22px;align-items:flex-start}
}
@media(max-width:560px){
  .footer-main{grid-template-columns:1fr;padding:44px 18px 36px;gap:32px}
  .footer-link-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 18px!important}
  .footer-social-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .footer-bottom{padding:18px;flex-direction:column;gap:10px}
}