/* Adience cinematic hero v25 integration */
:root{--hero-white:#f7fbff;--hero-muted:#c2cbda}

/* Overlay menu while the 100vh hero is active; return to a white sticky bar below it. */
.site-header.hero-site-header{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  background:transparent;border-bottom:1px solid transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .65s ease,transform .65s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
  overflow:visible;
}
.site-header.hero-site-header.hero-intro-ready,
.site-header.hero-site-header.past-hero{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.site-header.hero-site-header .nav-shell{
  width:100%;max-width:none;margin:0;padding:0 28px;height:94px;gap:24px;
  transition:height .35s ease,padding .35s ease;
}
.site-header.hero-site-header .cinematic-brand{position:relative;width:124px;height:94px;display:flex;align-items:flex-start;justify-content:flex-start;overflow:visible;flex:0 0 124px}
.site-header.hero-site-header .cinematic-brand img{position:absolute;left:0;top:12px;width:118px;height:auto;max-width:none;object-fit:contain;object-position:top left;transition:opacity .35s ease,transform .35s ease,width .35s ease;filter:drop-shadow(0 0 18px rgba(34,212,197,.14))}
.site-header.hero-site-header .cinematic-brand .logo-color{opacity:0;transform:scale(.96)}
.site-header.hero-site-header .main-nav{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.site-header.hero-site-header .main-nav>a,.site-header.hero-site-header .nav-dropdown-toggle{padding:35px 0}
.site-header.hero-site-header .main-nav>a::after,.site-header.hero-site-header .nav-dropdown-toggle::after{bottom:25px}
.site-header.hero-site-header .header-cta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header.hero-site-header .header-cta:hover{background:rgba(255,255,255,.15)}
.site-header.hero-site-header .menu-toggle{border-color:rgba(255,255,255,.22);background:rgba(4,13,23,.58);backdrop-filter:blur(12px)}
.site-header.hero-site-header .menu-toggle span{background:#fff}
.site-header.hero-site-header.past-hero{
  background:rgba(255,255,255,.97);border-bottom-color:rgba(9,31,50,.08);box-shadow:0 12px 34px rgba(8,31,48,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.site-header.hero-site-header.past-hero .nav-shell{height:76px;padding:0 28px}
.site-header.hero-site-header.past-hero .cinematic-brand{height:76px}
.site-header.hero-site-header.past-hero .cinematic-brand .logo-white{opacity:0;transform:scale(.92)}
.site-header.hero-site-header.past-hero .cinematic-brand .logo-color{opacity:1;transform:scale(1);width:88px;top:5px;filter:drop-shadow(0 5px 10px rgba(6,25,40,.08))}
.site-header.hero-site-header.past-hero .main-nav{color:#243a4c;text-shadow:none}
.site-header.hero-site-header.past-hero .main-nav>a,.site-header.hero-site-header.past-hero .nav-dropdown-toggle{padding:27px 0}
.site-header.hero-site-header.past-hero .main-nav>a::after,.site-header.hero-site-header.past-hero .nav-dropdown-toggle::after{bottom:19px}
.site-header.hero-site-header.past-hero .header-cta{background:var(--navy);border-color:transparent;color:#fff;backdrop-filter:none}
.site-header.hero-site-header.past-hero .menu-toggle{background:#fff;border-color:var(--line)}
.site-header.hero-site-header.past-hero .menu-toggle span{background:var(--ink)}

/* Cinematic intro */
.cinematic-hero{
  position:relative;width:100%;height:100vh;min-height:720px;background:#000;color:#fff;
  overflow:hidden;isolation:isolate;font-family:"Poppins",Arial,sans-serif;
}
.cinematic-hero .quantum-bg-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none;background:#000;
  opacity:0;transform:scale(1.025);animation:cinematicBgReveal 4.8s .45s cubic-bezier(.22,.7,.25,1) forwards;
}
@keyframes cinematicBgReveal{0%{opacity:0;transform:scale(1.025)}35%{opacity:.16}70%{opacity:.68}100%{opacity:1;transform:scale(1)}}
.cinematic-hero #quantumCanvas,.cinematic-hero .bg-fade{display:none!important}
.cinematic-hero #explosionCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:16;pointer-events:none;background:transparent!important}
.cinematic-hero .hands-stage{position:absolute;inset:0;z-index:10;pointer-events:none;transition:opacity 1.2s ease,filter 1.2s ease}
.cinematic-hero .hand{position:absolute;opacity:0;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
.cinematic-hero .digital-hand{left:var(--digital-left-px)!important;right:auto!important;top:var(--digital-top-px)!important;width:min(68vw,1220px);transform:translateX(-110vw) scale(.94);filter:drop-shadow(0 0 34px rgba(34,212,197,.24))}
.cinematic-hero .real-hand{left:var(--real-left-px)!important;right:auto!important;top:var(--real-top-px)!important;width:min(48vw,900px);transform:translateX(110vw) scale(.95);filter:drop-shadow(0 0 24px rgba(255,255,255,.08))}
.cinematic-hero.hands-in .digital-hand{animation:cinematicDigitalIn 2.7s cubic-bezier(.16,.84,.2,1) forwards}
.cinematic-hero.hands-in .real-hand{animation:cinematicRealIn 2.7s cubic-bezier(.16,.84,.2,1) forwards}
@keyframes cinematicDigitalIn{0%{opacity:0;transform:translateX(-110vw) scale(.94)}20%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes cinematicRealIn{0%{opacity:0;transform:translateX(110vw) scale(.95)}20%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}
.cinematic-hero .contact-core{position:absolute;left:50vw;top:60vh;width:12px;height:12px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.cinematic-hero.contact .contact-core{opacity:0}
.cinematic-hero .logo-splash{position:absolute;left:50vw;top:60vh;transform:translate(-50%,-50%) scale(.14);opacity:0;filter:blur(12px);z-index:18;will-change:transform,opacity,left,top}
.cinematic-hero .logo-splash-img{width:min(150px,20vw);max-width:150px;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 0 28px rgba(34,212,197,.20))}
.cinematic-hero.logo-grow .logo-splash{animation:cinematicLogoGrow 1.18s cubic-bezier(.18,.84,.22,1) forwards}
.cinematic-hero.logo-float .logo-splash{animation:cinematicLogoFloat .95s cubic-bezier(.22,.78,.22,1) forwards}
.cinematic-hero.logo-travel .logo-splash{animation:cinematicLogoTravel 1.3s cubic-bezier(.45,0,.2,1) forwards}
@keyframes cinematicLogoGrow{0%{opacity:0;transform:translate(-50%,-50%) scale(.14);filter:blur(12px)}28%{opacity:1;filter:blur(0)}72%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@keyframes cinematicLogoFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}100%{opacity:1;transform:translate(-50%,calc(-50% - 300px)) scale(1);filter:blur(0)}}
@keyframes cinematicLogoTravel{0%{opacity:1;left:50vw;top:60vh;transform:translate(-50%,calc(-50% - 300px)) scale(1)}100%{opacity:0;left:28px;top:65px;transform:translate(0,-50%) scale(.70)}}
.cinematic-copy{position:absolute;left:50%;top:50%;width:min(1100px,88vw);transform:translate(-50%,-50%);text-align:center;z-index:14;opacity:0;visibility:hidden;pointer-events:none;filter:blur(9px)}
.cinematic-hero.copy-in .cinematic-copy{visibility:visible;animation:cinematicCopyIn 1.65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cinematicCopyIn{0%{opacity:0;transform:translate(-50%,calc(-50% + 28px));filter:blur(12px)}100%{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}}
.cinematic-copy h1{margin:0;font:700 clamp(42px,5.3vw,84px)/1.04 "Poppins",sans-serif;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.cinematic-copy h1 em{font-style:normal;background:linear-gradient(90deg,#24d4c5 0%,#20c9bb 18%,#f2d522 50%,#ff6a00 72%,#ff007b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 38px rgba(242,213,34,.08)}
.cinematic-copy p{width:min(920px,92%);margin:28px auto 0;padding:14px 18px;font-size:clamp(17px,1.45vw,22px);line-height:1.68;color:#f5f8fc;text-shadow:0 2px 14px rgba(0,0,0,.72),0 0 22px rgba(0,0,0,.48);background:rgba(6,12,22,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px}
.cinematic-hero.copy-in .hands-stage{opacity:.17;filter:blur(1.2px)}

/* Animated scroll affordance: appears after the screenplay copy arrives. */
.hero-scroll-indicator{position:absolute;left:50%;bottom:24px;z-index:25;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;opacity:0;visibility:hidden;transform:translate(-50%,12px);pointer-events:none;transition:opacity .7s ease,transform .7s ease,visibility .7s ease;text-decoration:none}
.cinematic-hero.copy-in .hero-scroll-indicator{opacity:.9;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.hero-scroll-indicator span{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hero-scroll-indicator i{position:relative;width:32px;height:48px;border:1px solid rgba(255,219,83,.96);border-radius:999px;background:linear-gradient(180deg,#ffd84d 0%,#ffb822 100%);box-shadow:0 8px 24px rgba(255,184,34,.34),0 0 0 4px rgba(255,216,77,.08);backdrop-filter:blur(6px)}
.hero-scroll-indicator i::before{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;border-radius:999px;background:#1a2430;transform:translateX(-50%);animation:heroScrollDot 1.65s ease-in-out infinite}
.hero-scroll-indicator i::after{content:"";position:absolute;left:50%;bottom:-9px;width:10px;height:10px;border-right:2px solid #ffd348;border-bottom:2px solid #ffd348;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));transform:translateX(-50%) rotate(45deg);animation:heroArrowNudge 1.65s ease-in-out infinite}
@keyframes heroScrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,18px)}}
@keyframes heroArrowNudge{0%,100%{transform:translate(-50%,0) rotate(45deg)}50%{transform:translate(-50%,5px) rotate(45deg)}}

@media(max-width:1050px){
  .site-header.hero-site-header .main-nav{gap:17px;font-size:13px}
  .site-header.hero-site-header .header-cta{display:none}
}
@media(max-width:860px){
  .site-header.hero-site-header .nav-shell{height:82px;padding:0 16px}
  .site-header.hero-site-header .cinematic-brand{width:102px;height:82px;flex-basis:102px}
  .site-header.hero-site-header .cinematic-brand img{width:98px;top:9px}
  .site-header.hero-site-header .main-nav{top:82px;color:#243a4c;text-shadow:none;background:#fff}
  .site-header.hero-site-header .main-nav>a,.site-header.hero-site-header .nav-dropdown-toggle{padding:13px 14px}
  .site-header.hero-site-header.past-hero .nav-shell{height:70px;padding:0 16px}
  .site-header.hero-site-header.past-hero .cinematic-brand{height:70px}
  .site-header.hero-site-header.past-hero .cinematic-brand .logo-color{width:78px;top:3px}
  .site-header.hero-site-header.past-hero .main-nav{top:70px}
  .cinematic-hero{min-height:680px}
  .cinematic-hero .digital-hand{width:84vw}
  .cinematic-hero .real-hand{width:62vw}
  .cinematic-copy{width:90vw}
  .cinematic-hero .logo-splash-img{width:min(140px,24vw);max-width:140px}
}
@media(max-width:680px){
  .cinematic-hero{min-height:620px}
  .cinematic-hero .digital-hand{width:95vw}
  .cinematic-hero .real-hand{width:72vw}
  .cinematic-copy h1{font-size:40px}
  .cinematic-copy p{font-size:16px;line-height:1.56;margin-top:20px;padding:12px 14px}
  .cinematic-hero .logo-splash-img{width:125px;max-width:125px}
  .hero-scroll-indicator{bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-hero .quantum-bg-frame{animation:none;opacity:1;transform:none}
  .cinematic-hero .hand{opacity:1!important;animation:none!important}
  .cinematic-hero .digital-hand,.cinematic-hero .real-hand{transform:translateX(0) scale(1)!important}
  .cinematic-copy{opacity:1!important;visibility:visible!important;filter:none!important;transform:translate(-50%,-50%)!important}
  .hero-scroll-indicator{opacity:.9;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
  .hero-scroll-indicator i::before,.hero-scroll-indicator i::after{animation:none}
}
#home-content{scroll-margin-top:76px}


/* 2026-09-30 refinement: sticky logo, premium services dropdown and viewport-safe scroll cue */
.site-header.hero-site-header .nav-dropdown-toggle{gap:8px}
.site-header.hero-site-header .nav-chevron{
  display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transform-origin:center;transition:transform .24s ease,color .24s ease;opacity:.82
}
.site-header.hero-site-header .nav-dropdown:hover .nav-chevron,
.site-header.hero-site-header .nav-dropdown.open .nav-chevron{transform:translateY(2px) rotate(225deg)}

/* Dark glass menu while over the cinematic hero. */
.site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu{
  top:calc(100% - 12px);width:min(570px,calc(100vw - 32px));padding:10px;
  background:linear-gradient(145deg,rgba(6,15,27,.96),rgba(10,26,43,.94));
  border:1px solid rgba(255,255,255,.15);border-radius:20px;
  box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);gap:7px
}
.site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu a{
  min-height:76px;padding:13px 14px;border:1px solid transparent;border-radius:14px;
  color:#f7fbff;text-shadow:none;transition:background .2s ease,border-color .2s ease,transform .2s ease
}
.site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu a:hover{
  background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.10);transform:translateY(-1px)
}
.site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu strong{color:#fff;font-size:13px;line-height:1.25;font-weight:750}
.site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu small{color:#9fb3c7;font-size:11px;line-height:1.48;font-weight:500;margin-top:4px}

/* Clean white version once the header becomes sticky. */
.site-header.hero-site-header.past-hero .nav-dropdown-menu{
  top:calc(100% - 8px);width:min(570px,calc(100vw - 32px));padding:10px;background:rgba(255,255,255,.985);
  border:1px solid rgba(9,31,50,.09);border-radius:20px;box-shadow:0 24px 65px rgba(4,28,46,.16);gap:7px
}
.site-header.hero-site-header.past-hero .nav-dropdown-menu a{min-height:76px;padding:13px 14px;border-radius:14px;color:#173044;text-shadow:none;border:1px solid transparent;transition:.2s ease}
.site-header.hero-site-header.past-hero .nav-dropdown-menu a:hover{background:#f3f8fb;border-color:#e8f0f5;transform:translateY(-1px)}
.site-header.hero-site-header.past-hero .nav-dropdown-menu strong{color:#132c3f;font-size:13px;line-height:1.25;font-weight:750}
.site-header.hero-site-header.past-hero .nav-dropdown-menu small{color:#6e8293;font-size:11px;line-height:1.48;font-weight:500;margin-top:4px}

/* The supplied mark is used only after the hero, at a deliberate compact size. */
.site-header.hero-site-header.past-hero .cinematic-brand .logo-color{
  width:60px;top:8px;left:4px;filter:drop-shadow(0 4px 9px rgba(6,25,40,.10))
}

/* Keep the hero truly within laptop browser viewports so the scroll cue cannot fall below the fold. */
.cinematic-hero{height:100svh;min-height:600px}
.hero-scroll-indicator{bottom:max(12px,env(safe-area-inset-bottom));z-index:40}
.hero-scroll-indicator span{font-size:9px;letter-spacing:.16em}
.hero-scroll-indicator i{width:29px;height:42px}

@media (max-height:760px) and (min-width:992px){
  .cinematic-copy{top:51%;width:min(1050px,88vw)}
  .cinematic-copy h1{font-size:clamp(38px,4.75vw,68px)}
  .cinematic-copy p{margin-top:18px;padding:10px 16px;font-size:clamp(14px,1.18vw,18px);line-height:1.55}
  .hero-scroll-indicator{bottom:9px;gap:3px}
  .hero-scroll-indicator i{width:27px;height:38px}
  .hero-scroll-indicator span{font-size:8px}
}
@media (max-width:991px){
  .site-header.hero-site-header .nav-dropdown-menu,
  .site-header.hero-site-header:not(.past-hero) .nav-dropdown-menu,
  .site-header.hero-site-header.past-hero .nav-dropdown-menu{
    position:static;transform:none!important;width:100%;max-width:none;display:none;grid-template-columns:1fr;
    margin:2px 0 8px;padding:7px;border-radius:14px;box-shadow:none
  }
  .site-header.hero-site-header .nav-dropdown.open .nav-dropdown-menu{display:grid;opacity:1;visibility:visible;pointer-events:auto}
  .site-header.hero-site-header.past-hero .cinematic-brand .logo-color{width:54px;top:7px;left:2px}
}
@media (max-width:767px){
  .cinematic-hero{min-height:580px}
  .hero-scroll-indicator{bottom:10px}
  .site-header.hero-site-header.past-hero .cinematic-brand .logo-color{width:50px;top:7px}
}