:root{
    --bg:#0B1626; --bg-2:#112844; --text:#ffffff; --muted:#c7d1dd;
    --gold:#C5A46D; --gold-600:#b89457; --shadow:0 10px 30px rgba(0,0,0,.25);
    --radius:10px; --radius-sm:8px; --container-x:clamp(16px,5vw,48px);
    --hero-h:min(80vh,780px);
  }
  *{box-sizing:border-box} html,body{height:100%}
  html{scroll-behavior:smooth}
  body{margin:0; color:var(--text); background:var(--bg);
    font: 400 16px/1.6 "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
  h1,h2,h3{margin:0 0 .5rem 0; line-height:1.25; font-weight:500}
  h1{font-size:clamp(32px,4.5vw,54px)} h2{font-size:clamp(24px,3vw,34px)} h3{font-size:20px; font-weight:400}
  p,a,li,span{font-weight:300} a{color:var(--text); text-decoration:none} a:hover{opacity:.9}
  .container{max-width:1200px; margin:0 auto; padding-inline:var(--container-x)}
  .btn{display:inline-flex; align-items:center; justify-content:center; padding:.875rem 1.25rem; border-radius:9999px; font-weight:600; transition:.2s; box-shadow:0 2px 0 rgba(0,0,0,.15) inset}
  .btn-primary{background:var(--gold); color:var(--bg)} .btn-primary:hover{background:var(--gold-600)}
  .btn-outline{color:var(--text); border:2px solid var(--gold); background:transparent} .btn-outline:hover{background:rgba(197,164,109,.12)}
  .site-header{position:sticky; top:0; z-index:120; background:rgba(11,22,38,.92); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid rgba(255,255,255,.06)}
  .site-header .bar{display:flex; align-items:center; justify-content:space-between; padding:18px var(--container-x)}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px}
  .brand img{height:32px} .nav{display:flex; align-items:center; gap:28px}
  .nav a{font-weight:600; font-size:14.5px; opacity:.92} .nav a:hover{color:var(--gold)}
  .nav .cta{margin-left:6px}
  .icon-gold{font-size:42px; color:var(--gold); margin-bottom:16px}
  .cap-item .icon-gold{font-size:28px; margin-bottom:8px}
  .hero{position:relative; min-height:var(--hero-h); overflow:hidden}
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
  .hero::before{content:""; position:absolute; inset:0; background: radial-gradient(100% 100% at 100% 0%, rgba(11,22,38,0) 0%, rgba(11,22,38,.25) 45%, rgba(11,22,38,.65) 100%), linear-gradient(180deg, rgba(11,22,38,.55) 0%, rgba(17,40,68,.35) 50%, rgba(11,22,38,.65) 100%); z-index:1}
  .hero .content{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-height:var(--hero-h)}
  .hero .cta-row{display:flex; gap:12px; margin-top:18px}
  .section{padding:72px 0} .section.alt{background:var(--bg-2)} .section .grid{display:grid; gap:24px}
  .platform-card{background:var(--bg-2); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); transition:.2s; text-align:center}
  .platform-card:hover{transform:translateY(-3px)} .platform-card h3{color:var(--gold); margin-bottom:6px}
  .capabilities .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  @media (min-width:860px){.platforms .grid{grid-template-columns:repeat(3,1fr)} .insights .grid{grid-template-columns:repeat(3,1fr)} .capabilities .grid{grid-template-columns:repeat(7,1fr)}}
  .card{background:var(--bg-2); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .card img{display:block; width:100%; height:180px; object-fit:cover}
  .card .body{padding:20px} .card .body h3{margin-bottom:10px} .card .link{color:var(--gold)}
  .site-footer{border-top:1px solid rgba(255,255,255,.08); padding:64px 0 28px; background:linear-gradient(180deg, rgba(17,40,68,.4) 0%, rgba(11,22,38,1) 60%), var(--bg)}
  .site-footer .cols{display:grid; gap:24px; padding-inline:var(--container-x)} .site-footer h4{margin-bottom:12px; font-weight:700}
  .site-footer ul{list-style:none; margin:0; padding:0} .site-footer li{margin:8px 0}
  .site-footer a{color:#dfe7f3; opacity:.9} .site-footer a:hover{color:var(--gold)}
  @media (min-width:900px){.site-footer .cols{grid-template-columns:2fr 1fr 1fr 1.4fr 1.6fr}}
  .footer-bottom{display:flex; gap:18px; align-items:center; justify-content:flex-start; margin-top:28px; padding-inline:var(--container-x); opacity:.7; font-size:14px}
  .section.metrics{position:relative}
  .section.metrics .grid{display:grid; gap:20px; grid-template-columns:repeat(2,1fr)}
  @media (min-width:860px){.section.metrics .grid{grid-template-columns:repeat(6,1fr)}}
  .metric{position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:20px 18px; box-shadow:var(--shadow)}
  .metric::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at -20% -20%, rgba(197,164,109,.10), rgba(197,164,109,0) 45%)}
  .metric .value{font:700 clamp(28px,4vw,40px)/1 "Playfair Display", serif; letter-spacing:-.02em; color:#fff}
  .metric .label{margin-top:6px; font-weight:600; opacity:.85}
  .metric .note{margin-top:2px; font-size:13px; opacity:.7}
  .metric .delta.up{color:var(--gold)} .metric .delta.down{color:#ff6b6b}
  .section.roadmap{position:relative}
  .faq .items{max-width:900px; margin:24px auto 0}
  .faq .item{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; margin-bottom:14px; overflow:hidden; transition:border-color .2s}
  .faq .item.open{border-color:rgba(197,164,109,.45)}
  .faq .q{width:100%; background:none; border:0; color:#fff; text-align:left; padding:18px 20px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer}
  .faq .q .chev{width:18px; height:18px; border:2px solid var(--gold); border-left:0; border-bottom:0; transform:rotate(45deg); transition:.2s; opacity:.9}
  .faq .item.open .chev{transform:rotate(-135deg)}
  .faq .a{max-height:0; overflow:hidden; transition:max-height .28s ease; padding:0 20px 0; opacity:.9}
  .faq .item.open .a{padding:0 20px 18px}
  /* mobile menu + mega menu styles remain from your original */


/* Roadmap (vertical) */ .section.roadmap{position:relative; padding:72px 0} .section.roadmap .lead{opacity:.85; margin-top:4px} .roadmap .timeline{position:relative; margin-top:24px; padding-left:28px} .roadmap .timeline::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(197,164,109,.35), rgba(255,255,255,.10))} .roadmap .step{position:relative; margin:18px 0 28px} .roadmap .step::before{content:""; position:absolute; left:-2px; top:6px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff 0%, #fff 12%, rgba(255,255,255,.45) 13%, rgba(197,164,109,1) 60%, rgba(197,164,109,.85) 100%); box-shadow:0 0 0 3px rgba(197,164,109,.18)} .roadmap .card{background:var(--bg-2); border:1px solid rgba(255,255,255,.06); border-radius:12px; box-shadow:var(--shadow); padding:18px 18px 16px} .roadmap .year{display:flex; align-items:center; gap:10px; margin-bottom:8px} .roadmap .badge{color:var(--bg); background:var(--gold); font-weight:700; border-radius:9999px; padding:6px 12px; line-height:1} .roadmap .year h3{margin:0; color:var(--gold)} .roadmap ul{margin:10px 0 0 1.1em; padding:0} .roadmap li{margin:6px 0; opacity:.92} .section.roadmap::after{content:""; position:absolute; inset:auto 0 -80px 0; height:180px; background:radial-gradient(120% 100% at 50% 140%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); pointer-events:none; opacity:.22}

  /* ===== Mega menu (desktop) ===== */
.nav .nav-link{cursor:pointer}

.mega{
  position:absolute; left:0; right:0; top:72px; /* sits under sticky header bar */
  background:linear-gradient(180deg, rgba(17,40,68,.92), rgba(11,22,38,.98));
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform:translateY(-6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:115; /* under header (120) but above video */
}

.mega-inner{
  max-width:1200px; margin:0 auto; padding:22px var(--container-x) 26px;
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(0,1fr)) 1.2fr; /* 3 cols + CTA */
}

.mega h4{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; opacity:.8}
.mega a{display:block; padding:6px 0; opacity:.95}
.mega a:hover{color:var(--gold)}
.mega-cta{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:16px;
}

/* show state */
.mega.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}

/* desktop only; hide panels on mobile */
@media (max-width:960px){
  .mega{display:none}
}

/* ===== Mobile nav & drawer ===== */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); color:#fff; cursor:pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after{
  content:""; display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:.2s ease;
}
.nav-toggle .bars{position:relative}
.nav-toggle .bars::before{position:absolute; top:-6px}
.nav-toggle .bars::after{position:absolute; top:6px}
.site-header.menu-open .nav-toggle .bars{background:transparent}
.site-header.menu-open .nav-toggle .bars::before{transform:translateY(6px) rotate(45deg)}
.site-header.menu-open .nav-toggle .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Force-hide desktop nav when drawer is open (wins cascade) */
.site-header.menu-open .bar .nav{display:none !important}

/* Drawer: fully closed by default */
.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; left:auto;
  width:min(86vw,340px);
  background:rgba(11,22,38,.98);
  backdrop-filter:saturate(120%) blur(6px);
  border-left:1px solid rgba(255,255,255,.08);
  z-index:110;

  padding:18px 18px 28px;
  display:none;                /* prevent paint when closed */
  flex-direction:column; gap:12px;

  transform:translateX(110%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .25s ease, visibility .25s ease;
}
.site-header.menu-open .mobile-drawer{
  display:flex;
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
}
.mobile-drawer a{display:block; padding:12px 10px; border-radius:10px; font-weight:600}
.mobile-drawer a:hover{background:rgba(255,255,255,.06); color:var(--gold)}
.mobile-drawer .cta{margin-top:8px}

/* Mobile backdrop */
.mobile-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:105;
}
.site-header.menu-open ~ .mobile-backdrop{opacity:1; pointer-events:auto}

/* Mobile breakpoint */
@media (max-width:960px){
  .site-header .nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* Accessibility / reduced motion */
@media (prefers-reduced-motion:reduce){
  .mobile-drawer, .mobile-backdrop{transition:none}
}

/* Hide all mega panels on touch/mobile and when the drawer is open */
@media (max-width: 960px), (hover: none) {
  .mega{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* Also hide megas any time the mobile drawer is open */
.site-header.menu-open .mega{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* --- Mobile drawer: bulletproof opacity & sizing (iOS Android) --- */
@media (max-width: 960px){
  .mobile-drawer{
    position: fixed;               /* ensure it covers viewport, not document flow */
    inset: 0;                      /* shorthand: top/right/bottom/left = 0 */
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;             /* fallback for older browsers */
    height: -webkit-fill-available;/* iOS safe fallback */
    background: var(--bg) !important;            /* SOLID navy */
    backdrop-filter: none !important;            /* kill blur/transparency */
    -webkit-backdrop-filter: none !important;

    /* comfortable tap targets */
    padding: max(env(safe-area-inset-top, 0px), 72px) 20px 28px;
    /* ^ top padding ≥ header height; adjust if your header is taller */
  }

  /* Stronger link contrast & spacing */
  .mobile-drawer a{
    opacity: 1;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
  }

  /* Make the CTA feel native to the drawer */
  .mobile-drawer .btn{
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* When the drawer is open, make absolutely sure nothing else paints over/through */
.site-header.menu-open .mega{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Optional: dim the page under the drawer (in case the drawer slides or bounces) */
@media (max-width: 960px){
  .mobile-backdrop{
    background: rgba(0,0,0,.6); /* slightly darker */
  }
}


/* Ensure the drawer sits above everything but below header controls if needed */
.site-header{ z-index: 120; }
.mobile-drawer{ z-index: 115; }              /* header bar is 120, drawer 115 is fine since it's full-screen */

/* Slide-down animation (override right-slide) */
@media (max-width: 960px){
  .mobile-drawer{
    transform: translateY(-100%);                  /* closed: above viewport */
    transition: transform .28s ease, visibility .28s ease;
  }
  .site-header.menu-open .mobile-drawer{
    transform: translateY(0);                      /* open: fully visible */
  }
}

/* Close “X” button in the drawer */
.drawer-close{
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 16px);
  right: 16px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}
.drawer-close:hover{ background: rgba(255,255,255,.12) }
.drawer-close:focus{ outline: 2px solid var(--gold); outline-offset: 2px }


/* Careers: desktop defaults */
.careers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 24px);
}

/* Apply form: desktop defaults */
.apply-grid {
  display: grid;
  gap: 12px;
  max-width: 720px;
  grid-template-columns: 1fr 1fr;
}
.apply-grid .full { grid-column: 1 / -1; }

/* Inputs base (matches your inline styles) */
.input {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  color: #fff;
}

/* === Stack on iPhone 12 Pro Max and similar (≤430px) === */
@media (max-width: 430px) {
  .careers-grid {
    grid-template-columns: 1fr !important;
  }
  .apply-grid {
    grid-template-columns: 1fr !important;
  }
  .apply-grid .full { grid-column: 1 / -1; } /* no-op, just explicit */
  /* ensure cards/forms stretch nicely */
  .platform-card, .input, textarea { width: 100%; max-width: none; }
}




/* Stack on iPhone 12 Pro Max and similar (≤430px) */
@media (max-width: 330px) {
  /* Careers 3-up cards -> 1 column */
  .section.alt .container.grid {
    grid-template-columns: 1fr !important;
  }

  /* Apply form 2-up -> 1 column (targets the first grid in the form) */
  #apply form > div {
    grid-template-columns: 1fr !important;
  }

  /* Make children stretch full width nicely */
  .platform-card,
  #apply input,
  #apply textarea { width: 100%; max-width: none; }
}


/* Stack grids on mobile, keep desktop inline styles intact */
@media (max-width: 300px) {
  /* Careers cards: 3-up -> 1 column */
  .section.alt .container.grid {
    grid-template-columns: 1fr !important;
  }

  /* Apply form: 2-up -> 1 column */
  #apply form > div {
    grid-template-columns: 1fr !important;
  }

  /* Make children stretch nicely */
  .platform-card,
  #apply input,
  #apply textarea {
    width: 100%;
    max-width: none;
  }
}