/* Vertex Starlight — visual-only enhancement, no changes to portals or data. */
#vx-starlight{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:.85;contain:strict}
/* Maintain contrast on pale consent box even inside the navy registration card. */
.contact-card .vx-registration-consents{background:linear-gradient(145deg,#f8fbff,#e8f2fa)!important;border:1px solid #bad2e6!important;border-radius:17px!important;padding:16px 18px!important;box-shadow:inset 0 1px 0 #fff,0 10px 24px #031b2e14!important}
.contact-card .vx-registration-consents .vx-consent-row,.contact-card .vx-registration-consents .vx-consent-row span{color:#102c45!important;-webkit-text-fill-color:#102c45!important;font-size:14px!important;line-height:1.65!important;font-weight:550!important;opacity:1!important;text-shadow:none!important}
.contact-card .vx-registration-consents .vx-consent-links{color:#284860!important;-webkit-text-fill-color:#284860!important;font-size:13px!important;line-height:1.7!important}
.contact-card .vx-registration-consents .vx-consent-links a{color:#075da4!important;-webkit-text-fill-color:#075da4!important;font-weight:750!important;text-decoration:underline!important;text-underline-offset:3px}
.contact-card .vx-registration-consents input[type=checkbox]{width:23px!important;height:23px!important;min-width:23px!important;accent-color:#0b66b1!important;opacity:1!important;cursor:pointer!important;flex-shrink:0}
.contact-card .vx-registration-consents .vx-consent-row{padding:9px 1px!important;min-height:43px}
.contact-card .vx-registration-consents a:focus-visible,.contact-card .vx-registration-consents input:focus-visible{outline:3px solid #2d83c9!important;outline-offset:4px}
/* Direct-contact tiles: rounded, colorful restrained surfaces and clear dark type. */
#contact .direct-links{gap:15px!important}
#contact .direct-link{position:relative;overflow:hidden;border-radius:21px!important;padding:20px 19px!important;min-height:105px;isolation:isolate;background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%)!important;border:1px solid #bdd8ed!important;box-shadow:0 12px 35px rgba(8,56,95,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important}
#contact .direct-link:nth-child(2){background:linear-gradient(135deg,#fff,#fff0f8 100%)!important;border-color:#edd0e3!important}
#contact .direct-link:nth-child(3){background:linear-gradient(135deg,#fff,#ecf9f6 100%)!important;border-color:#c5e4df!important}
#contact .direct-link:nth-child(4){background:linear-gradient(135deg,#fff,#ebf3ff 100%)!important;border-color:#c3d7f2!important}
#contact .direct-link:hover,#contact .direct-link:focus-visible{transform:translateY(-5px)!important;box-shadow:0 24px 45px rgba(10,58,98,.17)!important;border-color:#80b8df!important}
#contact .direct-link:before{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-85px;top:-78px;background:radial-gradient(circle,#7cc8ee35,transparent 68%);transition:transform .45s ease;pointer-events:none}
#contact .direct-link:hover:before{transform:scale(2)}
#contact .direct-link .direct-icon{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:16px!important;background:linear-gradient(145deg,#e6f2ff,#d9eafb)!important;color:#125789!important;box-shadow:0 5px 15px #0d477116!important}
#contact .direct-link:nth-child(2) .direct-icon{background:#ffe0f0!important;color:#a82379!important}
#contact .direct-link:nth-child(3) .direct-icon{background:#dff6f0!important;color:#087c68!important}
#contact .direct-link:nth-child(4) .direct-icon{background:#dceaff!important;color:#0a59ad!important}
#contact .direct-link strong{color:#102d4b!important;-webkit-text-fill-color:#102d4b!important;font-size:14px!important;line-height:1.4!important}
#contact .direct-link small{color:#435f75!important;-webkit-text-fill-color:#435f75!important;font-size:11px!important;line-height:1.5!important;overflow-wrap:anywhere;opacity:1!important}
/* Social dock remains bottom-left and assistant bottom-right, above all decorative layers. */
.floating.wa,.floating.ig,.floating.vertex-linkedin-floating{z-index:10010!important}
.vx-assistant-launch,.vx-assistant-panel{z-index:10011!important}
@media(max-width:700px){#contact .direct-link{min-height:92px;padding:16px!important;border-radius:17px!important}#contact .direct-link .direct-icon{width:42px!important;height:42px!important;flex-basis:42px!important}#vx-starlight{opacity:.58}}
@media(prefers-reduced-motion:reduce){#vx-starlight{display:none!important}#contact .direct-link{transition:none!important}#contact .direct-link:hover{transform:none!important}}

/* ===== Portfolio-reference immersive background revision =====
   The sky is BEHIND the page, never a light overlay ON TOP of text.
   Light panels are translucent so animated movement remains visibly behind content. */
html { background:#071628; }
body { background:#071628 !important; isolation:isolate; }
#vx-starlight {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  display:block !important;
  mix-blend-mode:normal !important;
}
/* Treat the site as a translucent foreground over the moving sky. */
body > :not(#vx-starlight):not(script):not(style):not(link) {
  position:relative;
  z-index:1;
}
body > .site-header { position:sticky; z-index:10000; }
body > .vx-float-social, body > .vx-career-assistant, body > #vx-career-assistant,
body > .vertex-floating-links { position:fixed; z-index:9999; }
/* Do not force portal overlays or dialogs behind the moving background. */
body > section.hero, body > section.section, body > section.contact,
body > section.vx-proof {
  background-color:transparent !important;
  background-image:linear-gradient(130deg,rgba(239,249,255,.88),rgba(220,241,252,.83)) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
body > section.hero {
  background-image:linear-gradient(115deg,rgba(231,245,255,.77),rgba(207,234,250,.74)) !important;
}
body > section.section:nth-of-type(even) {
  background-image:linear-gradient(145deg,rgba(253,254,255,.90),rgba(228,245,255,.82)) !important;
}
body > section.contact {
  background-image:linear-gradient(135deg,rgba(221,242,255,.86),rgba(226,249,251,.86)) !important;
}
/* Keep forms and content cards solid enough for legibility. */
#contact .contact-card, #candidate-reviews .vx-public-card,
#contact .direct-link, .aud-card, .principle, .service-card,
.contact-card input, .contact-card select, .contact-card textarea {
  position:relative;
}
/* Elegant animated edge lighting gives depth to panels without overdoing it. */
#contact .direct-link:hover { transform:translateY(-5px) !important; }
@media (prefers-reduced-motion:reduce) {
  #vx-starlight { opacity:.8 !important; }
  #contact .direct-link { transition:none !important; }
}

/* 2026-11-07: Correct the page hierarchy: sections live inside <main>. */
html, body { overflow-x: clip; }
body { background:#0b2037 !important; }
main { position:relative; z-index:1; }
/* Real translucent section backgrounds expose the continuously animated sky behind the page. */
main > section.hero,
main > section.section,
main > section.contact,
main > section.vx-proof,
body > section.section {
  background:linear-gradient(120deg,rgba(240,249,255,.72),rgba(220,237,251,.76)) !important;
  background-color:transparent !important;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
main > section.section:nth-of-type(2n), body > section.section:nth-of-type(2n) {
  background:linear-gradient(145deg,rgba(250,253,255,.80),rgba(224,242,253,.74)) !important;
}
/* Preserve the explicitly dark sections and their designed white lettering. */
main > section.approach, main > section.vx-proof, .vx-proof {
  background:rgba(7,31,57,.88) !important;
}
/* Hero: central two-column layout with breathing room on every side. */
@media(min-width:901px) {
  main > section.hero {padding-inline:clamp(20px,3.5vw,60px) !important;}
  .hero .hero-grid {
    width:100% !important;
    max-width:1310px !important;
    margin-inline:auto !important;
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr) !important;
    gap:clamp(32px,3.2vw,60px) !important;
    padding:clamp(38px,5vw,76px) 0 34px !important;
  }
  .hero .hero-copy {max-width:580px !important; padding-left:0 !important;}
  .hero h1 {font-size:clamp(45px,4.25vw,74px) !important;line-height:1.075 !important;letter-spacing:-.048em !important;overflow-wrap:normal;}
  .hero .hero-art {min-width:0 !important;width:100% !important;max-width:100% !important;min-height:0 !important;overflow:visible !important;}
  .hero .vertex-hero-slider {
    box-sizing:border-box !important;width:100% !important;max-width:100% !important;
    height:clamp(320px,31vw,510px) !important;
    margin-inline:auto !important;border-radius:20px !important;
    overflow:hidden !important;
  }
  .hero .hero-foot {width:100%;max-width:1310px;margin-inline:auto !important;}
}
/* Maintain full visibility of the announcement itself rather than cropping the image. */
.hero .vertex-hero-slider .vertex-slide img {object-fit:contain !important;object-position:center !important;}
@media(min-width:901px) and (max-width:1120px) {
 .hero h1 {font-size:clamp(42px,4.1vw,58px) !important;}
}
@media(max-width:900px) {
 main > section.hero {padding-inline:16px !important;}
 .hero .hero-grid{width:100% !important;max-width:760px;margin-inline:auto !important;gap:24px !important;}
 .hero .vertex-hero-slider{width:100% !important;max-width:100% !important;border-radius:18px !important;}
}
/* Keep starfield above the solid body color but behind interactive content. */
#vx-starlight { z-index:0 !important; opacity:1 !important; }
@media (prefers-reduced-motion:reduce) { #vx-starlight {opacity:.72 !important;} }

/* ===== Vertex 2026 premium cosmic theme (scoped to the public homepage) =====
   The previous .72–.90 opacity pale section gradients made the star canvas
   practically invisible. This layer supersedes them without touching portals. */
#main { background:transparent !important; }
#main > section.hero,
#main > section.section,
#main > section.contact,
#main > section.vx-proof {
  position:relative;
  background:linear-gradient(135deg,rgba(5,19,38,.76),rgba(9,37,68,.71)) !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:1px solid rgba(167,210,247,.12);
}
#main > section.section:nth-of-type(2n) {
  background:linear-gradient(135deg,rgba(9,31,57,.72),rgba(6,25,47,.80)) !important;
}
#main > section.hero {
  background:linear-gradient(110deg,rgba(5,19,40,.63),rgba(8,32,58,.54)) !important;
}
#main > section.approach,
#main > section.vx-proof {
  background:linear-gradient(130deg,rgba(4,17,33,.87),rgba(8,34,61,.82)) !important;
}
#main > section.contact {
  background:linear-gradient(120deg,rgba(8,32,61,.83),rgba(8,41,69,.77)) !important;
}
/* Headings/lead paragraphs sit on the night sky; white cards retain dark ink. */
#main > .section .section-title,
#main > .section > .container > h2,
#main > .section .container > h2,
#main > .section .container > .section-head h2,
#main > section.section .section-title,
#main > section.section .container > h2,
#main > section.section .section-head h2,
#main > section.hero h1,
#main > section.section .eyebrow,
#main > section.contact .eyebrow,
#main > section.contact .section-title,
#main > section.contact h2 { color:#f6fbff !important; -webkit-text-fill-color:initial; }
#main > section.hero h1 em,
#main > section.section .section-title em,
#main > section.section .container > h2 em { color:#a7d8ff !important; -webkit-text-fill-color:#a7d8ff !important; background:none !important; }
#main > section.hero .eyebrow,
#main > section.section .eyebrow { color:#9ad2fb !important; }
#main > section.hero .hero-intro,
#main > section.section .section-intro,
#main > section.section .container > p:not(.eyebrow),
#main > section.section .about-grid p,
#main > section.contact .section-intro { color:#d7e9f6 !important; }
#main > section.hero .btn-link { color:#d6ecfc !important; }
#main > section.hero .hero-foot { color:#b7d2e6 !important; }
/* Separate functional content from the sky using elegant solid cards. */
#main .audiences .aud-grid,
#main .audiences .container { min-width:0; }
#main .audiences .section-intro { max-width:720px; margin:24px 0 0; }
#main .audiences .aud-grid { gap:clamp(16px,2.5vw,30px); margin-top:34px; }
#main .audiences .aud-card {
  padding:clamp(24px,3.4vw,48px) !important;
  border:1px solid rgba(179,216,243,.42) !important;
  border-radius:22px !important;
  background:linear-gradient(150deg,#f8fcff,#e9f3fb) !important;
  color:#143653 !important;
  box-shadow:0 24px 65px rgba(0,9,24,.22) !important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
#main .audiences .aud-card.dark { background:linear-gradient(145deg,#103963,#091f3c) !important;color:#fff !important; }
#main .audiences .aud-card h3 { color:#123859 !important; font:750 clamp(26px,2.6vw,37px)/1.2 Manrope,Arial,sans-serif; letter-spacing:-.035em; }
#main .audiences .aud-card.dark h3 { color:#fff !important; }
#main .audiences .aud-card p { color:#456078 !important; font-size:15px; line-height:1.8; }
#main .audiences .aud-card.dark p { color:#d3e5f7 !important; }
#main .audiences .aud-card .vx-aud-kicker { display:block; margin-bottom:22px; color:#2b7fb6; font-size:11px; font-weight:800; letter-spacing:.22em; }
#main .audiences .aud-card.dark .vx-aud-kicker { color:#91c9f1; }
#main .audiences .aud-card .btn-link { display:inline-flex; color:#0d4c83 !important; font-weight:800; }
#main .audiences .aud-card.dark .btn { display:inline-flex; background:#f7fbff;color:#0d375d; border:1px solid #cce5fa; border-radius:9px; text-decoration:none; padding:13px 18px; font-weight:800; }
#main .audiences .aud-card:hover { transform:translateY(-4px); border-color:#85c4ed !important; box-shadow:0 30px 65px rgba(0,9,24,.3) !important; }
/* Keep the career process prominent and its existing information intact. */
#main #career-process > .container > p:not(.eyebrow) { color:#d5e7f6 !important; }
#main #career-process .vertex-process-grid article {
  border:1px solid rgba(145,190,226,.6) !important;
  border-radius:19px !important;
  background:linear-gradient(160deg,#fbfdff,#eaf4fd) !important;
  box-shadow:0 24px 52px rgba(0,9,24,.28) !important;
  transition:transform .22s ease,box-shadow .22s ease;
}
#main #career-process .vertex-process-grid article:hover { transform:translateY(-4px); box-shadow:0 27px 60px rgba(0,9,24,.34) !important; }
#main #career-process .vertex-process-grid h3 { color:#123e69 !important; font-weight:800 !important; }
#main #career-process .vertex-process-grid p { color:#415e77 !important; }
/* Existing form and review cards should remain easy to read and use. */
#main #contact .contact-card,
#main #candidate-reviews .vx-public-card,
#main #candidate-reviews details,
#main #founder .vertex-founder-details { box-shadow:0 18px 50px rgba(0,10,25,.21); }
#main #candidate-reviews .vx-public-card h3,
#main #candidate-reviews .vx-public-card p { color:#163c5c !important; }
#main .hero .vertex-hero-slider { box-shadow:0 30px 78px rgba(0,8,25,.52) !important; border:1px solid rgba(157,210,247,.3) !important; }
#main .hero .vertex-slide img { object-fit:contain !important; object-position:center; }
@media(max-width:800px){
 #main .audiences .aud-grid { grid-template-columns:1fr; }
 #main .audiences .aud-card { min-height:0 !important; }
 #main > section.hero { padding-inline:12px !important; }
 #main > section.hero h1 { font-size:clamp(39px,9vw,64px) !important; }
}
@media(prefers-reduced-motion:reduce){
 #main .audiences .aud-card,#main #career-process .vertex-process-grid article { transition:none !important; }
 #main .audiences .aud-card:hover,#main #career-process .vertex-process-grid article:hover {transform:none !important;}
}
/* Readable navigation against the existing translucent light header. */
.site-header .main-nav a:not(.nav-cta) { color:#143d61 !important; }
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible { color:#0065a7 !important; }
@media(max-width:900px){
 .site-header .main-nav { background:#f3f8ff !important; }
 .site-header .main-nav a:not(.nav-cta) { color:#153c60 !important; }
}