/* Websense v9.4 polish: stability, mobile overflow, mascot fallback, motion safety. */
html{-webkit-text-size-adjust:100%}
img,video{max-width:100%}
/* Mobile: CTA panel margins pushed the layout 18px wider than the viewport. */
@media(max-width:820px){.ws-inner .ws-cta-panel{width:auto!important;max-width:calc(100% - 36px)!important;box-sizing:border-box}}

/* Custom CRM capability panel: compact, readable and aligned to the existing navy system. */
.crm-capability-block{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:start;margin:clamp(32px,5vw,72px) 0;padding:clamp(24px,4vw,42px);border:1px solid rgba(112,171,235,.22);border-radius:24px;background:linear-gradient(135deg,rgba(19,43,76,.62),rgba(6,15,29,.76));box-shadow:0 24px 70px -48px rgba(46,140,255,.65)}
.crm-capability-copy .kicker{margin-bottom:14px;color:#69b5ff}
.crm-capability-copy h3{max-width:480px;margin:0 0 14px;font-size:clamp(28px,3.1vw,46px);line-height:1.02;letter-spacing:-.04em;color:#f4f7fc}
.crm-capability-copy p{max-width:520px;margin:0;color:#aebbd0;line-height:1.65}
.crm-capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crm-capability-grid article{min-height:116px;padding:17px 18px;border:1px solid rgba(112,171,235,.2);border-radius:14px;background:rgba(7,16,31,.62)}
.crm-capability-grid article>span{display:block;margin-bottom:10px;color:#69b5ff;font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.crm-capability-grid strong{display:block;color:#f4f7fc;font-size:16px;letter-spacing:-.01em}
.crm-capability-grid p{margin:7px 0 0;color:#98a8bf;font-size:13px;line-height:1.45}
@media(max-width:820px){.crm-capability-block{grid-template-columns:1fr;gap:24px}.crm-capability-copy h3{max-width:620px}}
@media(max-width:520px){.crm-capability-block{padding:22px 18px;border-radius:18px}.crm-capability-grid{grid-template-columns:1fr}.crm-capability-grid article{min-height:0}}
.mobile-menu:not(.open){visibility:hidden}
.mobile-menu.open{visibility:visible}
/* Desktop nav: keep the logo clear of the first link. */
@media(min-width:961px){.ws-global-nav .nav-center a{white-space:nowrap}.ws-global-nav .nav-center{gap:clamp(8px,1.1vw,20px)}.ws-global-nav .logo-block{margin-right:8px}}
/* Mascot: static poster when WebGL is unavailable or blocked. */
.hero-mascot .hero-mascot-fallback{display:block;position:absolute;inset:0;margin:auto;width:min(100%,520px);height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(30,110,255,.35));animation:wsFloat 6s ease-in-out infinite}
.hero-mascot .hero-mascot-fallback[hidden]{display:none}
@keyframes wsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Floating action buttons should never cover content on small screens. */
@media(max-width:600px){.hero-content{padding-bottom:96px}}
/* Respect reduced motion everywhere. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Keyboard focus visibility. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #8fc1ff;outline-offset:3px}
@media(max-width:1280px){.ws-global-nav .nav-status{display:none}}

/* ===== V9.5 premium pass ===== */
/* Hero: keep the headline column clear of the mascot on desktop. */
@media(min-width:901px){
  .hero .hero-content h1{font-size:clamp(42px,3.7vw,62px);max-width:820px}
  .hero .hero-sub{max-width:min(560px,40vw)}
  /* Keep the WebGL mascot on the same 72% optical center as the particle mark. */
  .hero-visual{left:72%;width:min(48vw,760px)}
}
/* Keep the model center aligned with the particle field on both desktop and mobile. */
.hero-mascot{transform:none}
}
/* Scroll progress bar */
.ws-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#69b5ff,#39e5ef,#ff7a59);z-index:300;pointer-events:none;will-change:transform}
/* Card hover: lift + cursor glow. Uses the independent `translate`/`scale` properties so scroll-driven `transform`s are never overridden. */
@media(hover:hover){
  .ws-service-card,.ws-rich-card,.ws-case-card,.ws-insights-grid article,.why-cell,.work-card,.ws-project-entry{transition-property:translate,box-shadow,border-color;transition-duration:.45s,.45s,.3s;transition-timing-function:cubic-bezier(.2,.8,.2,1),ease,ease}
  .ws-service-card:hover,.ws-rich-card:hover,.ws-case-card:hover,.ws-insights-grid article:hover,.why-cell:hover,.work-card:hover,.ws-project-entry:hover{translate:0 -6px;box-shadow:0 28px 60px -24px rgba(40,130,255,.45);border-color:rgba(105,181,255,.45)}
  .ws-service-card,.ws-rich-card,.why-cell,.work-card{position:relative}
  .ws-service-card::after,.ws-rich-card::after,.why-cell::after,.work-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(105,181,255,.14),transparent 60%)}
  .ws-service-card:hover::after,.ws-rich-card:hover::after,.why-cell:hover::after,.work-card:hover::after{opacity:1}
  .ws-case-card-media img,.ws-archive-media img{transition:scale .9s cubic-bezier(.2,.8,.2,1)}
  .ws-case-card:hover .ws-case-card-media img,.ws-project-entry:hover .ws-archive-media img{scale:1.045}
  .ws-global-nav .nav-links a{position:relative}
  .ws-global-nav .nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1);opacity:.7}
  .ws-global-nav .nav-links a:hover::after{transform:scaleX(1)}
  .btn-primary:hover,.ws-header-cta:hover,.nav-cta:hover{box-shadow:0 14px 34px -10px rgba(255,122,89,.65)}
  .btn-ghost:hover{box-shadow:0 14px 34px -14px rgba(105,181,255,.55)}
}