/* ===========================================================================
   SAJIDMK | OPTICAL LIQUID GLASS | 13 November 2026
   A NON-DESTRUCTIVE finishing layer, applied after the existing stylesheets.
   Material study: user-provided clear/silver thick capsule reference.
   All original assets, layouts, section numbers, controls and brand themes stay.

   --site-glass-blur comes from the existing 0-100px sidebar controller.
   --sg-glass-alpha comes from its separate glass opacity controller.
   CSS does not counterfeit real-time optical ray tracing; highlights and inset
   bevels are layered over actual backdrop sampling for a convincing fallback.
   =========================================================================== */
:root {
  --optic-white:#f6f9fb;
  --optic-silver:#e8ecef;
  --optic-rim:rgba(244,249,255,.82);
  --optic-rim-side:rgba(213,228,238,.37);
  --optic-smoke:rgba(7,11,16,.24);
  --optic-spec:rgba(255,255,255,.22);
  --optic-depth:0 27px 75px -40px rgba(0,0,0,.86), 0 11px 30px -20px rgba(0,0,0,.66),
    inset 0 2px 1px rgba(255,255,255,.54), inset 1px 0 1px rgba(244,249,255,.18),
    inset -1px 0 2px rgba(244,249,255,.14), inset 0 -2px 2px rgba(3,6,12,.42),
    inset 0 -23px 24px -29px rgba(1,6,12,.94);
  --optic-filter:blur(var(--site-glass-blur, 0px)) saturate(175%) brightness(1.045) contrast(1.055);
  --optic-anim:cubic-bezier(.18, .82, .22, 1);
}
/* Leave the actual landscape asset and color treatment exactly as uploaded. */

/* ONE physically raised, uninterrupted navigation capsule (not six pills). */
:is(html,html[data-site-theme]) body #topNav {
  width:min(1120px, calc(100% - 50px));
  min-height:106px;
  top:calc(14px + env(safe-area-inset-top,0px));
  padding:8px 18px 8px 23px;
  gap:12px;
  border:1.5px solid rgba(232,240,247,.52) !important;
  border-top-color:rgba(252,253,255,.94) !important;
  border-right-color:rgba(238,247,255,.56) !important;
  border-bottom-color:rgba(205,221,232,.36) !important;
  border-radius:999px !important;
  background:
    radial-gradient(ellipse 65% 48% at 48% -14%,rgba(255,255,255,.39),transparent 72%),
    radial-gradient(ellipse 36% 85% at 1% 52%,rgba(239,250,255,.17),transparent 78%),
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.075) 16%,rgba(235,247,255,.018) 46%,rgba(2,7,11,.16) 87%,rgba(10,17,21,.24) 100%) !important;
  background-color:transparent !important;
  box-shadow:
    0 32px 76px -38px rgba(0,0,0,.81),0 13px 26px -14px rgba(0,0,0,.64),
    0 0 0 1px rgba(236,248,255,.12),
    inset 0 3px 2px rgba(255,255,255,.66),
    inset 2px 0 3px rgba(255,255,255,.30),
    inset -2px 0 4px rgba(255,255,255,.24),
    inset 0 -4px 5px rgba(0,0,0,.37),
    inset 0 -16px 19px -17px rgba(0,0,0,.80) !important;
  -webkit-backdrop-filter:var(--optic-filter) !important;
  backdrop-filter:var(--optic-filter) !important;
  overflow:visible !important;
  isolation:isolate;
  z-index:1000;
}
:is(html,html[data-site-theme]) body #topNav::before {
  content:"";
  display:block;
  pointer-events:none;
  position:absolute;
  inset:1px;
  border-radius:inherit;
  opacity:1;
  background:
    radial-gradient(ellipse 42% 83% at var(--optic-x,52%) -20%,rgba(255,255,255,.24),transparent 87%),
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 15%,transparent 80%,rgba(0,0,0,.25));
  z-index:0;
  transition:background-position .25s ease;
}
:is(html,html[data-site-theme]) body #topNav::after {
  content:"";
  display:block;
  pointer-events:none;
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.82),rgba(255,255,255,.15) 23%,transparent 37%,transparent 67%,rgba(250,255,255,.38) 94%,rgba(255,255,255,.78));
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  z-index:0;
  opacity:.92;
}
#topNav > * {position:relative;z-index:1}
:is(html,html[data-site-theme]) body #topNav .nav-brand {
  flex:0 1 165px;
  min-width:0;
  font-size:clamp(calc(12px * var(--site-font-scale, 1)),calc(1.06vw * var(--site-font-scale, 1)),calc(15px * var(--site-font-scale, 1)));
  letter-spacing:-.025em;
  color:#fff !important;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
}
#topNav .nav-brand .ping {background:#e8ecef!important;box-shadow:0 0 10px rgba(255,255,255,.62)!important}
:is(html,html[data-site-theme]) body #topNav .nav-links {
  display:flex;
  align-items:stretch;
  gap:clamp(2px,.42vw,8px);
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
  align-self:stretch;
  padding:1px 2px;
  margin:0;
  isolation:isolate;
  position:relative;
}
:is(html,html[data-site-theme]) body #topNav .nav-links > a.nav-link,
:is(html,html[data-site-theme]) body #topNav .nav-more > summary.nav-link {
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  width:auto;
  flex:1 1 0;
  min-height:87px;
  border:0 !important;
  padding:10px 4px 8px !important;
  margin:0 !important;
  color:#f8fafb !important;
  font-size:calc(12px * var(--site-font-scale, 1)) !important;
  font-weight:500;
  line-height:1.18 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  text-shadow:0 1px 5px rgba(0,0,0,.82);
  overflow:visible;
  isolation:auto;
  transform:none;
  transition:color .25s ease,filter .3s ease;
  -webkit-tap-highlight-color:transparent;
}
/* The Explore <details> must behave as one equally sized item. */
:is(html,html[data-site-theme]) body #topNav .nav-more {
  display:flex;
  flex:1 1 0;
  min-width:0;
  align-items:stretch;
  position:relative;
  z-index:2;
}
:is(html,html[data-site-theme]) body #topNav .nav-more > summary.nav-link {width:100%;height:100%;}
#topNav .nav-links > a.nav-link::before,
#topNav .nav-links > a.nav-link::after,
#topNav .nav-more > summary.nav-link::before,
#topNav .nav-more > summary.nav-link::after {content:none!important;display:none!important}
#topNav .optic-nav-icon {
  display:block;
  width:clamp(22px,2.05vw,29px);
  height:clamp(22px,2.05vw,29px);
  flex:none;
  color:#fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
  transition:transform .35s var(--optic-anim),filter .25s;
}
#topNav .nav-link:is(:hover,:focus-visible) .optic-nav-icon,
#topNav .nav-more[open] .optic-nav-icon {transform:translateY(-2px);filter:drop-shadow(0 1px 5px rgba(255,255,255,.43))}
#topNav .optic-nav-label{white-space:nowrap;color:#fff!important}
#topNav .nav-more .nav-chevron{display:none!important}
/* The user reference's smoky, internally refracting oval: ONE moving lens. */
#topNav .optic-active-lens {
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:var(--optic-lens-top, 2px);
  left:var(--optic-lens-left, 2px);
  width:var(--optic-lens-w, 80px);
  height:var(--optic-lens-h, calc(100% - 4px));
  border-radius:999px;
  background:linear-gradient(165deg,rgba(15,24,25,.68),rgba(3,9,14,.42) 56%,rgba(0,6,10,.57));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.20),inset 0 -12px 15px -17px rgba(0,0,0,.96),0 0 18px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(4px) brightness(.66) saturate(120%);
  backdrop-filter:blur(4px) brightness(.66) saturate(120%);
  transition:left .56s cubic-bezier(.16,1,.3,1),width .56s cubic-bezier(.16,1,.3,1),top .56s cubic-bezier(.16,1,.3,1),height .56s cubic-bezier(.16,1,.3,1);
  will-change:left,width;
}
/* Safety fallback: the active item still looks selected with scripts off. */
#topNav:not(.optic-ready) .nav-links > .nav-link.active {background:rgba(4,10,15,.48)!important}
:is(html,html[data-site-theme]) body #topNav > .nav-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:91px;
  min-height:51px;
  padding:12px 16px !important;
  border:1px solid rgba(248,251,255,.48) !important;
  border-top-color:rgba(255,255,255,.8) !important;
  border-radius:999px !important;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 42%,rgba(4,10,14,.29))!important;
  box-shadow:0 8px 21px -12px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.38),inset 0 -2px rgba(0,0,0,.21)!important;
  -webkit-backdrop-filter:var(--optic-filter)!important;
  backdrop-filter:var(--optic-filter)!important;
  color:#fff!important;
  font-weight:600;
  text-shadow:0 1px 5px rgba(0,0,0,.82);
}
#topNav > .nav-cta:hover{filter:brightness(1.15);transform:translateY(-2px)}
#topNav > .nav-cta::before,#topNav > .nav-cta::after{content:none!important}
:is(html,html[data-site-theme]) body #topNav .nav-more-menu {
  position:absolute;
  top:calc(100% + 9px);
  right:-18px;
  min-width:215px;
  padding:9px;
  border-radius:24px !important;
  background:linear-gradient(160deg,rgba(37,45,50,.63),rgba(5,10,15,.62))!important;
  border:1px solid rgba(236,246,255,.43)!important;
  border-top-color:rgba(255,255,255,.72)!important;
  box-shadow:var(--optic-depth)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
  overflow:hidden;
}
#topNav .nav-more-menu a.nav-link{color:#f8faff!important;text-shadow:0 1px 3px rgba(0,0,0,.7)}
#topNav .nav-more-menu a.nav-link:hover{background:rgba(243,250,255,.13)!important}
#topNav .nav-more-menu .nav-link.active{background:rgba(245,250,255,.20)!important}

/* Reserve enough space for the taller navigation, without shrinking portraits. */
:is(html,html[data-site-theme]) body main > .hero.vision-landing {
  margin-top:calc(35px + var(--nav-h, 106px)) !important;
  border:1px solid rgba(241,249,255,.26)!important;
  border-top-color:rgba(255,255,255,.45)!important;
  border-radius:clamp(26px,3vw,43px)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(7,11,15,.06) 52%,rgba(2,8,12,.12))!important;
  box-shadow:0 22px 61px -45px rgba(0,0,0,.73),inset 0 1px rgba(255,255,255,.25)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
:is(html,html[data-site-theme]) body main > .vision-featured {
  border-radius:clamp(25px,3vw,40px);
  padding-top:clamp(16px,2vw,26px);
  padding-bottom:clamp(20px,2vw,30px);
  border:1px solid rgba(229,239,247,.28)!important;
  border-top-color:rgba(253,254,255,.64)!important;
  background:linear-gradient(147deg,rgba(255,255,255,.085),rgba(6,9,15,.12) 55%,rgba(3,8,13,.16))!important;
  box-shadow:var(--optic-depth)!important;
  -webkit-backdrop-filter:var(--optic-filter)!important;
  backdrop-filter:var(--optic-filter)!important;
}

/* Large section stages: a recognizably THICK bright curved perimeter.
   Every existing page section uses .section. The section background stays
   clear enough to see the original landscape, even after repeated panels. */
:is(html,html[data-site-theme]) body :is(main > section.section,.recruiter-bar,.footer-panel) {
  border:1px solid rgba(218,232,244,.42)!important;
  border-top:1.5px solid rgba(250,254,255,.84)!important;
  border-left-color:rgba(230,242,250,.51)!important;
  border-right-color:rgba(230,242,250,.46)!important;
  border-bottom-color:rgba(195,211,221,.32)!important;
  border-radius:clamp(24px,3vw,43px)!important;
  background:
    radial-gradient(ellipse 60% 160px at 41% -95px,rgba(255,255,255,.19),transparent 100%),
    linear-gradient(141deg,rgba(246,252,255,.095),rgba(17,24,32,.07) 29%,rgba(3,8,15,.16) 77%,rgba(2,6,11,.18))!important;
  background-color:transparent!important;
  -webkit-backdrop-filter:var(--optic-filter)!important;
  backdrop-filter:var(--optic-filter)!important;
  box-shadow:var(--optic-depth)!important;
}
:is(html,html[data-site-theme]) body main > section.section::after {
  content:"";
  display:block;
  pointer-events:none;
  position:absolute;
  inset:1px;
  z-index:1;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 14%,transparent 75%,rgba(0,0,0,.16));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.15),inset 0 -2px 1px rgba(0,0,0,.11);
}
/* Existing section content uses z-index:2; keep text/cards above reflections. */

/* Inner glass objects — consistent material, varied sizes. Not opaque cards. */
:is(html,html[data-site-theme]) body :is(
 .glass,.glass-clear,.glass-tight,.vision-main-pane,.vision-identity,
 .vision-project-card,.vision-console-frame .term-window,
 .real-world-feature,.client-case,.concept-card,.sajid-offer-card,.sajid-subscribe-card,
 .edu-card,.degree-proof,.degree-proof-card,.cert-card,.tl-item,.tk-card,.bd-card,.case-card,
 .sp-summary,.sp-incident,.geo-vault,.diag-console,.tk-panel,.vview-panel,.vgate-panel,.cmdk-panel,
 .hero-client-teaser,.status-chip,.hero-bismillah,.highlight-card,.trait-row,.skill-card,
 .ref-card,.award-card,.lab-ticket,.contact-pill,.sp-metric,.vision-view-all,.vision-card-icon,
 .contact-panel,.contact-form,.career-strip,.sajid-community,.skills-radar-wrap,
 .arsenal-block,.lab-board,.edu-list > *, .sajid-community > *
 ) {
  border-color:rgba(228,241,250,.35)!important;
  border-top-color:rgba(254,254,255,.68)!important;
  border-bottom-color:rgba(189,210,221,.23)!important;
  background:
    radial-gradient(ellipse 90% 100% at var(--optic-x,42%) -65%,rgba(255,255,255,.14),transparent 80%),
    linear-gradient(156deg,rgba(255,255,255,.13),rgba(242,250,255,.04) 25%,rgba(9,14,20,.13) 57%,rgba(3,8,14,.24))!important;
  background-color:transparent!important;
  -webkit-backdrop-filter:var(--optic-filter)!important;
  backdrop-filter:var(--optic-filter)!important;
  box-shadow:var(--optic-depth)!important;
}
/* The hero's inner cards should feel sculpted rather than dark blocks. */
:is(html,html[data-site-theme]) body :is(.vision-main-pane,.vision-identity,.vision-project-card,.real-world-feature,.client-case,.contact-panel) {
  border-width:1.25px!important;
  border-radius:clamp(22px,2.5vw,32px)!important;
  box-shadow:0 28px 68px -38px rgba(0,0,0,.82),0 0 0 1px rgba(243,252,255,.11),
  inset 0 2px 1px rgba(255,255,255,.43),inset 2px 0 2px rgba(255,255,255,.15),
  inset -1px 0 3px rgba(255,255,255,.09),inset 0 -3px 3px rgba(0,0,0,.30)!important;
}
/* Form fields must have a clear focus state, not a mirrored white overlay. */
:is(html,html[data-site-theme]) body :is(.cf-field input,.cf-field textarea,.form-field input,.form-field textarea,.vgate-input,.cmdk-input) {
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(4,10,16,.26))!important;
  border:1px solid rgba(240,247,255,.32)!important;
  border-top-color:rgba(255,255,255,.53)!important;
  border-radius:15px!important;
  -webkit-backdrop-filter:blur(6px) saturate(145%)!important;
  backdrop-filter:blur(6px) saturate(145%)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.17)!important;
}
:is(html,html[data-site-theme]) body :is(.cf-field input,.cf-field textarea,.form-field input,.form-field textarea,.vgate-input):focus-visible {
  outline:2px solid rgba(236,245,253,.86)!important;outline-offset:2px!important;
}

/* Metallic rim pills and call-to-actions. Site controls retain original actions. */
:is(html,html[data-site-theme]) body :is(
  .btn-primary,.btn-ghost,.btn-secondary,.recruiter-link,.recruiter-link-cv,
  .contact-pill,.cert-btn,.cf-submit,.arsenal-tab,.hero-bismillah,
  .vision-view-all,.hero-client-teaser,.tk-primary,.sajid-secondary-action,
  .sajid-offer-cta,.sajid-subscribe-cta,.case-toggle,.sg-reset
 ) {
  border:1px solid rgba(243,250,255,.42)!important;
  border-top-color:rgba(255,255,255,.77)!important;
  border-bottom-color:rgba(167,195,210,.22)!important;
  border-radius:999px!important;
  background:
    linear-gradient(150deg,rgba(255,255,255,.19) 0%,rgba(255,255,255,.045) 30%,rgba(4,10,16,.19) 80%,rgba(4,8,13,.29))!important;
  box-shadow:0 14px 27px -19px rgba(0,0,0,.88),inset 0 1.5px 1px rgba(255,255,255,.46),
    inset 0 -2px 2px rgba(0,0,0,.27)!important;
  -webkit-backdrop-filter:var(--optic-filter)!important;
  backdrop-filter:var(--optic-filter)!important;
  color:var(--optic-white)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.64);
}
:is(html,html[data-site-theme]) body :is(.btn-primary,.btn-ghost,.btn-secondary,.recruiter-link,.contact-pill,.cert-btn,.cf-submit,.arsenal-tab,.tk-primary,.hero-bismillah) :is(span,strong,b,small){color:var(--optic-white)!important}
:is(html,html[data-site-theme]) body :is(.btn-primary,.btn-ghost,.btn-secondary,.recruiter-link,.contact-pill,.cert-btn,.cf-submit,.arsenal-tab,.tk-primary,.hero-bismillah):is(:hover,:focus-visible) {
  border-top-color:#fff!important;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.89),inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -2px 2px rgba(0,0,0,.24)!important;
  filter:brightness(1.11);
}
/* High-contrast selected state with no colored halo. */
:is(html,html[data-site-theme]) body .arsenal-tab.active {
 background:linear-gradient(160deg,rgba(10,18,22,.66),rgba(2,7,12,.46))!important;
 color:#fff!important;
}

/* Sidebar maintains its organic CUTOUT, separate control rings and no clutter. */
.sg-dock .sg-silhouette path {fill:#0b0f13;stroke:rgba(231,244,251,.27);stroke-width:.8}
.sg-dock .sg-settings,.sg-dock .sg-reopen {
  border:1px solid rgba(235,246,255,.34)!important;
  border-top-color:rgba(255,255,255,.67)!important;
  box-shadow:0 12px 27px rgba(0,0,0,.39),inset 0 2px 1px rgba(255,255,255,.24)!important;
}
.sg-dock .sg-panel {
  background:linear-gradient(145deg,rgba(36,46,52,.84),rgba(10,16,22,.90))!important;
  border:1px solid rgba(225,241,252,.43)!important;
  border-top-color:rgba(255,255,255,.80)!important;
  box-shadow:var(--optic-depth)!important;
  -webkit-backdrop-filter:blur(25px) saturate(175%)!important;
  backdrop-filter:blur(25px) saturate(175%)!important;
}

/* The opacity setting is additive and does not dim children or text. */
html[data-sg-glass="custom"] body :is(
 .section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight,
 .vision-main-pane,.vision-identity,.vision-project-card,.vision-console-frame .term-window,
 .real-world-feature,.client-case,.concept-card,.sajid-offer-card,.sajid-subscribe-card,
 .edu-card,.degree-proof,.degree-proof-card,.cert-card,.tl-item,.tk-card,.bd-card,.case-card,
 .sp-summary,.sp-incident,.geo-vault,.diag-console,.hero-client-teaser,.status-chip,
 .hero-bismillah,.contact-panel,.highlight-card,.trait-row,.skill-card,.ref-card,.award-card,
 .lab-ticket,.sp-metric,.vision-view-all,.vision-featured,.hero.vision-landing
),
html[data-sg-glass="custom"] body #topNav {
  background-color:rgba(var(--sg-surface-rgb,10,12,16),calc(var(--sg-glass-alpha,0) * .68))!important;
}

/* Additional rim for sections without a .glass in their content. */
:where(.trait-row,.award-card,.edu-card,.cert-card,.case-card,.bd-card,.lab-ticket,.sp-incident) {border-radius:clamp(17px,2vw,26px)}

/* On desktop the capsule stays a one-row nav; density shrinks gracefully. */
@media (min-width:1180px) and (max-width:1400px) {
 :is(html,html[data-site-theme]) body #topNav {width:min(100% - 34px,1120px);padding:7px 12px 7px 17px;gap:5px;min-height:97px}
 :is(html,html[data-site-theme]) body #topNav .nav-brand {font-size:calc(12px * var(--site-font-scale, 1));flex-basis:150px}
 :is(html,html[data-site-theme]) body #topNav .nav-links > a.nav-link,
 :is(html,html[data-site-theme]) body #topNav .nav-more > summary.nav-link {min-height:80px;font-size:calc(11px * var(--site-font-scale, 1))!important;padding-inline:2px!important}
 :is(html,html[data-site-theme]) body #topNav .nav-cta {padding-inline:12px!important;font-size:calc(12px * var(--site-font-scale, 1))!important;min-width:78px}
}
/* Keep one top nav, no duplicate nav bar, and enhance the EXISTING mobile drawer. */
@media (max-width:1179px) {
 :is(html,html[data-site-theme]) body #topNav {
   width:min(860px,calc(100% - 24px));
   min-height:67px;
   padding:8px 12px 8px 18px;
   gap:7px;
   border-radius:999px!important;
   top:calc(10px + env(safe-area-inset-top,0px));
 }
 :is(html,html[data-site-theme]) body #topNav .nav-links {display:none!important}
 :is(html,html[data-site-theme]) body #topNav .nav-brand {font-size:calc(14px * var(--site-font-scale, 1));flex:1 1 auto}
 :is(html,html[data-site-theme]) body #topNav > .nav-cta {min-width:83px;min-height:43px;padding:9px 13px!important;font-size:calc(12px * var(--site-font-scale, 1))!important}
 :is(html,html[data-site-theme]) body #topNav .nav-toggle {
   display:flex;justify-content:center;align-items:center;min-width:44px;height:44px;
   border:1px solid rgba(255,255,255,.40)!important;
   border-top-color:rgba(255,255,255,.68)!important;
   border-radius:50%!important;
   background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(2,8,14,.23))!important;
   box-shadow:inset 0 1px rgba(255,255,255,.26)!important;
   color:#fff!important;
 }
 :is(html,html[data-site-theme]) body .mob-drawer.glass-clear {
   top:calc(88px + env(safe-area-inset-top,0px));
   border:1px solid rgba(236,246,255,.42)!important;
   border-top-color:rgba(255,255,255,.74)!important;
   background:linear-gradient(142deg,rgba(33,41,48,.75),rgba(8,15,21,.73))!important;
   -webkit-backdrop-filter:blur(26px) saturate(175%)!important;
   backdrop-filter:blur(26px) saturate(175%)!important;
   box-shadow:var(--optic-depth)!important;
   border-radius:27px!important;
 }
 :is(html,html[data-site-theme]) body .mob-drawer .nav-link {
   display:flex;flex-direction:row;align-items:center;gap:10px;
   border:1px solid rgba(250,255,255,.17)!important;
   border-top-color:rgba(255,255,255,.35)!important;
   border-radius:999px!important;
   background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(3,7,12,.15))!important;
   color:#fff!important;
   text-align:left;
   text-shadow:0 1px 4px rgba(0,0,0,.65);
 }
 :is(html,html[data-site-theme]) body .mob-drawer .nav-link.active {
   background:linear-gradient(160deg,rgba(2,10,15,.74),rgba(16,24,30,.51))!important;
   box-shadow:inset 0 1px 1px rgba(255,255,255,.22),0 9px 18px -14px rgba(0,0,0,.8)!important;
 }
 .mob-drawer .optic-nav-icon{width:20px;height:20px;flex:none;color:white}
 .mob-drawer .optic-nav-label{color:white!important;min-width:0}
 :is(html,html[data-site-theme]) body main > .hero.vision-landing{margin-top:calc(90px + env(safe-area-inset-top,0px))!important}
}
@media (max-width:650px) {
 :is(html,html[data-site-theme]) body #topNav {width:calc(100% - 18px);min-height:59px;padding:6px 9px 6px 13px}
 :is(html,html[data-site-theme]) body #topNav .nav-brand {font-size:calc(12px * var(--site-font-scale, 1))}
 :is(html,html[data-site-theme]) body #topNav > .nav-cta {min-width:auto;min-height:39px;padding:8px 12px!important;font-size:calc(11px * var(--site-font-scale, 1))!important}
 :is(html,html[data-site-theme]) body #topNav .nav-toggle {min-width:39px;width:39px;height:39px;margin-left:2px}
 :is(html,html[data-site-theme]) body .mob-drawer.glass-clear {top:calc(75px + env(safe-area-inset-top,0px));left:9px;right:9px;max-height:calc(100dvh - 90px);padding:10px;gap:7px}
 :is(html,html[data-site-theme]) body .mob-drawer .nav-link {padding:10px 8px!important;font-size:calc(12px * var(--site-font-scale, 1));min-height:45px}
 :is(html,html[data-site-theme]) body main > .hero.vision-landing {margin-top:calc(76px + env(safe-area-inset-top,0px))!important}
 :is(html,html[data-site-theme]) body main > .vision-featured {border-radius:24px}
 :is(html,html[data-site-theme]) body :is(main>section.section,.recruiter-bar,.footer-panel) {border-radius:24px!important}
}
@media (max-width:340px) {
 #topNav .nav-brand {font-size:calc(11px * var(--site-font-scale, 1))!important}
 #topNav > .nav-cta {padding-inline:9px!important}
}
@media (hover:none) {
 #topNav .nav-link .optic-nav-icon{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
 #topNav .optic-active-lens,#topNav .optic-nav-icon {animation:none!important;transition:none!important;will-change:auto}
}
@media print {
 #topNav .optic-active-lens {display:none!important}
 :is(html,html[data-site-theme]) body :is(.hero,.vision-featured,.section,.recruiter-bar,.footer-panel,.glass,.glass-clear) {
  background:#fff!important;border:0!important;box-shadow:none!important;color:#111!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 }
}