/*
Theme Name: NextGen Workforce
Theme URI: https://nexgworkforce.com/
Author: Croketa
Description: Custom WordPress theme for NextGen Workforce, converted from the approved V3.10 static site.
Version: 51.0.0
Text Domain: nextgen-workforce
*/

@font-face{font-family:Aventa;src:url('assets/Aventa-Regular.ttf')}@font-face{font-family:Aventa;src:url('assets/Aventa-SemiBold.ttf');font-weight:600}@font-face{font-family:GTE;src:url('assets/GT-America-Extended-Regular.ttf')}@font-face{font-family:GTE;src:url('assets/GT-America-Extended-Medium.ttf');font-weight:500}:root{--navy:#103b56;--navyDark:#071a27;--cloud:#dce5eb;--sand:#b99b83;--paper:#f3f4f4;--ink:#0b3045;--muted:#63747f;--line:rgba(11,48,69,.16);--shell:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f8f8;color:var(--ink);font-family:Aventa,Arial,sans-serif}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.shell{width:min(var(--shell),calc(100% - 42px));margin:auto}.section{padding:116px 0}.eyebrow,.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:600;margin:0 0 20px}.eyebrow{color:#62747f}.eyebrow.light,.kicker{color:#bccbd3}h1,h2{font-family:Aventa,sans-serif;font-weight:400;letter-spacing:-.045em;margin:0}h1{font-size:clamp(3.7rem,8vw,7.5rem);line-height:.94}h2{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02}.body-lg{font-size:1.17rem;line-height:1.72;color:#536672;max-width:760px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 23px;border-radius:999px;border:0;font-weight:600;transition:.22s;cursor:pointer}.btn-light{background:#fff;color:var(--navyDark)}.btn-light:hover{transform:translateY(-2px)}.btn-ghost{color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.33)}.btn-dark{background:var(--navyDark);color:#fff}.site-header,.apply-header{position:absolute;inset:0 0 auto;z-index:10}.nav{height:92px;display:flex;align-items:center;justify-content:space-between}.logo img{width:210px}.nav-links,.apply-nav{display:flex;align-items:center;gap:26px;color:#fff;font-size:.9rem}.nav-links>a{opacity:.84}.nav-links>a:hover{opacity:1}.nav-apply,.lang-toggle{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 13px}.lang-toggle{background:rgba(255,255,255,.06);color:#fff;cursor:pointer}.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;position:relative}.menu-toggle span{position:absolute;left:10px;right:10px;height:1px;background:#fff}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:26px}.hero,.apply-hero{background:var(--navyDark);color:#fff;position:relative;overflow:hidden}.hero{min-height:850px;padding:150px 0 100px;display:flex;align-items:center}.texture{position:absolute;inset:0;background:url('assets/brand-texture.png') center/cover no-repeat;opacity:.74}.texture:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,39,.99),rgba(7,26,39,.80) 54%,rgba(7,26,39,.28))}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.lede{font-size:1.25rem;line-height:1.65;color:#d1dbe1;max-width:620px;margin:30px 0 34px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-art{display:flex;justify-content:flex-end}.hero-art img{width:min(470px,100%);aspect-ratio:1;object-fit:cover;border-radius:28px;box-shadow:0 28px 90px rgba(0,0,0,.35);transform:rotate(1.5deg)}.path-section{padding:0 0 90px;background:#f7f8f8}.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;transform:translateY(-48px);position:relative;z-index:3}.path-card{min-height:430px;border-radius:28px;padding:34px;display:flex;flex-direction:column;transition:.25s}.path-card:hover{transform:translateY(-5px)}.path-card.employer{background:#fff;box-shadow:0 20px 70px rgba(7,26,39,.08)}.path-card.candidate{background:var(--navy);color:#fff}.path-num{font-family:GTE;color:#82949e;font-size:.72rem;margin-bottom:auto}.path-card h2{font-size:clamp(2.2rem,4vw,4rem);max-width:520px}.path-card p:not(.eyebrow){line-height:1.65;max-width:500px;margin:22px 0}.candidate p:not(.eyebrow){color:#c7d4db}.path-link{font-weight:600;margin-top:auto}.statement-grid{display:grid;grid-template-columns:.3fr 1fr;gap:72px}.statement .body-lg{margin-top:30px}.services{background:var(--navyDark);color:#fff}.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-bottom:58px}.section-head>p{color:#aebdc6;line-height:1.7;max-width:380px}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16)}.service-grid article{min-height:300px;padding:24px 21px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;transition:.2s}.service-grid article:hover{background:#10374f}.service-grid article>span{color:#7690a0;font-size:.72rem;margin-bottom:auto}.service-grid h3{font-family:GTE;font-weight:400;font-size:1.12rem;line-height:1.2;margin:0 0 10px}.service-grid p{color:#aebdc6;font-size:.88rem;line-height:1.55;margin:0}.proof{background:#e5ebee}.proof-head{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:50px}.proof-head>p{line-height:1.7;color:#61727c;max-width:440px}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(11,48,69,.14);border:1px solid rgba(11,48,69,.14)}.proof-grid article{background:#f8f9f9;padding:34px;min-height:330px;display:flex;flex-direction:column}.proof-number{font-family:GTE;font-size:clamp(4rem,7vw,7.1rem);letter-spacing:-.06em;margin-bottom:auto}.proof-grid h3{font-family:GTE;font-weight:400;margin:0 0 10px}.proof-grid p{color:#63747f;line-height:1.55;margin:0}.why{background:var(--navy);color:#fff}.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.why-title{position:sticky;top:50px;align-self:start}.pillars{border-top:1px solid rgba(255,255,255,.18)}.pillars article{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:27px 0;border-bottom:1px solid rgba(255,255,255,.18)}.pillars article>span{color:#8198a6;font-size:.72rem}.pillars h3{font-family:GTE;font-weight:400;font-size:1.3rem;margin:0}.pillars p{color:#b8c8d0;line-height:1.65;margin:8px 0 0;max-width:600px}.process{background:#f4f5f5}.process-wide{max-width:1000px}.process-top{max-width:880px}.process-top .body-lg{margin-top:26px}.steps{list-style:none;padding:0;margin:48px 0 30px}.steps.horizontal{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.steps.horizontal li{padding:28px 22px 28px 0;border-right:1px solid var(--line);margin-right:22px}.steps.horizontal li:last-child{border-right:0;margin-right:0}.steps li>span{display:block;font-size:.72rem;color:#748690;margin-bottom:50px}.steps strong{font-family:GTE;font-weight:400;font-size:1.18rem}.steps p{margin:8px 0 0;color:#5f707a;line-height:1.55}.text-link{display:inline-block;font-weight:600;border-bottom:1px solid;padding-bottom:6px}.contact-band{position:relative;overflow:hidden;background:var(--navyDark);color:#fff;padding:96px 0}.contact-texture{opacity:.62}.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end}.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:#d6e0e6}.contact-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}footer{background:#02080c;color:#fff;padding:68px 0 32px}.footer-grid{display:grid;grid-template-columns:1fr .8fr;gap:50px}.footer-logo{width:230px}.footer-grid p{color:#93a7b3;margin-top:20px}.footer-links{display:flex;flex-direction:column;gap:12px;color:#b8c7cf}.footer-links span{line-height:1.55;color:#728692}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.13);padding-top:23px;color:#718590;font-size:.82rem}.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}.apply-hero{padding:168px 0 90px}.apply-hero-copy{position:relative;z-index:2}.apply-hero p:last-child{max-width:720px;color:#d0dae0;font-size:1.12rem;line-height:1.7;margin-top:25px}.form-section{padding:90px 0 120px;background:#eef1f2}.form-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:start}.form-copy{position:sticky;top:30px}.form-copy p:last-child{color:#5f707a;line-height:1.7}.candidate-form{background:#fff;border-radius:28px;padding:34px;box-shadow:0 18px 60px rgba(7,26,39,.08)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.candidate-form label:not(.consent){display:flex;flex-direction:column;gap:8px;font-size:.88rem;font-weight:600;margin-bottom:18px}input,select,textarea{width:100%;border:1px solid #ccd4d8;border-radius:13px;padding:14px 15px;background:#fafbfb;color:var(--ink);outline:0}input:focus,select:focus,textarea:focus{border-color:#184e69;box-shadow:0 0 0 3px rgba(24,78,105,.1)}textarea{resize:vertical}.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;color:#52646f;line-height:1.5;font-size:.88rem;margin:10px 0 26px}.consent input{width:18px;height:18px}.submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.submit-row p{margin:0;color:#2f6c55}.disclaimer{font-size:.78rem;line-height:1.55;color:#75858e;border-top:1px solid #e3e7e9;margin:26px 0 0;padding-top:20px}@media(max-width:900px){.section{padding:86px 0}.menu-toggle{display:block}.nav-links{position:absolute;top:78px;left:21px;right:21px;background:#071a27;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px;display:none;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links .lang-toggle{align-self:flex-start}.hero{min-height:auto;padding:145px 0 95px}.hero-grid,.statement-grid,.section-head,.proof-head,.why-grid,.contact-grid,.form-grid{grid-template-columns:1fr}.hero-art{justify-content:flex-start}.hero-art img{width:min(430px,90vw)}.path-grid{grid-template-columns:1fr;transform:translateY(-35px)}.statement-grid,.section-head,.why-grid{gap:32px}.service-grid{grid-template-columns:1fr 1fr}.proof-grid{grid-template-columns:1fr}.proof-grid article{min-height:250px}.why-title{position:static}.steps.horizontal{grid-template-columns:1fr}.steps.horizontal li{border-right:0;border-bottom:1px solid var(--line);margin-right:0}.steps.horizontal li:last-child{border-bottom:0}.form-copy{position:static}.field-row{grid-template-columns:1fr}}@media(max-width:560px){.shell{width:min(100% - 28px,var(--shell))}.logo img{width:176px}.nav{height:80px}h1{font-size:clamp(3rem,15vw,4.6rem)}h2{font-size:clamp(2.2rem,11vw,3.4rem)}.hero{padding-top:125px}.lede{font-size:1.07rem}.hero-art img{width:100%}.path-card{min-height:360px;padding:26px}.service-grid{grid-template-columns:1fr}.service-grid article{min-height:220px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:9px}.candidate-form{padding:22px 18px;border-radius:20px}.apply-nav a{display:none}}
.form-block{padding:4px 0 28px;margin-bottom:28px;border-bottom:1px solid #e3e8ea}.form-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.form-block-title{display:flex;align-items:center;gap:14px;margin-bottom:24px}.form-block-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf2f4;color:#406075;font-size:.72rem}.form-block-title h3{font-family:GTE;font-weight:400;font-size:1.16rem;margin:0}
.candidate-form small{display:block;color:#7b8a92;line-height:1.45;margin-top:-10px;margin-bottom:18px}
.autocomplete-wrap{position:relative}.suggestions{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #d3dce0;border-radius:14px;box-shadow:0 16px 45px rgba(7,26,39,.14);overflow:hidden;max-height:250px;overflow-y:auto}
.suggestion-item{display:block;width:100%;text-align:left;background:#fff;border:0;padding:13px 15px;color:#17384b;cursor:pointer}.suggestion-item:hover,.suggestion-item.active{background:#eef3f5}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px}.chip{display:inline-flex;align-items:center;gap:8px;background:#0f3b56;color:#fff;padding:8px 11px;border-radius:999px;font-size:.82rem}.chip button{border:0;background:transparent;color:#c9d7df;cursor:pointer;padding:0;font-size:1rem;line-height:1}
.field-intro{color:#657781;line-height:1.6;margin:0 0 16px}
.day-picker,.quick-availability{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.day-picker button,.quick-availability button{border:1px solid #cbd6db;background:#f7f9f9;color:#315066;padding:10px 13px;border-radius:999px;cursor:pointer;transition:.18s}.day-picker button.active,.quick-availability button.active{background:#0f3b56;color:#fff;border-color:#0f3b56}
.employer-hero .texture:after{background:linear-gradient(90deg,rgba(7,26,39,.99),rgba(7,26,39,.78) 58%,rgba(7,26,39,.25))}


/* NextGen brand intro: decorative, first visit per browser tab/session only */
.brand-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#000;
  opacity:1;
  visibility:visible;
  transition:opacity .38s ease, visibility .38s ease;
}
.brand-intro.is-hiding{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.brand-intro.is-skipped{
  display:none;
}
.brand-intro__video{
  width:min(72vw,560px);
  height:min(72vw,560px);
  max-width:560px;
  max-height:560px;
  object-fit:contain;
  display:block;
}
body.brand-intro-active{
  overflow:hidden;
}
@media (max-width:640px){
  .brand-intro__video{
    width:min(88vw,430px);
    height:min(88vw,430px);
  }
}
@media (prefers-reduced-motion:reduce){
  .brand-intro{
    display:none !important;
  }
}


/* V2.6 mobile refinement */
@media(max-width:760px){
  body{overflow-x:hidden}
  .shell{width:min(100% - 24px,var(--shell))}
  .nav{height:76px}
  .logo img{width:164px}
  .menu-toggle{display:block}

  .hero{padding:112px 0 72px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:none}
  .hero h1{font-size:clamp(3rem,14vw,4.45rem);line-height:.96}
  .lede{font-size:1.02rem;line-height:1.55;margin:22px 0 26px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%;min-height:48px}
  .hero-art{justify-content:center}
  .hero-art img{width:min(86vw,390px);border-radius:22px;transform:none}

  .path-section{padding-bottom:58px}
  .path-grid{grid-template-columns:1fr;gap:12px;transform:translateY(-26px)}
  .path-card{min-height:310px;padding:24px;border-radius:22px}
  .path-card h2{font-size:clamp(2.2rem,10.5vw,3.2rem)}

  .section{padding:74px 0}
  .statement-grid,.section-head,.why-grid,.proof-head,.contact-grid,.form-grid{grid-template-columns:1fr;gap:28px}
  .statement h2,.services h2,.why h2,.proof h2,.process h2,.contact-band h2{font-size:clamp(2.3rem,10.5vw,3.45rem)}
  .body-lg{font-size:1rem;line-height:1.62}

  .service-grid{grid-template-columns:1fr}
  .service-grid article{min-height:190px;padding:22px 20px}
  .service-grid article>span{margin-bottom:48px}
  .service-grid h3{font-size:1.12rem}

  .proof-grid{grid-template-columns:1fr}
  .proof-grid article{min-height:220px;padding:26px}
  .proof-number{font-size:clamp(4rem,18vw,5.7rem)}

  .why-title{position:static}
  .pillars article{grid-template-columns:44px 1fr;gap:14px;padding:22px 0}

  .process-wide{max-width:none}
  .steps.horizontal{grid-template-columns:1fr}
  .steps.horizontal li{padding:22px 0;border-right:0;border-bottom:1px solid var(--line);margin:0}
  .steps.horizontal li:last-child{border-bottom:0}
  .steps li>span{margin-bottom:26px}

  .contact-band{padding:74px 0}
  .contact-actions{width:100%}
  .contact-actions>a:not(.btn){overflow-wrap:anywhere}
  .contact-buttons{display:grid;grid-template-columns:1fr;width:100%}
  .contact-buttons .btn{width:100%}

  footer{padding:54px 0 28px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:8px}

  .apply-hero{padding:120px 0 68px}
  .apply-hero h1{font-size:clamp(2.9rem,13.5vw,4.2rem)}
  .apply-hero-copy p:last-child{font-size:1rem;line-height:1.55}
  .form-section{padding:54px 0 82px}
  .form-copy{position:static}
  .candidate-form{padding:20px 16px;border-radius:20px}
  .field-row{grid-template-columns:1fr;gap:0}
  .form-block{padding-bottom:22px;margin-bottom:22px}
  .form-block-title{align-items:flex-start}
  .candidate-form input,.candidate-form select,.candidate-form textarea{font-size:16px}
  .day-picker,.quick-availability{gap:7px}
  .day-picker button,.quick-availability button{flex:1 1 calc(50% - 7px);min-height:44px}
  .suggestions{max-height:220px}
  .submit-row{display:grid;grid-template-columns:1fr;gap:12px}
  .submit-row .btn{width:100%;min-height:49px}
  .apply-nav{gap:10px}
  .apply-nav a{display:none}

  .brand-intro__video{width:min(82vw,360px);height:min(82vw,360px)}
}

@media(max-width:430px){
  .shell{width:min(100% - 18px,var(--shell))}
  .hero h1{font-size:clamp(2.75rem,15vw,3.85rem)}
  .path-card{min-height:290px}
  .candidate-form{padding:18px 14px}
  .day-picker button,.quick-availability button{flex-basis:100%}
}


/* V2.9: permanently animated hero logo using the official client asset at original speed.
   The source video has a black background; screen blending makes that background disappear
   into the existing dark hero while preserving the metallic highlights. */
.hero-logo-motion{position:relative;isolation:isolate}
.hero-logo-video{
  width:min(470px,100%);
  aspect-ratio:1;
  object-fit:contain;
  display:block;
  mix-blend-mode:screen;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
@media(max-width:900px){
  .hero-logo-video{width:min(430px,90vw)}
}
@media(max-width:760px){
  .hero-logo-video{width:min(86vw,390px)}
}
@media(max-width:560px){
  .hero-logo-video{width:100%}
}

/* V2.10: hero logo ping-pong loop. The official forward animation alternates
   with a reversed copy, so there is no jump back to frame one. */
.hero-logo-motion{overflow:hidden}
.hero-logo-pingpong{
  position:relative;
  width:min(470px,100%);
  aspect-ratio:1;
  background:transparent;
}
.hero-logo-pingpong .hero-logo-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero-logo-pingpong .hero-logo-video.is-active{opacity:1}
@media(max-width:900px){.hero-logo-pingpong{width:min(430px,90vw)}}
@media(max-width:760px){.hero-logo-pingpong{width:min(86vw,390px)}}
@media(max-width:560px){.hero-logo-pingpong{width:100%}}

/* NextGen Workforce V3 */
.solutions-v3{background:radial-gradient(circle at 82% 18%,rgba(24,94,130,.34),transparent 32%),var(--navyDark)}
.solutions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.solution-card{border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.025);overflow:hidden;transition:.25s}
.solution-card:hover,.solution-card[open]{background:rgba(16,59,86,.62);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.solution-card summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 34px;gap:14px;align-items:start;padding:25px}
.solution-card summary::-webkit-details-marker{display:none}.solution-num{font-family:GTE;color:#7894a4;font-size:.72rem;padding-top:5px}.solution-card h3{font-family:GTE;font-weight:400;font-size:1.2rem;line-height:1.25;margin:0}.solution-card summary p{color:#90a7b4;font-size:.78rem;margin:8px 0 0}.solution-plus{font-size:1.8rem;font-weight:300;line-height:1;color:#9fb3bf;transition:.25s}.solution-card[open] .solution-plus{transform:rotate(45deg)}.solution-card ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:0;padding:0 25px 26px 83px;list-style:none;color:#c1d0d8;font-size:.86rem;line-height:1.4}.solution-card li:before{content:'↗';color:#6e9db7;margin-right:8px}.solutions-note{margin-top:26px;border-top:1px solid rgba(255,255,255,.15);padding-top:24px;display:grid;grid-template-columns:150px 1fr;gap:30px;color:#aebdc6;line-height:1.65}.solutions-note span{font-family:GTE;color:#fff;letter-spacing:.12em;font-size:.72rem}.solutions-note p{margin:0;max-width:780px}
@media(max-width:760px){.solutions-grid{grid-template-columns:1fr}.solution-card summary{padding:21px 18px;grid-template-columns:34px 1fr 28px}.solution-card ul{grid-template-columns:1fr;padding:0 18px 22px 66px}.solutions-note{grid-template-columns:1fr;gap:10px}}


/* V3.1 — live Google reviews */
.reviews-v3{
  background:
    radial-gradient(circle at 12% 8%,rgba(48,109,142,.16),transparent 30%),
    linear-gradient(180deg,#eef2f4 0%,#f8f9f9 100%);
  overflow:hidden;
}
.reviews-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:end;
  margin-bottom:48px;
}
.reviews-summary{
  justify-self:end;
  min-width:260px;
  padding:22px 24px;
  border:1px solid rgba(7,26,39,.12);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
}
.reviews-rating-line{display:flex;align-items:center;gap:14px}
.reviews-rating-line strong{
  font-family:GTE,Aventa,sans-serif;
  font-weight:400;
  font-size:2.2rem;
  letter-spacing:-.05em;
}
.stars{letter-spacing:.08em;font-size:.9rem;color:#b28b53}
.reviews-summary p{margin:6px 0 14px;color:#687983;font-size:.9rem}
.reviews-summary a{font-size:.86rem;font-weight:600;border-bottom:1px solid rgba(7,26,39,.45);padding-bottom:4px}
.reviews-stage{position:relative;min-height:280px}
.reviews-status{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  color:#72828b;
  border:1px dashed rgba(7,26,39,.16);
  border-radius:22px;
  background:rgba(255,255,255,.45);
}
.reviews-status.is-error{color:#7d6a63}
.reviews-pulse{
  width:8px;height:8px;border-radius:50%;background:#477f9d;
  box-shadow:0 0 0 0 rgba(71,127,157,.35);
  animation:reviewPulse 1.6s infinite;
}
@keyframes reviewPulse{70%{box-shadow:0 0 0 10px rgba(71,127,157,0)}100%{box-shadow:0 0 0 0 rgba(71,127,157,0)}}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.review-card{
  position:relative;
  min-height:300px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid rgba(7,26,39,.11);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 45px rgba(7,26,39,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}
.review-card:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(7,26,39,.09)}
.review-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.review-author{display:flex;align-items:center;gap:12px;min-width:0}
.review-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;background:#e7ecef;flex:none;
}
.review-avatar-fallback{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#dce6eb;color:#31566b;font-weight:600;flex:none;
}
.review-author a{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}
.review-meta{font-size:.75rem;color:#80909a;margin-top:3px}
.review-stars{font-size:.78rem;letter-spacing:.06em;color:#b28b53;white-space:nowrap}
.review-text{
  color:#405765;
  line-height:1.7;
  font-size:.97rem;
  margin:0 0 24px;
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review-card__footer{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(7,26,39,.09);
  display:flex;justify-content:space-between;gap:15px;align-items:center;
  color:#72828b;font-size:.75rem;
}
.review-card__footer a{font-weight:600;color:#24495f}
.reviews-source-note{margin:22px 0 0;color:#83919a;font-size:.76rem;line-height:1.5}
@media(max-width:900px){
  .reviews-head{grid-template-columns:1fr;gap:28px}
  .reviews-summary{justify-self:start}
  .reviews-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .reviews-grid{grid-template-columns:1fr}
  .review-card{min-height:auto}
  .reviews-summary{width:100%}
}

/* V3.3 — hero integration, sharper motion asset presentation, and mid-page rhythm */
.hero{background:#071a27}
.hero .texture{opacity:.54}
.hero .texture:after{background:linear-gradient(90deg,rgba(7,26,39,.995) 0%,rgba(7,26,39,.92) 50%,rgba(7,26,39,.70) 100%)}
.hero-art.hero-logo-motion{justify-content:center;overflow:visible}
.hero-logo-pingpong{
  width:min(540px,100%);
  aspect-ratio:1;
  border-radius:42px;
  overflow:hidden;
  background:#000;
  box-shadow:0 38px 100px rgba(0,0,0,.22);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 54%,rgba(0,0,0,.94) 67%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 54%,rgba(0,0,0,.94) 67%,transparent 100%);
}
.hero-logo-pingpong .hero-logo-video{
  width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;
  transform:scale(1.015) translateZ(0);
  image-rendering:auto;
  backface-visibility:hidden;
}
/* The source animation is 960px square. Never enlarge it beyond its useful desktop size. */
@media(min-width:1200px){.hero-logo-pingpong{width:540px}}
@media(max-width:900px){
 .hero-logo-pingpong{width:min(520px,88vw);border-radius:34px}
 .hero-grid{gap:38px}
}
@media(max-width:760px){
 .hero-logo-pingpong{width:min(94vw,480px);margin:8px auto 0}
 .hero-art.hero-logo-motion{width:100%}
}

/* Give the middle of the page a deliberate visual beat instead of another text/list block. */
.operations-bridge{position:relative;overflow:hidden;background:#dfe8ed;padding:92px 0}
.operations-bridge:before{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(16,59,86,.10);border-radius:50%;right:-170px;top:-310px}
.operations-bridge-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.operations-bridge-copy h2{font-size:clamp(2.8rem,5.2vw,5.2rem)}
.operations-bridge-copy .body-lg{max-width:600px;margin-top:26px}
.operations-map{position:relative;min-height:430px;border-radius:34px;background:#0a2435;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:1px;padding:52px;box-shadow:0 28px 80px rgba(7,26,39,.14)}
.operations-map:before{content:"NEXTGEN";position:absolute;inset:0;display:grid;place-items:center;font-family:GTE;font-size:clamp(4rem,8vw,8rem);letter-spacing:-.07em;color:rgba(255,255,255,.035);transform:rotate(-12deg)}
.operations-map span{position:relative;z-index:2;padding:23px 20px;border-bottom:1px solid rgba(255,255,255,.13);font-family:GTE;font-size:.86rem;color:#d6e1e7}
.operations-map span:nth-child(odd){border-right:1px solid rgba(255,255,255,.13)}
.operations-map i{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 14px rgba(255,255,255,.05),0 0 0 38px rgba(255,255,255,.025)}
.proof{background:#f4f6f7}
@media(max-width:800px){.operations-bridge-grid{grid-template-columns:1fr;gap:42px}.operations-map{min-height:340px;padding:30px}.operations-bridge{padding:78px 0}}
@media(max-width:520px){.operations-map{padding:22px}.operations-map span{padding:18px 10px;font-size:.72rem}}




/* V3.6 — verified static Google reviews */
.reviews-grid--static{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.review-card--static{
  min-height:260px;
}
.review-text--static{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}
.review-card--static .review-author strong{
  display:block;
  font-weight:600;
}
@media(max-width:700px){
  .reviews-grid--static{grid-template-columns:1fr}
  .review-card--static{min-height:auto}
}


/* =========================================================
   V3.8 FINAL POLISH — motion with restraint
   ========================================================= */

/* Reveal system */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Sequential cards without turning the page into a carnival */
.reviews-grid > *:nth-child(2),
.solutions-grid > *:nth-child(2),
.staffing-grid > *:nth-child(2){--reveal-delay:70ms}
.reviews-grid > *:nth-child(3),
.solutions-grid > *:nth-child(3),
.staffing-grid > *:nth-child(3){--reveal-delay:140ms}
.reviews-grid > *:nth-child(4),
.solutions-grid > *:nth-child(4),
.staffing-grid > *:nth-child(4){--reveal-delay:210ms}

/* Cards: lift + restrained highlight */
.review-card,
.solution-card,
.staffing-card,
[class*="service-card"]{
  position:relative;
  overflow:hidden;
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    border-color .32s ease,
    box-shadow .32s ease;
}
.review-card::after,
.solution-card::after,
.staffing-card::after,
[class*="service-card"]::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.10), transparent 28%);
  opacity:0;
  transition:opacity .3s ease;
}
@media (hover:hover){
  .review-card:hover,
  .solution-card:hover,
  .staffing-card:hover,
  [class*="service-card"]:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 55px rgba(0,0,0,.16);
  }
  .review-card:hover::after,
  .solution-card:hover::after,
  .staffing-card:hover::after,
  [class*="service-card"]:hover::after{opacity:1}
}

/* Buttons get a tiny directional response */
a[class*="btn"],
button[class*="btn"],
.cta,
.button{
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, opacity .25s ease;
}
@media (hover:hover){
  a[class*="btn"]:hover,
  button[class*="btn"]:hover,
  .cta:hover,
  .button:hover{
    transform:translateY(-2px);
  }
  a[class*="btn"]:active,
  button[class*="btn"]:active,
  .cta:active,
  .button:active{
    transform:translateY(0) scale(.985);
  }
}

/* Smooth accordion/details behavior where supported */
details{
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
details[open]{transform:translateY(-2px)}
details > summary{
  transition:opacity .25s ease, padding-left .25s ease;
}
@media (hover:hover){
  details > summary:hover{opacity:.78}
}

/* Decorative scroll rail for staffing area */
.staffing-progress-rail{
  width:100%;
  height:2px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  border-radius:999px;
  margin:4px 0 28px;
}
.staffing-progress-rail__fill{
  display:block;
  width:var(--staffing-progress,0%);
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.92));
  border-radius:inherit;
  transition:width .08s linear;
}

/* Gentle depth for large decorative media */
.hero img,
.hero video,
[class*="hero"] img,
[class*="hero"] video,
[class*="logo"] video{
  transform:translate3d(0,var(--parallax-y,0px),0);
  transition:transform .08s linear;
  will-change:transform;
}

/* Respect users who explicitly ask for less motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .hero img,.hero video,[class*="hero"] img,[class*="hero"] video,[class*="logo"] video{
    transform:none!important;
  }
}


/* V3.10 — rotating Google Reviews carousel */
.reviews-carousel{
  position:relative;
}
.reviews-carousel__viewport{
  overflow:hidden;
  border-radius:24px;
}
.reviews-carousel__track{
  display:flex;
  gap:14px;
  transition:transform .65s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.review-card--carousel{
  flex:0 0 calc((100% - 14px) / 2);
  min-width:0;
  min-height:300px;
}
.review-text--carousel{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}
.reviews-carousel__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:24px;
}
.reviews-carousel__arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(7,26,39,.15);
  background:rgba(255,255,255,.82);
  color:#17384c;
  font-size:1.05rem;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.reviews-carousel__arrow:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(7,26,39,.28);
}
.reviews-carousel__dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.reviews-carousel__dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#b7c4cb;
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}
.reviews-carousel__dot.is-active{
  width:24px;
  background:#335f78;
}
@media(max-width:700px){
  .review-card--carousel{
    flex-basis:100%;
    min-height:auto;
  }
}
@media(prefers-reduced-motion:reduce){
  .reviews-carousel__track{transition:none}
}


/* =========================================================
   PAID REDESIGN V6 CLEAN
   Rebuilt from the last stable site, without the V2-V5 clutter.
   ========================================================= */

/* Short line-build intro. It becomes the page instead of feeling like a separate loader. */
.brand-intro-clean{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  background:#074765;
  overflow:hidden;
  transition:opacity .55s ease,visibility .55s ease,background .55s ease;
}
.brand-intro-clean video{
  width:min(54vw,520px);
  max-height:76vh;
  object-fit:contain;
  transform:scale(.94);
  transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .52s ease,filter .52s ease;
}
.brand-intro-clean.is-opening{
  background:#0a1a23;
}
.brand-intro-clean.is-opening video{
  transform:scale(7);
  opacity:0;
  filter:blur(3px);
}
.brand-intro-clean.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Exact first-screen background supplied by the client. */
.hero-clean-paid{
  min-height:100svh;
  padding:0;
  position:relative;
  overflow:hidden;
  display:block;
  isolation:isolate;
}
.hero-clean-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('assets/hero-client-bg.png') center/cover no-repeat;
}
.hero-clean-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,15,21,.38) 0%,rgba(4,15,21,.13) 46%,rgba(4,15,21,.02) 100%);
  pointer-events:none;
}
.hero-clean-navrow{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3;
}
.hero-clean-lockup{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-family:GTE,Arial,sans-serif;
  font-size:15px;
  line-height:.98;
}
.hero-clean-symbol{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  font-size:22px;
  font-weight:700;
}
.hero-clean-menu{
  display:flex;
  gap:32px;
}
.hero-clean-menu a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-size:14px;
  transition:.2s;
}
.hero-clean-menu a:hover{color:#fff;transform:translateY(-1px)}
.hero-clean-grid{
  min-height:calc(100svh - 112px);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr);
  gap:52px;
  align-items:center;
  padding-bottom:72px;
  position:relative;
  z-index:2;
}
.hero-clean-copy{
  align-self:center;
}
.hero-clean-copy .kicker{
  margin-bottom:22px;
  color:rgba(255,255,255,.90);
}
.hero-clean-copy h1{
  font-size:clamp(64px,7vw,116px);
  line-height:.93;
  letter-spacing:-.057em;
  font-weight:300;
  color:#fff;
}
.hero-clean-copy .lede{
  color:rgba(255,255,255,.92);
  font-size:clamp(20px,1.75vw,29px);
  margin:26px 0 0;
  max-width:720px;
}
.hero-clean-copy .hero-actions{
  margin-top:66px;
}
.hero-clean-copy .btn{
  min-height:52px;
  padding:0 22px;
}
.hero-clean-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
}
.transparent-logo-pingpong{
  position:relative;
  width:min(330px,80%);
  aspect-ratio:16/9;
}
.transparent-logo-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  transition:opacity .10s linear;
}
.transparent-logo-video.is-active{opacity:1}

/* Make the second section flow from the new hero, but keep it clean. */
.path-section{
  background:
    linear-gradient(180deg,rgba(9,34,48,.18),rgba(9,34,48,.46)),
    url('assets/hero-client-bg.png') center 56%/cover no-repeat;
  padding-top:72px;
}
.path-grid{
  transform:none;
}
.path-card.employer{
  background:rgba(247,250,251,.94);
  backdrop-filter:blur(10px);
}
.path-card.candidate{
  background:rgba(7,31,44,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
}

/* Paid polish without adding new content or duplicate branding. */
.solution-card,
.proof-grid article,
.operations-map,
.path-card{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.solution-card:hover,
.proof-grid article:hover{
  transform:translateY(-5px);
}
.operations-map:hover{
  transform:translateY(-4px);
}
.contact-band{
  background:
    linear-gradient(90deg,rgba(3,18,27,.90),rgba(6,38,54,.72)),
    url('assets/hero-client-bg.png') center/cover no-repeat;
}

@media(min-width:801px){
  /* The hero carries its own compact navigation. The regular sticky nav appears after scrolling. */
  body:not(.page-scrolled) .site-header{
    opacity:0;
    pointer-events:none;
  }
}
@media(max-width:800px){
  .hero-clean-navrow{min-height:84px}
  .hero-clean-menu{display:none}
  .hero-clean-grid{
    min-height:calc(100svh - 84px);
    grid-template-columns:1fr;
    gap:16px;
    padding-bottom:48px;
  }
  .hero-clean-copy h1{
    font-size:clamp(52px,15vw,78px);
  }
  .hero-clean-copy .lede{font-size:19px}
  .hero-clean-copy .hero-actions{margin-top:38px}
  .hero-clean-logo{
    min-height:150px;
    margin-top:-8px;
  }
  .transparent-logo-pingpong{
    width:min(230px,60vw);
  }
  .path-section{padding-top:54px}
}
@media(max-width:520px){
  .hero-clean-logo{
    min-height:125px;
  }
  .transparent-logo-pingpong{
    width:min(190px,55vw);
  }
}
@media(prefers-reduced-motion:reduce){
  .brand-intro-clean{display:none!important}
}


/* V7: hero composition correction against client reference */
@media (min-width: 801px){
  .hero-clean-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:24px;
  }
  .hero-clean-copy{
    transform:translateX(-7.5vw);
  }
  .hero-clean-logo{
    align-self:end;
    justify-content:center;
    padding-bottom:6.5vh;
    transform:translateX(1.5vw);
  }
  .transparent-logo-pingpong{
    width:min(430px,92%);
  }
}


/* =========================================================
   V8 FULL PAID REDESIGN
   A complete visual pass using NextGen's supplied brand language:
   deep blue, ice blue, warm metallic accents, halftone texture,
   thin construction lines and restrained motion.
   ========================================================= */

:root{
  --paid-ink:#06151d;
  --paid-navy:#082838;
  --paid-blue:#0b4c69;
  --paid-ice:#c8d9e0;
  --paid-fog:#e7eef1;
  --paid-paper:#f4f6f5;
  --paid-gold:#a98663;
}

/* ---------- HERO → SECTION 2: no ugly repeated-background seam ---------- */
.hero-clean-paid{
  position:relative;
}
.hero-seam{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:190px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,22,31,0) 0%,rgba(5,22,31,.68) 54%,#061a25 100%);
  z-index:1;
}
.path-section--paid{
  position:relative;
  overflow:hidden;
  margin:0;
  padding:80px 0 116px;
  background:
    radial-gradient(circle at 86% 18%,rgba(94,154,181,.20),transparent 24%),
    radial-gradient(circle at 8% 82%,rgba(178,141,102,.10),transparent 23%),
    linear-gradient(180deg,#061a25 0%,#082a3a 52%,#0a3448 100%)!important;
}
.path-section--paid:before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(196,217,226,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,217,226,.08) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:linear-gradient(135deg,#000 0%,transparent 64%);
  opacity:.42;
}
.path-section--paid .path-grid{
  position:relative;
  z-index:2;
  transform:none!important;
  gap:18px;
}
.path-section--paid .path-card{
  min-height:440px;
  border-radius:28px;
  padding:34px;
  border:1px solid rgba(216,233,239,.15);
  box-shadow:0 28px 80px rgba(0,0,0,.18);
  overflow:hidden;
}
.path-section--paid .path-card:before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-86px;bottom:-94px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}
.path-section--paid .path-card:after{
  content:"";
  position:absolute;
  left:34px;right:34px;top:84px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent);
}
.path-section--paid .path-card.employer{
  color:#edf4f6;
  background:
    linear-gradient(145deg,rgba(10,56,77,.86),rgba(8,34,48,.92));
}
.path-section--paid .path-card.candidate{
  color:#071822;
  background:
    linear-gradient(145deg,rgba(220,232,236,.96),rgba(169,198,211,.90));
}
.path-section--paid .path-card.candidate .eyebrow,
.path-section--paid .path-card.candidate .path-num,
.path-section--paid .path-card.candidate p{
  color:#49626e;
}
.path-section--paid .path-card.candidate h2,
.path-section--paid .path-card.candidate .path-link{
  color:#071822;
}
.path-section--paid .path-card:hover{
  transform:translateY(-8px);
  box-shadow:0 38px 96px rgba(0,0,0,.23);
}

/* ---------- ABOUT: editorial composition, brand-grid language ---------- */
.statement--paid{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 83% 18%,rgba(71,132,160,.13),transparent 26%),
    linear-gradient(135deg,#edf3f5 0%,#d8e5ea 52%,#f4f5f2 100%)!important;
  color:#071822;
  padding:128px 0;
}
.statement-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.58;
}
.statement-lines i{
  position:absolute;display:block;background:rgba(10,67,91,.15);
}
.statement-lines i:nth-child(1){left:11%;top:0;bottom:0;width:1px}
.statement-lines i:nth-child(2){left:39%;top:0;bottom:0;width:1px}
.statement-lines i:nth-child(3){left:0;right:0;top:30%;height:1px}
.statement-lines i:nth-child(4){width:42%;height:1px;right:-4%;top:26%;transform:rotate(-38deg);transform-origin:right}
.statement-grid--paid{
  position:relative;
  grid-template-columns:.42fr 1fr!important;
  gap:80px!important;
  align-items:start;
}
.statement-index{
  display:grid;
  gap:58px;
  padding-top:8px;
}
.statement-index>span{
  font-family:GTE,Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.16em;
  color:#587382;
}
.statement-copy h2{
  max-width:980px;
  font-size:clamp(3.6rem,6vw,7.5rem)!important;
  line-height:.91!important;
  letter-spacing:-.06em!important;
  font-weight:300!important;
}
.statement-copy .body-lg{
  max-width:690px;
  margin-left:auto;
  margin-top:44px;
  color:#435e6b;
}

/* ---------- SERVICES: no longer generic accordion cards ---------- */
.solutions-v3--paid{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 12%,rgba(64,131,161,.23),transparent 22%),
    linear-gradient(180deg,#071822 0%,#0a2635 55%,#081b26 100%)!important;
  padding:122px 0 132px;
}
.services-ghost-type{
  position:absolute;
  right:-2vw;top:38px;
  font-family:GTE,Arial,sans-serif;
  font-size:clamp(7rem,16vw,18rem);
  line-height:.75;
  letter-spacing:-.08em;
  color:rgba(209,227,234,.028);
  pointer-events:none;
  user-select:none;
}
.solutions-v3--paid .section-head{
  position:relative;z-index:2;
  grid-template-columns:1.28fr .72fr;
  gap:90px;
  padding-bottom:46px;
  border-bottom:1px solid rgba(213,230,237,.14);
}
.solutions-v3--paid .section-head h2{
  font-size:clamp(3.2rem,5.4vw,6.4rem);
  line-height:.94;
}
.solutions-v3--paid .section-head>p{
  align-self:end;
  color:#9fb6c2;
  max-width:440px;
}
.solutions-v3--paid .staffing-progress-rail{
  margin:34px 0 20px;
}
.solutions-v3--paid .solutions-grid{
  position:relative;z-index:2;
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid rgba(213,230,237,.13);
}
.solutions-v3--paid .solution-card{
  border:0!important;
  border-bottom:1px solid rgba(213,230,237,.13)!important;
  border-radius:0!important;
  background:transparent!important;
  transform:none!important;
}
.solutions-v3--paid .solution-card summary{
  grid-template-columns:70px minmax(0,1fr) 44px;
  align-items:center;
  min-height:104px;
  padding:18px 8px;
}
.solutions-v3--paid .solution-card h3{
  font-size:clamp(1.35rem,2vw,2rem);
  letter-spacing:-.02em;
}
.solutions-v3--paid .solution-card summary p{
  margin-top:6px;
}
.solutions-v3--paid .solution-card:hover{
  background:linear-gradient(90deg,rgba(82,151,181,.10),transparent)!important;
}
.solutions-v3--paid .solution-card[open]{
  background:linear-gradient(90deg,rgba(82,151,181,.14),rgba(82,151,181,.025))!important;
}
.solutions-v3--paid .solution-card ul{
  grid-template-columns:repeat(3,1fr);
  padding:6px 8px 36px 78px;
  gap:12px 24px;
  color:#b8cbd4;
}
.solutions-v3--paid .solution-plus{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(215,232,238,.20);
  font-size:1.35rem;
}

/* ---------- OPERATIONS: visual network, not just floating words ---------- */
.operations-bridge{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(115deg,#dce8ed 0%,#edf2f3 56%,#c7dbe4 100%)!important;
  color:#06151d!important;
  padding:126px 0;
}
.operations-bridge:before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(8,72,99,.15) .8px,transparent .8px);
  background-size:12px 12px;
  mask-image:linear-gradient(120deg,transparent 0%,#000 42%,#000 78%,transparent 100%);
  opacity:.5;
}
.operations-bridge-grid{
  grid-template-columns:.88fr 1.12fr!important;
  gap:90px!important;
  position:relative;
}
.operations-bridge .eyebrow{color:#58717d!important}
.operations-bridge h2{
  font-size:clamp(3.4rem,5.5vw,6.8rem)!important;
  line-height:.93!important;
}
.operations-bridge .body-lg{color:#49636f!important}
.operations-map--paid{
  position:relative;
  min-height:480px!important;
  border-radius:32px!important;
  border:1px solid rgba(7,43,58,.12)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(15,83,111,.12),transparent 36%),
    rgba(255,255,255,.40)!important;
  box-shadow:0 34px 90px rgba(18,58,76,.10)!important;
}
.operations-map--paid:before,
.operations-map--paid:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(11,79,108,.18);
  border-radius:50%;
}
.operations-map--paid:before{width:58%;aspect-ratio:1}
.operations-map--paid:after{width:82%;aspect-ratio:1}
.operations-orbit{
  position:absolute;left:50%;top:50%;
  width:14px;height:14px;border-radius:50%;
  background:#0d5777;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 12px rgba(13,87,119,.08);
}
.operations-map--paid span{
  position:absolute!important;
  margin:0!important;
  background:#0a2c3c!important;
  color:#e7f0f3!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 12px 28px rgba(6,36,49,.12);
}
.operations-map--paid span:nth-of-type(1){left:8%;top:18%}
.operations-map--paid span:nth-of-type(2){right:7%;top:16%}
.operations-map--paid span:nth-of-type(3){left:4%;bottom:18%}
.operations-map--paid span:nth-of-type(4){right:4%;bottom:20%}
.operations-map--paid span:nth-of-type(5){left:37%;top:5%}
.operations-map--paid span:nth-of-type(6){left:40%;bottom:6%}

/* ---------- PROOF: large data bands instead of three generic cards ---------- */
.proof--paid{
  background:#f5f6f3!important;
  padding:118px 0 132px;
}
.proof--paid .proof-head{
  align-items:end;
  margin-bottom:52px;
}
.proof--paid .proof-head h2{
  font-size:clamp(3.4rem,5.8vw,7rem);
}
.proof--paid .proof-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid rgba(8,40,55,.14);
}
.proof--paid .proof-grid article{
  min-height:180px!important;
  display:grid;
  grid-template-columns:240px 1fr .9fr;
  align-items:center;
  gap:48px;
  padding:26px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(8,40,55,.14)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.proof--paid .proof-number{
  font-size:clamp(4.6rem,7vw,8.5rem)!important;
  line-height:.82!important;
  color:#0b4f6d!important;
}
.proof--paid .proof-grid h3{
  font-size:clamp(1.6rem,2.4vw,2.6rem);
  margin:0!important;
}
.proof--paid .proof-grid p{
  color:#60747e;
  margin:0!important;
}

/* ---------- WHY: five principles become a clean horizontal system ---------- */
.why--paid{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(95,155,180,.18),transparent 22%),
    linear-gradient(180deg,#06151d,#082a3a)!important;
  padding:126px 0 142px;
}
.why--paid .why-grid{
  grid-template-columns:1fr!important;
  gap:66px!important;
}
.why--paid .why-title{
  position:static!important;
  display:grid;
  grid-template-columns:.32fr 1fr;
  gap:64px;
  align-items:start;
}
.why--paid .why-title h2{
  max-width:960px;
  font-size:clamp(3.5rem,5.8vw,7rem)!important;
  line-height:.93!important;
}
.why--paid .pillars{
  display:grid!important;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(219,234,240,.16);
}
.why--paid .pillars article{
  display:block!important;
  padding:30px 22px 34px!important;
  border-right:1px solid rgba(219,234,240,.12);
  border-bottom:0!important;
  min-height:250px;
}
.why--paid .pillars article:last-child{border-right:0}
.why--paid .pillars article>span{
  display:block;
  margin-bottom:74px;
  color:#7395a5;
  font-size:.74rem;
  letter-spacing:.12em;
}
.why--paid .pillars h3{
  font-size:1.35rem;
  margin-bottom:12px;
}
.why--paid .pillars p{
  color:#9fb5bf;
  line-height:1.58;
}

/* ---------- PROCESS: bold three-step track ---------- */
.process--paid{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,#d7e5ea 0%,#f4f6f5 62%,#dfe9ed 100%)!important;
  color:#071822!important;
  padding:126px 0;
}
.process--paid:before{
  content:"";
  position:absolute;
  width:58vw;height:1px;
  right:-8vw;top:18%;
  background:#0a4b67;
  transform:rotate(-31deg);
  opacity:.14;
}
.process--paid .eyebrow{color:#57717e!important}
.process--paid h2{
  font-size:clamp(3.5rem,5.7vw,6.8rem)!important;
  line-height:.93!important;
}
.process--paid .body-lg{color:#506a76!important}
.process--paid .steps.horizontal{
  margin-top:66px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(8,48,65,.18)!important;
  border-bottom:1px solid rgba(8,48,65,.18)!important;
}
.process--paid .steps.horizontal li{
  min-height:260px;
  padding:30px 32px!important;
  border-right:1px solid rgba(8,48,65,.16)!important;
  border-bottom:0!important;
}
.process--paid .steps.horizontal li:last-child{border-right:0!important}
.process--paid .steps li>span{
  color:#607e8c!important;
  margin-bottom:84px!important;
}
.process--paid .steps strong{
  color:#071822!important;
  font-size:1.55rem;
}
.process--paid .steps p{color:#5e747f!important}
.process--paid .text-link{color:#0b4f6d!important}

/* ---------- REVIEWS: darker, cinematic proof section ---------- */
.reviews-v3--paid{
  background:
    radial-gradient(circle at 12% 12%,rgba(88,151,179,.18),transparent 22%),
    linear-gradient(180deg,#071822,#0a2b3b)!important;
  color:#eaf2f5;
  padding:126px 0 140px;
}
.reviews-v3--paid .eyebrow{color:#8faebb}
.reviews-v3--paid h2{
  color:#fff;
  font-size:clamp(3.4rem,5.6vw,6.6rem);
}
.reviews-v3--paid .reviews-summary{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.12)!important;
}
.reviews-v3--paid .reviews-summary p{color:#91aab5}
.reviews-v3--paid .review-card{
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 22px 64px rgba(0,0,0,.18)!important;
  color:#eaf2f5;
}
.reviews-v3--paid .review-card strong{color:#fff}
.reviews-v3--paid .review-meta,
.reviews-v3--paid .review-text,
.reviews-v3--paid .review-card__footer{color:#a9bdc7!important}
.reviews-v3--paid .review-card__footer{border-color:rgba(255,255,255,.10)!important}
.reviews-v3--paid .review-avatar-fallback{
  background:#d6e5ea;color:#0b3c53;
}

/* ---------- CONTACT: premium full-bleed end frame ---------- */
.contact-band--paid{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(4,17,24,.90),rgba(4,22,31,.58) 52%,rgba(4,22,31,.22)),
    url('assets/hero-client-bg.png') center/cover no-repeat!important;
}
.contact-sweep{
  position:absolute;
  width:72vw;height:2px;
  right:-14vw;top:27%;
  background:linear-gradient(90deg,transparent,#d8e9ef,transparent);
  transform:rotate(-34deg);
  opacity:.28;
  box-shadow:0 0 30px rgba(213,235,243,.32);
}
.contact-band--paid .contact-grid{
  position:relative;z-index:2;
  grid-template-columns:1.15fr .85fr!important;
  gap:80px;
  align-items:end;
}
.contact-band--paid h2{
  font-size:clamp(4rem,7vw,8.2rem)!important;
  line-height:.88!important;
  max-width:780px;
}
.contact-band--paid .contact-actions{
  padding-bottom:16px;
}

/* ---------- Motion polish ---------- */
@media (prefers-reduced-motion:no-preference){
  .statement-lines i:nth-child(4){
    animation:paidLineDrift 8s ease-in-out infinite alternate;
  }
  .operations-orbit{
    animation:paidPulse 3.8s ease-in-out infinite;
  }
}
@keyframes paidLineDrift{
  from{transform:rotate(-38deg) translateX(-18px)}
  to{transform:rotate(-38deg) translateX(18px)}
}
@keyframes paidPulse{
  0%,100%{box-shadow:0 0 0 10px rgba(13,87,119,.06)}
  50%{box-shadow:0 0 0 24px rgba(13,87,119,.02)}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .statement-grid--paid{grid-template-columns:1fr!important;gap:42px!important}
  .statement-index{gap:18px}
  .statement-copy .body-lg{margin-left:0}
  .operations-bridge-grid{grid-template-columns:1fr!important}
  .proof--paid .proof-grid article{grid-template-columns:190px 1fr;gap:28px}
  .proof--paid .proof-grid article p{grid-column:2}
  .why--paid .pillars{grid-template-columns:repeat(2,1fr)}
  .why--paid .pillars article{border-bottom:1px solid rgba(219,234,240,.12)!important}
  .why--paid .why-title{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
  .path-section--paid{padding:54px 0 82px}
  .path-section--paid .path-card{min-height:330px;padding:24px}
  .statement--paid,
  .solutions-v3--paid,
  .operations-bridge,
  .proof--paid,
  .why--paid,
  .process--paid,
  .reviews-v3--paid{padding:82px 0}
  .statement-copy h2,
  .solutions-v3--paid .section-head h2,
  .operations-bridge h2,
  .proof--paid .proof-head h2,
  .why--paid .why-title h2,
  .process--paid h2,
  .reviews-v3--paid h2{
    font-size:clamp(2.7rem,12vw,4.2rem)!important;
  }
  .solutions-v3--paid .section-head{grid-template-columns:1fr;gap:24px}
  .solutions-v3--paid .solution-card summary{
    grid-template-columns:42px 1fr 38px;
    min-height:88px;
  }
  .solutions-v3--paid .solution-card ul{
    grid-template-columns:1fr;
    padding-left:50px;
  }
  .operations-map--paid{min-height:390px!important}
  .proof--paid .proof-grid article{
    grid-template-columns:1fr;
    gap:12px;
    padding:28px 0!important;
  }
  .proof--paid .proof-grid article p{grid-column:auto}
  .proof--paid .proof-number{font-size:4.8rem!important}
  .why--paid .pillars{grid-template-columns:1fr}
  .why--paid .pillars article{
    min-height:auto;
    border-right:0!important;
  }
  .why--paid .pillars article>span{margin-bottom:34px}
  .process--paid .steps.horizontal{grid-template-columns:1fr}
  .process--paid .steps.horizontal li{
    min-height:auto;
    border-right:0!important;
    border-bottom:1px solid rgba(8,48,65,.16)!important;
  }
  .process--paid .steps li>span{margin-bottom:34px!important}
  .contact-band--paid{min-height:560px}
  .contact-band--paid .contact-grid{grid-template-columns:1fr!important;gap:42px}
  .contact-band--paid h2{font-size:clamp(3.5rem,14vw,5.5rem)!important}
}


/* =========================================================
   V9 — requested V8 polish only
   ========================================================= */

/* Loading animation is an actual GIF/image, not a video overlay. */
.brand-intro-clean--gif{
  cursor:default!important;
  user-select:none!important;
  pointer-events:none!important;
}
.brand-intro-clean--gif img{
  width:min(54vw,520px);
  max-height:76vh;
  object-fit:contain;
  display:block;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none;
  transform:scale(.94);
  transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .52s ease,filter .52s ease;
}
.brand-intro-clean--gif.is-opening img{
  transform:scale(7);
  opacity:0;
  filter:blur(3px);
}

/* The hero is now text-only like the approved reference. */
.hero-clean-grid{
  grid-template-columns:minmax(0,1fr)!important;
}
.hero-clean-copy{
  width:min(900px,74vw);
}

/* Integrate the transparent animated mark into the next section. */
.path-section--paid .path-grid{
  grid-template-columns:minmax(0,1fr) minmax(250px,.66fr) minmax(0,1fr)!important;
  align-items:stretch;
  gap:18px!important;
}
.path-motion-stage{
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.path-motion-stage__frame{
  width:100%;
  min-height:440px;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(213,231,238,.14);
  background:
    radial-gradient(circle at 50% 48%,rgba(92,155,181,.18),transparent 34%),
    linear-gradient(145deg,rgba(6,29,41,.46),rgba(11,57,77,.35));
  box-shadow:0 28px 80px rgba(0,0,0,.13);
}
.path-motion-stage__frame:before,
.path-motion-stage__frame:after{
  content:"";
  position:absolute;
  border:1px solid rgba(205,227,235,.10);
  border-radius:50%;
  pointer-events:none;
}
.path-motion-stage__frame:before{width:68%;aspect-ratio:1}
.path-motion-stage__frame:after{width:94%;aspect-ratio:1}
.path-motion-stage__line{
  position:absolute;
  left:-10%;
  width:120%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,232,239,.20),transparent);
  pointer-events:none;
}
.path-motion-stage__line--a{transform:rotate(-31deg)}
.path-motion-stage__line--b{transform:rotate(31deg)}
.path-motion-stage__logo{
  position:relative;
  z-index:2;
  width:min(390px,90%);
  height:auto;
  object-fit:contain;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.22));
}
.path-motion-stage video::-webkit-media-controls,
.path-motion-stage video::-webkit-media-controls-enclosure,
.path-motion-stage video::-webkit-media-controls-panel,
.path-motion-stage video::-webkit-media-controls-play-button,
.path-motion-stage video::-webkit-media-controls-overlay-play-button{
  display:none!important;
  -webkit-appearance:none!important;
}

@media(max-width:1050px){
  .path-section--paid .path-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .path-motion-stage{
    grid-column:1/-1;
    order:3;
    min-height:330px;
  }
  .path-motion-stage__frame{min-height:330px}
  .path-motion-stage__logo{width:min(430px,58vw)}
}
@media(max-width:760px){
  .hero-clean-copy{width:100%}
  .path-section--paid .path-grid{grid-template-columns:1fr!important}
  .path-motion-stage{
    grid-column:auto;
    order:2;
    min-height:280px;
  }
  .path-card.candidate{order:3}
  .path-motion-stage__frame{min-height:280px}
  .path-motion-stage__logo{width:min(330px,76vw)}
}


/* =========================================================
   V10 — only the two broken pieces are corrected.
   Everything else from V9 stays exactly as-is.
   ========================================================= */

/* Plain loading screen: no backgrounded logo/GIF, no video UI. */
.brand-intro-clean--plain{
  background:#071822!important;
  cursor:default!important;
  pointer-events:none!important;
  user-select:none!important;
}
.brand-intro-clean--plain .brand-intro-clean__inner{
  display:grid;
  justify-items:center;
  gap:18px;
}
.brand-intro-clean__spinner{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.92);
  animation:nextgenSpinner .8s linear infinite;
}
.brand-intro-clean__label{
  font-family:GTE,Arial,sans-serif;
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.72);
}
.brand-intro-clean--plain.is-opening .brand-intro-clean__inner{
  transform:scale(1.08);
  opacity:0;
  filter:blur(2px);
  transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .42s ease,filter .42s ease;
}
@keyframes nextgenSpinner{
  to{transform:rotate(360deg)}
}

/* Use the original supplied GIF directly for the animated logo stage. */
.path-motion-stage__logo--gif{
  display:block;
  width:min(390px,90%);
  height:auto;
  object-fit:contain;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.22));
}


/* =========================================================
   V11 — Fix ONLY intro + rotating logo
   ========================================================= */

/* Opening: actual supplied line animation, full-screen, non-interactive. */
.brand-intro-clean--lines{
  background:#084766!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  cursor:default!important;
  user-select:none!important;
  overflow:hidden!important;
}
.brand-intro-clean__lines{
  display:block;
  width:min(62vw,720px);
  max-height:82vh;
  object-fit:contain;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  transition:
    transform .68s cubic-bezier(.22,1,.36,1),
    opacity .50s ease,
    filter .50s ease;
}
.brand-intro-clean--lines.is-opening .brand-intro-clean__lines{
  transform:scale(6.5);
  opacity:0;
  filter:blur(3px);
}

/* Kill the old spinner loading treatment completely. */
.brand-intro-clean__spinner,
.brand-intro-clean__label{
  display:none!important;
}

/* Logo section: no card/background rectangle around the logo. */
.path-motion-stage{
  min-height:440px!important;
  background:transparent!important;
}
.path-motion-stage__frame{
  min-height:440px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.path-motion-stage__frame:before,
.path-motion-stage__frame:after,
.path-motion-stage__line{
  display:none!important;
}
.path-motion-stage__logo--transparent{
  display:block;
  width:min(470px,112%)!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.18))!important;
}

/* Decorative media should never show browser controls. */
.path-motion-stage__logo--transparent::-webkit-media-controls,
.path-motion-stage__logo--transparent::-webkit-media-controls-enclosure,
.path-motion-stage__logo--transparent::-webkit-media-controls-panel,
.path-motion-stage__logo--transparent::-webkit-media-controls-play-button,
.path-motion-stage__logo--transparent::-webkit-media-controls-overlay-play-button{
  display:none!important;
  -webkit-appearance:none!important;
}

@media(max-width:1050px){
  .path-motion-stage{
    min-height:310px!important;
  }
  .path-motion-stage__frame{
    min-height:310px!important;
  }
  .path-motion-stage__logo--transparent{
    width:min(430px,62vw)!important;
  }
}
@media(max-width:760px){
  .brand-intro-clean__lines{
    width:min(92vw,620px);
    max-height:86vh;
  }
  .path-motion-stage{
    min-height:240px!important;
    margin:4px 0 14px;
  }
  .path-motion-stage__frame{
    min-height:240px!important;
  }
  .path-motion-stage__logo--transparent{
    width:min(360px,84vw)!important;
  }
}


/* =========================================================
   V13 — ONLY the two requested final fixes
   ========================================================= */

/* Exact dominant border/background color sampled from the supplied line GIF. */
.brand-intro-clean--lines{
  background:rgb(0,58,86)!important;
}
.brand-intro-clean__lines{
  /* Feather the outer few pixels into the exact same background so the
     rectangular edge cannot read as a separate image panel. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    #000 1.5%,
    #000 98.5%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    #000 1.5%,
    #000 98.5%,
    transparent 100%
  );
}

/* The rotating mark is now ONE animated transparent WebP image.
   No controls, no video restart, no element swapping. */
.path-motion-stage__logo--seamless{
  display:block!important;
  width:min(470px,112%)!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.18))!important;
}

@media(max-width:1050px){
  .path-motion-stage__logo--seamless{
    width:min(430px,62vw)!important;
  }
}
@media(max-width:760px){
  .path-motion-stage__logo--seamless{
    width:min(360px,84vw)!important;
  }
}


/* =========================================================
   V14 — swap motion roles exactly as requested
   ========================================================= */

/* Full-screen rotating-logo opening.
   The animation itself becomes the whole background: no visible panel edges. */
.brand-intro-clean--rotating{
  background:#0b1d27!important;
  overflow:hidden!important;
  display:block!important;
  pointer-events:none!important;
  user-select:none!important;
}
.brand-intro-clean__rotating{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  transform:scale(1.02);
  transition:
    transform .58s cubic-bezier(.22,1,.36,1),
    opacity .46s ease,
    filter .46s ease;
}
.brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating{
  transform:scale(1.16);
  opacity:0;
  filter:blur(2px);
}

/* Remove all V11/V13 line-intro-specific masking/background rules. */
.brand-intro-clean--rotating .brand-intro-clean__lines{
  display:none!important;
}

/* The in-page brand motion is now the line-build animation.
   It loops naturally by itself and no longer tries to rotate. */
.path-motion-stage__logo--lines{
  display:block!important;
  width:min(430px,100%)!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.16))!important;
}

/* Keep the motion area minimal and integrated, without a fake card around it. */
.path-motion-stage,
.path-motion-stage__frame{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.path-motion-stage__frame:before,
.path-motion-stage__frame:after,
.path-motion-stage__line{
  display:none!important;
}

@media(max-width:760px){
  .brand-intro-clean__rotating{
    inset:-10%;
    width:120%;
    height:120%;
    object-position:center;
  }
  .path-motion-stage__logo--lines{
    width:min(360px,82vw)!important;
  }
}


/* =========================================================
   V15 — blend fix for the center motion panel only
   ========================================================= */

/* The center animation now has a transparent background, so it no longer
   reads as a square image laid on top of the section. */
.path-motion-stage__logo--lines{
  width:min(460px,104%)!important;
  max-width:none!important;
  background:transparent!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.14))!important;
}

/* Smooth the whole business/candidate band so the middle motion feels
   physically embedded in the section instead of sitting on top of it. */
.path-section--paid{
  background:
    radial-gradient(circle at 50% 42%,rgba(92,154,181,.15),transparent 26%),
    radial-gradient(circle at 86% 18%,rgba(94,154,181,.18),transparent 24%),
    radial-gradient(circle at 8% 82%,rgba(178,141,102,.08),transparent 23%),
    linear-gradient(180deg,#061a25 0%,#082a3a 48%,#0a3448 100%)!important;
}
.path-motion-stage,
.path-motion-stage__frame{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.path-motion-stage{
  position:relative;
}
.path-motion-stage:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(34vw,430px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(106,167,193,.10),rgba(106,167,193,.025) 46%,transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}

@media(max-width:760px){
  .path-motion-stage__logo--lines{
    width:min(360px,86vw)!important;
  }
  .path-motion-stage:before{
    width:min(72vw,340px);
  }
}


/* =========================================================
   V16 — intro edge/corner cleanup only
   ========================================================= */
.brand-intro-clean--rotating{
  background:#9fb8c8!important;
  overflow:hidden!important;
}
.brand-intro-clean--rotating:before{
  content:"";
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(circle at 50% 58%,rgba(155,189,208,.96),rgba(80,118,143,.92) 48%,rgba(17,38,52,.96) 100%);
  transform:scale(1.08);
  pointer-events:none;
}
.brand-intro-clean__rotating{
  inset:-14%!important;
  width:128%!important;
  height:128%!important;
  object-fit:cover!important;
  object-position:center 54%!important;
  transform:scale(1.08)!important;
  clip-path:inset(1px);
}
.brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating{
  transform:scale(1.22)!important;
}

@media(max-width:760px){
  .brand-intro-clean__rotating{
    inset:-18%!important;
    width:136%!important;
    height:136%!important;
    object-position:center 54%!important;
  }
}


/* =========================================================
   V17 — two tiny fixes only
   ========================================================= */

/* 1) Give the center brand animation more breathing room.
   The two action cards move slightly farther apart and the middle column widens,
   so the animated mark no longer crowds the left card. */
.path-section--paid .path-grid{
  grid-template-columns:minmax(0,.95fr) minmax(310px,.82fr) minmax(0,.95fr)!important;
  gap:30px!important;
}
.path-motion-stage{
  padding:0 10px!important;
}
.path-motion-stage__logo--lines{
  width:min(440px,96%)!important;
}

/* 2) Opening screen: use the rotating GIF itself as the full-screen background.
   No separate image layer = no exposed vertical strip on the right. */
.brand-intro-clean--rotating{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background-image:none!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#0b1d27!important;
}

/* Hide the old foreground GIF layer completely so it cannot create a second edge. */
.brand-intro-clean--rotating .brand-intro-clean__rotating{
  display:none!important;
}

/* Remove the fallback pseudo-background from V16 so there is only ONE visual layer. */
.brand-intro-clean--rotating:before{
  display:none!important;
}

@media(max-width:1050px){
  .path-section--paid .path-grid{
    grid-template-columns:minmax(0,1fr) minmax(280px,.78fr) minmax(0,1fr)!important;
    gap:22px!important;
  }
}
@media(max-width:760px){
  .path-section--paid .path-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .path-motion-stage{
    padding:0!important;
  }
  .path-motion-stage__logo--lines{
    width:min(350px,80vw)!important;
  }
}


/* =========================================================
   V18 — interactive draggable roles explorer
   ========================================================= */
.operations-map--interactive{
  position:relative;
  isolation:isolate;
  min-height:500px!important;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  cursor:default;
}
.operations-map--interactive:before,
.operations-map--interactive:after{
  display:none!important;
}
.roles-orbit__track{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(11,79,108,.18);
  border-radius:50%;
  pointer-events:none;
}
.roles-orbit__track--outer{width:82%;aspect-ratio:1}
.roles-orbit__track--inner{width:56%;aspect-ratio:1}
.roles-node{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  z-index:3;
  border:1px solid rgba(10,65,88,.16);
  background:rgba(9,44,60,.94);
  color:#edf5f7;
  border-radius:999px;
  padding:9px 14px;
  font:600 12px/1 GTE,Arial,sans-serif;
  letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(7,38,52,.10);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
}
.roles-node:hover,
.roles-node.is-target{
  transform:translate(-50%,-50%) scale(1.08);
  background:#0b5575;
  border-color:rgba(255,255,255,.28);
}
.roles-orb{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  z-index:5;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:grab;
  outline:none;
  touch-action:none;
}
.roles-orb:active{cursor:grabbing}
.roles-orb__core{
  width:18px;height:18px;border-radius:50%;
  background:#0d5777;
  box-shadow:
    0 0 0 10px rgba(13,87,119,.08),
    0 14px 26px rgba(10,52,70,.18);
}
.roles-orb__pulse{
  position:absolute;
  inset:0;
  border:1px solid rgba(13,87,119,.24);
  border-radius:50%;
  animation:rolesPulse 2.8s ease-in-out infinite;
}
@keyframes rolesPulse{
  0%,100%{transform:scale(.72);opacity:.75}
  50%{transform:scale(1.08);opacity:.15}
}
.roles-orbit__hint{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  color:#607b88;
  font:600 11px/1 GTE,Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
  transition:opacity .2s ease;
}
.operations-map--interactive.is-panel-open .roles-orbit__hint{
  opacity:0;
}
.roles-panel{
  position:absolute;
  inset:18px;
  z-index:8;
  border-radius:26px;
  padding:28px 30px 30px;
  display:grid;
  align-content:end;
  background:
    radial-gradient(circle at 85% 14%,rgba(85,148,176,.24),transparent 28%),
    linear-gradient(145deg,rgba(7,34,48,.98),rgba(9,61,83,.96));
  color:#eef5f7;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.18);
  opacity:0;
  visibility:hidden;
  transform:scale(.96);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .28s;
}
.operations-map--interactive.is-panel-open .roles-panel{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}
.roles-panel__back{
  position:absolute;
  left:22px;
  top:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font:600 12px/1 GTE,Arial,sans-serif;
  cursor:pointer;
}
.roles-panel__eyebrow{
  margin:0 0 10px;
  color:#91adba;
  font:600 11px/1 GTE,Arial,sans-serif;
  letter-spacing:.15em;
}
.roles-panel h3{
  margin:0 0 14px;
  font-size:clamp(2.5rem,4.4vw,4.6rem);
  line-height:.92;
  letter-spacing:-.05em;
}
.roles-panel p:last-child{
  max-width:520px;
  margin:0;
  color:#bfd0d8;
  font-size:15px;
  line-height:1.6;
}
.operations-map--interactive.is-panel-open .roles-node,
.operations-map--interactive.is-panel-open .roles-orb,
.operations-map--interactive.is-panel-open .roles-orbit__track{
  opacity:0;
  pointer-events:none;
}
@media(max-width:760px){
  .operations-map--interactive{min-height:430px!important}
  .roles-node{padding:8px 11px;font-size:11px}
  .roles-orb{width:48px;height:48px}
  .roles-panel{inset:12px;padding:24px}
  .roles-panel h3{font-size:clamp(2.3rem,11vw,3.8rem)}
}
@media(prefers-reduced-motion:reduce){
  .roles-orb__pulse{animation:none}
  .roles-panel{transition:none}
}


/* V18 LIGHT INSTALL: same intro visuals, efficient video asset instead of 166 MB GIF. */
.brand-intro-clean--rotating{
  position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important;
  min-width:100vw!important; min-height:100vh!important; margin:0!important; padding:0!important;
  overflow:hidden!important; background:#0b1d27!important; background-image:none!important;
}
.brand-intro-clean--rotating:before{display:none!important;}
.brand-intro-clean--rotating .brand-intro-clean__rotating{display:none!important;}
.brand-intro-clean__rotating-video{
  position:absolute!important; inset:-3%!important; width:106%!important; height:106%!important;
  object-fit:cover!important; object-position:center center!important; display:block!important;
  pointer-events:none!important; user-select:none!important; border:0!important; outline:0!important;
  transform:scale(1.02);
  transition:transform .58s cubic-bezier(.22,1,.36,1),opacity .46s ease,filter .46s ease;
}
.brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating-video{
  transform:scale(1.16); opacity:0; filter:blur(2px);
}
.brand-intro-clean__rotating-video::-webkit-media-controls,
.brand-intro-clean__rotating-video::-webkit-media-controls-enclosure,
.brand-intro-clean__rotating-video::-webkit-media-controls-panel,
.brand-intro-clean__rotating-video::-webkit-media-controls-play-button,
.brand-intro-clean__rotating-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none!important;}
@media(max-width:760px){.brand-intro-clean__rotating-video{inset:-8%!important;width:116%!important;height:116%!important;}}


/* =========================================================
   V18 MOBILE FIX — scroll everywhere except on the draggable orb
   ========================================================= */
.operations-map--interactive{
  touch-action:pan-y!important;
  overscroll-behavior:auto!important;
  user-select:auto!important;
}

/* Labels are visual targets only; they must not block page scrolling. */
.operations-map--interactive .roles-node{
  pointer-events:none!important;
  touch-action:pan-y!important;
  cursor:default!important;
}

/* Only the orb owns drag gestures. */
.operations-map--interactive .roles-orb{
  pointer-events:auto!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* Decorative orbit layers never intercept touch. */
.operations-map--interactive .roles-orbit__track,
.operations-map--interactive .roles-orbit__hint{
  pointer-events:none!important;
}


/* =========================================================
   V18 MOBILE FIX 2
   Blank space never captures touch. Only the orb is draggable.
   ========================================================= */

/* Let gestures on the whole explorer fall through to the page. */
.operations-map--interactive{
  pointer-events:none!important;
  touch-action:auto!important;
  user-select:auto!important;
  -webkit-user-select:auto!important;
}

/* Decorative content stays completely passive. */
.operations-map--interactive .roles-node,
.operations-map--interactive .roles-orbit__track,
.operations-map--interactive .roles-orbit__hint{
  pointer-events:none!important;
}

/* ONLY the actual orb receives drag gestures. */
.operations-map--interactive .roles-orb{
  pointer-events:auto!important;
  touch-action:none!important;
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 5%,rgba(182,221,235,.82) 9%,rgba(46,126,159,.96) 34%,#0b5878 68%,#06384d 100%)!important;
  border:1px solid rgba(223,244,251,.72)!important;
  box-shadow:
    0 8px 22px rgba(0,34,48,.28),
    inset -7px -9px 14px rgba(0,23,34,.32),
    inset 7px 7px 14px rgba(255,255,255,.14)!important;
  cursor:grab!important;
  overflow:visible!important;
}
.operations-map--interactive .roles-orb:active{
  cursor:grabbing!important;
  transform:translate(-50%,-50%) scale(.96)!important;
}

/* Replace the old dot + giant ring look with a proper orb. */
.operations-map--interactive .roles-orb__core{
  display:none!important;
}
.operations-map--interactive .roles-orb__pulse{
  inset:-8px!important;
  border:1px solid rgba(78,155,184,.22)!important;
  box-shadow:0 0 0 7px rgba(65,145,176,.045)!important;
  animation:rolesPulseSoft 2.6s ease-in-out infinite!important;
}
@keyframes rolesPulseSoft{
  0%,100%{transform:scale(.92);opacity:.58}
  50%{transform:scale(1.08);opacity:.18}
}

/* When a role panel is open, the panel itself becomes interactive again. */
.operations-map--interactive.is-panel-open .roles-panel{
  pointer-events:auto!important;
  touch-action:pan-y!important;
}
.operations-map--interactive .roles-panel__back{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

@media(max-width:760px){
  .operations-map--interactive .roles-orb{
    width:44px!important;
    height:44px!important;
  }
}


/* =========================================================
   V19 FINAL MOBILE QA
   Mobile-only corrections. Desktop remains unchanged.
   ========================================================= */
@media (max-width:800px){

  /* ONE mobile header only. */
  .hero-clean-navrow{display:none!important}
  .site-header{
    position:absolute!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    z-index:50!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .site-header .nav{
    height:82px!important;
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }
  .site-header .logo{
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:190px!important;
  }
  .site-header .logo img{
    width:168px!important;
    max-width:44vw!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .site-header .menu-toggle{
    display:block!important;
    flex:0 0 44px!important;
  }
  .site-header .nav-links{top:74px!important}

  .hero-clean-grid{
    min-height:100svh!important;
    padding-top:92px!important;
    padding-bottom:54px!important;
    align-items:center!important;
  }

  /* Full-screen opening animation on iPhone/Android. */
  .brand-intro-clean.brand-intro-clean--rotating{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#8faebe!important;
    z-index:999999!important;
  }
  .brand-intro-clean__rotating-video{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:120vw!important;
    height:120dvh!important;
    min-width:120vw!important;
    min-height:120dvh!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:translate(-50%,-50%) scale(1.04)!important;
    display:block!important;
    margin:0!important;
    border:0!important;
    outline:0!important;
    background:#8faebe!important;
    pointer-events:none!important;
  }
  .brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating-video{
    transform:translate(-50%,-50%) scale(1.18)!important;
    opacity:0!important;
  }

  /* Center animated geometric mark between cards. */
  .path-section--paid .path-grid{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  .path-motion-stage{
    width:100%!important;
    min-height:300px!important;
    padding:0!important;
    margin:2px auto 4px!important;
    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
  }
  .path-motion-stage__frame{
    width:100%!important;
    min-height:300px!important;
    display:grid!important;
    place-items:center!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .path-motion-stage__logo--lines{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    width:min(78vw,350px)!important;
    max-width:350px!important;
    height:auto!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  /* Role explorer: centered square + six labels on one circle. */
  .operations-bridge-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .operations-map--interactive{
    position:relative!important;
    width:min(100%,440px)!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    margin:0 auto!important;
    padding:0!important;
    border-radius:32px!important;
    overflow:hidden!important;

    /* Preserve the working mobile behavior:
       blank area does not steal vertical page scrolling. */
    pointer-events:none!important;
    touch-action:auto!important;
    user-select:auto!important;
    -webkit-user-select:auto!important;
  }

  .roles-orbit__track{
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    pointer-events:none!important;
  }
  .roles-orbit__track--outer{
    width:72%!important;
    height:72%!important;
    aspect-ratio:1!important;
  }
  .roles-orbit__track--inner{
    width:48%!important;
    height:48%!important;
    aspect-ratio:1!important;
  }

  .roles-node{
    z-index:3!important;
    padding:8px 11px!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }
  .roles-node[data-role="Culinary"]{left:50%!important;top:11%!important}
  .roles-node[data-role="Office"]{left:79%!important;top:29%!important}
  .roles-node[data-role="Construction"]{left:79%!important;top:71%!important}
  .roles-node[data-role="Logistics"]{left:50%!important;top:89%!important}
  .roles-node[data-role="Facilities"]{left:21%!important;top:71%!important}
  .roles-node[data-role="Hospitality"]{left:21%!important;top:29%!important}

  /* True spherical orb. Only this exact control captures touch. */
  .operations-map--interactive .roles-orb{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    max-width:54px!important;
    max-height:54px!important;
    aspect-ratio:1!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;

    pointer-events:auto!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;

    background:
      radial-gradient(circle at 31% 25%,
        rgba(255,255,255,.98) 0 5%,
        rgba(186,224,236,.92) 8%,
        rgba(73,151,181,.98) 31%,
        #0b5574 62%,
        #052f42 82%,
        #031f2c 100%)!important;
    border:1px solid rgba(221,245,251,.82)!important;
    box-shadow:
      0 14px 30px rgba(5,43,59,.28),
      0 3px 8px rgba(5,43,59,.18),
      inset 8px 8px 15px rgba(255,255,255,.12),
      inset -10px -12px 18px rgba(0,20,31,.30)!important;
  }
  .operations-map--interactive .roles-orb__core{display:none!important}
  .operations-map--interactive .roles-orb__pulse{
    position:absolute!important;
    inset:-9px!important;
    border-radius:50%!important;
    border:1px solid rgba(47,128,159,.20)!important;
    box-shadow:0 0 0 8px rgba(47,128,159,.035)!important;
    pointer-events:none!important;
  }

  .roles-orbit__hint{
    left:50%!important;
    bottom:4.5%!important;
    width:100%!important;
    transform:translateX(-50%)!important;
    text-align:center!important;
    font-size:9px!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }

  .operations-map--interactive.is-panel-open .roles-panel{
    pointer-events:auto!important;
    touch-action:pan-y!important;
  }
  .operations-map--interactive .roles-panel__back{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
}

@media (max-width:430px){
  .site-header .logo img{
    width:154px!important;
    max-width:48vw!important;
  }
  .operations-map--interactive{
    width:100%!important;
    border-radius:28px!important;
  }
  .roles-node{
    font-size:9.5px!important;
    padding:7px 9px!important;
  }
  .operations-map--interactive .roles-orb{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    max-width:50px!important;
    max-height:50px!important;
  }
}


/* =========================================================
   V20 FINAL ORB
   Small centered draggable dot with subtle breathing shadow.
   ========================================================= */
@media (max-width:800px){

  .operations-map--interactive .roles-orb{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    padding:0!important;
    margin:0!important;

    background:#0b5878!important;
    border:1px solid rgba(194,227,239,.92)!important;

    box-shadow:
      0 0 0 7px rgba(26,105,137,.07),
      0 8px 18px rgba(8,55,75,.22),
      inset 2px 2px 4px rgba(255,255,255,.20),
      inset -2px -2px 4px rgba(0,24,36,.22)!important;

    pointer-events:auto!important;
    touch-action:none!important;
    cursor:grab!important;
    z-index:10!important;
  }

  .operations-map--interactive .roles-orb:active{
    cursor:grabbing!important;
  }

  .operations-map--interactive .roles-orb__core{
    display:none!important;
  }

  .operations-map--interactive .roles-orb__pulse{
    display:block!important;
    position:absolute!important;
    inset:-7px!important;
    border-radius:50%!important;
    border:1px solid rgba(32,112,145,.22)!important;
    box-shadow:0 0 18px rgba(22,103,136,.16)!important;
    pointer-events:none!important;
    animation:nextgenOrbBreath 1.9s ease-in-out infinite!important;
  }

  @keyframes nextgenOrbBreath{
    0%,100%{
      transform:scale(.90);
      opacity:.34;
      box-shadow:0 0 10px rgba(22,103,136,.10);
    }
    50%{
      transform:scale(1.30);
      opacity:.78;
      box-shadow:0 0 24px rgba(22,103,136,.28);
    }
  }
}

@media (max-width:430px){
  .operations-map--interactive .roles-orb{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    min-height:17px!important;
    max-width:17px!important;
    max-height:17px!important;
  }
}


/* =========================================================
   V21 FINAL ORB HITBOX
   Tiny white orb + larger circular touch target
   ========================================================= */
@media (max-width:800px){

  /* The draggable element itself becomes the large invisible hitbox.
     Visually, only the tiny white orb + soft halo are shown. */
  .operations-map--interactive .roles-orb{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;

    background:transparent!important;
    border:0!important;
    box-shadow:none!important;

    pointer-events:auto!important;
    touch-action:none!important;
    cursor:grab!important;
    z-index:10!important;

    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
  }

  .operations-map--interactive .roles-orb:active{
    cursor:grabbing!important;
  }

  /* Small white center dot, like the reference image. */
  .operations-map--interactive .roles-orb__core{
    display:block!important;
    width:11px!important;
    height:11px!important;
    min-width:11px!important;
    min-height:11px!important;
    max-width:11px!important;
    max-height:11px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;

    background:#f5fbfd!important;
    border:1px solid rgba(33,92,117,.35)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.55),
      0 2px 5px rgba(4,44,61,.22)!important;

    position:relative!important;
    z-index:2!important;
    pointer-events:none!important;
  }

  /* Circular breathing halo. It is visual only; the parent is the full hitbox. */
  .operations-map--interactive .roles-orb__pulse{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    aspect-ratio:1 / 1!important;
    transform:translate(-50%,-50%)!important;
    inset:auto!important;
    border-radius:50%!important;

    border:1px solid rgba(35,111,142,.16)!important;
    background:radial-gradient(
      circle,
      rgba(83,154,183,.13) 0%,
      rgba(83,154,183,.07) 48%,
      rgba(83,154,183,0) 74%
    )!important;
    box-shadow:
      0 0 14px rgba(28,111,145,.12),
      0 0 26px rgba(28,111,145,.06)!important;

    pointer-events:none!important;
    animation:nextgenOrbBreathRound 1.8s ease-in-out infinite!important;
    transform-origin:center center!important;
  }

  @keyframes nextgenOrbBreathRound{
    0%,100%{
      transform:translate(-50%,-50%) scale(.92);
      opacity:.38;
    }
    50%{
      transform:translate(-50%,-50%) scale(1.14);
      opacity:.82;
    }
  }
}

@media (max-width:430px){
  .operations-map--interactive .roles-orb{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    max-width:50px!important;
    max-height:50px!important;
  }

  .operations-map--interactive .roles-orb__core{
    width:10px!important;
    height:10px!important;
    min-width:10px!important;
    min-height:10px!important;
    max-width:10px!important;
    max-height:10px!important;
  }

  .operations-map--interactive .roles-orb__pulse{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
  }
}


/* =========================================================
   V22 — ORB REBUILT FROM ZERO
   Only the center orb is changed.
   ========================================================= */
@media (max-width:800px){

  /* Large invisible, perfectly square touch target.
     This is the draggable hitbox and nothing visible is drawn on it. */
  .operations-map--interactive .roles-orb{
    position:absolute!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
    aspect-ratio:1 / 1!important;

    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    background:none!important;
    box-shadow:none!important;
    outline:0!important;

    pointer-events:auto!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    overflow:visible!important;
    cursor:grab!important;
    z-index:20!important;
  }

  .operations-map--interactive .roles-orb:active{
    cursor:grabbing!important;
  }

  /* Kill every old internal orb visual completely. */
  .operations-map--interactive .roles-orb__core,
  .operations-map--interactive .roles-orb__pulse{
    display:none!important;
  }

  /* New orb: a TRUE circle with a white center point. */
  .operations-map--interactive .roles-orb::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
    aspect-ratio:1 / 1!important;
    transform:translate(-50%,-50%)!important;

    border-radius:50%!important;
    box-sizing:border-box!important;
    background:
      radial-gradient(circle at center,
        #ffffff 0 3px,
        #8eb8c9 3.5px 5px,
        #0c5a78 5.5px 100%)!important;
    border:1px solid rgba(180,220,234,.72)!important;
    box-shadow:
      inset 2px 2px 4px rgba(255,255,255,.16),
      inset -2px -2px 4px rgba(0,24,35,.22)!important;

    pointer-events:none!important;
    z-index:2!important;
  }

  /* New halo: perfectly circular and only this breathes. */
  .operations-map--interactive .roles-orb::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    aspect-ratio:1 / 1!important;
    transform:translate(-50%,-50%) scale(.88)!important;

    border-radius:50%!important;
    box-sizing:border-box!important;
    background:radial-gradient(circle,
      rgba(74,151,182,.16) 0%,
      rgba(74,151,182,.08) 48%,
      rgba(74,151,182,0) 74%)!important;
    border:1px solid rgba(74,151,182,.14)!important;
    box-shadow:0 0 18px rgba(44,132,165,.12)!important;

    pointer-events:none!important;
    z-index:1!important;
    animation:nextgenOrbHaloV22 1.8s ease-in-out infinite!important;
  }

  @keyframes nextgenOrbHaloV22{
    0%,100%{
      transform:translate(-50%,-50%) scale(.88);
      opacity:.34;
    }
    50%{
      transform:translate(-50%,-50%) scale(1.18);
      opacity:.82;
    }
  }
}

@media (max-width:430px){
  .operations-map--interactive .roles-orb{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
  }
}


/* =========================================================
   V23 — DESKTOP-ONLY ROTATING NEXTGEN MARK
   Mobile remains untouched.
   ========================================================= */
.hero-desktop-rotating-mark{display:none}

@media (min-width:901px){
  .hero-clean-grid{
    position:relative!important;
  }

  .hero-desktop-rotating-mark{
    display:flex!important;
    position:absolute!important;
    right:clamp(20px,4vw,70px)!important;
    top:50%!important;
    width:clamp(250px,30vw,470px)!important;
    height:clamp(250px,30vw,470px)!important;
    transform:translateY(-50%)!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:none!important;
    z-index:2!important;
    opacity:.78!important;
  }

  .hero-desktop-rotating-mark img{
    display:block!important;
    width:72%!important;
    height:72%!important;
    object-fit:contain!important;
    filter:drop-shadow(0 0 28px rgba(175,215,230,.18))!important;
    animation:nextgenDesktopMarkSpin 16s linear infinite!important;
    transform-origin:50% 50%!important;
  }

  .hero-clean-copy{
    position:relative!important;
    z-index:3!important;
  }

  @keyframes nextgenDesktopMarkSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
}

@media (max-width:900px){
  .hero-desktop-rotating-mark{
    display:none!important;
  }
}


/* =========================================================
   V24 — CORRECT DESKTOP HERO ANIMATED LOGO
   Uses the client's existing transparent animated logo asset.
   No CSS rotation. No background/card. Desktop only.
   ========================================================= */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    display:flex!important;
    position:absolute!important;
    right:clamp(15px,3.5vw,60px)!important;
    top:50%!important;
    width:clamp(300px,34vw,540px)!important;
    height:clamp(300px,34vw,540px)!important;
    transform:translateY(-50%)!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:1!important;
    overflow:visible!important;
    z-index:2!important;
  }

  .hero-desktop-rotating-mark img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    animation:none!important;
    transform:none!important;
  }
}
@media (max-width:900px){
  .hero-desktop-rotating-mark{display:none!important}
}


/* =========================================================
   V25 — ACTUAL 3D NEXTGEN SYMBOL ONLY
   Uses the supplied rotating 3D logo animation, no brand name.
   Desktop only.
   ========================================================= */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    display:flex!important;
    position:absolute!important;
    right:clamp(10px,3vw,50px)!important;
    top:50%!important;
    width:clamp(320px,35vw,560px)!important;
    height:clamp(260px,29vw,470px)!important;
    transform:translateY(-50%)!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    pointer-events:none!important;
    opacity:1!important;
    z-index:2!important;
  }

  .hero-desktop-rotating-mark img{
    display:none!important;
  }

  .hero-desktop-3d-logo{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;

    /* The supplied WebM has black around the 3D symbol.
       Screen blend makes that black disappear into the hero,
       leaving only the metallic logo visible. */
    mix-blend-mode:screen!important;
    filter:none!important;
    opacity:1!important;
    pointer-events:none!important;
  }
}

@media (max-width:900px){
  .hero-desktop-rotating-mark,
  .hero-desktop-3d-logo{
    display:none!important;
  }
}


/* =========================================================
   V26 — LARGE DESKTOP 3D LOGO + TRUE FORWARD/REVERSE LOOP
   ========================================================= */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    right:clamp(-40px,1vw,20px)!important;
    top:50%!important;
    width:clamp(430px,43vw,700px)!important;
    height:clamp(360px,36vw,590px)!important;
    transform:translateY(-50%)!important;
    overflow:visible!important;
  }

  .hero-desktop-3d-logo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;

    opacity:0!important;
    visibility:hidden!important;
    transition:none!important;
  }

  .hero-desktop-3d-logo.is-active{
    opacity:1!important;
    visibility:visible!important;
  }
}


/* =========================================================
   V27 — FINAL DESKTOP HERO LOGO COMPOSITION
   Large visual anchor + single seamless ping-pong video.
   ========================================================= */
@media (min-width:901px){
  .hero-clean-grid{
    position:relative!important;
    overflow:visible!important;
  }

  .hero-clean-copy{
    position:relative!important;
    z-index:3!important;
    width:min(56%,760px)!important;
  }

  .hero-desktop-rotating-mark{
    display:block!important;
    position:absolute!important;
    left:auto!important;
    right:clamp(-110px,-3vw,-30px)!important;
    top:50%!important;

    /* Intentionally large. The logo is part of the hero composition,
       not a small decoration floating in empty space. */
    width:clamp(620px,52vw,940px)!important;
    height:clamp(520px,44vw,790px)!important;

    transform:translateY(-50%)!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    pointer-events:none!important;
    opacity:1!important;
    z-index:2!important;
  }

  .hero-desktop-3d-logo{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 28px 55px rgba(115,178,205,.14))!important;
    mix-blend-mode:screen!important;
    opacity:.96!important;
    visibility:visible!important;
    transform:none!important;
    animation:none!important;
    pointer-events:none!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .hero-desktop-rotating-mark{
    right:-135px!important;
    width:clamp(570px,58vw,720px)!important;
    height:clamp(480px,49vw,620px)!important;
  }
  .hero-clean-copy{
    width:58%!important;
  }
}

@media (max-width:900px){
  .hero-desktop-rotating-mark,
  .hero-desktop-3d-logo{
    display:none!important;
  }
}


/* =========================================================
   V29 — CENTERED DESKTOP LOGO + MOBILE 3D LOGO
   ========================================================= */

@media (min-width:901px){
  .hero-clean-paid{
    position:relative!important;
  }

  .hero-clean-grid{
    position:relative!important;
    min-height:calc(100vh - 110px)!important;
    min-height:calc(100svh - 110px)!important;
    align-items:center!important;
    overflow:visible!important;
  }

  .hero-desktop-rotating-mark{
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }

  .hero-mobile-3d-mark{
    display:none!important;
  }
}

@media (max-width:900px){
  .hero-clean-grid{
    position:relative!important;
  }

  .hero-mobile-3d-mark{
    display:flex!important;
    position:absolute!important;
    right:10px!important;
    top:44%!important;
    width:30vw!important;
    max-width:140px!important;
    min-width:96px!important;
    aspect-ratio:1 / 1!important;
    transform:translateY(-50%)!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:2!important;
    pointer-events:none!important;
    overflow:visible!important;
    background:transparent!important;
  }

  .hero-mobile-3d-logo{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    mix-blend-mode:screen!important;
    filter:drop-shadow(0 12px 22px rgba(110,175,202,.12))!important;
    pointer-events:none!important;
  }

  .hero-clean-copy{
    position:relative!important;
    z-index:3!important;
  }
}

@media (min-width:520px) and (max-width:900px){
  .hero-clean-copy{
    width:72%!important;
    max-width:72%!important;
  }
  .hero-mobile-3d-mark{
    right:18px!important;
    width:28vw!important;
    max-width:180px!important;
  }
}

@media (max-width:519px){
  .hero-mobile-3d-mark{
    right:6px!important;
    top:42%!important;
    width:27vw!important;
    max-width:125px!important;
    min-width:90px!important;
    opacity:.92!important;
  }
}

/* V30 — clean transparent loading mark only. No intro background. */
.brand-intro-clean.brand-intro-clean--rotating{
  background:transparent!important;
  background-image:none!important;
  pointer-events:none!important;
}
.brand-intro-clean.brand-intro-clean--rotating:before,
.brand-intro-clean.brand-intro-clean--rotating:after{
  display:none!important;
  content:none!important;
}
.brand-intro-clean__rotating-video{
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:clamp(280px,38vw,560px)!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:72vw!important;
  max-height:72vh!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:translate(-50%,-50%)!important;
  background:transparent!important;
}
.brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating-video{
  transform:translate(-50%,-50%) scale(1.06)!important;
  opacity:0!important;
  filter:none!important;
}
@media(max-width:760px){
  .brand-intro-clean.brand-intro-clean--rotating{background:transparent!important;}
  .brand-intro-clean__rotating-video{
    top:50%!important;
    left:50%!important;
    width:min(62vw,330px)!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:62vw!important;
    max-height:46vh!important;
    transform:translate(-50%,-50%)!important;
    background:transparent!important;
  }
  .brand-intro-clean--rotating.is-opening .brand-intro-clean__rotating-video{
    transform:translate(-50%,-50%) scale(1.06)!important;
  }
}


/* =========================================================
   V31 — TRUE PRELOAD SCREEN
   Solid black screen before page reveal + transparent 3D logo.
   ========================================================= */
.brand-intro-clean.brand-intro-clean--rotating{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
  background-image:none!important;
  overflow:hidden!important;
  z-index:9999999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.brand-intro-clean.brand-intro-clean--rotating::before,
.brand-intro-clean.brand-intro-clean--rotating::after{
  display:none!important;
  content:none!important;
}

.brand-intro-clean__rotating-video{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;

  width:min(42vw,560px)!important;
  height:auto!important;
  max-width:560px!important;
  max-height:58vh!important;
  object-fit:contain!important;
  object-position:center!important;

  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}

/* Mobile: same concept, smaller logo. */
@media (max-width:900px){
  .brand-intro-clean__rotating-video{
    width:min(62vw,320px)!important;
    max-width:320px!important;
    max-height:42vh!important;
  }
}


/* V32 loader reveal safeguard */
.brand-intro-clean.brand-intro-clean--rotating{
  opacity:1!important;
  transition:opacity .38s ease!important;
}
.brand-intro-clean.brand-intro-clean--rotating.is-opening,
.brand-intro-clean.brand-intro-clean--rotating.is-hidden{
  opacity:0!important;
  pointer-events:none!important;
}


/* =========================================================
   V34 — INTRO ONLY FIX
   IMPORTANT:
   - Background logo/video is ONLY the loading screen.
   - Transparent 3D logo on the actual page is untouched.
   - Page itself is never visibility:hidden.
   ========================================================= */

body main,
body .site-header{
  visibility:visible!important;
}

/* Loading screen only */
#brandIntroClean.brand-intro-clean--rotating{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:9999999!important;
  background:transparent!important;
  background-image:none!important;
  display:block!important;
  opacity:1!important;
  transition:opacity .32s ease!important;
  pointer-events:none!important;
}

#brandIntroClean .brand-intro-clean__rotating-video{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:135vw!important;
  height:135dvh!important;
  min-width:135vw!important;
  min-height:135dvh!important;
  max-width:none!important;
  max-height:none!important;
  transform:translate(-50%,-50%)!important;
  object-fit:cover!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
}

#brandIntroClean.is-opening,
#brandIntroClean.is-hidden{
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  #brandIntroClean .brand-intro-clean__rotating-video{
    width:175vw!important;
    height:130dvh!important;
    min-width:175vw!important;
    min-height:130dvh!important;
  }
}


/* =========================================================
   V35 — MOBILE ONLY: move transparent 3D logo to marked area.
   Desktop is intentionally untouched.
   ========================================================= */
@media (max-width:900px){
  .hero-clean-grid{
    position:relative!important;
  }

  .hero-mobile-3d-mark{
    display:block!important;
    position:absolute!important;
    /* Upper-right open area beside the headline, matching marked circle */
    top:154px!important;
    right:46px!important;
    left:auto!important;
    bottom:auto!important;

    width:112px!important;
    height:112px!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;
    transform:none!important;
    z-index:4!important;
    pointer-events:none!important;
    overflow:visible!important;
  }

  .hero-mobile-3d-logo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }
}

/* Slightly tighter on narrow phones while keeping the same visual placement. */
@media (max-width:390px){
  .hero-mobile-3d-mark{
    top:150px!important;
    right:28px!important;
    width:102px!important;
    height:102px!important;
  }
}


/* =========================================================
   V36 — DESKTOP ONLY: transparent 3D logo placement.
   Mobile V35 positioning is untouched.
   ========================================================= */
@media (min-width:901px){
  .hero-clean-grid{
    position:relative!important;
  }

  .hero-desktop-rotating-mark{
    display:block!important;
    position:absolute!important;

    /* Right-side open area, matching the marked desktop reference. */
    left:auto!important;
    right:12.5%!important;
    top:51%!important;
    bottom:auto!important;

    width:210px!important;
    height:210px!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    z-index:4!important;
    pointer-events:none!important;
    overflow:visible!important;
  }

  .hero-desktop-3d-logo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }
}


/* V37 — SIZE CORRECTION ONLY.
   Keep the exact V35/V36 positions; make both transparent logos visibly larger. */

/* Mobile: fill roughly the marked circle instead of sitting tiny inside it. */
@media (max-width:900px){
  .hero-mobile-3d-mark{
    width:190px!important;
    height:190px!important;
  }
}
@media (max-width:390px){
  .hero-mobile-3d-mark{
    width:170px!important;
    height:170px!important;
  }
}

/* Desktop: substantially larger inside the marked right-side area. */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    width:390px!important;
    height:390px!important;
  }
}


/* =========================================================
   V38 — ACTUAL VISIBLE LOGO SCALE FIX
   The WebM contains transparent padding. V37 enlarged the box, not enough
   of the visible symbol. Scale the video itself so the actual 3D mark grows.
   ========================================================= */

/* Mobile: keep V35 position, enlarge the visible symbol itself. */
@media (max-width:900px){
  .hero-mobile-3d-mark{
    width:190px!important;
    height:190px!important;
    overflow:visible!important;
  }
  .hero-mobile-3d-logo{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    width:430%!important;
    height:430%!important;
    max-width:none!important;
    max-height:none!important;
    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    transform-origin:center center!important;
  }
}
@media (max-width:390px){
  .hero-mobile-3d-mark{
    width:170px!important;
    height:170px!important;
  }
}

/* Desktop: same correction. Wrapper stays in V36 position. */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    width:390px!important;
    height:390px!important;
    overflow:visible!important;
  }
  .hero-desktop-3d-logo{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    width:430%!important;
    height:430%!important;
    max-width:none!important;
    max-height:none!important;
    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    transform-origin:center center!important;
  }
}


/* =========================================================
   V39 — POSITION ONLY
   Keep V38 logo sizes/scales exactly as they are.
   Only move the visible transparent logos away from the headline.
   ========================================================= */

/* MOBILE: move large logo into the free upper-right area. */
@media (max-width:900px){
  .hero-mobile-3d-mark{
    top:112px!important;
    right:-6px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

/* Narrow phones: slightly farther right so it clears the headline. */
@media (max-width:390px){
  .hero-mobile-3d-mark{
    top:118px!important;
    right:-18px!important;
  }
}

/* DESKTOP: center the current large logo in the open right half. */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    left:auto!important;
    right:7.5%!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
}


/* =========================================================
   V40 — CLEARANCE-CHECKED POSITIONING
   SIZE/SCALE UNCHANGED.
   Goal: keep both 3D marks comfortably away from all typography.
   ========================================================= */

/*
  MOBILE
  Move the mark into the upper-right visual band, ABOVE the large headline.
  This avoids trying to squeeze the large mark beside the multi-line heading.
  The mark remains to the right of the small brand/kicker content with a
  generous visual gap.
*/
@media (max-width:519px){
  .hero-mobile-3d-mark{
    top:20px!important;
    right:-10px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

/* Wider mobile/tablet: same safe upper-right placement with more breathing room. */
@media (min-width:520px) and (max-width:900px){
  .hero-mobile-3d-mark{
    top:34px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

/*
  DESKTOP
  Push the mark farther into the open right-hand side of the hero.
  It remains vertically centered, but sits well outside the copy column.
*/
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    left:auto!important;
    right:3.5%!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
}

/* Extra safety on medium desktop widths where copy and artwork are closest. */
@media (min-width:901px) and (max-width:1180px){
  .hero-desktop-rotating-mark{
    right:-2%!important;
  }
}


/* =========================================================
   V41 — POSITION CORRECTION ONLY
   Keep current visible sizes/scales. Loader untouched.
   ========================================================= */

/* MOBILE:
   Return the logo to the open RIGHT side of the headline area,
   rather than the upper band. It sits around the second/third
   headline lines with a large horizontal gap from the text. */
@media (max-width:519px){
  .hero-mobile-3d-mark{
    top:250px!important;
    right:-72px!important;
    left:auto!important;
    bottom:auto!important;
  }
}
@media (min-width:520px) and (max-width:900px){
  .hero-mobile-3d-mark{
    top:235px!important;
    right:-38px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

/* DESKTOP:
   User reference shows the size is good, only needs to move farther right. */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    left:auto!important;
    right:-2.5%!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
}
@media (min-width:1180px){
  .hero-desktop-rotating-mark{
    right:-1%!important;
  }
}


/* V42 — DESKTOP RIGHT-SHIFT ONLY
   Supplied desktop photo shows the logo still too close to the copy.
   Move the existing large mark decisively into the open right half.
   Mobile, size, scale, loader, and all page content remain untouched. */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    left:67%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }
}
@media (min-width:1400px){
  .hero-desktop-rotating-mark{
    left:70%!important;
  }
}


/* =========================================================
   V44 — MOBILE EXACT AREA
   ONLY MOBILE IS CHANGED.
   Uses the ORIGINAL transparent WebM.
   Places the visible logo in the upper-right empty area marked by the user,
   above/right of the headline, with clear breathing room.
   ========================================================= */

@media (max-width:900px){
  .hero-clean-grid{
    position:relative!important;
  }

  .hero-mobile-3d-mark{
    display:block!important;
    position:absolute!important;

    /* Marked upper-right empty zone */
    top:88px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;

    width:170px!important;
    height:170px!important;
    min-width:170px!important;
    min-height:170px!important;
    max-width:170px!important;
    max-height:170px!important;

    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    z-index:2!important;
    pointer-events:none!important;
  }

  /* Original transparent WebM has a lot of empty canvas around the symbol.
     Scale the video inside the wrapper so the VISIBLE mark lands at the
     intended size without cropping or destroying transparency. */
  .hero-mobile-3d-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;

    width:430%!important;
    height:430%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;

    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    object-position:center!important;

    margin:0!important;
    padding:0!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }

  .hero-clean-copy{
    position:relative!important;
    z-index:3!important;
  }
}

/* Narrow phones: keep the same visual zone with a little extra right margin. */
@media (max-width:390px){
  .hero-mobile-3d-mark{
    top:92px!important;
    right:10px!important;
    width:158px!important;
    height:158px!important;
    min-width:158px!important;
    min-height:158px!important;
    max-width:158px!important;
    max-height:158px!important;
  }
}


/* =========================================================
   V45 — DESKTOP STRUCTURAL FIX
   Stop positioning the desktop logo by guesswork.
   Desktop hero is now a real two-column layout:
   text on the left, logo on the right, with a fixed safe gap.
   Mobile V44 stays untouched.
   ========================================================= */

@media (min-width:901px){
  .hero-clean-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;
    column-gap:clamp(72px,7vw,150px)!important;
    align-items:center!important;
    min-height:calc(100svh - 110px)!important;
    position:relative!important;
  }

  .hero-clean-copy{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:680px!important;
    margin:0!important;
  }

  .hero-desktop-rotating-mark{
    grid-column:2!important;
    grid-row:1!important;

    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:min(30vw,380px)!important;
    height:min(33vw,420px)!important;
    min-width:300px!important;
    min-height:330px!important;
    max-width:380px!important;
    max-height:420px!important;

    justify-self:center!important;
    align-self:center!important;

    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    z-index:2!important;
    pointer-events:none!important;
  }

  .hero-desktop-3d-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;

    width:430%!important;
    height:430%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;

    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }
}

/* Medium desktop / laptop:
   preserve the two-column separation and slightly reduce the mark
   before it can ever approach the headline. */
@media (min-width:901px) and (max-width:1180px){
  .hero-clean-grid{
    grid-template-columns:minmax(0,1fr) minmax(280px,.82fr)!important;
    column-gap:64px!important;
  }

  .hero-desktop-rotating-mark{
    width:300px!important;
    height:330px!important;
    min-width:300px!important;
    min-height:330px!important;
    max-width:300px!important;
    max-height:330px!important;
  }
}


/* =========================================================
   V46 — MOBILE ONLY, POSITION ONLY
   Based directly on the user's V45 mobile screenshot.
   Do not touch desktop, loader, size, scale, typography or layout.
   Move the visible mobile mark into the empty upper-right area.
   ========================================================= */

@media (max-width:900px){
  .hero-mobile-3d-mark{
    top:103px!important;
    right:-73px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

@media (max-width:390px){
  .hero-mobile-3d-mark{
    top:103px!important;
    right:-73px!important;
  }
}


/* =========================================================
   V48 — MOBILE ALPHA FIX
   Animation/position unchanged. Remove the black rendering layer
   by using a true alpha-preserving WebM.
   ========================================================= */
@media (max-width:900px){
  .hero-mobile-3d-logo{
    background:transparent!important;
    mix-blend-mode:normal!important;
  }
}


/* =========================================================
   V49 — PC ONLY
   Mobile V48 is intentionally untouched.
   Desktop: clean right-side placement + seamless alpha rotation.
   ========================================================= */

@media (min-width:901px){
  .hero-clean-grid{
    display:grid!important;
    grid-template-columns:minmax(0, 1.18fr) minmax(330px, .82fr)!important;
    column-gap:clamp(70px, 7vw, 130px)!important;
    align-items:center!important;
    position:relative!important;
  }

  .hero-clean-copy{
    grid-column:1!important;
    grid-row:1!important;
    max-width:690px!important;
    position:relative!important;
    z-index:3!important;
  }

  .hero-desktop-rotating-mark{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:340px!important;
    height:340px!important;
    min-width:340px!important;
    min-height:340px!important;
    max-width:340px!important;
    max-height:340px!important;

    justify-self:end!important;
    align-self:center!important;

    margin:0 10px 0 0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    z-index:2!important;
    pointer-events:none!important;
  }

  .hero-desktop-3d-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;

    width:430%!important;
    height:430%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;

    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    object-position:center!important;

    margin:0!important;
    padding:0!important;
    background:transparent!important;
    mix-blend-mode:normal!important;
    pointer-events:none!important;
  }
}

/* Laptop / medium desktop: keep the mark safely away from the headline. */
@media (min-width:901px) and (max-width:1180px){
  .hero-clean-grid{
    grid-template-columns:minmax(0, 1.12fr) minmax(290px, .88fr)!important;
    column-gap:56px!important;
  }

  .hero-desktop-rotating-mark{
    width:300px!important;
    height:300px!important;
    min-width:300px!important;
    min-height:300px!important;
    max-width:300px!important;
    max-height:300px!important;
    margin-right:0!important;
  }
}

/* Large desktop: give the mark a little more presence without approaching copy. */
@media (min-width:1400px){
  .hero-desktop-rotating-mark{
    width:370px!important;
    height:370px!important;
    min-width:370px!important;
    min-height:370px!important;
    max-width:370px!important;
    max-height:370px!important;
    margin-right:18px!important;
  }
}


/* =========================================================
   V51 — PC POSITION ONLY
   Based on the supplied V50 desktop photo.
   ONLY desktop X/Y placement changes.
   ========================================================= */
@media (min-width:901px){
  .hero-desktop-rotating-mark{
    /* Move into the open right side and lower the visual center
       so it aligns more naturally with the headline block. */
    transform:translate(150px, 48px)!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .hero-desktop-rotating-mark{
    transform:translate(90px, 40px)!important;
  }
}

@media (min-width:1400px){
  .hero-desktop-rotating-mark{
    transform:translate(175px, 52px)!important;
  }
}