/* ===== Quota Solutions — PREMIUM-PLUS polish layer ===== */
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ---- Refined global depth & type smoothing ---- */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---- Card spotlight (cursor-follow glow) ----
   Any element with class .spot gets a soft radial glow that follows the cursor. */
.spot{position:relative;isolation:isolate}
.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(0,196,140,.16), transparent 60%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.spot:hover::before{opacity:1}

/* ---- Animated gradient border on hover (premium accent) ---- */
.gborder{position:relative}
.gborder::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(130deg,#00c48c,#00e0a1,#f6b73c,#00c48c);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;animation:gborderMove 6s linear infinite;pointer-events:none;
}
.gborder:hover::after{opacity:1}
@keyframes gborderMove{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ---- Aurora sweep for dark sections ---- */
.aurora{position:relative;overflow:hidden}
.aurora::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(0,196,140,.18), transparent 70%),
    radial-gradient(35% 35% at 80% 20%, rgba(0,224,161,.14), transparent 70%),
    radial-gradient(45% 45% at 60% 80%, rgba(246,183,60,.10), transparent 70%);
  filter:blur(20px);animation:auroraShift 18s ease-in-out infinite;
}
.aurora > *{position:relative;z-index:1}
@keyframes auroraShift{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(3%,-2%) rotate(2deg)}66%{transform:translate(-2%,3%) rotate(-2deg)}}

/* ---- Magnetic / lift buttons ---- */
.btn{transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 16px 40px -12px rgba(0,196,140,.55); filter:brightness(1.03)}
.btn:active{transform:translateY(0) scale(.99)}

/* ---- Refined card shadows (layered, expensive-looking) ---- */
.v-item,.svc-card,.post-card,.engine-copy,.stat-card,.value-card,.case,.contact-method{
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.v-item:hover,.svc-card:hover,.post-card:hover,.value-card:hover,.contact-method:hover{
  box-shadow:0 2px 6px rgba(10,26,47,.04), 0 12px 24px -10px rgba(10,26,47,.18), 0 30px 60px -30px rgba(10,26,47,.28);
}

/* ---- Nav: subtle premium glass on scroll ---- */
.nav.scrolled{background:rgba(10,26,47,.86);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 8px 30px -12px rgba(0,0,0,.5)}

/* ---- Link underline grow ---- */
.nav-links a:not(.nav-cta):not(.nav-phone){position:relative}
.nav-links a:not(.nav-cta):not(.nav-phone)::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,#00c48c,#00e0a1);transition:width .28s ease;
}
.nav-links a:not(.nav-cta):not(.nav-phone):hover::after{width:100%}

/* ---- Image / badge subtle float on hover ---- */
.brand img.q{transition:transform .3s ease}
.brand:hover img.q{transform:rotate(-4deg) scale(1.06)}

/* ===== LAYOUT FIXES (prevent header clipping / crowding) ===== */
/* Brand must never shrink or clip */
.brand{flex-shrink:0;min-width:0;white-space:nowrap}
.brand span{white-space:nowrap}
.brand small{white-space:nowrap}
/* SAFETY NET: nav height flexes so a wrap can NEVER clip content */
.nav .wrap, .nav-inner{height:auto!important;min-height:66px;padding-top:10px;padding-bottom:10px;gap:16px;flex-wrap:nowrap;align-items:center}
.brand{line-height:1.15}
.nav-links{gap:16px;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.nav-phone{margin-left:4px}
.search-btn{margin:0 2px}
.nav-cta{white-space:nowrap;flex:none}
/* Progressively hide secondary links as width drops so the row stays clean & single.
   Logo + Book a Call + phone + search always stay. */
@media(max-width:1320px){ .nav-links{gap:14px} .nav-links a:not(.nav-cta):not(.nav-phone){font-size:.88rem} }
@media(max-width:1240px){ .nav-links a[href*="blog"], .nav-links a[href*="results"], .nav-links a[href*="why-us"], .nav-links a[href*="quote"]{display:none} }
@media(max-width:1080px){ .nav-links a[href*="industries"], .nav-links a[href*="about"], .nav-links a[href*="contact"]{display:none} }
@media(max-width:920px){ .nav-links a[href*="roles"], .nav-links a[href*="services"], .nav-links a[href*="index.html"]{display:none} .nav-phone{display:none} }
/* Mobile: drop the small tagline so the brand never clips; keep name only */
@media(max-width:560px){
  .brand small,.brand-tag{display:none!important}
  .brand{font-size:1.02rem}
  .brand img.q{width:30px;height:30px}
  .wrap{padding-left:16px;padding-right:16px}
}

/* ===== ROLE/CAMPAIGN CARD: align button to bottom (consistent spacing) ===== */
.ps-card, .v-item, .svc-card{display:flex;flex-direction:column}
.ps-card > p, .v-item > p{flex:1 0 auto}

/* ===== COOKIE BANNER: clean compact centered pill ===== */
.cookie{
  left:50%!important;right:auto!important;margin:0!important;
  transform:translateX(-50%);
  bottom:18px!important;max-width:600px;width:calc(100% - 32px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
  border:1px solid rgba(0,196,140,.25)!important;
}
.cookie p{margin:0;font-size:.9rem;line-height:1.45}

/* ===== FORM INPUT + BUTTON REFINEMENTS ===== */
.role-lead input,.role-lead select,.role-lead textarea{line-height:1.4;min-height:46px}
.role-lead select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#5b6b7f 50%),linear-gradient(135deg,#5b6b7f 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.role-lead button{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.role-lead .priv{margin-top:14px}
/* bullet lists: align neatly */
.role-body ul,.ind-roles ul{padding-left:1.1em;margin:0}
.role-body li,.ind-roles li{margin-bottom:6px}

/* Fix 10: Push floating elements up when cookie banner is visible */
body.cookie-visible .wa-float,body.cookie-visible .fb-float,body.cookie-visible .chat-launcher{bottom:110px;transition:bottom .3s ease}