/* Phase 3.6 — authoritative layout repair. Loaded LAST. */

/* 1) Global desktop header spans the viewport: brand left, links centered, actions right. */
@media (min-width:1100px){
  .nav .wrap.nav-in{
    width:100%!important; max-width:none!important; margin:0!important;
    padding-left:clamp(28px,3.2vw,64px)!important;
    padding-right:clamp(28px,3.2vw,64px)!important;
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) auto minmax(270px,1fr)!important;
    align-items:center!important; gap:22px!important;
  }
  .nav .brand{justify-self:start!important;margin:0!important}
  .nav .nav-links{justify-self:center!important;display:flex!important;align-items:center!important;gap:clamp(18px,1.55vw,30px)!important;white-space:nowrap!important;flex-wrap:nowrap!important}
  .nav .nav-cta{justify-self:end!important;display:flex!important;align-items:center!important;gap:12px!important;white-space:nowrap!important}
  .nav-links>a,.nav-item>button{font-size:13.5px!important;white-space:nowrap!important}
}

/* 2) Homepage hero remains expansive and uses the available screen width. */
@media (min-width:1200px){
  .hero.hero-dark{min-height:calc(100svh - 0px)!important;padding:118px 0 58px!important}
  .hero.hero-dark>.wrap{width:100%!important;max-width:none!important;margin:0!important;padding-left:clamp(54px,5.2vw,104px)!important;padding-right:clamp(54px,5.2vw,104px)!important}
  .hero.hero-dark .hero-in{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(540px,.92fr)!important;gap:clamp(34px,4vw,76px)!important;align-items:center!important}
  .hero.hero-dark .hero-copy{width:100%!important;max-width:900px!important}
  .hero.hero-dark .hero-copy h1{font-size:clamp(58px,4.5vw,82px)!important;line-height:.98!important;max-width:900px!important;letter-spacing:-.052em!important}
  .hero.hero-dark .hero-sub{max-width:700px!important}
  .hero.hero-dark .core-stage{width:min(46vw,760px)!important;max-width:760px!important;min-width:560px!important;margin:0 auto!important;transform:scale(1.06)!important;transform-origin:center!important}
}
@media (min-width:1600px){
  .hero.hero-dark .hero-in{grid-template-columns:minmax(760px,1.06fr) minmax(700px,.94fr)!important}
  .hero.hero-dark .core-stage{width:790px!important;max-width:790px!important;min-width:790px!important}
}

/* 3) ALL principal inner-page top sections use the same dark institutional family as home. */
.phero,.phero.dark,.cs-hero,.cs-hero.dark,.lab-hero,.lab-hero.dark,.nl-hero,.nl-hero.dark{
  position:relative!important; isolation:isolate!important; overflow:hidden!important;
  min-height:0!important; height:auto!important;
  padding:clamp(132px,13vh,168px) 0 clamp(64px,8vh,94px)!important;
  color:#fff!important;
  background-color:#07142f!important;
  background-image:
    radial-gradient(850px 520px at 84% 12%,rgba(40,104,225,.34),transparent 62%),
    radial-gradient(650px 440px at 4% 90%,rgba(0,181,195,.16),transparent 65%),
    linear-gradient(132deg,#061027 0%,#0a1a3e 54%,#081630 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.phero>.wrap,.cs-hero>.wrap,.lab-hero>.wrap,.nl-hero>.wrap{
  position:relative!important;z-index:4!important;
  width:100%!important;max-width:var(--wrap)!important;margin:0 auto!important;
}
.phero h1,.cs-hero h1,.lab-hero h1,.nl-hero h1{color:#fff!important;text-shadow:none!important}
.phero p,.cs-hero p,.lab-hero p,.nl-hero p,.cs-hero .cs-sub{color:rgba(232,240,255,.76)!important}
.phero .eyebrow,.cs-hero .eyebrow,.lab-hero .eyebrow,.nl-hero .eyebrow{color:#6fe3ed!important}
.phero .crumb,.cs-hero .crumb,.lab-hero .crumb,.nl-hero .crumb,.phero .ts-crumb,.cs-hero .ts-crumb,.lab-hero .ts-crumb,.nl-hero .ts-crumb{
  color:rgba(236,243,255,.72)!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.13)!important
}
.phero .crumb a,.cs-hero .crumb a,.lab-hero .crumb a,.nl-hero .crumb a{color:#fff!important}

/* 4) Hero animation is a BACKGROUND layer and can never reserve layout space. */
.phero.has-net>.netbg,.phero>.netbg,.cs-hero>.netbg,.lab-hero>.netbg,.nl-hero>.netbg{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0!important;pointer-events:none!important;opacity:.44!important
}
.phero>.hero-orb,.cs-hero>.hero-orb,.lab-hero>.hero-orb,.nl-hero>.hero-orb{
  position:absolute!important;z-index:1!important;right:clamp(-80px,2vw,24px)!important;top:50%!important;
  width:min(36vw,520px)!important;height:min(36vw,520px)!important;margin:0!important;
  transform:translateY(-50%)!important;pointer-events:none!important;opacity:.62!important
}
.phero::after,.cs-hero::after,.lab-hero::after,.nl-hero::after{z-index:1!important;pointer-events:none!important}

/* 5) Top navigation is readable over every dark page hero. */
.nav:not(.scrolled):not(.open){background:rgba(5,16,39,.20)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.nav:not(.scrolled):not(.open) .nav-links>a,.nav:not(.scrolled):not(.open) .nav-item>button{color:rgba(255,255,255,.84)!important}
.nav:not(.scrolled):not(.open) .nav-links>a:hover,.nav:not(.scrolled):not(.open) .nav-item>button:hover{color:#fff!important}
.nav:not(.scrolled):not(.open) .brand .logo-light{display:block!important}
.nav:not(.scrolled):not(.open) .brand .logo-dark{display:none!important}

/* Mobile: retain visuals but keep text first and compact. */
@media (max-width:1099px){
  .phero,.phero.dark,.cs-hero,.cs-hero.dark,.lab-hero,.lab-hero.dark,.nl-hero,.nl-hero.dark{padding:118px 0 64px!important}
  .phero>.hero-orb,.cs-hero>.hero-orb,.lab-hero>.hero-orb,.nl-hero>.hero-orb{right:-24vw!important;width:72vw!important;height:72vw!important;opacity:.24!important}
}

/* Phase 3.7 — leadership depth + stronger desktop navigation */
@media (min-width:1100px){
  .nav-links>a,.nav-item>button{font-size:15px!important;font-weight:600!important;letter-spacing:-.01em!important}
  .nav .nav-links{gap:clamp(17px,1.35vw,27px)!important}
}

/* Leadership becomes an executive profile system rather than basic cards. */
.team.team-executive{grid-template-columns:1fr!important;gap:24px!important;max-width:1120px;margin-inline:auto}
.team-executive .member{display:grid;grid-template-columns:minmax(220px,290px) 1fr;background:linear-gradient(145deg,#fff 0%,#f8fbff 100%);border-color:rgba(30,62,200,.13);box-shadow:0 20px 55px -42px rgba(4,18,55,.38)}
.team-executive .member:hover{transform:translateY(-3px);box-shadow:0 28px 70px -40px rgba(4,18,55,.42)}
.team-executive .member .ph{aspect-ratio:auto;min-height:100%;background:linear-gradient(160deg,#edf4ff,#e7fbfc)}
.team-executive .member .ph img{filter:grayscale(.18) contrast(1.02);object-position:center top}
.team-executive .member .info{padding:30px 34px 28px}
.team-executive .member .info h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em}
.team-executive .member .info .role{font-size:15px;margin-top:4px}
.team-executive .member .info .cred{font-size:11.5px;margin-top:10px;color:#52617b}
.team-executive .member .info>p{font-size:15.5px;line-height:1.7;max-width:78ch;margin-top:15px}
.leader-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.leader-meta>div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72)}
.leader-meta b{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.leader-meta span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:760px){
  .team-executive .member{grid-template-columns:1fr}
  .team-executive .member .ph{aspect-ratio:4/3;min-height:0}
  .team-executive .member .info{padding:23px 20px 22px}
  .leader-meta{grid-template-columns:1fr}
}

/* Phase 3.8 — mobile navigation completeness + premium interaction */
@media (max-width:720px){
  .nav-in{height:68px!important;padding-inline:max(18px,env(safe-area-inset-left))!important}
  .brand img{max-height:34px!important;width:auto!important}
  .burger{display:block!important;position:relative!important;z-index:206!important}
  .nav.open .nav-links{
    display:flex!important;position:fixed!important;inset:68px 0 0 0!important;
    height:calc(100dvh - 68px)!important;max-height:none!important;overflow-y:auto!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    padding:18px max(20px,env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))!important;
    gap:4px!important;background:linear-gradient(160deg,#061027 0%,#0a1a3e 65%,#081630 100%)!important;
    border:0!important;box-shadow:none!important;z-index:204!important
  }
  .nav.open .nav-links>a,.nav.open .nav-item>button{
    color:#fff!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.09)!important;
    border-radius:0!important;font-size:19px!important;font-weight:650!important;line-height:1.25!important;padding:16px 2px!important;
    min-height:56px!important
  }
  .nav.open .nav-item{width:100%!important}
  .nav.open .nav-item>button svg{stroke:#fff!important}
  .nav.open .mega{background:rgba(255,255,255,.035)!important;padding:8px 10px 14px!important;border-radius:12px!important}
  .nav.open .mega a{color:rgba(255,255,255,.84)!important;padding:11px 8px!important}
  .nav.open .nav-cta-mobile{display:grid!important;gap:10px!important;margin-top:16px!important}
  body:has(.nav.open){overflow:hidden!important}
}

/* More intentional visual transitions without disturbing layout. */
@media (prefers-reduced-motion:no-preference){
  .section .sec-head.reveal.in h2,.section .sec-head.reveal.in p{animation:p38Rise .62s cubic-bezier(.2,.75,.2,1) both}
  .section .sec-head.reveal.in p{animation-delay:.07s}
  .ccard.reveal.in,.case.reveal.in,.cap.reveal.in,.post.reveal.in{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease,border-color .3s ease!important}
  .ccard:hover,.case:hover,.cap:hover,.post:hover{transform:translateY(-7px)!important;box-shadow:0 28px 70px -38px rgba(5,24,65,.38)!important}
  @keyframes p38Rise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
}

/* Case-study directory: professional naming and clearer editorial hierarchy. */
.ccard .cc-body h4{font-size:20px!important;line-height:1.18!important;letter-spacing:-.025em!important;margin-top:8px!important}
.ccard .cc-cap{font-size:10.5px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--blue)!important}
.ccard .cc-body p{font-size:14px!important;line-height:1.6!important;margin-top:10px!important}
.ccard .cc-cta,.ccard .cc-go{margin-top:16px!important;font-weight:650!important}

/* Case-study detail pages read like consulting engagement reports. */
.cs-body{align-items:start!important}
.cs-section{scroll-margin-top:100px!important}
.cs-section h2{letter-spacing:-.03em!important;max-width:22ch!important}
.cs-section p,.cs-section li{font-size:16px!important;line-height:1.75!important}
.cs-snapshot>div{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;padding:14px 16px!important}
@media(max-width:720px){
  .cs-snapshot{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .cs-snapshot>div{padding:11px 12px!important}
  .cs-nav{display:flex!important;position:relative!important;top:auto!important;overflow-x:auto!important;gap:8px!important;padding:10px 0 16px!important;margin-bottom:18px!important;scrollbar-width:none!important}
  .cs-nav::-webkit-scrollbar{display:none!important}
  .cs-nav a{flex:0 0 auto!important;border:1px solid var(--line)!important;border-radius:100px!important;padding:8px 12px!important;font-size:12px!important}
}