/* Balk VIP Transfer — cinematic interaction layer */
:root{
  --motion-x:50vw;
  --motion-y:32vh;
  --gold-motion:202,166,92;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Ambient light follows the pointer without replacing the native cursor. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(560px circle at var(--motion-x) var(--motion-y),rgba(var(--gold-motion),.105),transparent 62%);
  opacity:.9;
}
main,.footer{position:relative;z-index:2}

/* Thin premium scroll indicator. */
.motion-progress{
  position:fixed;
  z-index:120;
  top:0;left:0;
  width:100%;height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#9c783b,#e5c77f,#fff0c3);
  box-shadow:0 0 16px rgba(218,181,104,.4);
  pointer-events:none;
}

/* Atmospheric blurred blobs inspired by the supplied reference. */
.motion-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.72}
.motion-orb{position:absolute;border-radius:999px;filter:blur(34px);will-change:transform;mix-blend-mode:screen}
.motion-orb.a{width:330px;height:130px;left:-110px;top:18%;background:rgba(48,151,202,.13);animation:orbA 13s ease-in-out infinite alternate}
.motion-orb.b{width:370px;height:150px;right:-120px;top:34%;background:rgba(206,157,76,.13);animation:orbB 16s ease-in-out infinite alternate}
.motion-orb.c{width:270px;height:100px;left:34%;bottom:8%;background:rgba(102,177,200,.08);animation:orbC 18s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate3d(120px,75px,0) rotate(18deg) scale(1.18)}}
@keyframes orbB{to{transform:translate3d(-120px,110px,0) rotate(-16deg) scale(1.2)}}
@keyframes orbC{to{transform:translate3d(80px,-80px,0) rotate(12deg) scale(1.28)}}

/* Header turns into a floating glass bar while scrolling. */
.site-header{transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease,border-color .35s ease,transform .35s ease}
.site-header.scrolled{
  background:rgba(10,17,23,.78)!important;
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 10px 40px rgba(0,0,0,.17);
  border-bottom-color:rgba(255,255,255,.08)!important;
}
.main-nav>a,.nav-dropdown>button{position:relative}
.main-nav>a:not(.nav-cta)::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:1px;
  background:linear-gradient(90deg,transparent,#d5b467,transparent);
  transition:left .25s ease,right .25s ease,opacity .25s ease;opacity:0;
}
.main-nav>a:not(.nav-cta):hover::after,.main-nav>a.active:not(.nav-cta)::after{left:8%;right:8%;opacity:1}

/* Hero depth and first-load entrance. */
.hero,.page-hero{isolation:isolate;overflow:hidden}
.hero::after,.page-hero::after{
  content:"";position:absolute;z-index:-1;width:560px;height:560px;border-radius:50%;right:-180px;top:-180px;
  background:radial-gradient(circle,rgba(220,180,91,.16),rgba(64,130,168,.05) 36%,transparent 69%);
  transform:translate3d(var(--hero-glow-x,0),var(--hero-glow-y,0),0) scale(var(--hero-glow-s,1));
  transition:transform .35s cubic-bezier(.2,.75,.2,1);pointer-events:none;
}
.hero-copy,.page-hero .narrow,.service-hero-grid>div:first-child{
  transform:translate3d(var(--copy-x,0),var(--copy-y,0),0);
  transition:transform .28s cubic-bezier(.2,.75,.2,1)
}
.hero-visual,.service-hero-grid .actual-photo,.split-visual .actual-photo{
  transform-style:preserve-3d;will-change:transform;transition:transform .28s cubic-bezier(.2,.75,.2,1)
}

/* Cinematic type entrance: no HTML rewrites required. */
body:not(.motion-ready) .hero-copy>.eyebrow,
body:not(.motion-ready) .hero-copy>h1,
body:not(.motion-ready) .hero-copy>p,
body:not(.motion-ready) .hero-copy>.hero-actions,
body:not(.motion-ready) .hero-copy>.hero-trust,
body:not(.motion-ready) .page-hero .narrow>* ,
body:not(.motion-ready) .service-hero-grid>div:first-child>*{
  opacity:0;transform:translateY(22px);filter:blur(8px)
}
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>p,.hero-copy>.hero-actions,.hero-copy>.hero-trust,
.page-hero .narrow>*,.service-hero-grid>div:first-child>*{
  transition:opacity .8s ease,transform .85s cubic-bezier(.16,.8,.2,1),filter .8s ease
}
body.motion-ready .hero-copy>.eyebrow,body.motion-ready .hero-copy>h1,body.motion-ready .hero-copy>p,
body.motion-ready .hero-copy>.hero-actions,body.motion-ready .hero-copy>.hero-trust,
body.motion-ready .page-hero .narrow>*,body.motion-ready .service-hero-grid>div:first-child>*{
  opacity:1;transform:none;filter:blur(0)
}
.hero-copy>h1,.page-hero h1,.service-hero h1{transition-delay:.07s!important}
.hero-copy>p,.page-hero p,.service-hero p{transition-delay:.14s!important}
.hero-actions,.service-hero .btn{transition-delay:.21s!important}
.hero-trust{transition-delay:.28s!important}

/* Image motion, subtle zoom and sheen. */
.actual-photo{position:relative;isolation:isolate}
.actual-photo::before{
  content:"";position:absolute;z-index:3;inset:-50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  transform:translateX(-35%) rotate(4deg);opacity:0;transition:transform .8s ease,opacity .35s ease
}
.actual-photo:hover::before{transform:translateX(35%) rotate(4deg);opacity:.8}
.actual-photo img{transition:transform .85s cubic-bezier(.16,.8,.2,1),filter .45s ease}
.actual-photo:hover img{transform:scale(1.035)}

/* Mouse-reactive cards + light hotspot. */
.service-card,.value-card,.feature-row>div,.region-list>a,.contact-link,.fleet-item,.booking-box,.region-chips>a{
  --tilt-x:0deg;--tilt-y:0deg;--lift:0px;--spot-x:50%;--spot-y:50%;
  position:relative;isolation:isolate;
  transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition:transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease;
  will-change:transform
}
.service-card::after,.value-card::after,.feature-row>div::after,.contact-link::after,.region-chips>a::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),rgba(211,176,101,.15),transparent 67%);
  transition:opacity .25s ease
}
.service-card:hover::after,.value-card:hover::after,.feature-row>div:hover::after,.contact-link:hover::after,.region-chips>a:hover::after{opacity:1}
.service-card:hover,.value-card:hover,.feature-row>div:hover,.region-list>a:hover,.contact-link:hover,.region-chips>a:hover{--lift:-6px}

/* Buttons feel magnetic and have a moving highlight. */
.motion-magnetic{position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease!important;will-change:transform}
.motion-magnetic::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.18) 48%,transparent 68%);
  transform:translateX(-115%);transition:transform .58s ease
}
.motion-magnetic:hover::before{transform:translateX(115%)}
.motion-magnetic:hover{box-shadow:0 12px 32px rgba(0,0,0,.14)}

/* Scroll reveal: blur -> crisp, with natural stagger. */
.motion-reveal{opacity:0;transform:translate3d(0,34px,0) scale(.988);filter:blur(7px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.2,1),filter .8s ease}
.motion-reveal.motion-visible{opacity:1;transform:none;filter:blur(0)}
.motion-reveal.motion-delay-1{transition-delay:.07s}.motion-reveal.motion-delay-2{transition-delay:.14s}.motion-reveal.motion-delay-3{transition-delay:.21s}

/* Make dark CTA bands feel more alive. */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.cta-band::before{
  content:"";position:absolute;z-index:-1;width:440px;height:220px;border-radius:50%;right:-70px;top:-80px;
  background:radial-gradient(circle,rgba(215,175,92,.18),transparent 68%);filter:blur(18px);animation:ctaGlow 8s ease-in-out infinite alternate
}
@keyframes ctaGlow{to{transform:translate3d(-110px,55px,0) scale(1.18)}}

/* Floating WhatsApp button keeps its familiar shape, only breathes softly. */
.wa-float{animation:waBreath 3.4s ease-in-out infinite}
@keyframes waBreath{50%{box-shadow:0 8px 36px rgba(37,211,102,.35);transform:translateY(-2px)}}

@media (max-width:800px){
  .motion-ambient{opacity:.42}.motion-orb{filter:blur(44px)}
  .hero::after,.page-hero::after{width:380px;height:380px}
}
@media (pointer:coarse),(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,.motion-ambient,.motion-progress{display:none}
  .hero::after,.page-hero::after,.hero-copy,.page-hero .narrow,.service-hero-grid>div:first-child,.hero-visual,.service-hero-grid .actual-photo,.split-visual .actual-photo,
  .service-card,.value-card,.feature-row>div,.region-list>a,.contact-link,.fleet-item,.booking-box,.region-chips>a,.motion-magnetic{transform:none!important}
  .motion-reveal{opacity:1;transform:none;filter:none;transition:none}
  body:not(.motion-ready) .hero-copy>* ,body:not(.motion-ready) .page-hero .narrow>*,body:not(.motion-ready) .service-hero-grid>div:first-child>*{opacity:1;transform:none;filter:none}
  .wa-float,.motion-orb,.cta-band::before{animation:none}
}


/* v4 FIX — keep navigation and WhatsApp genuinely fixed. */
.site-header{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  width:100%!important;
  z-index:200!important;
  background:linear-gradient(180deg,rgba(9,15,21,.88),rgba(9,15,21,.58))!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}
.site-header.scrolled{
  background:rgba(9,15,21,.94)!important;
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  backdrop-filter:blur(20px) saturate(130%);
}
.site-header .brand strong,.site-header .main-nav>a,.site-header .nav-dropdown>button{color:#f5f6f7!important}
.site-header .brand small{color:#e2c276!important}
.site-header .nav-toggle span{background:#fff!important}
.site-header .main-nav .nav-cta{color:#f3d58d!important;border-color:rgba(225,190,111,.85)!important;background:rgba(255,255,255,.035)}

.wa-float{
  position:fixed!important;
  z-index:250!important;
  right:max(18px,env(safe-area-inset-right))!important;
  bottom:max(18px,env(safe-area-inset-bottom))!important;
  left:auto!important;top:auto!important;
  width:60px!important;height:60px!important;
  min-width:60px!important;
  padding:0!important;margin:0!important;
  border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:#25D366!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.16) inset!important;
  text-decoration:none!important;
  overflow:visible!important;
  transform:none;
}
.wa-float b,.wa-float>span{display:none!important}
.wa-float svg{display:block!important;width:31px!important;height:31px!important;fill:#fff!important}
.wa-float:hover{transform:translateY(-3px) scale(1.04)!important;box-shadow:0 14px 34px rgba(0,0,0,.3),0 0 0 5px rgba(37,211,102,.14)!important}
@keyframes waBreath{0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,.24)}50%{box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 0 8px rgba(37,211,102,0)}}
@media(max-width:800px){
  .site-header{height:72px!important}
  .main-nav{z-index:199}
  .wa-float{width:56px!important;height:56px!important;min-width:56px!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
  .wa-float svg{width:29px!important;height:29px!important}
}

/* =========================================================
   v9 — Midnight Champagne theme
   Reduces bright white surfaces and unifies the site palette.
   ========================================================= */
:root{
  --paper:#0f171d;
  --cream:#18232b;
  --muted:#a7b0b5;
  --line:rgba(225,199,137,.16);
  --white:#f0ebe2;
  --shadow:0 24px 70px rgba(0,0,0,.24);
}

html{background:#0b1217}
body{
  background:
    radial-gradient(circle at 12% 18%,rgba(199,162,91,.035),transparent 30%),
    linear-gradient(180deg,#101920 0%,#0e171d 100%);
  color:#e8e2d8;
}

/* Warm off-white instead of pure white. */
h1,h2,h3,.section-head h2,.split-copy h2,.fleet-item h2,.contact-panel h2,.content-grid article h2,.content-grid article h3{
  color:#eee9df;
}
p,.section-head>p,.split-copy p,.fleet-item p,.content-grid article p,.note,.contact-note{
  color:#aab3b8;
}
.eyebrow.dark{color:#d0ae68}
.eyebrow.light{color:#f0e7d5}

/* Sections alternate subtly, without bright white flashes. */
.section{background:transparent}
.fleet-home,.related{
  background:linear-gradient(180deg,#18232b 0%,#141e25 100%)!important;
}
.regions,.contact-section,.values{
  background:linear-gradient(180deg,#111b22 0%,#0f181f 100%)!important;
}
.experience{
  background:linear-gradient(180deg,#0c141a 0%,#111b22 100%)!important;
}

/* Cards and grids. */
.service-grid,.values .container,.region-list,.specs,.link-list{
  border-color:var(--line)!important;
}
.service-card,.value-card,.region-list a,.fleet-item,.contact-link{
  color:#e8e2d8;
  border-color:var(--line)!important;
}
.service-card{
  background:linear-gradient(180deg,rgba(27,39,48,.78),rgba(19,29,36,.78));
}
.service-card:hover{
  background:linear-gradient(145deg,#1c2a34,#111b22)!important;
  color:#f2eee6!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
.service-card p,.value-card p,.feature-row p{color:#9fa9af}
.service-card:hover p{color:#c2c8cb}
.service-no,.region-list span,.region-list em{color:#7f8a91}

.value-card{
  background:linear-gradient(160deg,rgba(27,39,48,.68),rgba(15,24,31,.86));
}
.value-card h3,.feature-row h3{color:#e9e4da}

.region-list a:hover{
  background:rgba(199,162,91,.07)!important;
}
.region-list strong{color:#e9e4da}

/* Hero utility card: dark glass instead of white. */
.route-card{
  background:rgba(18,29,37,.94)!important;
  color:#eee8dd!important;
  border:1px solid rgba(225,199,137,.18);
  box-shadow:0 20px 55px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.route-card small,.route-card span{color:#929da3!important}
.route-card b{color:#f0e9db}

/* Dropdown follows the same dark glass language. */
.nav-dropdown>div{
  background:rgba(15,24,31,.98)!important;
  color:#e9e5dc!important;
  border:1px solid rgba(225,199,137,.14);
  box-shadow:0 22px 58px rgba(0,0,0,.36)!important;
}
.nav-dropdown>div a{border-bottom-color:rgba(255,255,255,.07)!important;color:#cbd1d4}
.nav-dropdown>div a:hover{background:rgba(199,162,91,.08)!important;color:#f2e6ca}

/* Forms: dark panel, calm inputs. */
.quote-form{
  background:linear-gradient(160deg,#18242d 0%,#111b22 100%)!important;
  color:#e9e4da;
  border:1px solid rgba(225,199,137,.16);
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
.quote-form label{color:#b9c0c3!important}
.quote-form input,.quote-form textarea{
  color:#eee9df!important;
  border-bottom-color:rgba(225,199,137,.20)!important;
}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#69767d}
.quote-form input:focus,.quote-form textarea:focus{border-color:#c7a25b!important}
.quote-form small{color:#879299!important}

/* Related/chip content. */
.region-chips a{
  background:#18242c!important;
  color:#e8e2d8!important;
  border:1px solid rgba(225,199,137,.13);
}
.region-chips a:hover{background:#1d2b35!important}
.booking-box{
  background:linear-gradient(160deg,#0c151b,#142029)!important;
  border:1px solid rgba(225,199,137,.15);
  box-shadow:0 22px 60px rgba(0,0,0,.24);
}

/* Nationwide callout no longer becomes a bright cream block. */
.nationwide-card{
  background:
    radial-gradient(circle at 92% 15%,rgba(199,162,91,.10),transparent 30%),
    linear-gradient(135deg,#1a2730 0%,#121c23 58%,#18242c 100%)!important;
  border-color:rgba(225,199,137,.16)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
  color:#e9e4da;
}
.nationwide-card p{color:#aab2b7!important}

/* CTA stays distinctive, but less glaring than a full bright-gold slab. */
.cta-band{
  background:linear-gradient(115deg,#a98343 0%,#c5a25e 48%,#9b793d 100%)!important;
  color:#111920!important;
}
.cta-band h2,.cta-band p{color:#111920!important}
.cta-band .eyebrow.light{color:#2b251a!important}
.btn-light{
  background:#eee6d7!important;
  color:#111920!important;
}
.btn-light:hover{background:#f6efe3!important}

/* Calm secondary email action on dark form. */
.btn-email{
  color:#e6c77f!important;
  border-color:rgba(225,199,137,.42)!important;
  background:rgba(199,162,91,.04)!important;
}
.btn-email:hover{background:#c7a25b!important;color:#111920!important;border-color:#c7a25b!important}

/* Keep text readable without pure-white glare. */
.hero,.page-hero,.service-hero,.region-hero,.site-header,.footer{color:#eee9df}
.hero-copy p,.page-hero p,.service-hero p,.region-hero p{color:#aeb8bd!important}
.hero-trust b{color:#eee9df!important}
.footer{background:linear-gradient(180deg,#091116 0%,#070d11 100%)!important}
.footer a:hover{color:#e8c982!important}

/* Borders and lists throughout the dark theme. */
.check-list li,.contact-link,.specs li,.link-list a{border-color:var(--line)!important}
.check-list li,.specs li,.link-list a{color:#d8d5ce}
.specs span{color:#9da7ac!important}

/* Tone down animation whites. */
.actual-photo::before{
  background:linear-gradient(115deg,transparent 42%,rgba(231,209,163,.07) 50%,transparent 58%)!important;
}
.motion-magnetic::before{
  background:linear-gradient(105deg,transparent 28%,rgba(244,224,181,.12) 48%,transparent 68%)!important;
}

@media(max-width:800px){
  body{background:#0f171d}
  .service-card,.value-card,.quote-form,.nationwide-card{box-shadow:none!important}
  .route-card{background:rgba(18,29,37,.97)!important}
}